@saooti/octopus-sdk 36.0.10 → 36.0.12

package/index.ts

@@ -13,6 +13,7 @@ export const getHome = () => import("./src/components/pages/Home.vue");
 export const getCategory = () => import("./src/components/pages/Category.vue");
 export const getRubrique = () => import("./src/components/pages/Rubrique.vue");
 export const getError403Page = () => import("./src/components/pages/Error403Page.vue");
+export const getRadio = () => import("./src/components/pages/Radio.vue");
 
 //Misc
 export const getAccordion = () => import("./src/components/misc/Accordion.vue");

package/package.json

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

package/src/assets/general.scss

@@ -33,6 +33,7 @@ body{
     &.link-hover{
       color: black !important;
       font-weight: 500;
+      word-break: normal;
     }
     &.link-hover:hover, &.link-hover.router-link-exact-active.router-link-active{
       color: $octopus-primary-color !important;
@@ -205,6 +206,14 @@ body{
     word-break: break-word;
   }
 
+  .ten-line-clamp{
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 10;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
+
   .html-wysiwyg-content{
     h3,h4{
       margin: 0 0 0.5em 0 !important;

package/src/assets/iframe.scss

@@ -0,0 +1,11 @@
+.octopus-app{
+  iframe{
+    border:0;
+  }
+  .max-iframe {
+    width: 500px;
+    @media (max-width: 960px){
+      width: calc(100% - 2rem);
+    }
+  }
+}

package/src/assets/share.scss

@@ -253,4 +253,42 @@
       }
     }
   }
+  .image-play-button{
+    position: absolute;
+    display: flex;
+    justify-content: flex-end;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+    flex-direction: column;
+    background: transparent;
+    border-width: 0;
+    width: 100%;  
+    padding: 0;
+    &:focus{
+      background: rgba(0, 0, 0, 0.09);
+    }
+    .icon-container {
+      background: $primaryColorLessTransparent !important;
+      border-radius: 2rem;
+      color: white;
+      padding: 0.5rem;
+      margin: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2;
+      
+      &:hover {
+        background: #00000030;
+      }
+      .saooti-play {
+        font-size: 1.2rem;
+        position: relative;
+        color: white;
+      }
+    }
+  }
 }

package/src/assets/transition.scss

@@ -5,9 +5,8 @@
     .bloc-paddle {
       align-items: flex-end;
       display: flex;
-      width: 2rem;
-      height: 2.6rem;
-      padding: 0.7rem;
+      width: 0.9rem;
+      height: 1.2rem;
       justify-content: space-around;
       align-content: flex-start;
       border-radius: 50%;

package/src/components/display/edit/EditBoxRadio.vue

@@ -0,0 +1,11 @@
+<template>
+  <div />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  methods:{
+  }
+})
+</script>

package/src/components/display/list/SwiperList.vue

@@ -0,0 +1,113 @@
+<template>
+  <swiper
+    :slides-per-view="numberItem"
+    :space-between="0"
+    :loop="listObject.length>=numberItem"
+    :navigation="true"
+    :modules="modules"
+  >
+    <swiper-slide
+      v-for="(obj, index) in listObject"
+      :key="obj"
+    >
+      <slot
+        name="octopusSlide"
+        :option="obj"
+        :index="index"
+      />
+    </swiper-slide>
+  </swiper>
+</template>
+
+<script lang="ts">
+import domHelper from '../../../helper/dom';
+import { state } from '../../../stores/ParamSdkStore';
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Navigation } from "swiper";
+import "swiper/css";
+import "swiper/css/navigation";
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'SwiperList',
+  
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+
+  props: {
+    listObject: { default: [], type: Array as ()=> Array<unknown>},
+  },
+
+  data() {
+    return {
+      modules: [Navigation],
+      numberItem: 5 as number
+    };
+  },
+  computed: {
+    sizeItem(): number {
+      if (window.innerWidth <= 450) {
+        return 12.5;
+      }
+      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 16.5;
+    },
+  },
+  
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+  },
+  methods: {
+    handleResize(): void {
+      if (!this.$el) return;
+      const width = (this.$el as HTMLElement).offsetWidth - 95;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem+ 0.5);
+      this.numberItem = Math.max(1, Math.floor(width / sixteen));
+    },
+  },
+})
+</script>
+<style lang="scss">
+@import '@scss/_variables.scss';
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+.swiper-button-next, .swiper-button-prev{
+  color: $octopus-primary-color !important;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+}
+.swiper-button-next{
+  right: 0;
+}
+.swiper-button-prev{
+  left: 0;
+}
+.swiper-slide-active{
+  padding-left:27px;
+  @media (max-width: 550px) {
+    padding-left:0;
+  }
+}
+.swiper-slide-next{
+  padding-right:27px;
+}
+.swiper-button-lock{
+  display: flex;
+}
+.swiper-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

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

