@saooti/octopus-sdk 31.0.19 → 31.0.22

package/README.md

@@ -595,3 +595,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.17 Bug divers
  * 31.0.18 Bug #11015
  * 31.0.19 Add access_token player
+ * 31.0.20 Player mobile
+ * 31.0.21 Player mobile
+ * 31.0.22 Merge 30

package/index.ts

@@ -15,7 +15,7 @@ import Rubrique from "./src/components/pages/Rubrique.vue";
 //Misc
 import Footer from "./src/components/misc/Footer.vue";
 import LeftMenu from "./src/components/misc/LeftMenu.vue";
-import Player from "./src/components/misc/Player.vue";
+import Player from "./src/components/misc/player/Player.vue";
 import Snackbar from "./src/components/misc/Snackbar.vue";
 import TopBar from "./src/components/misc/TopBar.vue";
 import HomeDropdown from "./src/components/misc/HomeDropdown.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.19",
+  "version": "31.0.22",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,7 +14,7 @@
   },
   "main": "./dist/octopus.common.js",
   "dependencies": {
-    "@saooti/octopus-api": "^0.31.2",
+    "@saooti/octopus-api": "^0.31.3",
     "@vue/cli": "^5.0.4",
     "@vue/compat": "^3.2.31",
     "axios": "^0.24.0",

package/src/assets/general.scss

@@ -14,7 +14,7 @@ body{
 }
 .octopus-app{
   a{
-    word-break: break-all;
+    word-break: break-word;
   }
   h1{
     margin-bottom: 2rem;

package/src/components/misc/Footer.vue

@@ -144,7 +144,7 @@
 <script lang="ts">
 import { cookies } from '../mixins/functions';
 import ClassicSelect from '../form/ClassicSelect.vue';
-import Player from './Player.vue';
+import Player from './player/Player.vue';
 import { state } from '../../store/paramStore';
 import {loadLocaleMessages} from '@/i18n';
 import octopusApi from '@saooti/octopus-api';
@@ -172,9 +172,6 @@ export default defineComponent({
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    isBarTop(): boolean {
-      return (state.player.barTop as boolean);
-    },
     isContactLink(): string|undefined {
       return state.footer.contactLink;
     },
@@ -198,7 +195,7 @@ export default defineComponent({
       if(null===footerElement){return}
       if (hide) {
         footerElement.classList.remove('border-round');
-      } else if (!this.isBarTop) {
+      } else {
         footerElement.className += ' border-round';
       }
     },

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

@@ -0,0 +1,146 @@
+<template>
+  <div
+    class="w-100 transition-height bg-dark"
+    :style="{ height: playerHeight }"
+  >
+    <div
+      class="player-container"
+      :style="{ height: playerHeight }"
+      @transitionend="onHidden"
+    >
+      <template v-if="display">
+        <audio
+          id="audio-player"
+          :src="!live? audioUrlToPlay: undefined"
+          autoplay
+          @timeupdate="onTimeUpdate"
+          @ended="onFinished"
+          @playing="onPlay"
+          @durationChange="onTimeUpdate"
+          @error="onError"
+        />
+        <PlayerCompact
+          v-if="!largeVersion"
+          v-model:notListenTime="notListenTime"
+          :player-error="playerError"
+          :hls-ready="hlsReady"
+          :comments="comments"
+          :display-alert-bar="displayAlertBar"
+          :percent-live-progress="percentLiveProgress"
+          :duration-live-position="durationLivePosition"
+          :listen-time="listenTime"
+          @stopPlayer="stopPlayer"
+          @changePlayerLargeVersion="largeVersion = true"
+        />
+        <PlayerLarge
+          v-else
+          v-model:notListenTime="notListenTime"
+          :player-error="playerError"
+          :hls-ready="hlsReady"
+          :comments="comments"
+          :display-alert-bar="displayAlertBar"
+          :percent-live-progress="percentLiveProgress"
+          :duration-live-position="durationLivePosition"
+          :listen-time="listenTime"
+          @stopPlayer="stopPlayer"
+          @changePlayerLargeVersion="largeVersion = false"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { mapState } from 'vuex';
+import { CommentPodcast } from '@/store/class/general/comment';
+import { playerLogic } from '../../mixins/player/playerLogic';
+import { StoreState } from '@/store/typeAppStore';
+import PlayerCompact from '../player/PlayerCompact.vue';
+import PlayerLarge from '../player/PlayerLarge.vue';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'Player',
+
+  components: {
+    PlayerCompact,
+    PlayerLarge
+  },
+  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,
+      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,
+      largeVersion: false as boolean,
+      audioUrlToPlay: "" as string
+    };
+  },
+  computed: {
+    ...mapState({
+      display: (state: StoreState) => 'STOPPED' !== state.player.status,
+      playerHeight(state: StoreState) {
+        if ('STOPPED' === state.player.status || this.forceHide) return 0;
+        if (this.largeVersion) return '27rem';
+        if (window.innerWidth > 450 && !this.showTimeline) return '5rem';
+        if (window.innerWidth > 450 && this.showTimeline) return '6rem';
+        return '3.5rem';
+      },
+    }),
+  },
+
+  watch: {
+    playerHeight(): void {
+      this.$emit('hide', 0 === this.playerHeight ? true : false);
+    },
+  },
+  
+  methods: {
+    onHidden(): void {
+      if (this.forceHide) {
+        this.$store.commit('playerPlayPodcast');
+        this.forceHide = false;
+      }
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+.player-container {
+  max-height: 94%;
+  position: fixed;
+  overflow: hidden;
+  z-index: 12;
+  width: 100%;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  transition: height 1s;
+  background: #282828 !important;
+  font-size: 1rem;
+
+  .player-progress-border {
+    height: 10px;
+    width: 3px;
+    background: black;
+  }
+
+  @media (max-width: 960px) {
+    .d-flex {
+      flex-wrap: nowrap !important;
+    }
+  }
+}
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+  <div
+    class="d-flex align-items-center flex-grow-1 ps-2"
+  >
+    <router-link
+      v-if="isImage && podcastImage"
+      :to="podcastShareUrl"
+    >
+      <img
+        v-lazy="podcastImage"
+        :alt="$t('Podcast image')"
+        class="player-image"
+      >
+    </router-link>
+    <button
+      v-if="!playerError"
+      :title="$t('Play')"
+      :class="{
+        'saooti-play2-bounty': isPaused,
+        'saooti-pause-bounty': isPlaying,
+        'spinner-border':!isPaused&&!isPlaying
+      }"
+      class="btn play-button-box text-light primary-bg"
+      @click="switchPausePlay"
+    />
+    <div class="text-light player-grow-content">
+      <div class="d-flex 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"
+          class="hide-phone"
+        >
+          {{ playedTime }} / {{ totalTime }}
+        </div>
+      </div>
+      <PlayerProgressBar
+        :hls-ready="hlsReady"
+        :show-timeline="showTimeline"
+        :comments="comments"
+        :display-alert-bar="displayAlertBar"
+        :percent-live-progress="percentLiveProgress"
+        :duration-live-position="durationLivePosition"
+        :player-error="playerError"
+        :listen-time="listenTime"
+        @updateNotListenTime="$emit('update:notListenTime', $event)"
+      />
+    </div>
+    <button
+      :title="$t('Enlarge')"
+      class="btn play-button-box primary-bg text-light saooti-up-bounty"
+      @click="changePlayerLargeVersion"
+    />
+    <button
+      :title="$t('Close')"
+      class="btn play-button-box primary-bg text-light saooti-cross"
+      @click="stopPlayer"
+    />
+    <PlayerTimeline
+      v-model:showTimeline="showTimeline"
+      :comments="comments"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { CommentPodcast } from '@/store/class/general/comment';
+import { playerDisplay } from '../../mixins/player/playerDisplay';
+import PlayerProgressBar from './PlayerProgressBar.vue';
+import PlayerTimeline from './PlayerTimeline.vue';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'PlayerCompact',
+
+  components: {
+    PlayerProgressBar,
+    PlayerTimeline
+  },
+  mixins:[playerDisplay],
+
+  props: {
+    playerError: { default: false, type: Boolean},
+    notListenTime: { default: 0 , type: Number},
+    hlsReady: { 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},
+    listenTime: { default: 0 , type: Number},
+  },
+
+  emits: ['stopPlayer', 'update:notListenTime', 'changePlayerLargeVersion'],
+  data() {
+    return {
+      showTimeline: false as boolean,
+    };
+  },
+  methods:{
+    stopPlayer(){
+      this.$emit('stopPlayer');
+    },
+    changePlayerLargeVersion(){
+      this.$emit('changePlayerLargeVersion');
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+  .player-grow-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+    font-size: 0.8rem;
+  }
+  .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;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0.5rem;
+    border-radius: 50%;
+    font-size: 1.2rem !important;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,161 @@
+<template>
+  <div
+    class="d-flex flex-column align-items-center my-2 flex-grow-1 text-light position-relative overflow-y-auto"
+  >
+    <button
+      :title="$t('Reduce')"
+      class="player-reduce-button btn bg-transparent text-light saooti-down-bounty"
+      @click="changePlayerLargeVersion"
+    />
+    <router-link
+      v-if="isImage && podcastImage"
+      :to="podcastShareUrl"
+    >
+      <img
+        v-lazy="podcastImage"
+        :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>
+      <div class="flex-grow-1 text-truncate h3">
+        {{ podcastTitle }}
+      </div>
+    </div>
+    <div class="player-grow-large-content">
+      <PlayerProgressBar
+        ref="progressbar"
+        :hls-ready="hlsReady"
+        :show-timeline="showTimeline"
+        :comments="comments"
+        :display-alert-bar="displayAlertBar"
+        :percent-live-progress="percentLiveProgress"
+        :duration-live-position="durationLivePosition"
+        :player-error="playerError"
+        :listen-time="listenTime"
+        @updateNotListenTime="$emit('update:notListenTime', $event)"
+      />
+      <div class="d-flex justify-content-between">
+        <div>{{ playedTime }}</div>
+        <div>{{ totalTime }}</div>
+      </div>
+    </div>
+    <div class="d-flex align-items-center">
+      <button
+        class="btn fs-1 bg-transparent text-light saooti-backward"
+        @click="seekClick(-15)"
+      />
+      <button
+        v-if="!playerError"
+        :title="$t('Play')"
+        :class="{
+          'saooti-play2-bounty': isPaused,
+          'saooti-pause-bounty': isPlaying,
+          'spinner-border':!isPaused&&!isPlaying
+        }"
+        class="btn play-big-button-box text-light primary-bg"
+        @click="switchPausePlay"
+      />
+      <button
+        class="btn fs-1 bg-transparent text-light saooti-forward2"
+        @click="seekClick(15)"
+      />
+    </div>
+    <PlayerTimeline
+      v-model:showTimeline="showTimeline"
+      :comments="comments"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { playerDisplay } from '../../mixins/player/playerDisplay';
+import PlayerProgressBar from './PlayerProgressBar.vue';
+import PlayerTimeline from './PlayerTimeline.vue';
+import { defineComponent } from 'vue';
+import { CommentPodcast } from '@/store/class/general/comment';
+export default defineComponent({
+  name: 'PlayerLarge',
+
+  components: {
+    PlayerProgressBar,
+    PlayerTimeline
+  },
+    mixins:[playerDisplay],
+
+  props: {
+    playerError: { default: false, type: Boolean},
+    notListenTime: { default: 0 , type: Number},
+    hlsReady: { 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},
+    listenTime: { default: 0 , type: Number},
+  },
+
+  emits: ['stopPlayer', 'update:notListenTime', 'changePlayerLargeVersion'],
+  data() {
+    return {
+      showTimeline: false as boolean,
+    };
+  },
+  methods:{
+    stopPlayer(){
+      this.$emit('stopPlayer');
+    },
+    changePlayerLargeVersion(){
+      this.$emit('changePlayerLargeVersion');
+    },
+    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);
+    },
+  }
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+  .player-container .img-box{
+    @media (max-width: 960px) {
+      width: 10rem;
+      height: 10rem;
+    }
+  }
+  .player-reduce-button{
+    position: absolute;
+    right: 0;
+    font-size: 1.2rem !important;
+  }
+  .player-grow-large-content{
+    width: 100%;
+    padding: 1rem 2rem;
+    @media (max-width: 960px) {
+      padding: 0.5rem;
+    }
+    .progress, .progress-bar{
+      height: 15px !important;
+    }
+  }
+  .play-big-button-box {
+    height: 5rem;
+    width: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0.5rem;
+    border-radius: 50%;
+    font-size: 2.5rem !important;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,112 @@
+<template>
+  <div
+    v-if="!playerError"
+    class="progress c-hand"
+    @mouseup="seekTo"
+  >
+    <div
+      class="progress-bar bg-light"
+      role="progressbar"
+      aria-valuenow="0"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :style="'width: ' + percentLiveProgress + '%'"
+    />
+    <div
+      class="progress-bar primary-bg"
+      role="progressbar"
+      aria-valuenow="0"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :style="'width: ' + percentProgress + '%'"
+    />
+    <div
+      v-if="displayAlertBar"
+      class="progress-bar progress-bar-duration bg-danger"
+      :style="'left: ' + durationLivePosition + '%'"
+    />
+  </div>
+  <CommentPlayer
+    v-if="showTimeline"
+    :total-time="totalSecondes"
+    :comments="comments"
+  />
+</template>
+
+<script lang="ts">
+import { CommentPodcast } from '@/store/class/general/comment';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const CommentPlayer = defineAsyncComponent(() => import('../../display/comments/CommentPlayer.vue'));
+export default defineComponent({
+  name: 'PlayerProgressBar',
+
+  components: {
+    CommentPlayer,
+  },
+  props: {
+    hlsReady: { default: false, type: Boolean},
+    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'],
+  
+  computed: {
+    percentProgress(): number{
+      if(!this.$store.state.player.elapsed){return 0;}
+      return this.$store.state.player.elapsed * 100;
+    },
+    totalSecondes(): number{
+      return this.$store.state.player.total;
+    },
+  },
+
+  
+  methods: {
+    seekTo(event: MouseEvent): void {
+      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;
+      const percentPosition = x / barWidth;
+      if (percentPosition * 100 >= this.percentLiveProgress) return;
+      const seekTime = this.$store.state.player.total * percentPosition;
+      this.isSeekTo(audioPlayer, seekTime);
+    },
+    isSeekTo(audioPlayer: HTMLAudioElement, seekTime: number): void {
+      if (this.$store.state.player.podcast || this.$store.state.player.live) {
+        this.$emit('updateNotListenTime',seekTime - this.listenTime);
+      }
+      audioPlayer.currentTime = seekTime;
+    }
+    
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+  .progress {
+    height: 4px;
+    position: relative;
+    @media (max-width: 960px) {
+      height: 8px;
+    }
+  }
+  .progress-bar-duration {
+    width: 10px;
+  }
+  .progress-bar {
+    height: 4px;
+    position: absolute;
+    @media (max-width: 960px) {
+      height: 8px;
+    }
+  }
+}
+</style>

package/src/components/misc/{PlayerClockAndTimeline.vue → player/PlayerTimeline.vue}

@@ -10,22 +10,14 @@
     />
     <div>Timeline</div>
   </div>
-  <div
-    v-if="isClock"
-    class="d-flex text-light align-items-center hide-phone"
-  >
-    <div class="saooti-clock-stud m-2" />
-    <div>{{ actualTime }}</div>
-  </div>
 </template>
 
 <script lang="ts">
-import moment from 'moment';
-import { state } from '../../store/paramStore';
+import { state } from '../../../store/paramStore';
 import { defineComponent } from 'vue';
 import { CommentPodcast } from '@/store/class/general/comment';
 export default defineComponent({
-  name: 'PlayerClockAndTimeline',
+  name: 'PlayerTimeline',
 
   props: {
     showTimeline: { default: false, type: Boolean},
@@ -35,7 +27,6 @@ export default defineComponent({
 
   data() {
     return {
-      actualTime: '' as string,
     };
   },
 
@@ -43,24 +34,12 @@ export default defineComponent({
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    isClock(): boolean {
-      return (state.player.clock as boolean);
-    },
-
-  },
-
-  mounted() {
-    if (this.isClock) {
-      setInterval(() => {
-        this.actualTime = moment(new Date()).format('HH:mm:ss');
-      }, 1000);
-    }
   },
 
 })
 </script>
 <style lang="scss">
-@import '../../sass/_variables.scss';
+@import '../../../sass/_variables.scss';
 .octopus-app{
 .player-container {
   .timeline-button {