@saooti/octopus-sdk 40.2.8 → 40.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "40.2.8",
+  "version": "40.2.10",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/App.vue

@@ -40,7 +40,7 @@ export default defineComponent({
     CategoryFilter,
     FooterOctopus,
     PlayerComponent,
-    ClassicLazy,
+    ClassicLazy
   },
 
   setup(){

package/src/components/composable/player/usePlayerLogic.ts

@@ -7,6 +7,7 @@ import { usePlayerStore } from "../../../stores/PlayerStore";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { useGeneralStore } from "../../../stores/GeneralStore";
 import { useVastStore } from "../../../stores/VastStore";
+import fetchHelper from "../../../helper/fetchHelper";
 import classicApi from "../../../api/classicApi";
 import dayjs from "dayjs";
 import { FetchParam } from "@/stores/class/general/fetchParam";
@@ -98,19 +99,26 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>)=>{
     } else if ("PAUSED" === playerStore.playerStatus) {
       audioPlayer.pause();
     } else if ("PLAYING" === playerStore.playerStatus && playerStore.playerRadio) {
-      if (playerStore.playerRadio.isInit) {
-        if(vastStore.isAdPlaying && !vastStore.resetSessionId){
-          playerStore.playerRadio.dateSessionId = dayjs().toISOString();
-        }
-        playRadio();
-      } else {
-        playerStore.playerRadio.isInit = true;
-      }
+      handlePlayRadio();
     } else if ("PLAYING" === playerStore.playerStatus) {
       audioPlayer.play();
     }
   });
 