@@ -1,148 +1,30 @@
 <template>
-  <div
-    v-if="live"
-    class="d-flex-column live-item-container w-100"
-  >
-    <router-link
-      class="live-date-box"
-      :to="{
-        name: 'podcast',
-        params: { podcastId: live.podcastId },
-        query: { productor: filterOrgaId },
-      }"
-    >
-      <div class="fw-bold">
-        {{ date }}
-      </div>
-      <div class="fw-bold">
-        {{ hours }}
-      </div>
-      <div class="font-size-smaller">
-        {{ $t('Duration', { duration: duration }) }}
-      </div>
-    </router-link>
-    <router-link
-      :to="{
-        name: 'podcast',
-        params: { podcastId: live.podcastId },
-        query: { productor: filterOrgaId },
-      }"
-    >
-      <PodcastImage
-        class="me-3 flex-shrink-0"
-        :podcast="live"
-        :hide-play="false"
-        :playing-podcast="false"
-        :fetch-conference="fetchConference"
-        :is-animator-live="organisationRight"
-      />
-    </router-link>
-    <div class="d-flex flex-column">
-      <router-link
-        class="text-uppercase fw-bold text-truncate"
-        :to="{
-          name: 'podcast',
-          params: { podcastId: live.podcastId },
-          query: { productor: filterOrgaId },
-        }"
-      >
-        {{ live.title }}
-      </router-link>
-      <router-link
-        class="fw-bold text-truncate"
-        :to="{
-          name: 'emission',
-          params: { emissionId: live.emission.emissionId },
-          query: { productor: filterOrgaId },
-        }"
-      >
-        {{ live.emission.name }}
-      </router-link>
-      <div
-        ref="descriptionLiveContainer"
-        class="live-description-container html-wysiwyg-content"
-      >
-        <!-- eslint-disable vue/no-v-html -->
-        <div
-          ref="descriptionLive"
-          v-html="urlify(description)"
-        />
-        <!-- eslint-enable -->
-      </div>
-      <div
-        v-if="live.animators"
-        class="comma"
-      >
-        {{ $t('Animated by') }}<div class="mx-1">
-          :
-        </div>
-        <router-link
-          v-for="animator in live.animators"
-          :key="animator.participantId"
-          :title="$t('Participant')"
-          class="fw-bold"
-          :to="{
-            name: 'participant',
-            params: { participantId: animator.participantId },
-            query: { productor: filterOrgaId },
-          }"
-        >
-          {{ getName(animator) }}
-        </router-link>
-      </div>
-      <div v-if="!isPodcastmaker">
-        {{ $t('Producted by : ') }}
-        <router-link
-          class="fw-bold"
-          :to="{
-            name: 'productor',
-            params: { productorId: live.organisation.id },
-            query: { productor: filterOrgaId },
-          }"
-        >
-          {{ live.organisation.name }}
-        </router-link>
-      </div>
-      <RecordingItemButton
-        v-if="fetchConference && organisationRight && isEditBox"
-        :live="true"
-        :recording="fetchConference"
-        :podcast="live"
-        @deleteItem="deleteItem"
-        @validatePodcast="updatePodcast"
-      />
-    </div>
-  </div>
+  <PodcastItem
+    v-if="live && 0!==live.podcastId"
+    :podcast="live"
+    :fetch-conference="fetchConference"
+  />
 </template>
 
 <script lang="ts">
-import { state } from '../../../stores/ParamSdkStore';
 import octopusApi from '@saooti/octopus-api';
-import PodcastImage from '../podcasts/PodcastImage.vue';
+import PodcastItem from '../podcasts/PodcastItem.vue';
 import crudApi from '@/api/classicCrud';
-import dayjs from 'dayjs';
-// @ts-ignore
-import humanizeDuration from 'humanize-duration';
 import displayMethods from '../../mixins/displayMethods';
 import { Podcast } from '@/stores/class/general/podcast';
