@saooti/octopus-sdk 30.0.4 → 30.0.8

package/src/components/misc/LeftMenu.vue

@@ -3,124 +3,112 @@
     v-show="displayMenu"
     class="left-menu-container"
   >
-    <div class="routes-container h5">
-      <router-link
-        class="text-dark fw-bold mb-3 show-phone home-route"
-        :to="{
-          name: 'home',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Home') }}
-      </router-link>
-      <router-link
-        v-if="isLiveTab && filterOrga && filterOrgaLive"
-        class="text-dark fw-bold mb-3 live-route"
-        :to="{
-          name: 'lives',
-          query: { productor: $store.state.filter.organisationId},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Live') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 podcasts-route"
-        :to="{
-          name: 'podcasts',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Podcasts') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 emissions-route"
-        :to="{
-          name: 'emissions',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
-                   rubriquesId: rubriqueQueryParam},
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Emissions') }}
-      </router-link>
-      <router-link
-        v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-        class="text-dark fw-bold mb-3 productors-route"
-        :to="{
-          name: 'productors',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Productors') }}
-      </router-link>
-      <router-link
-        class="text-dark fw-bold mb-3 participants-route"
-        :to="{
-          name: 'participants',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ $t('Speakers') }}
-      </router-link>
-      <router-link
-        :to="{
-          name: 'playlists',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="linkHover pb-3 text-dark fw-bold playlists-route"
-        @click="onMenuClick"
-      >
-        {{ $t('Playlists') }}
-      </router-link>
-      <OrganisationChooserLight
-        v-if="!isPodcastmaker"
-        width="auto"
-        page="leftMenu"
-        :defaultanswer="$t('No organisation filter')"
-        :value="organisationId"
-        :light="true"
-        class="me-2 hide-top-bar"
-        :reset="reset"
-        @selected="onOrganisationSelected"
-      />
-      <hr class="divided-line show-phone">
-      <router-link
-        v-for="category in categories"
-        :key="category.id"
-        class="text-dark fw-bold mb-3 show-phone category-route"
-        :to="{
-          name: 'category',
-          params: { iabId: category.id },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        @click="onMenuClick"
-      >
-        {{ category.name }}
-      </router-link>
-      <div class="d-flex hostedBy">
-        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-color">Saooti</span>
-      </div>
-    </div>
+    <router-link
+      class="show-phone"
+      :to="{
+        name: 'home',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Home') }}
+    </router-link>
+    <router-link
+      v-if="isLiveTab && filterOrga && filterOrgaLive"
+      :to="{
+        name: 'lives',
+        query: { productor: $store.state.filter.organisationId},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Live') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'podcasts',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Podcasts') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'emissions',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Emissions') }}
+    </router-link>
+    <router-link
+      v-if="!isPodcastmaker && (!filterOrga || isEducation)"
+      :to="{
+        name: 'productors',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Productors') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'participants',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Speakers') }}
+    </router-link>
+    <router-link
+      :to="{
+        name: 'playlists',
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ $t('Playlists') }}
+    </router-link>
+    <OrganisationChooserLight
+      v-if="!isPodcastmaker"
+      width="auto"
+      page="leftMenu"
+      :defaultanswer="$t('No organisation filter')"
+      :value="organisationId"
+      :light="true"
+      :reset="reset"
+      @selected="onOrganisationSelected"
+    />
+    <div class="horizontal-separator show-phone" />
+    <router-link
+      v-for="category in categories"
+      :key="category.id"
+      class="show-phone"
+      :to="{
+        name: 'category',
+        params: { iabId: category.id },
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ category.name }}
+    </router-link>
   </div>
 </template>
 
 <script lang="ts">
 import { state } from '../../store/paramStore';
 import { orgaFilter } from '../mixins/organisationFilter';
