@saooti/octopus-sdk 37.0.5 → 37.0.7

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

@@ -1,18 +1,13 @@
 <template>
-  <div
-    class="d-flex align-items-center flex-grow-1 ps-2"
-  >
-    <router-link
-      v-if="isImage && podcastImage"
-      :to="podcastShareUrl"
-    >
+  <div class="d-flex align-items-center flex-grow-1 ps-2">
+    <router-link v-if="isImage && podcastImage" :to="podcastShareUrl">
       <img
-        v-lazy="proxyImageUrl(podcastImage,'48')"
+        v-lazy="proxyImageUrl(podcastImage, '48')"
         width="48"
         height="48"
         :alt="$t('Podcast image')"
         class="player-image"
-      >
+      />
     </router-link>
     <button
       v-if="!playerError"
@@ -20,34 +15,22 @@
       :class="{
         'saooti-play': isPaused,
         'saooti-pause': isPlaying,
-        'p-0':!isPaused&&!isPlaying
+        'p-0': !isPaused && !isPlaying,
       }"
       class="btn play-button-box text-light bg-primary"
       @click="switchPausePlay"
     >
-      <Spinner
-        v-if="!isPaused&&!isPlaying"
-        :small="true"
-      />
+      <ClassicSpinner v-if="!isPaused && !isPlaying" :small="true" />
     </button>
     <div class="text-light player-grow-content">
-      <div 
-        class="d-flex"
-        :class="!radioUrl?'mb-1':''"
-      >
-        <div
-          v-if="playerError"
-          class="text-warning mx-2"
-        >
-          {{ $t('Podcast play error') + ' - ' }}
+      <div class="d-flex" :class="!radioUrl ? 'mb-1' : ''">
+        <div v-if="playerError" class="text-warning mx-2">
+          {{ $t("Podcast play error") + " - " }}
         </div>
         <div class="flex-grow-1 text-truncate">
           {{ podcastTitle }}
         </div>
-        <div
-          v-if="!playerError && !radioUrl"
-          class="hide-phone"
-        >
+        <div v-if="!playerError && !radioUrl" class="hide-phone">
           {{ playedTime }} / {{ totalTime }}
         </div>
       </div>
@@ -60,14 +43,12 @@
         :duration-live-position="durationLivePosition"
         :player-error="playerError"
         :listen-time="listenTime"
-        @updateNotListenTime="$emit('update:notListenTime', $event)"
-      />
-      <RadioProgressBar
-        v-else
+        @update-not-listen-time="$emit('update:notListenTime', $event)"
       />
+      <RadioProgressBar v-else />
     </div>
     <button
-      :title="''!=transcriptText ? $t('View transcript'): $t('Enlarge')"
+      :title="'' != transcriptText ? $t('View transcript') : $t('Enlarge')"
       class="btn play-button-box btn-transparent text-light saooti-up me-0"
       @click="changePlayerLargeVersion"
     />
@@ -84,55 +65,59 @@
   </div>
 </template>
 <script lang="ts">
-import { CommentPodcast } from '@/stores/class/general/comment';
-import { playerDisplay } from '../../mixins/player/playerDisplay';
-import imageProxy from '../../mixins/imageProxy';
-import Spinner from '../Spinner.vue';
-import PlayerTimeline from './PlayerTimeline.vue';
-import { defineAsyncComponent, defineComponent } from 'vue';
-const RadioProgressBar = defineAsyncComponent(() => import('./radio/RadioProgressBar.vue'));
-const PlayerProgressBar = defineAsyncComponent(() => import('./PlayerProgressBar.vue'));
+import { CommentPodcast } from "@/stores/class/general/comment";
+import { playerDisplay } from "../../mixins/player/playerDisplay";
+import imageProxy from "../../mixins/imageProxy";
+import ClassicSpinner from "../ClassicSpinner.vue";
+import PlayerTimeline from "./PlayerTimeline.vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const RadioProgressBar = defineAsyncComponent(
+  () => import("./radio/RadioProgressBar.vue"),
+);
+const PlayerProgressBar = defineAsyncComponent(
+  () => import("./PlayerProgressBar.vue"),
+);
 export default defineComponent({
-  name: 'PlayerCompact',
+  name: "PlayerCompact",
 
   components: {
     PlayerProgressBar,
     RadioProgressBar,
     PlayerTimeline,
-    Spinner
+    ClassicSpinner,
   },
-  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");
+    },
+  },
+});
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
+@import "@scss/_variables.scss";
+.octopus-app {
   .player-grow-content {
     display: flex;
     flex-direction: column;
@@ -167,4 +152,4 @@ export default defineComponent({
     cursor: pointer;
   }
 }
-</style>
+</style>

package/src/components/misc/player/{Player.vue → PlayerComponent.vue}

@@ -7,7 +7,7 @@
     <template v-if="display">
       <audio
         id="audio-player"
-        :src="!playerLive && !playerRadio? audioUrlToPlay: undefined"
+        :src="!playerLive && !playerRadio ? audioUrlToPlay : undefined"
         autoplay
         @timeupdate="onTimeUpdate"
         @ended="onFinished"
@@ -26,8 +26,8 @@
         :percent-live-progress="percentLiveProgress"
         :duration-live-position="durationLivePosition"
         :listen-time="listenTime"
-        @stopPlayer="stopPlayer"
-        @changePlayerLargeVersion="playerUpdateLargeVersion(true)"
+        @stop-player="stopPlayer"
+        @change-player-large-version="playerUpdateLargeVersion(true)"
       />
       <PlayerLarge
         v-else
@@ -38,95 +38,103 @@
         :percent-live-progress="percentLiveProgress"
         :duration-live-position="durationLivePosition"
         :listen-time="listenTime"
-        @stopPlayer="stopPlayer"
-        @changePlayerLargeVersion="playerUpdateLargeVersion(false)"
+        @stop-player="stopPlayer"
+        @change-player-large-version="playerUpdateLargeVersion(false)"
       />
     </template>
   </div>
 </template>
 <script lang="ts">
-import { CommentPodcast } from '@/stores/class/general/comment';
-import { playerLogic } from '../../mixins/player/playerLogic';
-import PlayerCompact from '../player/PlayerCompact.vue';
-import PlayerLarge from '../player/PlayerLarge.vue';
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent } from 'vue';
+import { CommentPodcast } from "@/stores/class/general/comment";
+import { playerLogic } from "../../mixins/player/playerLogic";
+import PlayerCompact from "../player/PlayerCompact.vue";
+import PlayerLarge from "../player/PlayerLarge.vue";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState, mapActions } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'Player',
+  name: "PlayerComponent",
 
   components: {
     PlayerCompact,
-    PlayerLarge
+    PlayerLarge,
   },