-import { Participant } from '@/stores/class/general/participant';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));
+import { defineComponent } from 'vue';
+import { Conference } from '@/stores/class/conference/conference';
 export default defineComponent({
   name: 'LiveItem',
 
   components: {
-    RecordingItemButton,
-    PodcastImage,
+    PodcastItem,
   },
   mixins: [displayMethods],
   props: {
-    fetchConference: { default: undefined, type: Object as ()=>Podcast},
-    index: { default: undefined, type: Number},
+    fetchConference: { default: undefined, type: Object as ()=>Conference},
   },
-  emits: ['deleteItem'],
+  emits: ['deleteItem', 'updateItem'],
 
   data() {
     return {
@@ -150,134 +32,36 @@ export default defineComponent({
     };
   },
   
-  computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    isEditBox(): boolean {
-      return (state.podcastPage.EditBox as boolean);
-    },
-    isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
-    },
-    hours(): string {
-      return !this.live?'': dayjs(this.live.pubDate).format('HH[H]mm');
-    },
-    date(): string {
-      return !this.live? '': dayjs(this.live.pubDate).format('D/MM/YYYY');
-    },
-    description(): string {
-      return this.live?.description??'';
-    },
-    myOrganisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    organisationRight(): boolean {
-      return true===this.isRoleLive && this.myOrganisationId === this.live?.organisation.id;
-    },
-    isRoleLive(): boolean {
-      return (state.generalParameters.isRoleLive as boolean);
-    },
-    duration(): string {
-      if (!this.live || this.live.duration <= 1) return '';
-      if (this.live.duration > 600000) {
-        return humanizeDuration(this.live.duration, {
-          language: this.$i18n.locale,
-          largest: 1,
-          round: true,
-        });
-      }
-      return humanizeDuration(this.live.duration, {
-        language: this.$i18n.locale,
-        largest: 2,
-        round: true,
-      });
-    },
-  },
-  watch: {
-    live: {
-      deep: true,
-      handler(){
-      this.handleDescription();
-      }
-    },
-  },
-
   async created() {
     this.fetchPodcastData();
+    this.watchStatus();
   },
   methods: {
-    updatePodcast(podcastUpdated: Podcast): void {
-      this.live = podcastUpdated;
-    },
-    getName(person: Participant): string {
-      return (`${person.firstName??''} ${person.lastName??''}`).trim();
-    },
     async fetchPodcastData(): Promise<void> {
       if (!this.fetchConference || !this.fetchConference.podcastId) return;
       try {
         this.live = await octopusApi.fetchData<Podcast>(0, 'podcast/'+this.fetchConference.podcastId);
       } catch {
-        this.$emit('deleteItem', this.index);
+        this.$emit('deleteItem');
         if(this.fetchConference.conferenceId){
           await crudApi.deleteData(9 ,'conference/'+this.fetchConference.conferenceId);
         }
       }
     },
-    async handleDescription(): Promise<void> {
-      this.$nextTick(() => {
-        if(!this.live){
-          return;
-        }
-        const liveDesc = (this.$refs.descriptionLive as HTMLElement);
-        const liveDescContainer = (this.$refs.descriptionLiveContainer as HTMLElement);
-        if (
-          null !== liveDesc && null !== liveDescContainer && 
-          liveDesc.clientHeight > liveDescContainer.clientHeight
-        ) {
-          liveDescContainer.classList.add('after-live-description');
-        }
-      });
-    },
-    deleteItem(): void {
-      this.$emit('deleteItem', this.index);
-    },
+    async watchStatus():Promise<void>{
+      if(!this.fetchConference || ("PLANNED"!==this.fetchConference.status && "PENDING"!==this.fetchConference.status && "RECORDING"!==this.fetchConference.status)){
+        return;
+      }
+      const newStatus = await octopusApi.fetchData<string>(9, 'conference/realstatus/'+this.fetchConference.conferenceId);
+      if(newStatus !== this.fetchConference.status){
+        this.$emit('updateItem', {...this.fetchConference, ...{status: newStatus}});
+      }else{
+        setTimeout(() => {
+          this.watchStatus();
+        }, 5000);
+      }
+    }
   },
 })
 </script>
 
-<style lang="scss">
-.octopus-app{
-  .live-item-container{
-    @media (max-width: 960px) {
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  .live-date-box {
-    width: 200px;
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-  }
-  .font-size-smaller {
-    font-size: smaller;
-  }
-  .live-description-container {
-    overflow: hidden;
-    margin-top: 0.5em;
-    word-break: break-word;
-    max-height: 6rem;
-    position: relative;
-    &.after-live-description:after {
-      content: '...';
-      position: absolute;
-      padding-left: 1rem;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      font-size: 1rem;
-      font-weight: bolder;
-      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f3f3f3 40%);
-    }
-  }
-}
-</style>