+  function handlePlayRadio(){
+    if(!playerStore.playerRadio){
+      return;
+    }
+    if (playerStore.playerRadio.isInit) {
+      if(vastStore.isAdPlaying && !vastStore.resetSessionId){
+        playerStore.playerRadio.dateSessionId = dayjs().toISOString();
+      }
+      playRadio();
+    } else {
+      playerStore.playerRadio.isInit = true;
+    }
+  }
+
   function getAudioUrlParameters(): FetchParam {
     if (!playerStore.playerPodcast) return {};
     const parameters: FetchParam = {
@@ -143,7 +151,7 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>)=>{
     )
       return playerStore.playerPodcast.audioStorageUrl;
     if (listenError.value) return playerStore.playerPodcast.audioStorageUrl;
-    return playerStore.playerPodcast.podcastId + ".mp3?"+getAudioUrlParameters().toString();
+    return playerStore.playerPodcast.podcastId + ".mp3?"+fetchHelper.getUriSearchParams(getAudioUrlParameters());
   }
 
   function reInitPlayer(): void {

package/src/components/composable/podcasts/usePodcastView.ts

@@ -20,8 +20,7 @@ export const usePodcastView = (podcast: Ref<Podcast|undefined>,  podcastConferen
   });
   const isLiveReadyToRecord = computed(() => { 
     return (
-      undefined !== podcast.value &&
-      undefined !== podcast.value.conferenceId &&
+      undefined !== podcast.value?.conferenceId &&
       0 !== podcast.value.conferenceId &&
       "READY_TO_RECORD" === podcast.value.processingStatus
     );
@@ -52,24 +51,24 @@ export const usePodcastView = (podcast: Ref<Podcast|undefined>,  podcastConferen
   });
 
   const duration = computed(() => { 
-    if (!podcast.value || podcast.value.duration <= 1) return "";
-      if (podcast.value.duration > 600000) {
-        return humanizeDuration(podcast.value.duration, {
-          language: i18n.locale.value,
-          largest: 1,
-          round: true,
-        });
-      }
+    if (!podcast.value || podcast.value.duration <= 1){return ""};
+    if (podcast.value.duration > 600000) {
       return humanizeDuration(podcast.value.duration, {
         language: i18n.locale.value,
-        largest: 2,
+        largest: 1,
         round: true,
       });
+    }
+    return humanizeDuration(podcast.value.duration, {
+      language: i18n.locale.value,
+      largest: 2,
+      round: true,
+    });
   });
 
   const durationIso = computed(() => { 
-    if (!podcast.value || podcast.value.duration <= 1) return "";
-      return dayjs.duration({ milliseconds: podcast.value.duration }).toISOString();
+    if (!podcast.value || podcast.value.duration <= 1){return "";}
+    return dayjs.duration({ milliseconds: podcast.value.duration }).toISOString();
   });
 	return {
     isLiveReadyToRecord,

package/src/components/composable/radio/usefetchRadioData.ts

@@ -24,7 +24,7 @@ export const useFetchRadio = ()=>{
       api: 14,
       path:  "player/playing/" + canalId,
     });
-    /* metadata.nextAdvertising={
+    /*{
       "adCount": 1,
       "startDate": "2025-03-04T13:12:00Z",
       "tag": "5e385e1b51c86"

package/src/components/composable/route/useAdvancedParamInit.ts

@@ -64,7 +64,6 @@ export const useAdvancedParamInit = (props: any, isEmission: boolean)=>{
     if (!isInit.value) {
       return;
     }
-    // TODO si oldValue !=null
     rubriqueFilter.value = [];
   });
 

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

@@ -7,6 +7,7 @@
       <div>{{ $t("Advanced filters") }}</div>
       <ChevronDownIcon :class="{ 'arrow-transform': showFilters }" />
     </button>
+    <Transition name="advanced-search">
     <div
       v-if="firstLoaded"
       v-show="showFilters"
@@ -76,6 +77,7 @@
         @update:sort="updateSort"
       />
     </div>
+  </Transition>
   </div>
 </template>
 
@@ -282,12 +284,28 @@ export default defineComponent({
     background: var(--octopus-background);
     display: flex;
     width: 100%;
-    margin-bottom: 1rem;
+    padding-bottom: 1rem;
     justify-content: space-around;
 
     @media (width <= 720px) {
       flex-wrap: wrap;
     }
   }
+
+  .advanced-search-enter-active,
+  .advanced-search-leave-active {
+    transition: 0.3s all;
+    opacity: 1;
+    max-height: 900px;
+    height: auto;
+    overflow: hidden;
+  }
+
+  .advanced-search-enter-from,
+  .advanced-search-leave-to {
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+  }
 }
 </style>

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

@@ -40,7 +40,7 @@
         <div v-if="isLiveReady" class="text-danger">
           {{ $t("Episode record in live") }}
         </div>
-        <div class="d-flex flex-column align-items-end flex-grow-1">
+        <div class="d-flex flex-column align-items-end">
           <time :datetime="durationIso">
             {{ duration }}
           </time>

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

@@ -146,6 +146,7 @@ export default defineComponent({
     
     &.open{
       margin-left:auto;
+      direction: rtl;
       @media (width <= 625px) {
         margin-top: 0.5rem;
       }
@@ -179,11 +180,6 @@ export default defineComponent({
       right: -30px;
       transform-origin: center left;
     }
-
-    &.open {
-      direction: rtl;
-    }
-
     &:hover {
       text-indent: 30px;
     }

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

@@ -59,7 +59,7 @@ export default defineComponent({
     async fetchRubriquages(){
       const rubriquagesOrga = await this.getOrgaRubriques(this.orgaId);
       const rubriquesArray= rubriquagesOrga.flatMap((rub) =>rub.rubriques);
-      this.rubriquagesOrga= rubriquesArray.reduce((results, u)=> (results[u.rubriqueId??0] = u, results), {} as {[key:number]:Rubrique});
+      this.rubriquagesOrga= rubriquesArray.reduce((results, u)=> {results[u.rubriqueId??0] = u; return results}, {} as {[key:number]:Rubrique});
       this.init = true;
     },
   }

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

@@ -1,13 +1,13 @@
 <template>
   <div
-    v-if="undefined !== tagList && 0 !== tagList.length"
+    v-if="undefined !== tagListFiltered && 0 !== tagListFiltered.length"
     class="tag-list-component d-flex align-items-center flex-wrap mb-3 small-text"
   >
     <div class="fw-bold me-3">
       {{ $t("Podcast tags") + " : " }}
     </div>
     <router-link
-      v-for="(tag, index) in tagList"
+      v-for="(tag, index) in tagListFiltered"
       :key="tag"
       class="d-flex align-items-center border p-1 m-1 text-dark"
       :to="{
@@ -72,6 +72,11 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useFilterStore, ["filterOrgaId"]),
+    tagListFiltered(): Array<string>{
+      return this.tagList.filter((tag: string) => {
+        return !tag.match(/^\[\[.*\]\]$/);
+      });
+    },
     organisationQuery(){
       if(this.filterOrgaId){
         return undefined;

package/src/components/display/rubriques/RubriqueList.vue

@@ -107,7 +107,12 @@ export default defineComponent({
           return !rubriquageIdToNotShow.includes(element.rubriquageId);
         });
       }
-      return Array.from(this.rubriquages).toSorted((a,b) => (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0));
+      return Array.from(this.rubriquages).toSorted((a,b) => {
+        if(a.title > b.title){
+          return 1;
+        }
+        return (b.title > a.title) ? -1 : 0;
+      });
     },
   },
   watch: {

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

@@ -25,7 +25,7 @@
       :margin="2"
     />
     <div class="d-flex align-items-center my-3">
-      <FormatSwitch class="me-3" v-model:isSvg="isSvg"/>
+      <FormatSwitch v-model:is-svg="isSvg" class="me-3"/>
       <button class="btn btn-primary" @click="download">
         {{ $t("Download") }}
       </button>
@@ -78,11 +78,11 @@ export default defineComponent({
       if (!canvas || canvas.length <=0 || !canvas[0]) {
         return;
       }
-      var downloadLink = document.createElement("a");
+      const downloadLink = document.createElement("a");
       if (this.isSvg) {
-        var svgData = canvas[0].outerHTML;
-        var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
-        var svgUrl = URL.createObjectURL(svgBlob);
+        const svgData = canvas[0].outerHTML;
+        const svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
+        const svgUrl = URL.createObjectURL(svgBlob);
         downloadLink.href = svgUrl;
         downloadLink.download = "qrcode.svg";
         downloadLink.click();

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

@@ -119,7 +119,12 @@ export default defineComponent({
             !this.podcast) ||
           ("PLAYLIST" === player.typePlayer && this.playlist)
         );
-      }).sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
+      }).sort((a,b) => {
+        if(a.name > b.name){
+          return 1;
+        }
+        return (b.name > a.name) ? -1 : 0;
+      });
     },
   },
   created() {

package/src/components/form/ClassicDatePicker.vue

@@ -1,6 +1,5 @@
 <template>
   <div ref="divContainer" tabindex="0">
-    
     <label
       v-if="label && !range"
       class="form-label"

package/src/components/form/ClassicLoading.vue

@@ -4,7 +4,7 @@
     class="d-flex align-items-center justify-content-center"
   >
     <ClassicSpinner class="me-3" />
-    <div class="h3 mt-2">
+    <div class="h3">
       {{ loadingText }}
     </div>
   </div>

package/src/components/form/ClassicSelect.vue

@@ -76,7 +76,12 @@ export default defineComponent({
     optionsOrder(){
       const optionsOrdered = Array.from(this.options);
       if(this.orderOptions){
-        optionsOrdered.sort((a,b) => (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0)); 
+        optionsOrdered.sort((a,b) => {
+          if(a.title > b.title){
+            return 1;
+          }
+          return (b.title > a.title) ? -1 : 0
+      }); 
       }
       if(this.topOption){
         optionsOrdered.unshift(this.topOption);

package/src/components/misc/ClassicPopover.vue

@@ -153,23 +153,48 @@ export default defineComponent({
         this.targetElement.removeEventListener("focusout", this.clearDataBlur);
       }
     },
+    handleClickEvent(){
+      if (this.show && this.isClick) {
+        this.isClick = false;
+        this.clearData();
+        return -1;
+      }
+      if (this.show && this.isTopLayerPopover) {
+        (this.$refs.popover as HTMLElement).showPopover();
+        this.isClick = true;
+        return -1;
+      }
+      this.isClick = true;
+      return 0;
+    },
+    handleLeftPos(rectElement: DOMRect, parentLeft: number, sizeAvailable: number, sizePopover: number){
+      const elementRightRelative = rectElement.right - parentLeft;
+      const hasPlaceRightButton = (sizeAvailable - (sizeAvailable - elementRightRelative)) > sizePopover;
+      if(hasPlaceRightButton){
+        this.posX =
+        rectElement.right -
+        parentLeft -
+        sizePopover;
+      }else{
+        this.posX =parentLeft;
+      }
+    },
+    handleRightPos(rectElement: DOMRect, parentLeft: number, sizeAvailable: number, sizePopover: number){
+      const elementLeftRelative = rectElement.left - parentLeft;
+      const hasPlaceRightButton = (sizeAvailable - elementLeftRelative) > sizePopover;
+      if(hasPlaceRightButton){
+        this.posX = elementLeftRelative;
+      }else{
+        this.posX = sizeAvailable - sizePopover + parentLeft;
+      }
+    },
     setPopoverData(e: MouseEvent | PointerEvent) {
       clearInterval(this.clearTimeout as unknown as number);
       if (this.disable || !e || !e.target) {
         return;
       }
-      if ("click" === e.type) {
-        if (this.show && this.isClick) {
-          this.isClick = false;
-          this.clearData();
-          return;
-        }
-        if (this.show && this.isTopLayerPopover) {
-          (this.$refs.popover as HTMLElement).showPopover();
-          this.isClick = true;
-          return;
-        }
-        this.isClick = true;
+      if ("click" === e.type && -1 === this.handleClickEvent()) {
+        return;
       }
       this.show = true;
       let parentLeft = 0;
@@ -197,26 +222,11 @@ export default defineComponent({
       const rectElement = (e.target as HTMLElement).getBoundingClientRect();
       (this.$refs.popover as HTMLElement).style.display = "block";
       const sizePopover = (this.$refs.popover as HTMLElement).clientWidth;
-      const sizeAvailable = parentWidth? parentWidth : window.innerWidth;
+      const sizeAvailable = parentWidth || window.innerWidth;
       if (this.leftPos) {
-        const elementRightRelative = rectElement.right - parentLeft;
-        const hasPlaceRightButton = (sizeAvailable - (sizeAvailable - elementRightRelative)) > sizePopover;
-        if(hasPlaceRightButton){
-          this.posX =
-          rectElement.right -
-          parentLeft -
-          sizePopover;
-        }else{
-          this.posX =parentLeft;
-        }
+        this.handleLeftPos(rectElement, parentLeft, sizeAvailable, sizePopover);
       } else {
-        const elementLeftRelative = rectElement.left - parentLeft;
-        const hasPlaceRightButton = (sizeAvailable - elementLeftRelative) > sizePopover;
-        if(hasPlaceRightButton){
-          this.posX = elementLeftRelative;
-        }else{
-          this.posX = sizeAvailable - sizePopover + parentLeft;
-        }
+        this.handleRightPos(rectElement, parentLeft, sizeAvailable, sizePopover);
       }
       this.posX = Math.max(0, this.posX);
       const yPosParent = this.topPos ? rectElement.top : rectElement.bottom;

package/src/components/misc/ClassicSpinner.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="octopus-spinner" :class="small ? 'small' : ''" />
+  <div class="octopus-spinner" :style="small ? '--size-spinner:1rem;' : ''" >
+    <div v-for="index of 12" :key="index"></div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -13,7 +15,89 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .octopus-app .octopus-spinner {
+
+  --size-spinner: 3rem;
+  --size-spinner-section: calc(var(--size-spinner) / 20);
+  --half-size-spinner: calc(var(--size-spinner) / 2);
+
+  color: #000000;
   display: inline-block;
+  position: relative;
+  width: var(--size-spinner);
+  height: var(--size-spinner);
+
+  div {
+    transform-origin: var(--half-size-spinner) var(--half-size-spinner);
+    animation: octopus-spinner 1.2s linear infinite;
+  }
+  div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 3px;
+    left: calc(var(--half-size-spinner) - calc(var(--size-spinner-section) / 2));
+    width: var(--size-spinner-section);
+    height: calc(var(--half-size-spinner) / 3);
+    border-radius: 20%;
+    background: currentColor;
+  }
+  div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+  }
+  div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+  }
+  div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+  }
+  div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+  }
+  div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+  }
+  div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+  }
+  div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+  }
+  div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+  }
+  div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+  }
+  div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+  }
+  div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+  }
+  div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+  }
+  @keyframes octopus-spinner {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+ /*  display: inline-block;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -31,6 +115,6 @@ export default defineComponent({
     to {
       transform: rotate(360deg);
     }
-  }
+  } */
 }
 </style>

