@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -7,24 +7,18 @@
       class="player-reduce-button btn bg-transparent text-light saooti-down"
       @click="changePlayerLargeVersion"
     />
-    <router-link
-      v-if="isImage && podcastImage"
-      :to="podcastShareUrl"
-    >
+    <router-link v-if="isImage && podcastImage" :to="podcastShareUrl">
       <img
-        v-lazy="proxyImageUrl(podcastImage,'200')"
+        v-lazy="proxyImageUrl(podcastImage, '200')"
         width="200"
         height="200"
         :alt="$t('Podcast image')"
         class="img-box"
-      >
+      />
     </router-link>
     <div class="d-flex w-100 px-2 mt-2 text-center">
-      <div
-        v-if="playerError"
-        class="text-warning mx-2"
-      >
-        {{ $t('Podcast play error') + ' - ' }}
+      <div v-if="playerError" class="text-warning mx-2">
+        {{ $t("Podcast play error") + " - " }}
       </div>
       <div class="flex-grow-1 text-truncate h3">
         {{ podcastTitle }}
@@ -42,7 +36,7 @@
         :duration-live-position="durationLivePosition"
         :player-error="playerError"
         :listen-time="listenTime"
-        @updateNotListenTime="$emit('update:notListenTime', $event)"
+        @update-not-listen-time="$emit('update:notListenTime', $event)"
       />
       <RadioProgressBar v-else />
       <div class="d-flex justify-content-between">
@@ -51,9 +45,9 @@
       </div>
       <RadioHistory v-if="radioUrl" />
     </div>
-    
+
     <div
-      v-if="''!=transcriptText"
+      v-if="'' != transcriptText"
       class="flex-grow-1 d-flex align-items-center w-100"
     >
       <div class="flex-grow-1 p-1 text-center mx-3 transcript-bg rounded">
@@ -72,14 +66,12 @@
         :class="{
           'saooti-play': isPaused,
           'saooti-pause': isPlaying,
-          '':!isPaused&&!isPlaying
+          '': !isPaused && !isPlaying,
         }"
         class="btn play-big-button-box text-light bg-primary"
         @click="switchPausePlay"
       >
-        <Spinner
-          v-if="!isPaused&&!isPlaying"
-        />
+        <ClassicSpinner v-if="!isPaused && !isPlaying" />
       </button>
       <button
         title="+15''"
@@ -87,79 +79,87 @@
         @click="seekClick(15)"
       />
     </div>
-    <PlayerTimeline
-      v-model:showTimeline="showTimeline"
-      :comments="comments"
-    />
+    <PlayerTimeline v-model:showTimeline="showTimeline" :comments="comments" />
   </div>
 </template>
 <script lang="ts">
