@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -5,28 +5,15 @@
     @close="closePopup"
   >
     <template #body>
-      <Nav
-        v-model:activeTab="activeTab"
-        :tab-number="tabs.length"
-      >
-        <template
-          v-for="(tab, index) in tabs"
-          #[index]
-        >
+      <ClassicNav v-model:activeTab="activeTab" :tab-number="tabs.length">
+        <template v-for="(tab, index) in tabs" #[index]>
           {{ tab }}
         </template>
-        <template 
-          #tab0
-        >
+        <template #tab0>
           <p>{{ embedLink }}</p>
-          <div
-            class="saooti-copy"
-            @click="onCopyCode(embedLink, afterCopy)"
-          />
+          <div class="saooti-copy" @click="onCopyCode(embedLink, afterCopy)" />
         </template>
-        <template 
-          #tab1
-        >
+        <template #tab1>
           <div class="d-flex flex-column flex-grow-1">
             <div class="d-flex justify-content-between align-items-center">
               <p>{{ embedlyLink }}</p>
@@ -38,88 +25,85 @@
             <QrCode :url="embedlyLink" />
           </div>
         </template>
-        <template
-          v-if="directLink"
-          #tab2
-        >
+        <template v-if="directLink" #tab2>
           <p>{{ directLink.audioUrl }}</p>
           <div
             class="saooti-copy"
             @click="onCopyCode(directLink.audioUrl, snackbarRef)"
           />
         </template>
-      </Nav>
+      </ClassicNav>
     </template>
     <template #footer>
-      <button
-        class="btn btn-primary m-1"
-        @click="closePopup"
-      >
-        {{ $t('Close') }}
+      <button class="btn btn-primary m-1" @click="closePopup">
+        {{ $t("Close") }}
       </button>
     </template>
   </ClassicModal>
-  <Snackbar
-    ref="snackbar"
-    position="bottom-left"
-  />
+  <SnackBar ref="snackbar" position="bottom-left" />
 </template>
 
 <script lang="ts">
-import Snackbar from '../Snackbar.vue';
-import displayMethods from '../../mixins/displayMethods';
-import ClassicModal from '../modal/ClassicModal.vue';
-import Nav from '../Nav.vue';
-import QrCode from '../../display/sharing/QrCode.vue';
-import { defineComponent } from 'vue'
-import { Podcast } from '@/stores/class/general/podcast';
+import SnackBar from "../SnackBar.vue";
+import displayMethods from "../../mixins/displayMethods";
+import ClassicModal from "../modal/ClassicModal.vue";
+import ClassicNav from "../ClassicNav.vue";
+import QrCode from "../../display/sharing/QrCode.vue";
+import { defineComponent } from "vue";
+import { Podcast } from "@/stores/class/general/podcast";
 export default defineComponent({
-  name: 'ShareModalPlayer',
+  name: "ShareModalPlayer",
 
   components: {
-    Snackbar,
+    SnackBar,
     QrCode,
     ClassicModal,
-    Nav
+    ClassicNav,
   },
   mixins: [displayMethods],
   props: {
-    embedLink: { default: undefined, type: String},
-    embedlyLink: { default: undefined, type: String},
-    directLink: { default: undefined, type: Object as ()=>Podcast},
+    embedLink: { default: undefined, type: String },
+    embedlyLink: { default: undefined, type: String },
+    directLink: { default: undefined, type: Object as () => Podcast },
   },
-  emits: ['close'],
+  emits: ["close"],
   data() {
     return {
       activeTab: 0 as number,
     };
   },
-  computed:{
-    tabs(): Array<string>{
-      if(this.directLink){
-        return [this.$t('Embed link'),this.$t('Embedly link'),this.$t('Direct link')];
+  computed: {
+    tabs(): Array<string> {
+      if (this.directLink) {
+        return [
+          this.$t("Embed link"),
+          this.$t("Embedly link"),
+          this.$t("Direct link"),
+        ];
       }
-      return [this.$t('Embed link'),this.$t('Embedly link')];
-    }
+      return [this.$t("Embed link"), this.$t("Embedly link")];
+    },
   },
   methods: {
     closePopup(): void {
-      this.$emit('close');
+      this.$emit("close");
+    },
+    afterCopy(): void {
+      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+        this.$t("Data in clipboard"),
+      );
     },
-    afterCopy(): void{
-      (this.$refs.snackbar as InstanceType<typeof Snackbar>).open(this.$t('Data in clipboard'));
-    }
   },
-})
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
-  #share-modal{
+.octopus-app {
+  #share-modal {
     .saooti-copy {
       cursor: pointer;
       align-self: center;
     }
   }
 }
-</style>
+</style>

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>