@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/misc/Player.vue

@@ -1,17 +1,17 @@
 <template>
   <div
     class="w-100 transition-height bg-dark"
-    v-bind:style="{ height: playerHeight }"
+    :style="{ height: playerHeight }"
   >
     <div
       class="player-container"
-      v-bind:style="{ height: playerHeight }"
+      :style="{ height: playerHeight }"
       @transitionend="onHidden"
     >
       <div
+        v-if="isBarTop"
         class="progress secondary-bg c-hand"
         @mouseup="seekTo"
-        v-if="isBarTop"
       >
         <div
           class="progress-bar primary-bg"
@@ -20,25 +20,26 @@
           aria-valuemin="0"
           aria-valuemax="100"
           :style="'width: ' + percentProgress + '%'"
-        ></div>
-        <div class="player-progress-border"></div>
+        />
+        <div class="player-progress-border" />
       </div>
       <div
-        class="d-flex align-items-center justify-center flex-grow pr-5 pl-5"
         v-if="display"
+        class="d-flex align-items-center justify-center flex-grow pe-5 ps-5"
       >
         <audio
+          v-if="!live"
           id="audio-player"
-          v-bind:src="audioUrl"
+          :src="audioUrl"
           autoplay
           @timeupdate="onTimeUpdate"
           @ended="onFinished"
           @playing="onPlay"
           @durationChange="onTimeUpdate"
           @error="onError"
-          v-if="!live"
         />
         <audio
+          v-else
           id="audio-player"
           src
           @timeupdate="onTimeUpdate"
@@ -46,20 +47,22 @@
           @playing="onPlay"
           @durationChange="onTimeUpdate"
           @error="onError"
-          v-else
         />
-        <router-link :to="podcastShareUrl" v-if="isImage && podcastImage">
+        <router-link
+          v-if="isImage && podcastImage"
+          :to="podcastShareUrl"
+        >
           <img
-            v-bind:src="podcastImage"
+            :src="podcastImage"
             :alt="$t('Podcast image')"
             class="player-image c-hand"
-          />
+          >
         </router-link>
 
         <div
           v-if="!playerError"
           class="play-button-box"
-          v-bind:class="{
+          :class="{
             'primary-bg': !isLoading,
             'text-light': !isLoading,
           }"
@@ -68,13 +71,13 @@
           <div
             class="text-light"
             :aria-label="$t('Play')"
-            v-bind:class="{
+            :class="{
               saooti: isPlaying || isPaused,
               'saooti-play2-bounty': isPaused,
               'saooti-pause-bounty': isPlaying,
               loading: isLoading,
             }"
-          ></div>
+          />
         </div>
         <div
           v-if="(isPlaying || isPaused) && (media || isStop)"
@@ -84,24 +87,33 @@
           <div
             class="text-light saooti-stop-bounty"
             :aria-label="$t('Stop')"
-          ></div>
+          />
         </div>
         <div class="text-light player-grow-content">
           <div class="d-flex">
-            <div class="text-warning player-title ml-2 mr-2" v-if="playerError">
+            <div
+              v-if="playerError"
+              class="text-warning player-title ms-2 me-2"
+            >
               {{ $t('Podcast play error') + ' - ' }}
             </div>
-            <div class="flex-grow player-title">{{ podcastTitle }}</div>
-            <div v-if="!playerError" v-show="!isBarTop" class="hide-phone">
+            <div class="flex-grow player-title">
+              {{ podcastTitle }}
+            </div>
+            <div
+              v-if="!playerError"
+              v-show="!isBarTop"
+              class="hide-phone"
+            >
               {{ playedTime }} / {{ totalTime }}
             </div>
           </div>
           <div
-            class="progress c-hand custom-bg-darkgrey"
-            @mouseup="seekTo"
-            style="height: 3px;"
             v-if="!playerError"
             v-show="!isBarTop"
+            class="progress c-hand custom-bg-darkgrey"
+            style="height: 3px;"
+            @mouseup="seekTo"
           >
             <div
               class="progress-bar custom-bg-grey"
@@ -110,7 +122,7 @@
               aria-valuemin="0"
               aria-valuemax="100"
               :style="'width: ' + percentLiveProgress + '%'"
-            ></div>
+            />
             <div
               class="progress-bar primary-bg"
               role="progressbar"
@@ -118,294 +130,157 @@
               aria-valuemin="0"
               aria-valuemax="100"
               :style="'width: ' + percentProgress + '%'"
-            ></div>
+            />
             <div