-import Spinner from '../Spinner.vue';
-import { playerDisplay } from '../../mixins/player/playerDisplay';
-import imageProxy from '../../mixins/imageProxy';
-import PlayerTimeline from './PlayerTimeline.vue';
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { CommentPodcast } from '@/stores/class/general/comment';
-const RadioProgressBar = defineAsyncComponent(() => import('./radio/RadioProgressBar.vue'));
-const RadioHistory = defineAsyncComponent(() => import('./radio/RadioHistory.vue'));
-const PlayerProgressBar = defineAsyncComponent(() => import('./PlayerProgressBar.vue'));
+import ClassicSpinner from "../ClassicSpinner.vue";
+import { playerDisplay } from "../../mixins/player/playerDisplay";
+import imageProxy from "../../mixins/imageProxy";
+import PlayerTimeline from "./PlayerTimeline.vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+import { CommentPodcast } from "@/stores/class/general/comment";
+const RadioProgressBar = defineAsyncComponent(
+  () => import("./radio/RadioProgressBar.vue"),
+);
+const RadioHistory = defineAsyncComponent(
+  () => import("./radio/RadioHistory.vue"),
+);
+const PlayerProgressBar = defineAsyncComponent(
+  () => import("./PlayerProgressBar.vue"),
+);
 export default defineComponent({
-  name: 'PlayerLarge',
+  name: "PlayerLarge",
 
   components: {
     PlayerProgressBar,
     RadioProgressBar,
     PlayerTimeline,
-    Spinner,
-    RadioHistory
+    ClassicSpinner,
+    RadioHistory,
   },
-    mixins:[playerDisplay, imageProxy],
+  mixins: [playerDisplay, imageProxy],
 
   props: {
-    playerError: { default: false, type: Boolean},
-    notListenTime: { default: 0 , type: Number},
-    comments: { default: ()=>[] , type: Array as ()=> Array<CommentPodcast> },
-    displayAlertBar: { default: false , type: Boolean},
-    percentLiveProgress: { default: 0 , type: Number},
-    durationLivePosition: { default: 0 , type: Number},
-    listenTime: { default: 0 , type: Number},
+    playerError: { default: false, type: Boolean },
+    notListenTime: { default: 0, type: Number },
+    comments: { default: () => [], type: Array as () => Array<CommentPodcast> },
+    displayAlertBar: { default: false, type: Boolean },
+    percentLiveProgress: { default: 0, type: Number },
+    durationLivePosition: { default: 0, type: Number },
+    listenTime: { default: 0, type: Number },
   },
 
-  emits: ['stopPlayer', 'update:notListenTime', 'changePlayerLargeVersion'],
+  emits: ["stopPlayer", "update:notListenTime", "changePlayerLargeVersion"],
   data() {
     return {
       showTimeline: false as boolean,
     };
   },
-  methods:{
-    stopPlayer(){
-      this.$emit('stopPlayer');
+  methods: {
+    stopPlayer() {
+      this.$emit("stopPlayer");
     },
-    changePlayerLargeVersion(){
-      this.$emit('changePlayerLargeVersion');
+    changePlayerLargeVersion() {
+      this.$emit("changePlayerLargeVersion");
     },
-    seekClick(addTime: number):void{
-      const audioPlayer: HTMLAudioElement|null = document.querySelector('#audio-player');
-      if(!audioPlayer){return;}
+    seekClick(addTime: number): void {
+      const audioPlayer: HTMLAudioElement | null =
+        document.querySelector("#audio-player");
+      if (!audioPlayer) {
+        return;
+      }
       const seekTo = audioPlayer.currentTime + addTime;
-      (this.$refs.progressbar as InstanceType<typeof PlayerProgressBar>).isSeekTo(audioPlayer, seekTo >0?seekTo: 0);
+      (
+        this.$refs.progressbar as InstanceType<typeof PlayerProgressBar>
+      ).isSeekTo(audioPlayer, seekTo > 0 ? seekTo : 0);
     },
-  }
-})
+  },
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
-  .player-container .img-box{
+.octopus-app {
+  .player-container .img-box {
     width: 10rem;
     height: 10rem;
   }
-  .player-reduce-button{
+  .player-reduce-button {
     position: absolute;
     right: 0;
     font-size: 1.2rem !important;
   }
-  .player-grow-large-content{
+  .player-grow-large-content {
     width: 100%;
     padding: 1rem 2rem;
     @media (max-width: 960px) {
@@ -178,11 +178,12 @@ export default defineComponent({
     flex-shrink: 0;
     cursor: pointer;
   }
-  .saooti-recule, .saooti-avance{
+  .saooti-recule,
+  .saooti-avance {
     font-size: 2rem !important;
   }
-  .transcript-bg{
+  .transcript-bg {
     background: #3e3e3e;
   }
 }
-</style>
+</style>

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

@@ -3,7 +3,7 @@
     v-if="!playerError"
     :main-progress="percentProgress"
     :secondary-progress="percentLiveProgress"
-    :alert-bar="displayAlertBar?durationLivePosition:undefined"
+    :alert-bar="displayAlertBar ? durationLivePosition : undefined"
     :class="classProgress"
     @mouseup="seekTo"
   />
@@ -15,44 +15,55 @@
 </template>
 
 <script lang="ts">
-import ProgressBar from '../ProgressBar.vue'
-import { CommentPodcast } from '@/stores/class/general/comment';
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { mapState } from 'pinia';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const CommentPlayer = defineAsyncComponent(() => import('../../display/comments/CommentPlayer.vue'));
+import ProgressBar from "../ProgressBar.vue";
+import { CommentPodcast } from "@/stores/class/general/comment";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import { defineComponent, defineAsyncComponent } from "vue";
+const CommentPlayer = defineAsyncComponent(
+  () => import("../../display/comments/CommentPlayer.vue"),
+);
 export default defineComponent({
-  name: 'PlayerProgressBar',
+  name: "PlayerProgressBar",
 
   components: {
     CommentPlayer,
-    ProgressBar
+    ProgressBar,
   },
   props: {
-    classProgress:{ default: "", type: String},
-    showTimeline: { default: false, type: Boolean},
-    comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
-    displayAlertBar: { default: false, type: Boolean},
-    percentLiveProgress: { default: 0, type: Number},
-    durationLivePosition: { default: 0, type: Number},
-    playerError: { default: false, type: Boolean},
-    listenTime: { default: 0, type: Number},
+    classProgress: { default: "", type: String },
+    showTimeline: { default: false, type: Boolean },
+    comments: { default: () => [], type: Array as () => Array<CommentPodcast> },
+    displayAlertBar: { default: false, type: Boolean },
+    percentLiveProgress: { default: 0, type: Number },
+    durationLivePosition: { default: 0, type: Number },
+    playerError: { default: false, type: Boolean },
+    listenTime: { default: 0, type: Number },
   },
-  emits: ['updateNotListenTime'],
-  
+  emits: ["updateNotListenTime"],
+
   computed: {
-    ...mapState(usePlayerStore, ['playerElapsed', 'playerTotal', 'playerPodcast', 'playerLive']),
-    percentProgress(): number{
-      if(!this.playerElapsed){return 0;}
+    ...mapState(usePlayerStore, [
+      "playerElapsed",
+      "playerTotal",
+      "playerPodcast",
+      "playerLive",
+    ]),
+    percentProgress(): number {
+      if (!this.playerElapsed) {
+        return 0;
+      }
       return this.playerElapsed * 100;
     },
   },
 
-  
   methods: {
     seekTo(event: MouseEvent): void {
-      const audioPlayer: HTMLAudioElement|null = document.querySelector('#audio-player');
-      if(!audioPlayer || null===event.currentTarget){return;}
+      const audioPlayer: HTMLAudioElement | null =
+        document.querySelector("#audio-player");
+      if (!audioPlayer || null === event.currentTarget) {
+        return;
+      }
       const rect = (event.currentTarget as Element).getBoundingClientRect();
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;
@@ -63,11 +74,10 @@ export default defineComponent({
     },
     isSeekTo(audioPlayer: HTMLAudioElement, seekTime: number): void {
       if (this.playerPodcast || this.playerLive) {
-        this.$emit('updateNotListenTime',seekTime - this.listenTime);
+        this.$emit("updateNotListenTime", seekTime - this.listenTime);
       }
       audioPlayer.currentTime = seekTime;
-    }
-    
+    },
   },
-})
-</script>
+});
+</script>

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

@@ -4,58 +4,54 @@
     class="timeline-button"
     @click="$emit('update:showTimeline', !showTimeline)"
   >
-    <div
-      class="saooti-down"
-      :class="showTimeline ? '' : 'arrow-transform'"
-    />
+    <div class="saooti-down" :class="showTimeline ? '' : 'arrow-transform'" />
     <div>Timeline</div>
   </div>
 </template>
 
 <script lang="ts">
-import { state } from '../../../stores/ParamSdkStore';
-import { defineComponent } from 'vue';
-import { CommentPodcast } from '@/stores/class/general/comment';
+import { state } from "../../../stores/ParamSdkStore";
+import { defineComponent } from "vue";
+import { CommentPodcast } from "@/stores/class/general/comment";
 export default defineComponent({
-  name: 'PlayerTimeline',
+  name: "PlayerTimeline",
 
   props: {
-    showTimeline: { default: false, type: Boolean},
-    comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
+    showTimeline: { default: false, type: Boolean },
+    comments: { default: () => [], type: Array as () => Array<CommentPodcast> },
   },
-  emits:['update:showTimeline'],
+  emits: ["update:showTimeline"],
 
   computed: {
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
   },
-
-})
+});
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-.player-container {
-  .timeline-button {
-    background: black;
-    padding: 0.1rem;
-    border-radius: 50%;
-    width: 70px;
-    height: 70px;
-    font-size: 0.7rem;
-    font-weight: bold;
-    justify-content: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-    color: $octopus-primary-color;
-    margin-left: 0.5rem;
-    @media (max-width: 960px) {
-      display: none;
+@import "@scss/_variables.scss";
+.octopus-app {
+  .player-container {
+    .timeline-button {
+      background: black;
+      padding: 0.1rem;
+      border-radius: 50%;
+      width: 70px;
+      height: 70px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      justify-content: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      color: $octopus-primary-color;
+      margin-left: 0.5rem;
+      @media (max-width: 960px) {
+        display: none;
+      }
     }
   }
 }
-}
-</style>
+</style>

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

@@ -1,34 +1,30 @@
 <template>
-  <div 
-    v-if="playerRadioHistory.length"
-    class="d-flex align-items-center mt-3"
-  >
+  <div v-if="playerRadioHistory.length" class="d-flex align-items-center mt-3">
     <div class="fw-bold me-3">
-      {{ $t('Previously') +':' }}
+      {{ $t("Previously") + ":" }}
     </div>
     <button
-      v-if="indexStart!==0"
+      v-if="indexStart !== 0"
       class="btn btn-transparent text-light saooti-left"
       @click="handleResize(0)"
     />
-    <div
-      ref="historyListContainer"
-      class="history-list-container"
-    >
-      <div 
-        v-for="(pastItem, index) in playerRadioHistory" 
+    <div ref="historyListContainer" class="history-list-container">
+      <div
+        v-for="(pastItem, index) in playerRadioHistory"
         :key="pastItem.title"
         :ref="'history' + index"
         class="d-flex flex-shrink-0"
       >
         <div class="d-flex flex-shrink-0 align-items-end">
-          <span class="me-2 hour-past-item">{{ displayTimeItem(pastItem) }}</span>
+          <span class="me-2 hour-past-item">{{
+            displayTimeItem(pastItem)
+          }}</span>
           <span class="me-3">{{ displayPreviousItem(pastItem) }}</span>
         </div>
       </div>
     </div>
     <button
-      v-if="indexNotDisplay<=playerRadioHistory.length-1"
+      v-if="indexNotDisplay <= playerRadioHistory.length - 1"
       class="btn btn-transparent text-light saooti-right"
       @click="handleResize(indexNotDisplay)"
     />
@@ -36,100 +32,107 @@
 </template>
 
 <script lang="ts">
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { mapState } from 'pinia';
-import dayjs from 'dayjs';
-import {fetchRadioData} from '../../../mixins/radio/fetchRadioData';
-import { defineComponent } from 'vue';
-import { MediaRadio } from '@/stores/class/general/player';
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import dayjs from "dayjs";
+import { fetchRadioData } from "../../../mixins/radio/fetchRadioData";
+import { defineComponent } from "vue";
+import { MediaRadio } from "@/stores/class/general/player";
 export default defineComponent({
-  name: 'RadioHistory',
+  name: "RadioHistory",
 
-  components: {
-  },
+  components: {},
 
   mixins: [fetchRadioData],
-  emits: ['updateNotListenTime'],
+  emits: ["updateNotListenTime"],
   data() {
     return {
       indexStart: 0 as number,
       indexNotDisplay: 100 as number,
     };
   },
-  
+
   computed: {
-    ...mapState(usePlayerStore, ['playerRadio']),
-    playerRadioHistory(){
+    ...mapState(usePlayerStore, ["playerRadio"]),
+    playerRadioHistory() {
       return this.playerRadio?.history ?? [];
-    }
+    },
   },
-  watch:{
+  watch: {
     playerRadioHistory: {
       deep: true,
-      immediate:true,
-      handler(){
+      immediate: true,
+      handler() {
         this.$nextTick(() => {
           this.handleResize(0);
         });
-      }
+      },
     },
   },
   created() {
-    window.addEventListener('resize', ()=>{this.handleResize(0);});
+    window.addEventListener("resize", () => {
+      this.handleResize(0);
+    });
   },
   unmounted() {
-    window.removeEventListener('resize', ()=>{this.handleResize(0);});
+    window.removeEventListener("resize", () => {
+      this.handleResize(0);
+    });
   },
   mounted() {
     this.handleResize(0);
   },
-  methods:{
-    handleResize(indexAsked:number): void {
-      const historyList = (this.$refs.historyListContainer as HTMLElement);
-      if(null === historyList ||!historyList){
+  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;
       for (let index = 0; index < this.playerRadioHistory.length; index++) {
-        const el = (this.$refs['history' +index] as Array<HTMLElement>)[0];
+        const el = (this.$refs["history" + index] as Array<HTMLElement>)[0];
         if (!el) continue;
-        if(index < this.indexStart && !el.classList.contains('hid')){
-          el.classList.add('hid');
+        if (index < this.indexStart && !el.classList.contains("hid")) {
+          el.classList.add("hid");
           continue;
         }
-        if (index >= this.indexStart && el.classList.contains('hid')) {
-          el.classList.remove('hid');
+        if (index >= this.indexStart && el.classList.contains("hid")) {
+          el.classList.remove("hid");
         }
       }
-      for (let index = this.indexStart + 1; index < this.playerRadioHistory.length; index++) {
-        const el = (this.$refs['history' +index] as Array<HTMLElement>)[0];
+      for (
+        let index = this.indexStart + 1;
+        index < this.playerRadioHistory.length;
+        index++
+      ) {
+        const el = (this.$refs["history" + index] as Array<HTMLElement>)[0];
         if (!el) continue;
-        if (index > this.indexNotDisplay && !el.classList.contains('hid')) {
-          el.classList.add('hid');
+        if (index > this.indexNotDisplay && !el.classList.contains("hid")) {
+          el.classList.add("hid");
           continue;
         }
         const parent = el.parentElement;
-        if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth ) {
+        if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth) {
           this.indexNotDisplay = index;
-          el.classList.add('hid');
+          el.classList.add("hid");
         }
       }
     },
-    displayTimeItem(item: MediaRadio):string{
-      return dayjs(item.startDate).format('HH:mm');
+    displayTimeItem(item: MediaRadio): string {
+      return dayjs(item.startDate).format("HH:mm");
     },
-    displayPreviousItem(item: MediaRadio):string{
-      if(item.podcastId){
+    displayPreviousItem(item: MediaRadio): string {
+      if (item.podcastId) {
         return item.title;
       }
       return this.displayTitle(item);
-    }
-  }
-})
+    },
+  },
+});
 </script>
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .history-list-container {
     display: inline-flex;
     justify-content: flex-start;
@@ -138,9 +141,9 @@ export default defineComponent({
     width: 0;
     position: relative;
   }
-  .hour-past-item{
+  .hour-past-item {
     font-size: 0.8rem;
     color: #dbdbdb;
   }
 }
-</style>
+</style>