@saooti/octopus-sdk 37.0.17 → 37.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.17",
+  "version": "37.0.19",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,49 +14,52 @@
     "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",
-    "@tiptap/extension-link": "^2.0.4",
-    "@tiptap/extension-underline": "^2.0.4",
-    "@tiptap/pm": "^2.0.4",
-    "@tiptap/starter-kit": "^2.0.4",
-    "@tiptap/vue-3": "^2.0.4",
+    "@saooti/octopus-api": "^0.36.0",
+    "@tiptap/extension-link": "^2.1.6",
+    "@tiptap/extension-underline": "^2.1.6",
+    "@tiptap/pm": "^2.1.6",
+    "@tiptap/starter-kit": "^2.1.6",
+    "@tiptap/vue-3": "^2.1.6",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.4",
-    "@vuepic/vue-datepicker": "^5.4.0",
-    "autoprefixer": "^10.4.14",
+    "@vuepic/vue-datepicker": "^6.0.1",
+    "autoprefixer": "^10.4.15",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "express": "^4.18.2",
-    "hls.js": "^1.4.9",
+    "hls.js": "^1.4.10",
     "humanize-duration": "^3.29.0",
-    "jest": "^29.6.1",
-    "pinia": "^2.1.4",
-    "qrcode.vue": "^3.4.0",
-    "sass": "^1.63.6",
+    "jest": "^29.6.2",
+    "pinia": "^2.1.6",
+    "qrcode.vue": "^3.4.1",
+    "sass": "^1.66.1",
     "sonarqube-scanner": "^3.0.0",
-    "swiper": "^10.0.4",
-    "vite": "^4.4.4",
+    "swiper": "^10.2.0",
+    "video.js": "^7.21.5",
+    "videojs-contrib-quality-levels": "^2.2.1",
+    "videojs-hls-quality-selector": "^1.1.4",
+    "vite": "^4.4.9",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-recaptcha": "^2.0.3",
     "vue-router": "^4.2.4",
     "vue-select": "^4.0.0-beta.6",
-    "vue3-lazyload": "^0.3.6",
+    "vue3-lazyload": "^0.3.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",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.3.2",
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "eslint": "^8.45.0",
+    "eslint": "^8.47.0",
     "eslint-plugin-vue": "^9.15.1",
     "typescript": "^5.1.6"
   },

package/src/components/display/emission/EmissionInlineList.vue

@@ -64,7 +64,7 @@ import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { defineComponent } from "vue";
 import { AxiosError } from "axios";
 import imageProxy from "../../mixins/imageProxy";