-              class="progress-bar progress-bar-duration bg-danger"
               v-if="displayAlertBar"
+              class="progress-bar progress-bar-duration bg-danger"
               :style="'left: ' + durationLivePosition + '%'"
-            ></div>
+            />
           </div>
           <CommentPlayer
             v-if="showTimeline"
-            :totalTime="totalSecondes"
+            :total-time="totalSecondes"
             :comments="comments"
           />
         </div>
         <div
+          v-if="0 !== comments.length && !isPodcastmaker"
           class="timeline-button"
-          v-if="0 !== comments.length"
           @click="showTimeline = !showTimeline"
         >
           <div
             class="saooti-arrow_down saooti-arrow_down-margin"
             :class="showTimeline ? '' : 'arrow-transform'"
-          ></div>
+          />
           <div>Timeline</div>
         </div>
         <div
-          class="d-flex text-light align-items-center hide-phone"
           v-if="isClock"
+          class="d-flex text-light align-items-center hide-phone"
         >
-          <div class="saooti-clock-stud m-2"></div>
+          <div class="saooti-clock-stud m-2" />
           <div>{{ actualTime }}</div>
         </div>
       </div>
     </div>
   </div>
 </template>
-<style lang="scss">
-@import '../../sass/_variables.scss';
-
-.play-button-box {
-  height: 2.5rem;
-  width: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 0.5rem;
-  border-radius: 50%;
-  font-size: 1.2rem;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.player-container {
-  position: fixed;
-  overflow: hidden;
-  z-index: 12;
-  width: 100%;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  transition: height 1s;
-  background: #282828 !important;
-  max-width: 100%;
-  font-size: 1rem;
-
-  .player-image {
-    border-radius: 0.2rem;
-    height: 2.4rem;
-    width: 2.4rem;
-  }
-  .player-progress-border {
-    height: 10px;
-    width: 3px;
-    background: black;
-  }
-  .progress {
-    align-items: flex-end;
-    height: 10px;
-    position: relative;
-  }
-  .progress-bar-duration {
-    width: 10px;
-  }
-  .progress-bar {
-    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;
-  }
-  .player-title {
-    font-size: 0.8rem;
-    margin: 0 0 5px 0;
-  }
-
-  .hide-phone {
-    font-size: 0.8rem;
-    margin: 0 0 5px 0;
-  }
-  .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;
-    }
-  }
-}
-/** PHONES*/
-@media (max-width: 450px) {
-  .player-container {
-    .player-image {
-      height: 2rem;
-      width: 2rem;
-    }
-  }
-}
-
-@media (max-width: 960px) {
-  .player-container {
-    .d-flex {
-      @media (max-width: 960px) {
-        flex-wrap: nowrap !important;
-      }
-    }
-    .player-title {
-      font-size: 12px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}
-</style>
 
 <script lang="ts">
 import { mapState } from 'vuex';
 import { state } from '../../store/paramStore';
 import DurationHelper from '../../helper/duration';
-import CommentPlayer from '../display/comments/CommentPlayer.vue';
 const octopusApi = require('@saooti/octopus-api');
-import Hls from 'hls.js';
+let Hls: any= null;
 
 const moment = require('moment');
 //const axios = require("axios");
-
-import { defineComponent } from 'vue'
+import { CommentPodcast } from '@/store/class/comment';
+import { cookies } from '../mixins/functions';
+import { StoreState } from '@/store/typeAppStore';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const CommentPlayer = defineAsyncComponent(() => import('../display/comments/CommentPlayer.vue'));
 export default defineComponent({
   name: 'Player',
 
   components: {
     CommentPlayer,
   },
-
+  mixins:[cookies],
   emits: ['hide'],
 
-  mounted() {
-    moment.locale('fr');
-    if (this.isClock) {
-      setInterval(() => {
-        this.actualTime = moment(new Date()).format('HH:mm:ss');
-      }, 1000);
-    }
-    window.addEventListener('beforeunload', this.endListeningProgress);
-    this.watchPlayerStatus();
-  },
-
   data() {
     return {
-      forceHide: false,
-      actualTime: '',
-      listenTime: 0,
-      notListenTime: 0,
-      lastSend: 0,
-      downloadId: null,
-      playerError: false,
-      listenError: false,
-      percentLiveProgress: 0,
-      durationLivePosition: 0,
-      displayAlertBar: false,
-      hlsReady: false,
-      comments: [] as any,
-      showTimeline: false,
+      forceHide: false as boolean,
+      actualTime: '' as string,
+      listenTime: 0 as number,
+      notListenTime: 0 as number,
+      lastSend: 0 as number,
+      downloadId: null as any,
+      playerError: false as boolean,
+      listenError: false as boolean,
+      percentLiveProgress: 0 as number,
+      durationLivePosition: 0 as number,
+      displayAlertBar: false as boolean,
+      hlsReady: false as boolean,
+      comments: [] as Array<CommentPodcast>,
+      showTimeline: false as boolean,
     };
   },
 
   computed: {
-    isPlaying():boolean {
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    isPlaying(): boolean {
       return 'PLAYING' === this.status;
     },
-    isPaused():boolean {
+    isPaused(): boolean {
       return 'PAUSED' === this.status;
     },
-    isLoading():boolean {
+    isLoading(): boolean {
       return 'LOADING' === this.status;
     },
-    isImage() {
+    isImage(): string {
       return state.player.image;
     },
-    isEmissionName() {
+    isEmissionName(): string {
       return state.player.emissionName;
     },
-    isClock() {
+    isClock(): boolean {
       return state.player.clock;
     },
-    isBarTop() {
+    isBarTop(): boolean {
       return state.player.barTop;
     },
     ...mapState({
-      display: (state:any) => 'STOPPED' !== state.player.status,
-      playerHeight(state:any) {
+      display: (state: StoreState) => 'STOPPED' !== state.player.status,
+      playerHeight(state: StoreState) {
         if ('STOPPED' === state.player.status || this.forceHide) return 0;
         if (window.innerWidth > 450 && !this.showTimeline) return '5rem';
         if (window.innerWidth > 450 && this.showTimeline) return '6rem';
         return '3.5rem';
       },
-      status: (state:any) => state.player.status,
-      podcast: (state:any) => state.player.podcast,
-      media: (state:any) => state.player.media,
-      live: (state:any) => state.player.live,
-      volume: (state:any) => state.player.volume,
-      isStop: (state:any) => state.player.stop,
-      commentsLoaded: (state:any) => state.comments.loadedComments,
-
-      podcastImage: (state:any) => {
+      status: (state: StoreState) => state.player.status,
+      podcast: (state: StoreState) => state.player.podcast,
+      media: (state: StoreState) => state.player.media,
+      live: (state: StoreState) => state.player.live,
+      volume: (state: StoreState) => state.player.volume,
+      isStop: (state: StoreState) => state.player.stop,
+      commentsLoaded: (state: StoreState) => state.comments.loadedComments,
+      podcastImage: (state: StoreState) => {
         if (state.player.podcast) return state.player.podcast.imageUrl;
         return '';
       },
-
-      playedTime: (state:any) => {
-        if (state.player.elapsed > 0 && state.player.total > 0) {
+      playedTime: (state: StoreState) => {
+        if (state.player.elapsed && state.player.elapsed > 0 && state.player.total && state.player.total > 0) {
           return DurationHelper.formatDuration(
             Math.round(state.player.elapsed * state.player.total)
           );
         }
         return '--:--';
       },
-
-      percentProgress: (state:any) => {
+      percentProgress: (state: StoreState) => {
+        if(!state.player.elapsed){return 0;}
         return state.player.elapsed * 100;
       },
-
-      totalTime: (state:any) => {
-        if (state.player.elapsed > 0 && state.player.total > 0)
+      totalTime: (state: StoreState) => {
+        if (state.player.elapsed && state.player.elapsed > 0 && state.player.total && state.player.total > 0)
           return DurationHelper.formatDuration(Math.round(state.player.total));
         return '--:--';
       },
-      totalSecondes: (state:any) => state.player.total,
+      totalSecondes: (state: StoreState) => state.player.total,
     }),
-
-    audioUrl():any {
+    audioUrl(): string {
       if (this.media) return this.media.audioUrl;
       if (!this.podcast) return '';
       if (!this.podcast.availability.visibility)
         return this.podcast.audioStorageUrl;
       if (this.listenError) return this.podcast.audioStorageUrl;
-      let parameters = [];
+      const parameters = [];
       parameters.push('origin=octopus');
       parameters.push('cookieName=player_' + this.podcast.podcastId);
+      parameters.push('listenerId='+this.getListenerId());
       if (
         this.$store.state.authentication &&
         this.$store.state.authentication.organisationId
@@ -416,8 +291,7 @@ export default defineComponent({
       }
       return this.podcast.audioUrl + '?' + parameters.join('&');
     },
-
-    podcastShareUrl():any {
+    podcastShareUrl(): any {
       if (this.podcast) {
         return {
           name: 'podcast',
@@ -427,8 +301,7 @@ export default defineComponent({
       }
       return '';
     },
-
-    podcastTitle():string {
+    podcastTitle(): string {
       if (this.podcast) {
         if (this.isEmissionName)
           return this.emissionName + ' - ' + this.podcast.title;
@@ -442,23 +315,84 @@ export default defineComponent({
       }
       return '';
     },
-
-    emissionName():string {
+    emissionName(): string {
       if (this.podcast) return this.podcast.emission.name;
       return '';
     },
-
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
   },
 
+  watch: {
+    async live(): Promise<void> {
+      this.hlsReady = false;
+      this.setDownloadId(null);
+      this.listenError = false;
+      await this.playLive();
+      this.initComments();
+    },
+    playerHeight(): void {
+      this.$emit('hide', 0 === this.playerHeight ? true : false);
+    },
+    podcast(): void {
+      this.setDownloadId(null);
+      this.listenError = false;
+      this.initComments();
+    },
+    async listenTime(newVal): Promise<void> {
+      if (!this.podcast && !this.live) {
+        //Nothing can be done there is no listen time
+        return;
+      }
+      if (!this.getDownloadId()) {
+        //nothing can be done there is no downloadId
+        return;
+      }
+      if (newVal - this.lastSend < 10) {
+        //Last send is too recent, do nothing
+        return;
+      }
+      this.lastSend = newVal;
+      await octopusApi.updatePlayerTime(
+        this.getDownloadId(),
+        Math.round(newVal)
+      );
+    },
+    commentsLoaded(): void {
+      this.initComments(true);
+    },
+  },
+
+  mounted() {
+    moment.locale('fr');
+    if (this.isClock) {
+      setInterval(() => {
+        this.actualTime = moment(new Date()).format('HH:mm:ss');
+      }, 1000);
+    }
+    window.addEventListener('beforeunload', this.endListeningProgress);
+    this.watchPlayerStatus();
+  },
+  
   methods: {
-    watchPlayerStatus() {
+    getListenerId(): string{
+      let listenerId = this.getCookie("octopus_listenerId");
+      if(!listenerId){
+        listenerId = new Date().valueOf().toString() + Math.random();
+        let domain: any = /\.(.+)/.exec(window.location.host);
+        if(/\.(.+)/.exec(window.location.host)){
+          domain = domain[1];
+        }
+        this.setCookie("octopus_listenerId", listenerId, ';domain='+domain);
+      }
+      return listenerId;
+    },
+    watchPlayerStatus(): void {
       this.$store.watch(
-        (state:any) => state.player.status,
-        (newValue:any) => {
-          const audioPlayer:any = document.querySelector('#audio-player');
+        (state: StoreState) => state.player.status,
+        (newValue: string) => {
+          const audioPlayer: any = document.querySelector('#audio-player');
           if (!audioPlayer) return;
           if (this.live && !this.hlsReady) {
             audioPlayer.pause();
@@ -474,57 +408,45 @@ export default defineComponent({
         }
       );
     },
-    getDownloadId() {
-      //TODO 
-      return undefined;
-      /* return this._downloadId; */
+    getDownloadId(): any {
+      return this.downloadId;
     },
-
-    setDownloadId(newValue?: any) {
+    setDownloadId(newValue?: any): void {
       this.endListeningProgress();
-      //TODO 
-      console.log(newValue);
-      /* this._downloadId = newValue; */
+      this.downloadId = newValue;
     },
-
-    onError() {
+    onError(): void {
       if (this.podcast && !this.listenError) {
         this.listenError = true;
       } else if (this.podcast || this.media) {
         this.playerError = true;
       }
     },
-
-    switchPausePlay() {
-      const audioPlayer:any = document.querySelector('#audio-player');
+    switchPausePlay(): void {
+      const audioPlayer: any = document.querySelector('#audio-player');
       if (audioPlayer.paused) {
         this.onPlay();
       } else {
         this.onPause();
       }
     },
-
-    stopPlayer() {
+    stopPlayer(): void {
       this.$store.commit('playerPlayPodcast');
     },
-
-    seekTo(event: { currentTarget: { getBoundingClientRect: () => any; clientWidth: any; }; clientX: number; }) {
-      const audioPlayer:any = document.querySelector('#audio-player');
+    seekTo(event: { currentTarget: { getBoundingClientRect: () => any; clientWidth: any }; clientX: number }): void {
+      const audioPlayer: any = document.querySelector('#audio-player');
       const rect = event.currentTarget.getBoundingClientRect();
       const barWidth = event.currentTarget.clientWidth;
       const x = event.clientX - rect.left; //x position within the element.
-
       const percentPosition = x / barWidth;
       if (percentPosition * 100 >= this.percentLiveProgress) return;
-
-      const seekTime = this.$store.state.player.total! * percentPosition;
+      const seekTime = this.$store.state.player.total * percentPosition;
       if (this.podcast || this.live) {
         this.notListenTime = seekTime - this.listenTime;
       }
       audioPlayer.currentTime = seekTime;
     },
-
-    onTimeUpdate(event: { currentTarget: { currentTime: number; duration: any; }; }) {
+    onTimeUpdate(event: { currentTarget: { currentTime: number; duration: any } }): void {
       if (this.podcast || this.live) {
         if (!this.getDownloadId()) {
           this.loadDownloadId();
@@ -543,10 +465,8 @@ export default defineComponent({
       }
       const streamDuration = event.currentTarget.duration;
       if (!streamDuration) return;
-
       const playerCurrentTime = event.currentTarget.currentTime;
       if (!playerCurrentTime) return;
-
       if (!this.live) {
         this.displayAlertBar = false;
         this.percentLiveProgress = 100;
@@ -554,7 +474,6 @@ export default defineComponent({
         this.$store.commit('playerElapsed', playerCurrentTime / streamDuration);
         return;
       }
-
       const scheduledDuration = this.live.duration / 1000;
       if (scheduledDuration > streamDuration) {
         this.displayAlertBar = false;
@@ -572,32 +491,27 @@ export default defineComponent({
         this.$store.commit('playerElapsed', playerCurrentTime / streamDuration);
       }
     },
-
-    onPlay() {
+    onPlay(): void {
       this.$store.commit('playerPause', false);
     },
-
-    onPause() {
+    onPause(): void {
       this.$store.commit('playerPause', true);
     },
-
-    onFinished() {
+    onFinished(): void {
       this.setDownloadId(null);
       if (this.live) {
-        let audio:any = document.getElementById('audio-player');
+        const audio: any = document.getElementById('audio-player');
         audio.src = '';
       }
       this.forceHide = true;
     },
-
-    onHidden() {
+    onHidden(): void {
       if (this.forceHide) {
         this.$store.commit('playerPlayPodcast');
         this.forceHide = false;
       }
     },
-
-    loadDownloadId() {
+    loadDownloadId(): void {
       if (!this.podcast) return;
       const matching_cookies = document.cookie
         .split(';')
@@ -606,14 +520,14 @@ export default defineComponent({
           return _return.map(item => item.trim());
         })
         .filter(item => {
+          if(!this.podcast){return '';}
           return 'player_' + this.podcast.podcastId === item[0];
         });
       if (1 === matching_cookies.length) {
         this.setDownloadId(matching_cookies[0][1]);
       }
     },
-
-    async endListeningProgress() {
+    async endListeningProgress(): Promise<void> {
       if (!this.getDownloadId()) return;
       await octopusApi.updatePlayerTime(
         this.getDownloadId(),
@@ -624,13 +538,21 @@ export default defineComponent({
       this.lastSend = 0;
       this.listenTime = 0;
     },
-
-    async initHls(hlsStreamUrl: string) {
-      return new Promise<void>((resolve, reject) => {
+    async initHls(hlsStreamUrl: string): Promise<void> {
+      return new Promise<void>(async(resolve, reject) => {
+        if(null === Hls){
+          //TODO -> Version light min quand ce sera possible
+          await import('hls.js/dist/hls.js').then((hlsLibrary) => {
+            Hls = hlsLibrary.default;
+          })
+           await import('hls.js').then((hlsLibrary) => {
+            Hls = hlsLibrary.default;
+          })
+        }
         if (!Hls.isSupported()) {
           reject('Hls is not supported ! ');
         }
-        var hls = new Hls();
+        const hls = new Hls();
         hls.on(Hls.Events.MANIFEST_PARSED, async () => {
           let downloadId = null;
           try {
@@ -648,7 +570,7 @@ export default defineComponent({
             console.log('ERROR downloadId');
           }
           this.hlsReady = true;
-          let audio:any = document.getElementById('audio-player');
+          const audio: any = document.getElementById('audio-player');
           hls.attachMedia(audio);
           await audio.play();
           this.onPlay();
@@ -660,10 +582,9 @@ export default defineComponent({
         hls.loadSource(hlsStreamUrl);
       });
     },
-
-    async playLive() {
+    async playLive(): Promise<void> {
       if (!this.live) return;
-      let hlsStreamUrl =
+      const hlsStreamUrl =
         state.podcastPage.hlsUri +
         'stream/dev.' +
         this.live.conferenceId +
@@ -677,8 +598,7 @@ export default defineComponent({
         }, 1000);
       }
     },
-
-    editRight(organisation: any) {
+    editRight(organisation: any): boolean {
       if (
         (state.generalParameters.isCommments &&
           this.organisationId === organisation) ||
@@ -687,8 +607,7 @@ export default defineComponent({
         return true;
       return false;
     },
-
-    async initComments(refresh = false) {
+    async initComments(refresh = false): Promise<void> {
       let podcastId, organisation;
       if (this.podcast) {
         podcastId = this.podcast.podcastId;
@@ -706,7 +625,7 @@ export default defineComponent({
       }
       let first = 0;
       let count = 0;
-      let size = 50;
+      const size = 50;
       if (
         podcastId &&
         this.$store.state.comments.actualPodcastId === podcastId
@@ -727,66 +646,151 @@ export default defineComponent({
       )
         return;
       while (0 === first || this.comments.length < count) {
-        let param:any = {
+        const param: any = {
           first: first,
           size: size,
           podcastId: podcastId,
         };
         if (!this.editRight(organisation)) {
-          param.status = 'Valid';
+          param.status = ['Valid'];
         }
         const data = await octopusApi.fetchRootComments(param);
         first += size;
         count = data.totalElements;
-        this.comments = this.comments.concat(data.content).filter((c: null) => {
+        this.comments = this.comments.concat(data.content).filter((c: CommentPodcast) => {
           return null !== c;
         });
       }
     },
   },
+})
+</script>
 
-  watch: {
-    async live() {
-      this.hlsReady = false;
-      this.setDownloadId(null);
-      this.listenError = false;
-      await this.playLive();
-      this.initComments();
-    },
+<style lang="scss">
+@import '../../sass/_variables.scss';
 
-    playerHeight(newVal) {
-      this.$emit('hide', 0 === newVal ? true : false);
-    },
+.play-button-box {
+  height: 2.5rem;
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0.5rem;
+  border-radius: 50%;
+  font-size: 1.2rem;
+  flex-shrink: 0;
+  cursor: pointer;
+}
 
-    podcast() {
-      this.setDownloadId(null);
-      this.listenError = false;
-      this.initComments();
-    },
+.player-container {
+  position: fixed;
+  overflow: hidden;
+  z-index: 12;
+  width: 100%;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  transition: height 1s;
+  background: #282828 !important;
+  max-width: 100%;
+  font-size: 1rem;
 
-    async listenTime(newVal) {
-      if (!this.podcast && !this.live) {
-        //Nothing can be done there is no listen time
-        return;
-      }
-      if (!this.getDownloadId()) {
-        //nothing can be done there is no downloadId
-        return;
-      }
-      if (newVal - this.lastSend < 10) {
-        //Last send is too recent, do nothing
-        return;
-      }
-      this.lastSend = newVal;
-      await octopusApi.updatePlayerTime(
-        this.getDownloadId(),
-        Math.round(newVal)
-      );
-    },
+  .player-image {
+    border-radius: 0.2rem;
+    height: 2.4rem;
+    width: 2.4rem;
+  }
+  .player-progress-border {
+    height: 10px;
+    width: 3px;
+    background: black;
+  }
+  .progress {
+    align-items: flex-end;
+    height: 10px;
+    position: relative;
+  }
+  .progress-bar-duration {
+    width: 10px;
+  }
+  .progress-bar {
+    height: 4px;
+    position: absolute;
+  }
 
-    commentsLoaded() {
-      this.initComments(true);
-    },
-  },
-});
-</script>
+  .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;
+  }
+  .player-title {
+    font-size: 0.8rem;
+    margin: 0 0 5px 0;
+  }
+
+  .hide-phone {
+    font-size: 0.8rem;
+    margin: 0 0 5px 0;
+  }
+  .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;
+    }
+  }
+}
+/** PHONES*/
+@media (max-width: 450px) {
+  .player-container {
+    .player-image {
+      height: 2rem;
+      width: 2rem;
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .player-container {
+    .d-flex {
+      @media (max-width: 960px) {
+        flex-wrap: nowrap !important;
+      }
+    }
+    .player-title {
+      font-size: 12px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>