@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,48 +1,149 @@
 <template>
   <div>
-    <b-modal
+    <div
       id="share-modal"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
-      :title="$t('Share the player')"
+      class="modal"
     >
-      <template v-slot:default>
-        <b-tabs content-class="p-2 share-modal-border">
-          <b-tab :title="$t('Embed link')" class="tab-pane" active>
-            <p>{{ embedLink }}</p>
-            <div
-              class="saooti-copy"
-              @click="onCopyCode(embedLink, afterCopy)"
-            ></div>
-          </b-tab>
-          <b-tab :title="$t('Embedly link')" class="tab-pane">
-            <p>{{ embedlyLink }}</p>
-            <div
-              class="saooti-copy"
-              @click="onCopyCode(embedlyLink, afterCopy)"
-            ></div>
-          </b-tab>
-          <b-tab :title="$t('Direct link')" class="tab-pane" v-if="directLink">
-            <p>{{ directLink.audioUrl }}</p>
-            <div
-              class="saooti-copy"
-              @click="onCopyCode(directLink.audioUrl, afterCopy)"
-            ></div>
-          </b-tab>
-        </b-tabs>
-      </template>
-      <template v-slot:modal-footer>
-        <button class="btn btn-primary m-1" @click="closePopup">
-          {{ $t('Close') }}
-        </button>
-      </template>
-    </b-modal>
-    <Snackbar ref="snackbar" position="bottom-left"></Snackbar>
+      <div class="modal-backdrop" />
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">
+              {{ $t('Share the player') }}
+            </h5>
+            <button
+              ref="focusElement"
+              type="button"
+              class="btn-close btn-close-white"
+              title="Close"
+              @click="closePopup"
+            />
+          </div>
+          <div class="modal-body">
+            <ul class="nav nav-tabs">
+              <li
+                v-for="(tab, index) in tabs"
+                :key="tab"
+                class="nav-item"
+              >
+                <div
+                  class="nav-link"
+                  :class="activeTab === index? 'active':''"
+                  @click="activeTab = index"
+                >
+                  {{ tab }}
+                </div>
+              </li>
+            </ul>
+            <div class="tab-content p-2 share-modal-border">
+              <div
+                class="tab-pane tab-pane"
+                :class="activeTab === 0? 'active':''"
+              >
+                <p>{{ embedLink }}</p>
+                <div
+                  class="saooti-copy"
+                  @click="onCopyCode(embedLink, afterCopy)"
+                />
+              </div>
+              <div
+                class="tab-pane tab-pane"
+                :class="activeTab === 1? 'active':''"
+              >
+                <div class="d-flex flex-column">
+                  <div class="d-flex">
+                    <p>{{ embedlyLink }}</p>
+                    <div
+                      class="saooti-copy"
+                      @click="onCopyCode(embedlyLink, afterCopy)"
+                    />
+                  </div>
+                  <QrCode :url="embedlyLink" />
+                </div>
+              </div>
+              <div
+                v-if="directLink"
+                class="tab-pane tab-pane"
+                :class="activeTab === 2? 'active':''"
+              >
+                <p>{{ directLink.audioUrl }}</p>
+                <div
+                  class="saooti-copy"
+                  @click="onCopyCode(directLink.audioUrl, snackbarRef)"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              class="btn btn-primary m-1"
+              @click="closePopup"
+            >
+              {{ $t('Close') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Snackbar
+      ref="snackbar"
+      position="bottom-left"
+    />
   </div>
 </template>
 
+<script lang="ts">
+import Snackbar from '../Snackbar.vue';
+import { displayMethods } from '../../mixins/functions';
+
+import QrCode from '../../display/sharing/QrCode.vue';
+import { defineComponent } from 'vue'
+import { Podcast } from '@/store/class/general/podcast';
+import SnackbarVue from '../Snackbar.vue';
+export default defineComponent({
+  name: 'ShareModalPlayer',
+
+  components: {
+    Snackbar,
+    QrCode
+  },
+  mixins: [displayMethods],
+  props: {
+    embedLink: { default: undefined, type: String},
+    embedlyLink: { default: undefined, type: String},
+    directLink: { default: undefined, type: Object as ()=>Podcast},
+  },
+  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')];
+      }
+      return [this.$t('Embed link'),this.$t('Embedly link')];
+    }
+  },
+  mounted(){
+    (this.$refs.focusElement as HTMLElement)?.focus();
+  },
+  methods: {
+    closePopup(event: { preventDefault: () => void }): void {
+      event.preventDefault();
+      this.$emit('close');
+    },
+    afterCopy(): void{
+      (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Data in clipboard'));
+    }
+  },
+})
+</script>
+
 <style lang="scss">
+.octopus-app{
 .share-modal-border {
   border-right: solid 1px rgb(222, 226, 230);
   border-left: solid 1px rgb(222, 226, 230);
@@ -82,40 +183,5 @@
     align-self: center;
   }
 }
-</style>
-<script lang="ts">
-import Snackbar from '../Snackbar.vue';
-import { displayMethods } from '../../mixins/functions';
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'ShareModalPlayer',
-
-  props: ['embedLink', 'embedlyLink', 'directLink'],
-  emits: ['close'],
-
-  components: {
-    Snackbar,
-  },
-
-  mixins: [displayMethods],
-
-  mounted() {
-    /* this.$bvModal.show('share-modal'); */
-  },
-  computed: {
-    snackbarRef():any {
-      return this.$refs.snackbar;
-    },
-  },
-
-  methods: {
-    closePopup(event: { preventDefault: () => void; }) {
-      event.preventDefault();
-      this.$emit('close');
-    },
-    afterCopy(){
-      this.snackbarRef.open(this.$t('Data in clipboard'));
-    }
-  },
-});
-</script>
+}
+</style>

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);
+    },
+  },
+  
+  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,154 @@
+<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-play': isPaused,
+        'saooti-pause': isPlaying,
+        '':!isPaused&&!isPlaying
+      }"
+      class="btn play-button-box text-light primary-bg"
+      @click="switchPausePlay"
+    >
+      <span
+        v-if="!isPaused&&!isPlaying"
+        class="spinner-border flex-shrink-0"
+      />
+    </button>
+    <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"
+      @click="changePlayerLargeVersion"
+    />
+    <button
+      :title="$t('Close')"
+      class="btn play-button-box primary-bg text-light saooti-remove"
+      @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.2rem;
+    width: 2.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 0.5rem;
+    border-radius: 50%;
+    font-size: 0.7rem !important;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,166 @@
+<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"
+      @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-play': isPaused,
+          'saooti-pause': isPlaying,
+          '':!isPaused&&!isPlaying
+        }"
+        class="btn play-big-button-box text-light primary-bg"
+        @click="switchPausePlay"
+      >
+        <span
+          v-if="!isPaused&&!isPlaying"
+          class="spinner-border flex-shrink-0"
+        />
+      </button>
+      <button
+        class="btn fs-1 bg-transparent text-light saooti-forward"
+        @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>