@saooti/octopus-sdk 37.0.17 → 37.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.17",
+  "version": "37.0.18",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,10 +14,8 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "@clappr/core": "0.4.27",
-    "@clappr/hlsjs-playback": "^1.1.0",
     "@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",
@@ -40,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",
@@ -50,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/misc/player/PlayerVideo.vue

@@ -60,7 +60,7 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app {
   .video-wrapper{
-    border-radius: 2rem;
+    border-radius: 1rem;
     overflow: hidden;
     position: fixed;
     bottom: 2.5rem;

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

@@ -1,23 +1,19 @@
 <template>
-  <div class="video-player">
+  <div id="player-video-hls" class="video-player">
     <div v-if="errorPlay.length" class="video-live-error">{{errorPlay}}</div>
-    <video
-      v-show="useVideoSrc"
-      ref="videoelement"
-      playsinline
-    />
-    <div
-      ref="videocontainer"
-      class="video-container"
-    />
+    <video id="video-element-hls" ref="videoelement" class="video-js" playsinline></video>
   </div>
 </template>
 <script lang="ts">
-
-// @ts-ignore
-import Clappr from '@clappr/core';
-// @ts-ignore
-import HlsjsPlayback from '@clappr/hlsjs-playback';
+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",
@@ -31,21 +27,44 @@ export default defineComponent({
     return {
       errorPlay: "" as string,
       useVideoSrc: false as boolean,
-      player: undefined as Clappr.Player,
+      player: undefined as VideoJsPlayer|undefined,
       playing: false as boolean,
       stalledTimout: undefined as ReturnType<typeof setTimeout>|undefined,
     };
   },
   computed:{
-    videoContainer(): HTMLElement{
-      return (this.$refs.videocontainer as HTMLElement);
-    },
     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() { 
@@ -64,51 +83,26 @@ export default defineComponent({
     async playLive(): Promise<void> {
       clearTimeout(this.stalledTimout);
       this.definedStalledTimeout();
-      if (this.videoElement.canPlayType('application/vnd.apple.mpegurl') && !navigator.userAgent.includes('Android')) {
-        this.useVideoSrc = true;
+      if (this.useVideoSrc) {
         this.playLiveIos();
         return;
       }
-      this.player = new Clappr.Player({
-        source: this.hlsUrl,
-        autoPlay: false,
-        height: '100%',
-        width: '100%',
-        plugins: {
-          playback: [HlsjsPlayback],
-        },
-        playback: {
-          controls: true,
-          playInline: true,
-          hlsjsConfig: {
-            enableWorker: false,
-            debug:true,
-          }
-        },
-        events: {
-          onError: async(error: Clappr.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');
-            }
-          },
-          onPlay:()=>{
-            this.errorPlay = "";
-            this.playing = true; 
-          },
-          onTimeUpdate:()=>{
-            clearTimeout(this.stalledTimout);
-            this.definedStalledTimeout();
-          }
+      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');
         }
       });
-      this.playing = true; 
-      this.player.attachTo(this.videoContainer);
-      if(0!==this.videoContainer.getElementsByTagName("video").length){
-        this.videoContainer.getElementsByTagName("video")[0].play();
-      }
     },
     async playLiveIos(): Promise<void>{
       this.videoElement.onloadedmetadata = ()=>{
@@ -140,7 +134,19 @@ export default defineComponent({
         this.videoElement.load();
         return;
       }
-      this.player.destroy();
+      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);
@@ -154,6 +160,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import 'video.js';
 @import "@scss/_variables.scss";
 .octopus-app{
   .video-live-error{
@@ -168,7 +175,7 @@ export default defineComponent({
     background: $danger;
     z-index: 1;
   }
-  .video-container{
+  .video-js{
     width: 500px;
     height: 281px;
   }

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/fr.ts

@@ -351,4 +351,7 @@ export default {
   "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",
 };