@saooti/octopus-sdk 37.0.16 → 37.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.16",
+  "version": "37.0.18",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@saooti/octopus-api": "^0.34.3",
+    "@saooti/octopus-api": "^0.36.0",
     "@tiptap/extension-link": "^2.0.4",
     "@tiptap/extension-underline": "^2.0.4",
     "@tiptap/pm": "^2.0.4",
@@ -38,6 +38,9 @@
     "sass": "^1.63.6",
     "sonarqube-scanner": "^3.0.0",
     "swiper": "^10.0.4",
+    "video.js": "^7.21.5",
+    "videojs-contrib-quality-levels": "^2.2.1",
+    "videojs-hls-quality-selector": "^1.1.4",
     "vite": "^4.4.4",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
@@ -48,6 +51,8 @@
     "vue3-swatches": "^1.2.3"
   },
   "devDependencies": {
+    "@types/videojs-contrib-quality-levels": "^2.0.1",
+    "@types/videojs-hls-quality-selector": "^1.1.0",
     "@types/vue-select": "^3.16.2",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",

package/src/components/display/filter/AdvancedSearch.vue

@@ -51,6 +51,15 @@
             :label="textNotValidate"
           />
         </div>
+        <ClassicCheckbox
+          v-if="!isEmission"
+          :textInit="onlyVideo"
+          class="flex-shrink-0 mt-3"
+          id-checkbox="only-video-checkbox"
+          :label="$t('Show only episodes with video')"
+          @update:textInit="$emit('update:onlyVideo', $event)"
+        />
+        
       </div>
       <div class="d-flex flex-column">
         <div class="text-primary mb-2">
@@ -96,6 +105,7 @@ export default defineComponent({
     isEducation: { default: false, type: Boolean },
     includeHidden: { default: false, type: Boolean },
     sortCriteria: { default: "DATE", type: String },
+    onlyVideo: { default: false, type: Boolean },
   },
 
   emits: [
@@ -107,6 +117,7 @@ export default defineComponent({
     "includeHidden",
     "notValid",
     "updateRubriquageFilter",
+    "update:onlyVideo"
   ],
   data() {
     return {

package/src/components/display/list/SwiperList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="position-relative">
+  <div class="position-relative w-100">
     <template v-if="!isPhone">
       <button class="btn-transparent swiper-button-prev" v-show="isLoop" @click="slidePrevButton()"></button>
       <swiper

package/src/components/display/podcasts/PodcastImage.vue

@@ -110,7 +110,7 @@ export default defineComponent({
       "playerVideo"
     ]),
     isVideoPodcast(): boolean{
-      return undefined!==this.podcast.video?.videoId;
+      return this.fetchConference?.videoProfile?.includes('video_') || undefined!==this.podcast.video?.videoId;
     },
     playingPodcast() {
       return (
@@ -271,7 +271,7 @@ export default defineComponent({
         this.playerPlay({
           ...this.podcast,
           ...{ conferenceId: this.fetchConference?.conferenceId },
-        });
+        }, isVideo);
       }
       if (this.clickPlayGoPage) {
         this.$router.push("/main/pub/podcast/" + this.podcast.podcastId);

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

@@ -6,10 +6,7 @@
     @transitionend="onHidden"
   >
     <template v-if="display">
-      <PlayerVideo 
-        v-if="playerVideo"
-        @close="closePlayer"
-      />
+      <PlayerVideo v-if="playerVideo"/>
       <template v-else>
         <audio
           id="audio-player"
@@ -62,7 +59,7 @@ import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 const PlayerVideo = defineAsyncComponent(
-  () => import("../player/PlayerVideo.vue"),
+  () => import("./PlayerVideo.vue"),
 );
 export default defineComponent({
   name: "PlayerComponent",
@@ -121,9 +118,6 @@ export default defineComponent({
         this.forceHide = false;
       }
     },
-    closePlayer(){
-      this.playerPlay();
-    },
     onPause() {
       if ("PLAYING" === this.playerStatus) {
         this.playerChangeStatus(true);

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

@@ -3,78 +3,64 @@
     <template v-if="playerVideo">
       <button 
         class="btn btn-transparent video-close saooti-remove"
-        @click="$emit('close')"
+        @click="closePlayer"
       />
       <div class="video-wrapper">
-        <iframe 
-          ref="iframeVideo"
-          :src="srcVideo"
-          width="500" 
-          height="281" 
-          style="z-index:1;" 
-          allowfullscreen="true" 
-          allow="autoplay" 
-          referrerpolicy="no-referrer-when-downgrade"
-        ></iframe>
+        <PlayerVideoDigiteka 
+          v-if="!playerLive"
+        />
+        <PlayerVideoHls
+          v-else
+          :hls-url="hlsUrl"
+        />
       </div>
     </template>
   </teleport>
 </template>
-
 <script lang="ts">
+import { state } from "../../../stores/ParamSdkStore";
 import { usePlayerStore } from "@/stores/PlayerStore";
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { defineComponent, defineAsyncComponent } from "vue";
+const PlayerVideoDigiteka = defineAsyncComponent(
+  () => import("./PlayerVideoDigiteka.vue"),
+);
+const PlayerVideoHls = defineAsyncComponent(
+  () => import("./PlayerVideoHls.vue"),
+);
 export default defineComponent({
   name: "PlayerVideo",
+
   components: {
+    PlayerVideoDigiteka,
+    PlayerVideoHls
   },
-  emits:['close'],
-
-  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 "";
+  data() {
+    return {
+    };
+  },
+  computed: {
+    ...mapState(usePlayerStore, ["playerVideo", "playerLive"]),
+    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";
     }
   },
-  watch:{
-    srcVideo() {
-      this.goFullScreen();
+
+  methods: {
+    ...mapActions(usePlayerStore, ["playerPlay",]),
+    closePlayer(){
+      this.playerPlay();
     },
   },
-  mounted(){
-    this.goFullScreen();
-  },
-  methods:{
-    goFullScreen(){
-      if(""===this.srcVideo){return;}
-      switch (screen.orientation.type) {
-        case "landscape-primary":
-        case "landscape-secondary":
-          (this.$refs.iframeVideo as Element).requestFullscreen();
-          break;
-        case "portrait-secondary":
-        case "portrait-primary":
-          console.log("Portrait mode");
-          break;
-        default:
-          console.log("The orientation API isn't supported in this browser :(");
-      }
-    }
-  }
-
 });
 </script>
+
 <style lang="scss">
 .octopus-app {
   .video-wrapper{
-    border-radius: 2rem;
+    border-radius: 1rem;
     overflow: hidden;
     position: fixed;
     bottom: 2.5rem;
@@ -85,7 +71,6 @@ export default defineComponent({
     position: fixed;
     bottom: 16.5rem;
     right: 1rem;
-
   }
   @media (max-width: 500px) {
     .video-wrapper{
@@ -103,4 +88,4 @@ export default defineComponent({
     }
   }
 }
-</style>
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+  <iframe 
+    ref="iframeVideo"
+    :src="srcVideo"
+    width="500" 
+    height="281" 
+    style="z-index:1;" 
+    allowfullscreen="true" 
+    allow="autoplay" 
+    referrerpolicy="no-referrer-when-downgrade"
+  ></iframe>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "PlayerVideo",
+  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";
+      }
+      return "";
+    }
+  },
+  watch:{
+    srcVideo() {
+      this.goFullScreen();
+    },
+  },
+  mounted(){
+    this.goFullScreen();
+  },
+  methods:{
+    goFullScreen(){
+      if(""===this.srcVideo){return;}
+      switch (screen.orientation.type) {
+        case "landscape-primary":
+        case "landscape-secondary":
+          (this.$refs.iframeVideo as Element).requestFullscreen();
+          break;
+        case "portrait-secondary":
+        case "portrait-primary":
+          console.log("Portrait mode");
+          break;
+        default:
+          console.log("The orientation API isn't supported in this browser :(");
+      }
+    }
+  }
+
+});
+</script>

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

@@ -0,0 +1,183 @@
+<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>
+</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);
+}
+if (!videojs.getPlugin('hlsQualitySelector')) {
+  videojs.registerPlugin('hlsQualitySelector', qualitySelector);
+}
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "PlayerVideoHls",
+
+  props: {
+    hlsUrl: { default: "", type: String },
+  },
+
+  emits:['changeValid'],
+  data() {
+    return {
+      errorPlay: "" as string,
+      useVideoSrc: false as boolean,
+      player: undefined as VideoJsPlayer|undefined,
+      playing: false as boolean,
+      stalledTimout: undefined as ReturnType<typeof setTimeout>|undefined,
+    };
+  },
+  computed:{
+    videoElement(): HTMLVideoElement{
+      return (this.$refs.videoelement as HTMLVideoElement);
+    },
+    videoOptions(){
+      return {
+        autoplay: true,
+        controls: true,
+        liveui: true,
+        sources: [
+          {
+            src: this.hlsUrl,
+            type: 'application/x-mpegURL',
+          }
+        ],
+        html5: {
+          vhs: {
+            overrideNative:  !videojs.browser.IS_SAFARI,
+          },
+          nativeAudioTracks: false,
+          nativeVideoTracks: false,
+        },
+        plugins: {
+          hlsQualitySelector: {
+            displayCurrentQuality: true,
+          },
+        },
+      }
+    }
+  },
+  mounted(){
+    this.playLive();
+    this.useVideoSrc = ""!==this.videoElement.canPlayType('application/vnd.apple.mpegurl') && !navigator.userAgent.includes('Android');
+  },
+
+  beforeUnmount() { 
+    if(this.playing){
+      this.stopLive();
+    }
+  },
+
+  methods: {
+    definedStalledTimeout(){
+      this.stalledTimout =setTimeout(()=>{
+        this.videoClean();
+        this.playLive();
+      }, 5000);
+    },
+    async playLive(): Promise<void> {
+      clearTimeout(this.stalledTimout);
+      this.definedStalledTimeout();
+      if (this.useVideoSrc) {
+        this.playLiveIos();
+        return;
+      }
+      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.stopLive();
+        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();
+        if (playPromise !== undefined) {
+          playPromise.then(() => {
+            this.errorPlay = "";
+            this.playing = true; 
+          })
+          .catch(() => {
+            this.playing = false; 
+          });
+        }
+      };
+      this.videoElement.onerror = async()=>{
+        this.stopLive();
+        this.errorPlay = this.$t('Podcast play error');
+      };
+       this.videoElement.ontimeupdate = async()=>{
+          clearTimeout(this.stalledTimout);
+          this.definedStalledTimeout();
+      };
+      this.videoElement.src = this.hlsUrl;
+    },
+    videoClean(): void{
+      if(this.useVideoSrc){
+        this.videoElement.pause();
+        this.videoElement.removeAttribute('src');
+        this.videoElement.load();
+        return;
+      }
+      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");
+          video_parent.appendChild(video);
+        }
+      }
+    },
+    stopLive(): void{
+      clearTimeout(this.stalledTimout);
+      this.errorPlay = "";
+      this.videoClean();
+      this.playing = false;
+    },
+  },
+
+});
+</script>
+
+<style lang="scss">
+@import 'video.js';
+@import "@scss/_variables.scss";
+.octopus-app{
+  .video-live-error{
+    text-align: center;
+    width: 100%;
+    font-size: 1rem;
+    font-weight: bold;
+    padding: 0.2rem 0;
+    color: white;
+    position: absolute;
+    top: 0;
+    background: $danger;
+    z-index: 1;
+  }
+  .video-js{
+    width: 500px;
+    height: 281px;
+  }
+}
+</style>

package/src/components/pages/PodcastsPage.vue

@@ -5,6 +5,7 @@
       v-model:search-pattern="searchPattern"
     />
     <AdvancedSearch
+      v-model:only-video="onlyVideo"
       :is-education="isEducation"
       :is-emission="false"
       :reset-rubriquage="resetRubriquage"
@@ -79,6 +80,8 @@ export default defineComponent({
       noRubriquageId: [] as Array<number>,
       rubriquageId: [] as Array<number>,
       rubriqueId: [] as Array<number>,
+      //VIDEO_WORK
+      onlyVideo: false as boolean,
     };
   },
 

package/src/locale/de.ts

@@ -343,4 +343,5 @@ export default {
   "UnorderedList":"Ungeordnete Liste",
   "List":"Aufführen",
   "Display HTML":"HTML anzeigen",
+  "Video is unavailable":"Video ist nicht verfügbar",
 };

package/src/locale/en.ts

@@ -343,4 +343,5 @@ export default {
   "UnorderedList":"Unordered list",
   "List":"List",
   "Display HTML":"Display HTML",
+  "Video is unavailable":"Video is unavailable",
 };

package/src/locale/es.ts

@@ -344,4 +344,5 @@ export default {
   "UnorderedList":"Lista desordenada",
   "List":"Lista",
   "Display HTML":"Mostrar HTML",
+  "Video is unavailable":"El vídeo no está disponible",
 };

package/src/locale/fr.ts

@@ -350,4 +350,8 @@ export default {
   "UnorderedList":"Liste non ordonnée",
   "List":"Liste",
   "Display HTML":"Afficher HTML",
+  "Video is unavailable":"La vidéo est indisponible",
+
+
+  "Show only episodes with video":"Afficher uniquement les épisodes avec une vidéo",
 };

package/src/locale/it.ts

@@ -338,4 +338,5 @@ export default {
   "UnorderedList":"Lista non ordinata",
   "List":"Elenco",
   "Display HTML":"Visualizza HTML",
+  "Video is unavailable":"Il video non è disponibile",
 };

package/src/locale/sl.ts

@@ -333,4 +333,5 @@ export default {
   "UnorderedList":"Neurejen seznam",
   "List":"Seznam",
   "Display HTML":"Prikaži HTML",
+  "Video is unavailable":"Videoposnetek ni na voljo",
 };

package/src/stores/PlayerStore.ts

@@ -106,7 +106,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         (this.playerPodcast &&
           this.playerPodcast.podcastId === param.podcastId && isVideo === this.playerVideo) ||
         (this.playerMedia && this.playerMedia.mediaId === param.mediaId) ||
-        (this.playerLive && this.playerLive.conferenceId === param.conferenceId)
+        (this.playerLive && this.playerLive.conferenceId === param.conferenceId && isVideo === this.playerVideo)
       ) {
         //Do nothing
         return;

package/src/stores/class/conference/conference.ts

@@ -33,4 +33,5 @@ export interface Conference {
   websocket?: string;
   interval?: ReturnType<typeof setTimeout>;
   duration?: number;
+  videoProfile?:string;
 }