@saooti/octopus-sdk 37.0.18 → 37.0.20

package/src/components/misc/player/PlayerComponent.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     class="player-container"
-    :class="playerVideo? 'player-video':''"
+    :class="playerVideo ? 'player-video' : ''"
     :style="{ height: playerHeight }"
     @transitionend="onHidden"
   >
     <template v-if="display">
-      <PlayerVideo v-if="playerVideo"/>
+      <PlayerVideo v-if="playerVideo" />
       <template v-else>
         <audio
           id="audio-player"
@@ -29,7 +29,7 @@
           :percent-live-progress="percentLiveProgress"
           :duration-live-position="durationLivePosition"
           :listen-time="listenTime"
-          :hlsReady="hlsReady"
+          :hls-ready="hlsReady"
           @stop-player="stopPlayer"
           @change-player-large-version="playerUpdateLargeVersion(true)"
         />
@@ -42,7 +42,7 @@
           :percent-live-progress="percentLiveProgress"
           :duration-live-position="durationLivePosition"
           :listen-time="listenTime"
-          :hlsReady="hlsReady"
+          :hls-ready="hlsReady"
           @stop-player="stopPlayer"
           @change-player-large-version="playerUpdateLargeVersion(false)"
         />
@@ -58,16 +58,14 @@ import PlayerLarge from "../player/PlayerLarge.vue";
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
-const PlayerVideo = defineAsyncComponent(
-  () => import("./PlayerVideo.vue"),
-);
+const PlayerVideo = defineAsyncComponent(() => import("./PlayerVideo.vue"));
 export default defineComponent({
   name: "PlayerComponent",
 
   components: {
     PlayerCompact,
     PlayerLarge,
-    PlayerVideo
+    PlayerVideo,
   },
   mixins: [playerLogic],
   emits: ["hide"],
@@ -93,7 +91,7 @@ export default defineComponent({
       "playerStatus",
       "playerHeight",
       "playerLargeVersion",
-      "playerVideo"
+      "playerVideo",
     ]),
     display() {
       return "STOPPED" !== this.playerStatus;
@@ -129,7 +127,7 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app {
-  .player-container{
+  .player-container {
     max-height: 94%;
     position: sticky;
     overflow: hidden;

package/src/components/misc/player/PlayerLarge.vue

@@ -118,7 +118,7 @@ export default defineComponent({
     percentLiveProgress: { default: 0, type: Number },
     durationLivePosition: { default: 0, type: Number },
     listenTime: { default: 0, type: Number },
-    hlsReady: { default: false , type: Boolean},
+    hlsReady: { default: false, type: Boolean },
   },
 
   emits: ["stopPlayer", "update:notListenTime", "changePlayerLargeVersion"],

package/src/components/misc/player/PlayerVideo.vue

@@ -1,18 +1,13 @@
 <template>
   <teleport to=".octopus-app">
     <template v-if="playerVideo">
-      <button 
+      <button
         class="btn btn-transparent video-close saooti-remove"
         @click="closePlayer"
       />
       <div class="video-wrapper">
-        <PlayerVideoDigiteka 
-          v-if="!playerLive"
-        />
-        <PlayerVideoHls
-          v-else
-          :hls-url="hlsUrl"
-        />
+        <PlayerVideoDigiteka v-if="!playerLive" />
+        <PlayerVideoHls v-else :hls-url="hlsUrl" />
       </div>
     </template>
   </teleport>
@@ -33,24 +28,24 @@ export default defineComponent({
 
   components: {
     PlayerVideoDigiteka,
-    PlayerVideoHls
+    PlayerVideoHls,
   },
   data() {
-    return {
-    };
+    return {};
   },
   computed: {
     ...mapState(usePlayerStore, ["playerVideo", "playerLive"]),
-    hlsUrl(): string{
-      if(!this.playerLive){return "";}
+    hlsUrl(): string {
+      if (!this.playerLive) {
+        return "";
+      }
       return `${state.podcastPage.hlsUri}live/video_dev.${this.playerLive.conferenceId}/index.m3u8`;
-      //return "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8";
-    }
+    },
   },
 
   methods: {
-    ...mapActions(usePlayerStore, ["playerPlay",]),
-    closePlayer(){
+    ...mapActions(usePlayerStore, ["playerPlay"]),
+    closePlayer() {
       this.playerPlay();
     },
   },
@@ -59,7 +54,7 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app {
-  .video-wrapper{
+  .video-wrapper {
     border-radius: 1rem;
     overflow: hidden;
     position: fixed;
@@ -67,24 +62,24 @@ export default defineComponent({
     right: 0;
     z-index: 10;
   }
-  .video-close{
+  .video-close {
     position: fixed;
     bottom: 16.5rem;
     right: 1rem;
   }
   @media (max-width: 500px) {
-    .video-wrapper{
-      position:relative;
-      padding-bottom:56.25%;
-      height:0;
+    .video-wrapper {
+      position: relative;
+      padding-bottom: 56.25%;
+      height: 0;
     }
     .video-wrapper iframe {
-      position:absolute;
-      top:0;
-      left:0;
-      width:100% !important;
-      height:100%;
-      margin:0 !important;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100% !important;
+      height: 100%;
+      margin: 0 !important;
     }
   }
 }

package/src/components/misc/player/PlayerVideoDigiteka.vue

@@ -1,12 +1,13 @@
 <template>
-  <iframe 
+  <iframe
     ref="iframeVideo"
     :src="srcVideo"
-    width="500" 
-    height="281" 
-    style="z-index:1;" 
-    allowfullscreen="true" 
-    allow="autoplay" 
+    :title="$t('Video')"
+    width="500"
+    height="281"
+    style="z-index: 1"
+    allowfullscreen="true"
+    allow="autoplay"
     referrerpolicy="no-referrer-when-downgrade"
   ></iframe>
 </template>
@@ -17,32 +18,34 @@ import { mapState } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PlayerVideo",
-  components: {
-  },
+  components: {},
 
-  computed:{
-    ...mapState(usePlayerStore, [
-      "playerPodcast",
-      "playerVideo"
-    ]),
-    srcVideo(): string{
-      if(this.playerVideo){
-        return "//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/"+ this.playerPodcast?.video?.videoId+"/autoplay/1";
+  computed: {
+    ...mapState(usePlayerStore, ["playerPodcast", "playerVideo"]),
+    srcVideo(): string {
+      if (this.playerVideo) {
+        return (
+          "//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/" +
+          this.playerPodcast?.video?.videoId +
+          "/autoplay/1"
+        );
       }
       return "";
-    }
+    },
   },
-  watch:{
+  watch: {
     srcVideo() {
       this.goFullScreen();
     },
   },
-  mounted(){
+  mounted() {
     this.goFullScreen();
   },
-  methods:{
-    goFullScreen(){
-      if(""===this.srcVideo){return;}
+  methods: {
+    goFullScreen() {
+      if ("" === this.srcVideo) {
+        return;
+      }
       switch (screen.orientation.type) {
         case "landscape-primary":
         case "landscape-secondary":
@@ -55,8 +58,7 @@ export default defineComponent({
         default:
           console.log("The orientation API isn't supported in this browser :(");
       }
-    }
-  }
-
+    },
+  },
 });
-</script>
+</script>

package/src/components/misc/player/PlayerVideoHls.vue

@@ -1,20 +1,25 @@
 <template>
   <div id="player-video-hls" class="video-player">
-    <div v-if="errorPlay.length" class="video-live-error">{{errorPlay}}</div>
-    <video id="video-element-hls" ref="videoelement" class="video-js" playsinline></video>
+    <div v-if="errorPlay.length" class="video-live-error">{{ errorPlay }}</div>
+    <video
+      id="video-element-hls"
+      ref="videoelement"
+      class="video-js"
+      playsinline
+    ></video>
   </div>
 </template>
 <script lang="ts">
-import videojs, { VideoJsPlayer } from 'video.js';
-import qualitySelector from 'videojs-hls-quality-selector';
-import qualityLevels from 'videojs-contrib-quality-levels';
-if (!videojs.getPlugin('qualityLevels')) {
-  videojs.registerPlugin('qualityLevels', qualityLevels);
+import videojs, { VideoJsPlayer } from "video.js";
+import qualitySelector from "videojs-hls-quality-selector";
+import qualityLevels from "videojs-contrib-quality-levels";
+if (!videojs.getPlugin("qualityLevels")) {
+  videojs.registerPlugin("qualityLevels", qualityLevels);
 }
-if (!videojs.getPlugin('hlsQualitySelector')) {
-  videojs.registerPlugin('hlsQualitySelector', qualitySelector);
+if (!videojs.getPlugin("hlsQualitySelector")) {
+  videojs.registerPlugin("hlsQualitySelector", qualitySelector);
 }
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export default defineComponent({
   name: "PlayerVideoHls",
 
@@ -22,21 +27,21 @@ export default defineComponent({
     hlsUrl: { default: "", type: String },
   },
 
-  emits:['changeValid'],
+  emits: ["changeValid"],
   data() {
     return {
       errorPlay: "" as string,
       useVideoSrc: false as boolean,
-      player: undefined as VideoJsPlayer|undefined,
+      player: undefined as VideoJsPlayer | undefined,
       playing: false as boolean,
-      stalledTimout: undefined as ReturnType<typeof setTimeout>|undefined,
+      stalledTimout: undefined as ReturnType<typeof setTimeout> | undefined,
     };
   },
-  computed:{
-    videoElement(): HTMLVideoElement{
-      return (this.$refs.videoelement as HTMLVideoElement);
+  computed: {
+    videoElement(): HTMLVideoElement {
+      return this.$refs.videoelement as HTMLVideoElement;
     },
-    videoOptions(){
+    videoOptions() {
       return {
         autoplay: true,
         controls: true,
@@ -44,12 +49,12 @@ export default defineComponent({
         sources: [
           {
             src: this.hlsUrl,
-            type: 'application/x-mpegURL',
-          }
+            type: "application/x-mpegURL",
+          },
         ],
         html5: {
           vhs: {
-            overrideNative:  !videojs.browser.IS_SAFARI,
+            overrideNative: !videojs.browser.IS_SAFARI,
           },
           nativeAudioTracks: false,
           nativeVideoTracks: false,
@@ -59,23 +64,25 @@ export default defineComponent({
             displayCurrentQuality: true,
           },
         },
-      }
-    }
+      };
+    },
   },
-  mounted(){
+  mounted() {
     this.playLive();
-    this.useVideoSrc = ""!==this.videoElement.canPlayType('application/vnd.apple.mpegurl') && !navigator.userAgent.includes('Android');
+    this.useVideoSrc =
+      "" !== this.videoElement.canPlayType("application/vnd.apple.mpegurl") &&
+      !navigator.userAgent.includes("Android");
   },
 
-  beforeUnmount() { 
-    if(this.playing){
+  beforeUnmount() {
+    if (this.playing) {
       this.stopLive();
     }
   },
 
   methods: {
-    definedStalledTimeout(){
-      this.stalledTimout =setTimeout(()=>{
+    definedStalledTimeout() {
+      this.stalledTimout = setTimeout(() => {
         this.videoClean();
         this.playLive();
       }, 5000);
@@ -87,83 +94,87 @@ export default defineComponent({
         this.playLiveIos();
         return;
       }
-      this.player = videojs((document.getElementById("video-element-hls") as Element), this.videoOptions, () => {
-        this.errorPlay = "";
-        this.playing = true; 
-      });
-      this.player.on('timeupdate', () => {
+      this.player = videojs(
+        document.getElementById("video-element-hls") as Element,
+        this.videoOptions,
+        () => {
+          this.errorPlay = "";
+          this.playing = true;
+        },
+      );
+      this.player.on("timeupdate", () => {
         clearTimeout(this.stalledTimout);
         this.definedStalledTimeout();
       });
-      this.player.on('error', (error) => {
+      this.player.on("error", (error) => {
         this.stopLive();
-        if (error.description && error.description.includes('403')) {
-          this.errorPlay = this.$t('Video is unavailable');
-        }else{
-          this.errorPlay = this.$t('Podcast play error');
+        if (error.description && error.description.includes("403")) {
+          this.errorPlay = this.$t("Video is unavailable");
+        } else {
+          this.errorPlay = this.$t("Podcast play error");
         }
       });
     },
-    async playLiveIos(): Promise<void>{
-      this.videoElement.onloadedmetadata = ()=>{
-        const playPromise =  this.videoElement.play();
+    async playLiveIos(): Promise<void> {
+      this.videoElement.onloadedmetadata = () => {
+        const playPromise = this.videoElement.play();
         if (playPromise !== undefined) {
-          playPromise.then(() => {
-            this.errorPlay = "";
-            this.playing = true; 
-          })
-          .catch(() => {
-            this.playing = false; 
-          });
+          playPromise
+            .then(() => {
+              this.errorPlay = "";
+              this.playing = true;
+            })
+            .catch(() => {
+              this.playing = false;
+            });
         }
       };
-      this.videoElement.onerror = async()=>{
+      this.videoElement.onerror = async () => {
         this.stopLive();
-        this.errorPlay = this.$t('Podcast play error');
+        this.errorPlay = this.$t("Podcast play error");
       };
-       this.videoElement.ontimeupdate = async()=>{
-          clearTimeout(this.stalledTimout);
-          this.definedStalledTimeout();
+      this.videoElement.ontimeupdate = async () => {
+        clearTimeout(this.stalledTimout);
+        this.definedStalledTimeout();
       };
       this.videoElement.src = this.hlsUrl;
     },
-    videoClean(): void{
-      if(this.useVideoSrc){
+    videoClean(): void {
+      if (this.useVideoSrc) {
         this.videoElement.pause();
-        this.videoElement.removeAttribute('src');
+        this.videoElement.removeAttribute("src");
         this.videoElement.load();
         return;
       }
-      if(this.player){
+      if (this.player) {
         this.player.dispose();
         //Redraw
         const video_parent = document.getElementById("player-video-hls");
-        if(video_parent){
-          const video = document.createElement('video');
-          video.id="video-element-hls";
-          video.className="video-js";
-          video.preload="auto";
-          video.setAttribute("playsinline","true");
+        if (video_parent) {
+          const video = document.createElement("video");
+          video.id = "video-element-hls";
+          video.className = "video-js";
+          video.preload = "auto";
+          video.setAttribute("playsinline", "true");
           video_parent.appendChild(video);
         }
       }
     },
-    stopLive(): void{
+    stopLive(): void {
       clearTimeout(this.stalledTimout);
       this.errorPlay = "";
       this.videoClean();
       this.playing = false;
     },
   },
-
 });
 </script>
 
 <style lang="scss">
-@import 'video.js';
+@import "video.js";
 @import "@scss/_variables.scss";
-.octopus-app{
-  .video-live-error{
+.octopus-app {
+  .video-live-error {
     text-align: center;
     width: 100%;
     font-size: 1rem;
@@ -175,7 +186,7 @@ export default defineComponent({
     background: $danger;
     z-index: 1;
   }
-  .video-js{
+  .video-js {
     width: 500px;
     height: 281px;
   }

package/src/components/misc/player/radio/RadioHistory.vue

@@ -83,24 +83,27 @@ export default defineComponent({
     this.handleResize(0);
   },
   methods: {
-    handleResize(indexAsked: number): void {
-      const historyList = this.$refs.historyListContainer as HTMLElement;
-      if (null === historyList || !historyList) {
-        return;
-      }
-      this.indexStart = indexAsked;
-      this.indexNotDisplay = this.playerRadioHistory.length;
+    displayEverythingAfterIndex(indexAsked: number){
       for (let index = 0; index < this.playerRadioHistory.length; index++) {
         const el = (this.$refs["history" + index] as Array<HTMLElement>)[0];
         if (!el) continue;
-        if (index < this.indexStart && !el.classList.contains("hid")) {
+        if (index < indexAsked && !el.classList.contains("hid")) {
           el.classList.add("hid");
           continue;
         }
-        if (index >= this.indexStart && el.classList.contains("hid")) {
+        if (index >= indexAsked && el.classList.contains("hid")) {
           el.classList.remove("hid");
         }
       }
+    },
+    handleResize(indexAsked: number): void {
+      const historyList = this.$refs.historyListContainer as HTMLElement;
+      if (null === historyList || !historyList) {
+        return;
+      }
+      this.indexStart = indexAsked;
+      this.indexNotDisplay = this.playerRadioHistory.length;
+      this.displayEverythingAfterIndex(indexAsked);
       for (
         let index = this.indexStart + 1;
         index < this.playerRadioHistory.length;

package/src/components/misc/player/radio/RadioProgressBar.vue

@@ -5,7 +5,7 @@
   >
     <div
       class="octopus-progress-bar"
-      :class="isBack ? 'no-transition': ''"
+      :class="isBack ? 'no-transition' : ''"
       role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"
@@ -89,7 +89,7 @@ export default defineComponent({
     .octopus-progress-bar {
       background-color: #747474;
     }
-    .no-transition{
+    .no-transition {
       transition: none !important;
     }
   }

package/src/components/pages/EmissionPage.vue

@@ -182,7 +182,7 @@ export default defineComponent({
         "podcastAddict",
         "playerFm",
         "pocketCasts",
-        "iHeart"
+        "iHeart",
       ];
       let count = 0;
       for (let i = 0, len = platformShare.length; i < len; i++) {

package/src/components/pages/PodcastPage.vue

@@ -200,7 +200,7 @@ export default defineComponent({
         "podcastAddict",
         "playerFm",
         "pocketCasts",
-        "iHeart"
+        "iHeart",
       ];
       let count = 0;
       for (let i = 0, len = platformShare.length; i < len; i++) {

package/src/locale/de.ts

@@ -317,22 +317,20 @@ export default {
   Newsletter: "Newsletter",
   "QR Code": "QR-Code",
   "Rss feed": "RSS-Feed",
-  "Multiselect max options":
-    "Maximal {max} gleichzeitige Optionen. Bitte entfernen Sie zuerst eine Option, um eine neue auswählen zu können",
-  "Mix of episodes": "Mischung aus Episoden",
-  "Radio & Live": "Radio & Live",
-  "Selection by status": "Auswahl nach Status",
-  "All lives": "Alle Leben",
-  "In debriefing": "In der Nachbesprechung",
-  "In the process of being published": "Im Prozess der Veröffentlichung",
-  Radio: "Radio",
-  Currently: "Momentan",
-  Program: "Programm",
-  "No programming": "Nicht programmieren",
-  "Canal name image": "Kanalbild {name}",
-  "Show animated wave": "Animierte Welle anzeigen",
-  "Characters number calculated over HTML code":
-    "Die Zeichenzahl wird mit dem HTML-Code ermittelt, der mit diesem Editor erstellt wurde. Über den HTML-Button können Sie diesen Code einsehen.",
+  "Multiselect max options":"Maximal {max} gleichzeitige Optionen. Bitte entfernen Sie zuerst eine Option, um eine neue auswählen zu können",
+  "Mix of episodes":"Mischung aus Episoden",
+  "Radio & Live":"Radio & Live",
+  "Selection by status":"Auswahl nach Status",
+  "All lives":"Alle Leben",
+  'In debriefing': 'In der Nachbesprechung',
+  'In the process of being published': 'Im Prozess der Veröffentlichung',
+  "Radio":"Radio",
+  "Currently":"Momentan",
+  "Program":"Programm",
+  "No programming":"Nicht programmieren",
+  'Canal name image': 'Kanalbild {name}',
+  "Show animated wave":"Animierte Welle anzeigen",
+  'Characters number calculated over HTML code':"Die Zeichenzahl wird mit dem HTML-Code ermittelt, der mit diesem Editor erstellt wurde. Über den HTML-Button können Sie diesen Code einsehen.",
   Previously: "Bisher",
   "Bold":"Deutlich",
   "Italic":"Kursiv",
@@ -344,4 +342,5 @@ export default {
   "List":"Aufführen",
   "Display HTML":"HTML anzeigen",
   "Video is unavailable":"Video ist nicht verfügbar",
-};
+  'Full Large version': 'Vollständige große Version',
+}