package/src/components/misc/ProgressBar.vue

@@ -7,7 +7,6 @@
     <div
       v-if="secondaryProgress"
       class="octopus-progress-bar bg-warning"
-      role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"
       aria-valuemax="100"
@@ -28,7 +27,6 @@
     </template>
     <div
       class="octopus-progress-bar bg-primary"
-      role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"
       aria-valuemax="100"
@@ -147,9 +145,75 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@use "../../style/progressbar";
+.octopus-app{
+  .octopus-progress{
+    display: flex;
+    overflow: hidden;
+    background-color:var(--octopus-secondary-lighter);
+    border-radius: var(--octopus-border-radius);
+    position: relative;
+    cursor: pointer;
+    .octopus-progress-bar{
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+      color: var(--octopus-color-on-primary);
+      text-align: center;
+      white-space: nowrap;
+      background-color: var(--octopus-primary);
+      transition: width 0.6s ease;
+    }
+
+    .octopus-chapter{
+      position: absolute;
+      background: transparent;
+      background-clip: content-box;
+      padding: 0 5px;
+      box-shadow: inset -2px 1px 0 0 black,
+                  inset 2px 1px 0 0 black;
+
+      &:hover{
+        background: var(--octopus-background-transparent);
+        box-shadow: -4px 1px 0 0 black;
+      }
+    }
+
+    &,.octopus-progress-bar{
+      height: 4px;
+      @media (width <= 960px) {
+        height: 8px;
+      }
+    }
+
+    &.large,&.large .octopus-progress-bar{
+      height: 15px;
+    }
 
-.octopus-app .player-container {
+    &.medium,&.medium .octopus-progress-bar{
+      height: 6px;
+    }
+
+    .octopus-progress-bar-duration {
+      width: 10px;
+    }
+
+    .octopus-progress-bar-cursor{
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: black;
+      align-self: center;
+      position: absolute;
+    }
+
+    .end-0{
+      right: 0;
+    }
+  }
+
+  .player-container {
   .octopus-small-popover {
     font-size: 0.7rem;
     background: var(--octopus-player-color);
@@ -161,4 +225,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>

package/src/components/misc/TopBarMainContent.vue

@@ -308,12 +308,15 @@ export default defineComponent({
       color: white;
       font-weight: bold;
       font-size: 0.93rem;
+      text-decoration: underline;
+      text-decoration-color: transparent;
+      transition: text-decoration-color 250ms;
+      text-underline-offset: 8px;
 
       &.link-hover:hover,
       &.link-hover.router-link-exact-active.router-link-active {
         color: white;
-        text-decoration: underline;
-        text-underline-offset: 8px;
+        text-decoration-color: white;
       }
     }
 

package/src/components/misc/player/ads/AdsProgressBar.vue

@@ -1,15 +1,11 @@
 <template>
-  <div class="octopus-progress ambiance-progress c-hand-auto mt-1">
-    <div
-      class="octopus-progress-bar"
-      role="progressbar"
-      aria-valuenow="0"
-      aria-valuemin="0"
-      aria-valuemax="100"
-      :aria-label="$t('Advertising')"
-      :style="'width: ' + adPercentProgress + '%'"
-    />
-  </div>
+  <progress
+    class="ambiance-progress c-hand-auto mt-1"
+    min="0"
+    max="100"
+    :value="adPercentProgress"
+    :aria-label="$t('Advertising')"
+  />
 </template>
 
 <script lang="ts">
@@ -22,7 +18,4 @@ export default defineComponent({
     ...mapState(useVastStore, ["adPercentProgress"]),
   },
 });
-</script>
-<style lang="scss">
-@use "../../../../style/progressbar";
-</style>
+</script>

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

@@ -1,18 +1,12 @@
 <template>
-  <div
-    class="octopus-progress c-hand-auto mt-1"
+  <progress
+    class="c-hand-auto mt-1"
+    min="0"
+    max="100"
+    :value="percentProgress"
+    :aria-label="$t('Radio')"
     :class="isAmbiance ? 'ambiance-progress' : ''"
-  >
-    <div
-      class="octopus-progress-bar"
-      role="progressbar"
-      aria-valuenow="0"
-      aria-valuemin="0"
-      aria-valuemax="100"
-      :aria-label="$t('Radio')"
-      :style="'width: ' + percentProgress + '%'"
-    />
-  </div>
+  />
 </template>
 
 <script lang="ts">
@@ -51,12 +45,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(usePlayerStore, ["playerUpdateElapsed"]),
-    handlePercentInterval(/* clear: boolean */): void {
-      /*  if(clear){
-        clearInterval((this.percentInterval as unknown as number));
-        this.percentInterval = undefined;
-        return;
-      } */
+    handlePercentInterval(): void {
       this.percentInterval = setInterval(() => {
         this.calculatePercent();
       }, 1000);
@@ -79,6 +68,3 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="scss">
-@use "../../../../style/progressbar";
-</style>

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

@@ -5,13 +5,15 @@
         <WindowCloseIcon />
       </button>
       <div class="video-wrapper">
-        <PlayerVideoDigiteka v-if="!playerLive" :video-id="videoId" />
+        <PlayerYoutubeEmbed v-if="youtubeId" :youtube-id="youtubeId" />
+        <PlayerVideoDigiteka v-else-if="!playerLive" :video-id="playerPodcast?.video?.videoId" />
         <PlayerVideoHls v-else :hls-url="hlsVideoUrl" />
       </div>
     </template>
   </teleport>
 </template>
 <script lang="ts">
+import youtubeVideoHelper from "../../../../helper/youtubeVideoHelper";
 import WindowCloseIcon from "vue-material-design-icons/WindowClose.vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { useApiStore } from "../../../../stores/ApiStore";
@@ -23,16 +25,22 @@ const PlayerVideoDigiteka = defineAsyncComponent(
 const PlayerVideoHls = defineAsyncComponent(
   () => import("../video/PlayerVideoHls.vue"),
 );
+const PlayerYoutubeEmbed = defineAsyncComponent(
+  () => import("../video/PlayerYoutubeEmbed.vue"),
+);
 export default defineComponent({
   name: "PlayerVideo",
 
   components: {
     PlayerVideoDigiteka,
     PlayerVideoHls,
+    PlayerYoutubeEmbed,
     WindowCloseIcon,
   },
   data() {
-    return {};
+    return {
+      youtubeId: undefined as string|undefined,
+    };
   },
   computed: {
     ...mapState(useApiStore, ["hlsUrl"]),
@@ -43,9 +51,9 @@ export default defineComponent({
       }
       return `${this.hlsUrl}live/video_dev.${this.playerLive.conferenceId}/index.m3u8`;
     },
-    videoId(): string | undefined {
-      return this.playerPodcast?.video?.videoId;
-    },
+  },
+  created(){
+    this.youtubeId = youtubeVideoHelper.getYoutubeId((this.playerPodcast ?? this.playerLive )?.tags ?? []);
   },
 
   methods: {

package/src/components/misc/player/video/PlayerYoutubeEmbed.vue

@@ -0,0 +1,29 @@
+<template>
+  <iframe 
+    width="500"
+    height="281"
+    :title="$t('Video')"
+    class="youtube-iframe"
+    :src="'https://www.youtube.com/embed/'+youtubeId"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen>
+  </iframe>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "PlayerYoutubeEmbed",
+  components: {
+  },
+  props: {
+    youtubeId: { default: undefined, type: String },
+  },
+
+});
+</script>
+<style lang="scss">
+@use "../../../../style/videoPlayer";
+</style>

package/src/components/pages/PodcastPage.vue

@@ -21,7 +21,7 @@
           :organisation-id="podcast.organisation.id"
         />
         <SharePlayer
-          v-if="!isPodcastmaker && editRight"
+          v-if="!isPodcastmaker && editRight && !youtubeId"
           :podcast="podcast"
           :emission="podcast?.emission"
           :organisation-id="authOrgaId"
@@ -68,6 +68,7 @@
 </template>
 
 <script lang="ts">
+import youtubeVideoHelper from "../../helper/youtubeVideoHelper";
 import {useOrgaComputed} from "../composable/useOrgaComputed";
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
 import PodcastModuleBox from "../display/podcasts/PodcastModuleBox.vue";
@@ -135,6 +136,7 @@ export default defineComponent({
       error: false as boolean,
       fetchConference: undefined as Conference | undefined,
       infoReload: undefined as ReturnType<typeof setTimeout> | undefined,
+      youtubeId: undefined as string|undefined,
     };
   },
 
@@ -312,6 +314,9 @@ export default defineComponent({
        this.podcastInProcessing();
         this.updatePathParams(this.podcast.title);
         await this.getCommentsConfig(this.podcast);
+        if((this.fetchConference?.videoProfile?.includes("video_") && "READY_TO_RECORD" === this.podcast.processingStatus) || undefined !== this.podcast.video?.videoId){
+          this.youtubeId = youtubeVideoHelper.getYoutubeId(this.podcast?.tags ?? []);
+        }
         this.loaded = true;
       } catch (error) {
         this.handle403(error as AxiosError);

package/src/helper/youtubeVideoHelper.ts

@@ -0,0 +1,13 @@
+export default {
+    getYoutubeId(tags: Array<string>){
+        let youtubeId = undefined;
+        for(const tag of tags){
+        const regexExec = /^\[\[https:\/\/(?:www.)?youtube.com\/(?:watch\?v=|live\/)(?<id>\S+)\]\]$/.exec(tag);
+        if(regexExec?.groups?.id){
+            youtubeId = regexExec.groups.id;
+            break;
+        }
+        }
+        return youtubeId;
+    }
+}

package/src/stores/CommentStore.ts

@@ -4,7 +4,6 @@ import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 
 import { defineStore } from "pinia";
-import StringHelper from "../helper/stringHelper";
 import cookiesHelper from "../helper/cookiesHelper";
 import WebSocketEngine from "../websocket/commentWebsocket";
 import { CommentPodcast } from "./class/general/comment";
@@ -224,7 +223,7 @@ export const useCommentStore = defineStore("CommentStore", {
     async initialize() {
       const apiStore = useApiStore();
       const commentUrl = apiStore.commentUrl?? "https://comments.dev2.saooti.org/";
-      const url =  StringHelper.trimChar(commentUrl.replace("https://", ""),"/");
+      const url =  stringHelper.trimChar(commentUrl.replace("https://", ""),"/");
       const engine = new WebSocketEngine(url);
       await engine.initialize();
       this.commentWebsocketengine = engine;

package/src/style/general.scss

@@ -4,11 +4,6 @@ html{
   font-size: 20px;
   height: 100%;
   scrollbar-gutter: stable;
-  /* scroll-snap-type: y proximity;
-  scroll-padding-top: 5rem;
-  @media (width <= 650px) {
-    scroll-padding-top: 3.5rem;
-  } */
 }
 
 body{
@@ -30,14 +25,6 @@ main, #app{
   flex-grow: 1;
 }
 
-/* header, section:not(.page-box), .podcast-inline-container {
-  scroll-snap-align: start;
-}
-.page-element > section:first-child {
-  scroll-snap-align: none;
-}
- */
-
 
 /** Octopus style */
 

package/src/style/share.scss

@@ -47,8 +47,8 @@
   }
 
   .img-box-podcast{
-    height: calc(var(--octopus-podcast-size) - 4px);
-    width: calc(var(--octopus-podcast-size) - 4px);
+    height: calc(var(--octopus-podcast-size) - 2px);
+    width: calc(var(--octopus-podcast-size) - 2px);
   }
 
   .img-box,.img-box.img-box-podcast{
@@ -197,5 +197,39 @@
     text-align: center;
   }
 
+  progress{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--octopus-color-on-primary);
+    text-align: center;
+    white-space: nowrap;
+    background-color:var(--octopus-secondary-lighter);
+    border-radius: var(--octopus-border-radius);
+    cursor: pointer;
+    height: 4px;
+    flex-grow: 1;
+    width:100%;
+    @media (width <= 960px) {
+      height: 8px;
+    }
+    &::-webkit-progress-bar{
+      background-color: var(--octopus-secondary-lighter);
+    }
+    &:not(.ambiance-progress)::-webkit-progress-value {
+      background-color: var(--octopus-primary);
+    }
+    &.ambiance-progress::-webkit-progress-value {
+      background-color: var(--octopus-text-disabled);
+    }
+    &.large{
+      height: 15px;
+    }
+
+    &.medium{
+      height: 6px;
+    }
+  }
 
 }

package/src/style/progressbar.scss

@@ -1,77 +0,0 @@
-.octopus-app{
-  .octopus-progress{
-    display: flex;
-    overflow: hidden;
-    background-color:var(--octopus-secondary-lighter);
-    border-radius: var(--octopus-border-radius);
-    position: relative;
-    cursor: pointer;
-
-    .octopus-progress-bar{
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      overflow: hidden;
-      color: var(--octopus-color-on-primary);
-      text-align: center;
-      white-space: nowrap;
-      background-color: var(--octopus-primary);
-      transition: width 0.6s ease;
-    }
-
-    .octopus-chapter{
-      position: absolute;
-      background: transparent;
-      background-clip: content-box;
-      padding: 0 5px;
-      box-shadow: inset -2px 1px 0 0 black,
-                  inset 2px 1px 0 0 black;
-
-      &:hover{
-        background: var(--octopus-background-transparent);
-        box-shadow: -4px 1px 0 0 black;
-      }
-    }
-
-    &,.octopus-progress-bar{
-      height: 4px;
-
-      @media (width <= 960px) {
-        height: 8px;
-      }
-    }
-
-    &.large,&.large .octopus-progress-bar{
-      height: 15px;
-    }
-
-    &.medium,&.medium .octopus-progress-bar{
-      height: 6px;
-    }
-
-    .octopus-progress-bar-duration {
-      width: 10px;
-    }
-
-    .octopus-progress-bar-cursor{
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background: black;
-      align-self: center;
-      position: absolute;
-    }
-
-    .end-0{
-      right: 0;
-    }
-  }
-    
-  .octopus-progress.ambiance-progress {
-    .octopus-progress-bar {
-      background-color: var(--octopus-text-disabled);
-    }
-  }
-
-}