-  mixins:[playerLogic],
-  emits: ['hide'],
+  mixins: [playerLogic],
+  emits: ["hide"],
   data() {
     return {
       forceHide: false as boolean,
       listenTime: 0 as number,
       notListenTime: 0 as number,
       lastSend: 0 as number,
-      downloadId: null as string|null,
+      downloadId: null as string | null,
       playerError: false as boolean,
       listenError: false as boolean,
       percentLiveProgress: 0 as number,
       durationLivePosition: 0 as number,
       displayAlertBar: false as boolean,
       comments: [] as Array<CommentPodcast>,
-      audioUrlToPlay: "" as string
+      audioUrlToPlay: "" as string,
     };
   },
   computed: {
-    ...mapState(usePlayerStore, ['playerStatus', 'playerHeight', 'playerLargeVersion']),
-    display(){
-      return 'STOPPED' !== this.playerStatus;
+    ...mapState(usePlayerStore, [
+      "playerStatus",
+      "playerHeight",
+      "playerLargeVersion",
+    ]),
+    display() {
+      return "STOPPED" !== this.playerStatus;
     },
   },
 
   watch: {
     playerHeight(): void {
-      this.$emit('hide', 0 === this.playerHeight);
+      this.$emit("hide", 0 === this.playerHeight);
     },
   },
-  
+
   methods: {
-    ...mapActions(usePlayerStore, ['playerPlay', 'playerUpdateLargeVersion', 'playerChangeStatus']),
+    ...mapActions(usePlayerStore, [
+      "playerPlay",
+      "playerUpdateLargeVersion",
+      "playerChangeStatus",
+    ]),
     onHidden(): void {
       if (this.forceHide) {
         this.playerPlay();
         this.forceHide = false;
       }
     },
-    onPause(){
-      if("PLAYING"===this.playerStatus){
+    onPause() {
+      if ("PLAYING" === this.playerStatus) {
         this.playerChangeStatus(true);
       }
-    }
+    },
   },
-})
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
-.player-container {
-  max-height: 94%;
-  position: sticky;
-  overflow: hidden;
-  z-index: 12;
-  width: 100%;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  transition: height 1s;
-  background: #282828 !important;
-  font-size: 1rem;
+.octopus-app {
+  .player-container {
+    max-height: 94%;
+    position: sticky;
+    overflow: hidden;
+    z-index: 12;
+    width: 100%;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    transition: height 1s;
+    background: #282828 !important;
+    font-size: 1rem;
 
-  @media (max-width: 960px) {
-    .d-flex {
-      flex-wrap: nowrap !important;
+    @media (max-width: 960px) {
+      .d-flex {
+        flex-wrap: nowrap !important;
+      }
     }
   }
 }
-}
-</style>
+</style>

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">
@@ -63,7 +57,7 @@
     <div class="d-flex align-items-center flex-grow-1">
       <button
         title="-15''"
-        class="btn fs-1 bg-transparent text-light saooti-backward"
+        class="btn fs-1 bg-transparent text-light saooti-recule"
         @click="seekClick(-15)"
       />
       <button
@@ -72,94 +66,100 @@
         :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''"
-        class="btn fs-1 bg-transparent text-light saooti-forward"
+        class="btn fs-1 bg-transparent text-light saooti-avance"
         @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,8 +178,12 @@ export default defineComponent({
     flex-shrink: 0;
     cursor: pointer;
   }
-  .transcript-bg{
+  .saooti-recule,
+  .saooti-avance {
+    font-size: 2rem !important;
+  }
+  .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>