-import { Category } from '@/store/class/category';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { Category } from '@/store/class/general/category';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { Organisation } from '@/store/class/organisation';
+import { Organisation } from '@/store/class/general/organisation';
 const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
 export default defineComponent({
   name: 'LeftMenu',
@@ -217,46 +205,25 @@ export default defineComponent({
   background: #fff;
   width: 20%;
   padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.9rem;
 
-  .routes-container {
-    display: flex;
-    flex-direction: column;
-    font-size: 0.9rem;
+  a{
+    color: black !important;
+    font-weight: bold;
+    margin-bottom: 1rem;
   }
-  .hostedBy {
-    font-size: 0.6rem;
-    position: absolute;
-    bottom: 10px;
-    right: 0;
-  }
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .left-menu-container {
+  /** PHONES*/
+  @media (max-width: 960px) {
     width: 75%;
     max-height: 80%;
-    left: 0.5rem;
     top: 2.5rem;
-    padding-left: 1rem;
-    font-size: 0.5rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 0.2rem 1rem rgba(79, 83, 90, 0.3);
-
-    .routes-container {
-      overflow-y: scroll;
-      height: 100%;
-    }
-  }
-  .divided-line {
-    margin: 0.5rem 0;
-    border-top: 1px solid lightgray;
+    overflow-y: auto;
+    height: 100%;
   }
-}
-@media (max-width: 450px) {
-  .left-menu-container {
+  @media (max-width: 450px) {
     width: 94%;
-    font-size: 0.3rem;
-    padding: 2rem 0 1.5rem 1rem;
   }
 }
 </style>

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"
         />
@@ -77,14 +67,14 @@ import octopusApi from '@saooti/octopus-api';
 /* eslint-disable */
 let Hls:any = null;
 /* eslint-enable */
-import { CommentPodcast } from '@/store/class/comment';
+import { CommentPodcast } from '@/store/class/general/comment';
 import { cookies } from '../mixins/functions';
 import { StoreState } from '@/store/typeAppStore';
 import PlayerProgressBar from './PlayerProgressBar.vue';
 import PlayerButtons from './PlayerButtons.vue';
 import PlayerClockAndTimeline from './PlayerClockAndTimeline.vue';
 import { defineComponent } from 'vue';
-import { FetchParam } from '@/store/class/fetchParam';
+import { FetchParam } from '@/store/class/general/fetchParam';
 export default defineComponent({
   name: 'Player',
 
@@ -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>
@@ -44,8 +37,8 @@
 <script lang="ts">
 import { state } from '../../store/paramStore';
 import { defineComponent } from 'vue';
-import { Media } from '@/store/class/media';
-import { Podcast } from '@/store/class/podcast';
+import { Media } from '@/store/class/general/media';
+import { Podcast } from '@/store/class/general/podcast';
 import { RouteLocationRaw } from 'vue-router';
 export default defineComponent({
   name: 'PlayerButtons',
@@ -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/PlayerClockAndTimeline.vue

@@ -23,7 +23,7 @@
 import moment from 'moment';
 import { state } from '../../store/paramStore';
 import { defineComponent } from 'vue';
-import { CommentPodcast } from '@/store/class/comment';
+import { CommentPodcast } from '@/store/class/general/comment';
 export default defineComponent({
   name: 'PlayerClockAndTimeline',
 

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"
@@ -58,7 +56,7 @@
 <script lang="ts">
 import { state } from '../../store/paramStore';
 import DurationHelper from '../../helper/duration';
-import { CommentPodcast } from '@/store/class/comment';
+import { CommentPodcast } from '@/store/class/general/comment';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CommentPlayer = defineAsyncComponent(() => import('../display/comments/CommentPlayer.vue'));
 export default defineComponent({
@@ -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>

package/src/components/misc/Popover.vue

@@ -45,7 +45,7 @@ export default defineComponent({
     function initPopover(){
       instance.value = new Popover(`#${props.target}`, {
         container: 'body',
-        trigger: "click hover",
+        trigger: "hover focus",
         placement: props.placement,
         title: titleRef.value?.innerHTML || '',
         content: contentRef.value?.innerHTML || '',
@@ -104,4 +104,10 @@ export default defineComponent({
   }
 
 })
-</script>
+</script>
+<style lang="scss">
+.popover{
+  max-height: 80vh;
+  overflow: auto;
+}
+</style>