@saooti/octopus-sdk 30.0.59 → 30.0.60

package/README.md

@@ -555,4 +555,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.56 Popover title
  * 30.0.57 podcastmaker Le soir améliorations
  * 30.0.58 Prefix css dans component par octopus-app
- * 30.0.59 Pb productorChooser
+ * 30.0.59 Pb productorChooser
+ * 30.0.60 PlaylistPodcastInlineList

package/index.ts

@@ -49,6 +49,7 @@ import EmissionInlineList from "./src/components/display/emission/EmissionInline
 import RubriqueChooser from "./src/components/display/rubriques/RubriqueChooser.vue";
 import CommentList from "./src/components/display/comments/CommentList.vue";
 import CommentInput from "./src/components/display/comments/CommentInput.vue";
+import PodcastPlaylistInlineList from "./src/components/display/playlist/PodcastPlaylistInlineList.vue";
 
 //form
 import ClassicSearch from "./src/components/form/ClassicSearch.vue";
@@ -112,7 +113,8 @@ const components = {
     ClassicCheckbox,
     ClassicRadio,
     ClassicLoading,
-    AdvancedSearch
+    AdvancedSearch,
+    PodcastPlaylistInlineList
 }
 
 export default components;
@@ -165,5 +167,6 @@ export {
     ClassicCheckbox,
     ClassicRadio,
     ClassicLoading,
-    AdvancedSearch
+    AdvancedSearch,
+    PodcastPlaylistInlineList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.59",
+  "version": "30.0.60",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/display/categories/CategoryList.vue

@@ -22,7 +22,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-plus"
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-more"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('See more')"

package/src/components/display/emission/EmissionList.vue

@@ -51,7 +51,7 @@
         </template>
         <div
           :class="buttonPlus?'ms-1':''"
-          class="saooti-plus"
+          class="saooti-more"
         />
       </button>
     </template>

package/src/components/display/live/LiveHorizontalList.vue

@@ -26,7 +26,7 @@
       </template>
       <div
         :class="buttonPlus?'ms-1':''"
-        class="saooti-plus"
+        class="saooti-more"
       />
     </button>
   </div>

package/src/components/display/participant/ParticipantList.vue

@@ -23,7 +23,7 @@
       </ul>
       <button
         v-show="!allFetched"
-        class="btn btn-more saooti-plus"
+        class="btn btn-more saooti-more"
         :title="$t('See more')"
         :disabled="loading"
         @click="fetchContent(false)"

package/src/components/display/playlist/PlaylistList.vue

@@ -29,7 +29,7 @@
       </template>
       <div
         :class="buttonPlus?'ms-1':''"
-        class="saooti-plus"
+        class="saooti-more"
       />
     </button>
   </div>

package/src/components/display/playlist/PodcastList.vue

@@ -49,7 +49,7 @@
       </template>
       <div
         :class="buttonPlus?'ms-1':''"
-        class="saooti-plus"
+        class="saooti-more"
       />
     </button>
   </div>

package/src/components/display/playlist/PodcastPlaylistInlineList.vue

@@ -0,0 +1,204 @@
+<template>
+  <div
+    v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    class="d-flex flex-column p-3 playlist-inline-podcast"
+  >
+    <h2>{{ title }}</h2>
+    <div
+      v-if="!overflowScroll"
+      class="d-flex justify-content-end hide-phone"
+    >
+      <button
+        class="btn admin-button m-1"
+        :class="{ disabled: !previousAvailable }"
+        :title="$t('Display previous')"
+        @click="displayPrevious()"
+      >
+        <div class="saooti-left fw-bold" />
+      </button>
+      <button
+        class="btn admin-button m-1"
+        :class="{ disabled: !nextAvailable }"
+        :title="$t('Display next')"
+        @click="displayNext()"
+      >
+        <div class="saooti-right fw-bold" />
+      </button>
+    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading podcasts ...'):undefined"
+    />
+    <transition-group
+      :name="transitionName"
+      class="element-list-inline"
+      tag="ul"
+      :class="[
+        alignLeft ? 'justify-content-start' : '',
+        overflowScroll ? 'overflowScroll' : '',
+      ]"
+      :css="isInlineAnimation"
+    >
+      <PodcastItem
+        v-for="p in podcasts"
+        :key="p.podcastId"
+        class="flex-shrink-0 item-phone-margin"
+        :podcast="p"
+        :class="[alignLeft ? 'me-3' : '']"
+      />
+    </transition-group>
+    <router-link
+      class="btn btn-link align-self-center width-fit-content m-4"
+      :to="{
+          name: 'playlist',
+          params: { playlistId: playlistId.toString() },
+        }"
+    >
+      {{ $t('See more') }}
+      <div
+        class="ms-1 saooti-more"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import octopusApi from '@saooti/octopus-api';
+import domHelper from '../../../helper/dom';
+import PodcastItem from '../podcasts/PodcastItem.vue';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+const PHONE_WIDTH = 960;
+import { state } from '../../../store/paramStore';
+import { Podcast } from '@/store/class/general/podcast';
+import { defineComponent } from 'vue'
+import { Playlist } from '@saooti/octopus-api/class/playlist';
+export default defineComponent({
+  name: 'PodcastPlaylistInlineList',
+  
+  components: {
+    PodcastItem,
+    ClassicLoading
+  },
+
+  props: {
+    playlistId: { default: undefined, type: Number},
+  },
+
+  data() {
+    return {
+      loading: true as boolean,
+      index: 0 as number,
+      first: 0 as number,
+      size: 5 as number,
+      totalCount: 0 as number,
+      playlist: undefined as Playlist|undefined,
+      allPodcasts: [] as Array<Podcast>,
+      direction: 1 as number,
+      alignLeft: false as boolean,
+    };
+  },
+  computed: {
+    title(): string{
+      if(this.playlist){
+        return this.playlist.title;
+      }
+      return "";
+    },
+    podcasts(): Array<Podcast> {
+      return this.allPodcasts.slice(this.index, this.index + this.size);
+    },
+    sizeItem(): number {
+      return state.generalParameters.podcastItem ? (state.generalParameters.podcastItem as number): 13;
+    },
+    overflowScroll(): boolean {
+      return (state.emissionPage.overflowScroll as boolean);
+    },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
+    previousAvailable(): boolean {
+      return this.index > 0;
+    },
+    nextAvailable(): boolean {
+      return this.index + this.size < this.totalCount;
+    },
+    transitionName(): string {
+      return this.direction > 0 ? 'out-left' : 'out-right';
+    },
+  },
+  watch: {
+    playlistId(): void {
+      this.reset();
+      this.fetchContent();
+    },
+  },
+  
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+    this.fetchContent();
+  },
+  methods: {
+    async fetchContent(): Promise<void> {
+      this.allPodcasts.length = 0;
+      this.loading = true;
+      this.playlist = await octopusApi.fetchPlaylist(this.playlistId ? this.playlistId.toString(): "");
+      this.allPodcasts = await octopusApi.fetchPlaylistContent(
+        this.playlist.playlistId.toString()
+      );
+      if (!((state.generalParameters.authenticated && state.generalParameters.organisationId === this.playlist.organisation.id) ||
+        state.generalParameters.isAdmin)) {
+        this.allPodcasts = this.allPodcasts.filter((p: Podcast|null) => {
+          return (
+            null !== p &&
+            (!p.availability || true === p.availability.visibility)
+          );
+        });
+      }
+      if (this.allPodcasts.length <= 3) {
+        this.alignLeft = true;
+      } else {
+        this.alignLeft = false;
+      }
+      this.loading = false;
+    },
+    displayPrevious(): void {
+      this.direction = -1;
+      if (this.previousAvailable) {
+        this.index -= 1;
+      }
+    },
+    displayNext(): void {
+      this.direction = 1;
+      if (!this.nextAvailable) return;
+      this.index += 1;
+    },
+    handleResize(): void {
+      if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
+      if (window.innerWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.7);
+      this.size = Math.floor(width / sixteen);
+    },
+    reset(): void {
+      this.index = 0;
+      this.first = 0;
+      this.totalCount = 0;
+      this.allPodcasts.length = 0;
+    },
+  },
+})
+</script>

package/src/components/display/podcasts/PodcastInlineList.vue

@@ -72,7 +72,7 @@
       {{ buttonText }}
       <div
         v-if="buttonPlus"
-        class="ms-1 saooti-plus"
+        class="ms-1 saooti-more"
       />
     </router-link>
   </div>

package/src/components/display/podcasts/PodcastList.vue

@@ -33,7 +33,7 @@
       </template>
       <div
         :class="buttonPlus?'ms-1':''"
-        class="saooti-plus"
+        class="saooti-more"
       />
     </button>
   </div>

package/src/components/display/rubriques/RubriqueList.vue

@@ -31,7 +31,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-plus"
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-more"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('See more')"