@saooti/octopus-sdk 30.0.7 → 30.0.8

package/src/components/misc/Player.vue

@@ -10,7 +10,7 @@
     >
       <div
         v-if="isBarTop"
-        class="progress secondary-bg c-hand"
+        class="progress c-hand"
         @mouseup="seekTo"
       >
         <div
@@ -25,12 +25,12 @@
       </div>
       <div
         v-if="display"
-        class="d-flex align-items-center justify-center flex-grow pe-5 ps-5"
+        class="d-flex align-items-center flex-grow-1 px-5"
       >
         <audio
           v-if="!live"
           id="audio-player"
-          :src="audioUrl"
+          :src="!live? audioUrl: undefined"
           autoplay
           @timeupdate="onTimeUpdate"
           @ended="onFinished"
@@ -38,16 +38,6 @@
           @durationChange="onTimeUpdate"
           @error="onError"
         />
-        <audio
-          v-else
-          id="audio-player"
-          src
-          @timeupdate="onTimeUpdate"
-          @ended="onFinished"
-          @playing="onPlay"
-          @durationChange="onTimeUpdate"
-          @error="onError"
-        />
         <PlayerButtons
           :player-error="playerError"
         />
@@ -163,11 +153,11 @@ export default defineComponent({
     live: {
       deep: true,
       async handler(){
-      this.hlsReady = false;
-      this.setDownloadId(null);
-      this.listenError = false;
-      await this.playLive();
-      this.initComments();
+        this.hlsReady = false;
+        this.setDownloadId(null);
+        this.listenError = false;
+        await this.playLive();
+        this.initComments();
       }
     },
     playerHeight(): void {
@@ -176,9 +166,9 @@ export default defineComponent({
     podcast: {
       deep: true,
       handler(){
-      this.setDownloadId(null);
-      this.listenError = false;
-      this.initComments();
+        this.setDownloadId(null);
+        this.listenError = false;
+        this.initComments();
       }
     },
     async listenTime(newVal): Promise<void> {
@@ -479,7 +469,6 @@ export default defineComponent({
   flex-direction: column;
   transition: height 1s;
   background: #282828 !important;
-  max-width: 100%;
   font-size: 1rem;
 
   .player-progress-border {
@@ -487,13 +476,10 @@ export default defineComponent({
     width: 3px;
     background: black;
   }
-}
-@media (max-width: 960px) {
-  .player-container {
+
+  @media (max-width: 960px) {
     .d-flex {
-      @media (max-width: 960px) {
-        flex-wrap: nowrap !important;
-      }
+      flex-wrap: nowrap !important;
     }
   }
 }

package/src/components/misc/PlayerButtons.vue

@@ -6,26 +6,19 @@
     <img
       :src="podcastImage"
       :alt="$t('Podcast image')"
-      class="player-image c-hand"
+      class="player-image"
     >
   </router-link>
   <div
     v-if="!playerError"
-    class="play-button-box"
-    :class="{
-      'primary-bg': !isLoading,
-      'text-light': !isLoading,
-    }"
+    class="play-button-box text-light primary-bg"
     @click="switchPausePlay"
   >
     <div
-      class="text-light"
       :aria-label="$t('Play')"
       :class="{
-        saooti: isPlaying || isPaused,
         'saooti-play2-bounty': isPaused,
         'saooti-pause-bounty': isPlaying,
-        loading: isLoading,
       }"
     />
   </div>
@@ -35,7 +28,7 @@
     @click="stopPlayer"
   >
     <div
-      class="text-light saooti-stop-bounty"
+      class="saooti-stop-bounty"
       :aria-label="$t('Stop')"
     />
   </div>
@@ -54,11 +47,6 @@ export default defineComponent({
     playerError: { default: false, type: Boolean},
   },
 
-  data() {
-    return {
-    };
-  },
-
   computed: {
     isPlaying(): boolean {
       return 'PLAYING' === this.$store.state.player.status;
@@ -66,9 +54,6 @@ export default defineComponent({
     isPaused(): boolean {
       return 'PAUSED' === this.$store.state.player.status;
     },
-    isLoading(): boolean {
-      return 'LOADING' === this.$store.state.player.status;
-    },
     isImage(): boolean {
       return (state.player.image as boolean);
     },
@@ -131,7 +116,6 @@ export default defineComponent({
     stopPlayer(): void {
       this.$store.commit('playerPlayPodcast');
     },
-    
     onPlay(): void {
       this.$store.commit('playerPause', false);
     },
@@ -143,6 +127,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.player-image {
+  border-radius: 0.2rem;
+  height: 2.4rem;
+  width: 2.4rem;
+  cursor: pointer;
+  /** PHONES*/
+  @media (max-width: 450px) {
+    height: 1.8rem;
+    width: 1.8rem;
+  }
+}
 .play-button-box {
   height: 2.5rem;
   width: 2.5rem;
@@ -156,22 +151,4 @@ export default defineComponent({
   cursor: pointer;
 }
 
-.player-container {
-  .player-image {
-    border-radius: 0.2rem;
-    height: 2.4rem;
-    width: 2.4rem;
-  }
-
-}
-/** PHONES*/
-@media (max-width: 450px) {
-  .player-container {
-    .player-image {
-      height: 2rem;
-      width: 2rem;
-    }
-  }
-}
-
 </style>

package/src/components/misc/PlayerProgressBar.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="text-light player-grow-content">
-    <div class="d-flex">
+    <div class="d-flex mb-1">
       <div
         v-if="playerError"
-        class="text-warning player-title ms-2 me-2"
+        class="text-warning mx-2"
       >
         {{ $t('Podcast play error') + ' - ' }}
       </div>
-      <div class="flex-grow player-title">
+      <div class="flex-grow-1 text-ellipsis">
         {{ podcastTitle }}
       </div>
       <div
-        v-if="!playerError"
-        v-show="!isBarTop"
+        v-if="!playerError && !isBarTop"
         class="hide-phone"
       >
         {{ playedTime }} / {{ totalTime }}
@@ -21,12 +20,11 @@
     <div
       v-if="!playerError"
       v-show="!isBarTop"
-      class="progress c-hand custom-bg-darkgrey"
-      style="height: 3px;"
+      class="progress c-hand"
       @mouseup="seekTo"
     >
       <div
-        class="progress-bar custom-bg-grey"
+        class="progress-bar bg-light"
         role="progressbar"
         aria-valuenow="0"
         aria-valuemin="0"
@@ -79,12 +77,7 @@ export default defineComponent({
     notListenTime: { default: 0, type: Number},
   },
   emits: ['update:notListenTime'],
-
-  data() {
-    return {
-    };
-  },
-
+  
   computed: {
     isEmissionName(): boolean {
       return (state.player.emissionName as boolean);
@@ -153,10 +146,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.player-container {
+.player-grow-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  font-size: 0.8rem;
   .progress {
-    align-items: flex-end;
-    height: 10px;
+    height: 4px;
     position: relative;
   }
   .progress-bar-duration {
@@ -166,38 +164,5 @@ export default defineComponent({
     height: 4px;
     position: absolute;
   }
-
-  .progress.custom-bg-darkgrey {
-    background: #555;
-  }
-
-  .progress-bar.custom-bg-grey {
-    background: #e9ecef;
-  }
-
-  .player-title,
-  .hide-phone {
-    font-size: 0.8rem;
-    margin: 0 0 5px 0;
-  }
-  .player-grow-content {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    flex-shrink: 1;
-    flex-basis: 20px;
-    overflow: hidden;
-  }
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .player-container {
-    .player-title {
-      font-size: 12px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
 }
 </style>