-import resizePhone  from "../../mixins/resizePhone";
+import resizePhone from "../../mixins/resizePhone";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 export default defineComponent({
   name: "EmissionInlineList",
@@ -100,7 +100,7 @@ export default defineComponent({
       alignLeft: false as boolean,
       rubriques: undefined as Array<Rubrique> | undefined,
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
 
@@ -132,7 +132,7 @@ export default defineComponent({
     sizeItem() {
       this.handleResize();
     },
-    windowWidth(){
+    windowWidth() {
       if (!this.$el) return;
       if (this.overflowScroll) {
         this.size = 20;
@@ -145,7 +145,7 @@ export default defineComponent({
       const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
       this.size = Math.floor(width / sixteen);
-    }
+    },
   },
 
   mounted() {

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

@@ -51,6 +51,14 @@
             :label="textNotValidate"
           />
         </div>
+        <ClassicCheckbox
+          v-if="!isEmission"
+          :text-init="onlyVideo"
+          class="flex-shrink-0 mt-3"
+          id-checkbox="only-video-checkbox"
+          :label="$t('Show only episodes with video')"
+          @update:text-init="$emit('update:onlyVideo', $event)"
+        />
       </div>
       <div class="d-flex flex-column">
         <div class="text-primary mb-2">
@@ -96,6 +104,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 +116,7 @@ export default defineComponent({
     "includeHidden",
     "notValid",
     "updateRubriquageFilter",
+    "update:onlyVideo",
   ],
   data() {
     return {

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

@@ -82,7 +82,7 @@ export default defineComponent({
   data() {
     return {
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
   computed: {

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

@@ -1,7 +1,11 @@
 <template>
   <div class="position-relative w-100">
     <template v-if="!isPhone">
-      <button class="btn-transparent swiper-button-prev" v-show="isLoop" @click="slidePrevButton()"></button>
+      <button
+        v-show="isLoop"
+        class="btn-transparent swiper-button-prev"
+        @click="slidePrevButton()"
+      ></button>
       <swiper
         :slides-per-view="numberItem"
         :space-between="0"
@@ -14,7 +18,7 @@
         </swiper-slide>
       </swiper>
     </template>
-    <div class="element-list-inline" v-else>
+    <div v-else class="element-list-inline">
       <div v-for="(obj, index) in listObject" :key="obj">
         <slot name="octopusSlide" :option="obj" :index="index" />
       </div>
@@ -38,7 +42,7 @@ export default defineComponent({
     Swiper,
     SwiperSlide,
   },
-  mixins:[resizePhone],
+  mixins: [resizePhone],
 
   props: {
     listObject: { default: () => [], type: Array as () => Array<unknown> },
@@ -50,7 +54,7 @@ export default defineComponent({
       modules: [Navigation],
       numberItem: 5 as number,
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
   computed: {
@@ -65,21 +69,21 @@ export default defineComponent({
         ? state.generalParameters.podcastItem
         : 13.5;
     },
-    isLoop():boolean{
+    isLoop(): boolean {
       return this.listObject.length >= this.numberItem;
     },
   },
-  watch:{
-    windowWidth(){
+  watch: {
+    windowWidth() {
       if (!this.$el) return;
       const width = (this.$el as HTMLElement).offsetWidth - 95;
       const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
       this.numberItem = Math.max(1, Math.floor(width / sixteen));
-    }
+    },
   },
 
   methods: {
-    slidePrevButton(){
+    slidePrevButton() {
       this.$el.querySelector(".swiper").swiper.slidePrev();
     },
   },

package/src/components/display/live/LiveItem.vue

@@ -29,6 +29,7 @@ export default defineComponent({
   data() {
     return {
       live: undefined as Podcast | undefined,
+      watchInterval: undefined as ReturnType<typeof setTimeout> | undefined,
     };
   },
 
@@ -36,7 +37,14 @@ export default defineComponent({
     this.fetchPodcastData();
     this.watchStatus();
   },
+  unmounted() {
+    this.clearWatchStatus();
+  },
   methods: {
+    clearWatchStatus() {
+      clearInterval(this.watchInterval as unknown as number);
+      this.watchInterval = undefined;
+    },
     async fetchPodcastData(): Promise<void> {
       if (!this.fetchConference || !this.fetchConference.podcastId) return;
       try {
@@ -73,7 +81,8 @@ export default defineComponent({
           ...{ status: newStatus },
         });
       } else {
-        setTimeout(() => {
+        this.clearWatchStatus();
+        this.watchInterval = setTimeout(() => {
           this.watchStatus();
         }, 5000);
       }

package/src/components/display/playlist/PodcastPlaylistInlineList.vue

@@ -88,7 +88,7 @@ export default defineComponent({
       direction: 1 as number,
       alignLeft: false as boolean,
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
   computed: {
@@ -124,7 +124,7 @@ export default defineComponent({
       this.reset();
       this.fetchContent();
     },
-    windowWidth(){
+    windowWidth() {
       if (!this.$el) return;
       if (this.overflowScroll) {
         this.size = 20;
@@ -137,7 +137,7 @@ export default defineComponent({
       const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.8);
       this.size = Math.floor(width / sixteen);
-    }
+    },
   },
 
   mounted() {

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

@@ -61,7 +61,7 @@
         {{ textVisible }}
       </div>
     </button>
-    <button 
+    <button
       v-if="isVideoPodcast"
       class="btn admin-button btn-play-video saooti-video"
       @click="play(true)"
@@ -107,10 +107,13 @@ export default defineComponent({
       "playerPodcast",
       "playerLive",
       "playerStatus",
-      "playerVideo"
+      "playerVideo",
     ]),
-    isVideoPodcast(): boolean{
-      return this.fetchConference?.videoProfile?.includes('video_') || undefined!==this.podcast.video?.videoId;
+    isVideoPodcast(): boolean {
+      return (
+        this.fetchConference?.videoProfile?.includes("video_") ||
+        undefined !== this.podcast.video?.videoId
+      );
     },
     playingPodcast() {
       return (
@@ -214,7 +217,6 @@ export default defineComponent({
         case "RECORDING":
           return this.$t("In live");
         case "DEBRIEFING":
-          /* if (!this.isAnimatorLive) return ''; */
           if ("READY_TO_RECORD" === this.podcast.processingStatus)
             return this.$t("Not recording");
           return this.$t("Debriefing");
@@ -261,17 +263,20 @@ export default defineComponent({
       if (this.isLiveToBeRecorded) {
         return;
       }
-      if (this.playingPodcast && isVideo===this.playerVideo) {
+      if (this.playingPodcast && isVideo === this.playerVideo) {
         this.playerChangeStatus("PLAYING" === this.playerStatus);
         return;
       }
       if (!this.recordingLive) {
         this.playerPlay(this.podcast, isVideo);
       } else {
-        this.playerPlay({
-          ...this.podcast,
-          ...{ conferenceId: this.fetchConference?.conferenceId },
-        }, isVideo);
+        this.playerPlay(
+          {
+            ...this.podcast,
+            ...{ conferenceId: this.fetchConference?.conferenceId },
+          },
+          isVideo,
+        );
       }
       if (this.clickPlayGoPage) {
         this.$router.push("/main/pub/podcast/" + this.podcast.podcastId);
@@ -319,13 +324,13 @@ export default defineComponent({
     background-color: rgba(255, 255, 255, 0.5);
   }
 
-  .btn.btn-play-video{
+  .btn.btn-play-video {
     position: absolute;
     bottom: 0;
     right: 0;
     margin: 0.5rem;
     background: $primaryColorLessTransparent !important;
-    color:white !important
+    color: white !important;
   }
 
   .image-play-button .play-button-error-icon {

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

@@ -99,7 +99,7 @@ export default defineComponent({
       direction: 1 as number,
       alignLeft: false as boolean,
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
   computed: {
@@ -142,7 +142,7 @@ export default defineComponent({
       this.reset();
       this.fetchNext();
     },
-    windowWidth(){
+    windowWidth() {
       if (!this.$el) return;
       if (this.overflowScroll) {
         this.size = 20;
@@ -155,7 +155,7 @@ export default defineComponent({
       const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.8);
       this.size = Math.floor(width / sixteen);
-    }
+    },
   },
 
   created() {

package/src/components/display/sharing/ShareDistribution.vue

@@ -77,7 +77,7 @@ export default defineComponent({
           icon: "saooti-google-podcasts",
           title: "Google Podcasts",
         },
-        {url:this.getUrl('iHeart'), icon:'saooti-iheart', title:'iHeart'},
+        { url: this.getUrl("iHeart"), icon: "saooti-iheart", title: "iHeart" },
         {
           url: this.getUrl("PlayerFM"),
           icon: "saooti-playerfm",

package/src/components/display/sharing/SubscribeButtons.vue

@@ -56,7 +56,12 @@ export default defineComponent({
           title: "Google Podcasts",
           url: this.getUrl("googlePodcasts"),
         },
-        {name:'iHeart', icon:"saooti-iheart",title:'iHeart', url : this.getUrl('iHeart')},
+        {
+          name: "iHeart",
+          icon: "saooti-iheart",
+          title: "iHeart",
+          url: this.getUrl("iHeart"),
+        },
         {
           name: "playerFm",
           icon: "saooti-playerfm",

package/src/components/form/ClassicDatePicker.vue

@@ -13,9 +13,9 @@
     :max-date="isMaxDate && !isTimePicker ? now : undefined"
     :min-date="isMinDate && !isTimePicker ? now : undefined"
     :range="undefined !== range"
-    :multi-calendars="columnNumber>1 ? columnNumber : false"
+    :multi-calendars="columnNumber > 1 ? columnNumber : false"
     :inline="columnNumber > 1"
-    :enable-time-picker="!isTimePicker ?displayTimePicker : undefined"
+    :enable-time-picker="!isTimePicker ? displayTimePicker : undefined"
     :aria-labels="ariaLabels"
     @update:model-value="$emit('updateDate', $event)"
   >
@@ -24,72 +24,85 @@
 
 <script lang="ts">
 import dayjs from "dayjs";
-import VueDatePicker from '@vuepic/vue-datepicker';
+import VueDatePicker from "@vuepic/vue-datepicker";
 import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     VueDatePicker,
   },
   props: {
-    time: { default:undefined, type: Object as () => {hours:number, minutes:number, seconds:number} },
+    time: {
+      default: undefined,
+      type: Object as () => { hours: number; minutes: number; seconds: number },
+    },
     date: { default: undefined, type: Date },
-    range: {default: undefined,type: Array as () => Array<Date>},
+    range: { default: undefined, type: Array as () => Array<Date> },
     isMaxDate: { default: false, type: Boolean },
     isMinDate: { default: false, type: Boolean },
     columnNumber: { default: 1, type: Number },
     displaySeconds: { default: false, type: Boolean },
-    displayTimePicker:{ default: true, type: Boolean },
-    isTimePicker:{ default: false, type: Boolean },
-    useTeleport:{ default: false, type: Boolean },
+    displayTimePicker: { default: true, type: Boolean },
+    isTimePicker: { default: false, type: Boolean },
+    useTeleport: { default: false, type: Boolean },
     templateClass: { default: undefined, type: String },
     readonly: { default: false, type: Boolean },
   },
 
   emits: ["updateDate", "update:date"],
   data() {
-    return {
-    };
+    return {};
   },
   computed: {
-    ariaLabels(){
+    ariaLabels() {
       return {
         input: this.date ? this.formatDate(this.date) : undefined,
-        day : (value: {value: Date}) => {return this.formatDate(value.value);}
-      }
+        day: (value: { value: Date }) => {
+          return this.formatDate(value.value);
+        },
+      };
     },
-    modelVal(){
+    modelVal() {
       return this.time ?? this.range ?? this.date;
     },
-    formatLocale(){
+    formatLocale() {
       return this.$i18n.locale;
     },
-    format(){
-      let timeString = '';
-      if(this.displayTimePicker || this.isTimePicker){
-        timeString ='HH:mm';
-        if(this.displaySeconds){
-          timeString ='HH:mm:ss';
-        } 
+    format() {
+      let timeString = "";
+      if (this.displayTimePicker || this.isTimePicker) {
+        timeString = "HH:mm";
+        if (this.displaySeconds) {
+          timeString = "HH:mm:ss";
+        }
       }
-      const dayString = this.isTimePicker ? timeString : 'dd/MM/yyyy '+timeString;
-      return this.range ? dayString+' - '+dayString : dayString;
+      const dayString = this.isTimePicker
+        ? timeString
+        : "dd/MM/yyyy " + timeString;
+      return this.range ? dayString + " - " + dayString : dayString;
     },
     now(): Date {
       return dayjs().toDate();
     },
   },
-  methods:{
-    formatDate(value: Date): string{
+  methods: {
+    formatDate(value: Date): string {
       const realMonth = value.getMonth() + 1;
-      return value.getDate()+'/'+(realMonth < 10 ? "0" : "") + realMonth+'/'+value.getFullYear();
-    }
-  }
-})
+      return (
+        value.getDate() +
+        "/" +
+        (realMonth < 10 ? "0" : "") +
+        realMonth +
+        "/" +
+        value.getFullYear()
+      );
+    },
+  },
+});
 </script>
 <style lang="scss">
-@import '@vuepic/vue-datepicker/dist/main.css';
+@import "@vuepic/vue-datepicker/dist/main.css";
 .dp__theme_light {
-   --dp-primary-color: #1a8658;
-   --dp-time-font-size: 1rem;
+  --dp-primary-color: #1a8658;
+  --dp-time-font-size: 1rem;
 }
 </style>

package/src/components/misc/ClassicPopover.vue

@@ -32,7 +32,6 @@ export default defineComponent({
     relativeClass: { type: String, default: undefined },
     leftPos: { type: Boolean, default: false },
     topPos: { type: Boolean, default: false },
-
   },
   data() {
     return {
@@ -125,9 +124,12 @@ export default defineComponent({
           parentRight -
           (this.$refs.popover as HTMLElement).clientWidth
         : rectElement.left - parentLeft;
-      const yPosParent = this.topPos ? rectElement.top:rectElement.bottom;
-      const yGap = this.topPos ? -5 - (this.$refs.popover as HTMLElement).clientHeight :5;
-      this.posY = yPosParent +
+      const yPosParent = this.topPos ? rectElement.top : rectElement.bottom;
+      const yGap = this.topPos
+        ? -5 - (this.$refs.popover as HTMLElement).clientHeight
+        : 5;
+      this.posY =
+        yPosParent +
         parentScrollTop -
         parentTop +
         (this.isFixed ? 0 : window.scrollY) +

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

@@ -96,7 +96,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/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,32 +54,32 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app {
-  .video-wrapper{
-    border-radius: 2rem;
+  .video-wrapper {
+    border-radius: 1rem;
     overflow: hidden;
     position: fixed;
     bottom: 2.5rem;
     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,24 +1,25 @@
 <template>
-  <div class="video-player">
-    <div v-if="errorPlay.length" class="video-live-error">{{errorPlay}}</div>
+  <div id="player-video-hls" class="video-player">
+    <div v-if="errorPlay.length" class="video-live-error">{{ errorPlay }}</div>
     <video
-      v-show="useVideoSrc"
+      id="video-element-hls"
       ref="videoelement"
+      class="video-js"
       playsinline
-    />
-    <div
-      ref="videocontainer"
-      class="video-container"
-    />
+    ></video>
   </div>
 </template>
 <script lang="ts">
-
-// @ts-ignore
-import Clappr from '@clappr/core';
-// @ts-ignore
-import HlsjsPlayback from '@clappr/hlsjs-playback';
-import { defineComponent } from 'vue';
+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",
 
@@ -26,37 +27,62 @@ export default defineComponent({
     hlsUrl: { default: "", type: String },
   },
 
-  emits:['changeValid'],
+  emits: ["changeValid"],
   data() {
     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,
+      stalledTimout: undefined as ReturnType<typeof setTimeout> | undefined,
     };
   },
-  computed:{
-    videoContainer(): HTMLElement{
-      return (this.$refs.videocontainer as HTMLElement);
+  computed: {
+    videoElement(): HTMLVideoElement {
+      return this.$refs.videoelement as HTMLVideoElement;
     },
-    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(){
+  mounted() {
     this.playLive();
+    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);
@@ -64,99 +90,91 @@ 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,
-          }
+      this.player = videojs(
+        document.getElementById("video-element-hls") as Element,
+        this.videoOptions,
+        () => {
+          this.errorPlay = "";
+          this.playing = 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.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 = ()=>{
-        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;
       }
-      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{
+    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{
+.octopus-app {
+  .video-live-error {
     text-align: center;
     width: 100%;
     font-size: 1rem;
@@ -168,7 +186,7 @@ export default defineComponent({
     background: $danger;
     z-index: 1;
   }
-  .video-container{
+  .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/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,8 @@ 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",
+  "Video":"Vidéo",
 };