@saooti/octopus-sdk 36.0.10 → 36.0.12

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

@@ -1,35 +1,47 @@
 <template>
   <div
     v-if="filterOrgaId || organisationId"
-    class="d-flex flex-column align-items-center"
+    class="d-flex flex-column align-items-start mt-3"
   >
+    <div class="d-flex justify-content-between amlign-items-center">
+      <h2 class="mb-0 big-h2 mb-3">
+        {{ $t('Live') }}
+      </h2>
+      <router-link
+        v-if="liveRight && !isPodcastmaker"
+        to="/main/priv/edit/live"
+      >
+        <button class="btn btn-primary">
+          {{ $t('Launch a new live') }}
+        </button>
+      </router-link>
+    </div>
+    <ClassicSelect
+      v-if="lives.length || 'ALL'!==selectedStatus"
+      v-model:textInit="selectedStatus"
+      id-select="status-live-chooser-select"
+      :label="$t('Selection by status')"
+      :display-label="false"
+      :options="statusArraySelect"
+      class="mb-3"
+    />
     <ClassicLoading
       :loading-text="loading?$t('Loading lives...'):undefined"
-      :error-text="isNoLive?$t('No live currently'):undefined"
+      :error-text="0===lives.length?$t('No live currently'):undefined"
     />
-    <div v-if="loaded && displayNextLiveMessage">
-      <h3 class="text-danger">
-        {{ displayNextLiveMessage }}
-      </h3>
-    </div>
-    <template
-      v-for="(live, indexLive) in livesArray"
-      :key="live.status"
-    >
-      <template v-if="live.lives.length">
-        <hr class="w-100">
-        <p class="live-list-category">
-          {{ live.title }}
-        </p>
-        <LiveItem
-          v-for="(l, index) in live.lives"
-          :key="l.podcastId"
-          class="mt-3"
-          :fetch-conference="l"
-          :index="index"
-          @deleteItem="deleteLive(indexLive, $event)"
-        />
-      </template>
+    <template v-if="lives.length">
+      <SwiperList
+        v-if="!loading"
+        :list-object="lives"
+      >
+        <template #octopusSlide="{option, index}">
+          <LiveItem
+            :fetch-conference="option"
+            @deleteItem="deleteLive(index)"
+            @updateItem="updateLive($event, index)"
+          />
+        </template>
+      </SwiperList>
     </template>
   </div>
 </template>
@@ -37,12 +49,13 @@
 <script lang="ts">
 import ClassicLoading from '../../form/ClassicLoading.vue';
 import LiveItem from './LiveItem.vue';
+import ClassicSelect from '../../form/ClassicSelect.vue';
+import SwiperList from '../list/SwiperList.vue';
 import { handle403 } from '../../mixins/handle403';
+import { orgaComputed } from '../../mixins/orgaComputed';
 import octopusApi from '@saooti/octopus-api';
-import dayjs from 'dayjs';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-dayjs.extend(localizedFormat);
 import { useFilterStore } from '@/stores/FilterStore';
+import { useAuthStore } from '@/stores/AuthStore';
 import { mapState } from 'pinia';
 import { state } from '../../../stores/ParamSdkStore';
 import { Conference } from '@/stores/class/conference/conference';
@@ -52,207 +65,118 @@ export default defineComponent({
   name: 'LiveList',
   components: {
     LiveItem,
-    ClassicLoading
+    ClassicLoading,
+    SwiperList,
+    ClassicSelect
   },
 
-  mixins: [handle403],
+  mixins: [handle403, orgaComputed],
 
   props: {
-    conferenceWatched: { default: () => [], type: Array as ()=>Array<Conference>},
     organisationId: { default: undefined, type: String},
   },
-  emits: ['initConferenceIds'],
   data() {
     return {
       loading: true as boolean,
       loaded: true as boolean,
-      dataLivesToBe: [] as Array<Conference>
+      lives: [] as Array<Conference>,
+      isLiveAuthorized: false as boolean,
+      statusClassic: ["RECORDING", "PENDING", "PLANNED"] as Array<string>,
+      statusAdmin: ["DEBRIEFING", "ERROR", "PUBLISHING"] as Array<string>,
+      selectedStatus: "ALL" as string
     };
   },
   
   computed: {
     ...mapState(useFilterStore, ['filterOrgaId']),
-    livesArray(): Array<{status:string, title:string, lives:Array<Conference>}>{
-      return [
-        {status: "RECORDING", title:this.$t('In live'), lives:[]},
-        {status: "PENDING", title:this.$t('This live is not started yet'), lives:[]},
-        {status: "PLANNED", title:this.$t('Live to be'), lives:[]},
-        {status: "DEBRIEFING", title:this.$t('Live terminated'), lives:[]},
-        {status: "PUBLISHING", title:this.$t('Publishing'), lives:[]},
-        {status: "ERROR", title:this.$t('In error'), lives:[]}
-      ];
-    },
-    isNoLive(): boolean{
-      return this.loaded && !this.livesArray[0].lives.length && !this.livesArray[2].lives.length && !this.livesArray[3].lives.length;
-    },
+    ...mapState(useAuthStore, ['authOrganisation']),
     filterOrgaUsed(): string|undefined {
       return this.filterOrgaId?this.filterOrgaId:this.organisationId;
     },
-    displayNextLiveMessage(): string {
-      if (0 !== this.livesArray[0].lives.length) return '';
-      if (this.livesArray[1].lives.length > 0)
-        return this.$t('A live can start any moment');
-      if (this.livesArray[2].lives.length > 0)
-        return this.$t('Next live date', {date: dayjs(this.livesArray[2].lives[0].date).format('LLLL'),});
-      return '';
-    },
-    myOrganisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    organisationRight(): boolean {
-      return this.isRoleLive && this.myOrganisationId === this.filterOrgaUsed;
-    },
-    isRoleLive(): boolean {
-      return (state.generalParameters.isRoleLive as boolean);
-    },
-  },
-  watch: {
-    async organisationId(): Promise<void> {
-      if(!this.organisationId){return;}
-      const isLive = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+this.organisationId);
-      if (isLive) {
-        if(!this.loading){
-          this.fetchContent();
+    editRight(): boolean {
+      return (true ===this.authenticated && this.myOrganisationId === this.filterOrgaUsed) ||true===state.generalParameters.isAdmin;
+    },
+    liveRight(): boolean {
+      return (state.generalParameters.isRoleLive as boolean)&& true===this.authOrganisation.attributes?.['live.active'];
+    },
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
+    },
+    statusArraySelect(): Array<{title: string, value:string}>{
+      const statusArray =[{title: this.$t('All lives'), value:'ALL'}];
+      for(let status of this.statusFetched){
+        let title ="";
+        switch (status) {
+          case "RECORDING": title = this.$t('In live'); break;
+          case "PENDING": title = this.$t('live upcoming'); break;
+          case "PLANNED": title = this.$t('live in few time'); break;
+          case "DEBRIEFING": title = this.$t('In debriefing'); break;
+          case "PUBLISHING": title = this.$t('In the process of being published'); break;
+          case "ERROR": title = this.$t('In error'); break;
+          default: break;
         }
-      } else {
-        this.initArrays();
-        this.loading = false;
-        this.loaded = true;
+        statusArray.push({title: title, value: status});
       }
+      return statusArray;
     },
-    filterOrgaId(): void {
-      if(!this.loading){
-        this.fetchContent();
+    statusFetched(): Array<string>{
+      if(this.editRight){
+        return this.statusClassic.concat(this.statusAdmin);
       }
-    },
-    conferenceWatched: {
-      handler(): void {
-        this.updateLiveLocal();
+      return this.statusClassic;
+    }
+  },
+  watch: {
+    filterOrgaUsed: {
+      async handler(): Promise<void> {
+        await this.checkIfLiveAuthorized();
+        this.fetchContent();
       },
-      deep: true,
+      immediate: true,
     },
-  },
-
-  async created() {
-    if(!this.filterOrgaUsed){
-      return;
-    }
-    const isLive = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+this.filterOrgaUsed);
-    if (isLive) {
+    selectedStatus(){
       this.fetchContent();
-    } else {
-      this.loading = false;
-      this.loaded = true;
     }
   },
   methods: {
-    initArrays(): void {
-      for (let i = 0, len = this.livesArray.length; i < len; i++) {
-        this.livesArray[i].lives.length = 0;
+    async checkIfLiveAuthorized(): Promise<void>{
+      if(!this.filterOrgaUsed){
+        return;
       }
+      this.isLiveAuthorized = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+this.filterOrgaUsed);
     },
-    liveTreatement(i: number, dataLives: Array<Conference>, indexPast: number){
-      if("PLANNED"!==this.livesArray[i].status && "PENDING"!==this.livesArray[i].status){
-        this.livesArray[i].lives = dataLives.filter((p: Conference | null) => {
-          return null !== p;
-        });
-      }else if("PENDING"===this.livesArray[i].status){
-        this.dataLivesToBe = dataLives;
-        for (let index = 0, len = dataLives.length; index < len; index++) {
-          if (dayjs(dataLives[index].date).isBefore(dayjs())) {
-            this.livesArray[i].lives.push(dataLives[index]);
-            indexPast = index + 1;
-          } else {break;}
-        }
-      }else{
-        this.livesArray[i].lives = this.dataLivesToBe
-        .slice(indexPast)
-        .concat(dataLives)
-        .filter((p: Conference | null) => {
-          return null !== p;
-        });
-      }
-      return indexPast;
+    endLoading():void{
+      this.loading = false;
+      this.loaded = true;
     },
-    async fetchLives(): Promise<void>{
-      let indexPast = 0;
-      this.dataLivesToBe = [];
-      for (let i = 0, len = this.livesArray.length; i < len; i++) {
-        if (!this.organisationRight && 
-        ("DEBRIEFING"===this.livesArray[i].status ||"ERROR"===this.livesArray[i].status ||"PUBLISHING"===this.livesArray[i].status)) {
-          continue;
-        }
+    updateLive(live: Conference, index:number):void{
+      this.lives.splice(index, 1, live);
+    },
+    async fetchContent(): Promise<void> {
+      this.lives.length = 0;
+      if (!this.filterOrgaUsed || !this.isLiveAuthorized) {
+        this.endLoading();
+        return;
+      }
+      this.loading = true;
+      this.loaded = false;
+      try {
         const dataLives = await octopusApi.fetchDataWithParams<Array<Conference>>(9, 'conference/list',{
           organisationId: this.filterOrgaUsed,
           withPodcastId: true,
-          status: this.livesArray[i].status,
+          status: "ALL"===this.selectedStatus ? this.statusFetched : this.selectedStatus,
+        });
+        this.lives = dataLives.filter((p: Conference | null) => {
+          return null !== p;
         });
-        indexPast = this.liveTreatement(i, dataLives, indexPast);
-      }
-    },
-    async fetchContent(): Promise<void> {
-      try {
-        this.initArrays();
-        if (!this.filterOrgaUsed) {
-          this.loading = false;
-          this.loaded = true;
-          return;
-        }
-        this.loading = true;
-        this.loaded = false;
-        await this.fetchLives();
-        const listIds = this.livesArray[0].lives
-          .concat(this.livesArray[1].lives)
-          .concat(this.livesArray[2].lives);
-        this.$emit('initConferenceIds', listIds);
       } catch (error) {
         this.handle403((error as AxiosError));
       }
-      this.loading = false;
-      this.loaded = true;
-    },
-    deleteLive(indexLives: number, index: number): void {
-      this.livesArray[indexLives].lives.splice(index, 1);
+      this.endLoading();
     },
-    updateLiveLocal(): void {
-      for (
-        let index = 0, len = this.conferenceWatched.length;
-        index < len;
-        index++
-      ) {
-        const element = this.conferenceWatched[index];
-        const indexLivesToBe = this.livesArray[1].lives.findIndex(
-          (el: Conference) => el.conferenceId === element.conferenceId
-        );
-        if (-1 === indexLivesToBe) {
-          const indexLives = this.livesArray[0].lives.findIndex(
-            (el: Conference) => el.conferenceId === element.conferenceId
-          );
-          if (-1 === indexLives || 'DEBRIEFING' !== element.status) continue;
-          const newConf = this.livesArray[0].lives[indexLives];
-          newConf.status = element.status;
-          this.livesArray[0].lives.splice(indexLives, 1);
-          this.livesArray[3].lives.push(newConf);
-          break;
-        }
-        if ('RECORDING' !== element.status) continue;
-        const newConf = this.livesArray[1].lives[indexLivesToBe];
-        newConf.status = element.status;
-        this.livesArray[1].lives.splice(indexLivesToBe, 1);
-        this.livesArray[0].lives.push(newConf);
-        break;
-      }
+    deleteLive(index: number): void {
+      this.lives.splice(index, 1);
     },
   },
 })
 </script>
-
-<style lang="scss">
-.octopus-app{
-.live-list-category {
-  align-self: flex-start;
-  text-transform: uppercase;
-  font-weight: bold;
-}
-}
-</style>

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

@@ -0,0 +1,116 @@
+<template>
+  <div class="d-flex align-items-center">
+    <div
+      v-if="currentlyPlayingString.length || podcastRadio"
+      class="me-2 fw-bold"
+    >
+      {{ $t('Currently') +' : ' }}
+    </div>
+    <router-link 
+      v-if="podcastRadio"
+      class="d-flex align-items-center"
+      :to="{
+        name: 'podcast',
+        params: { podcastId: podcastRadio.podcastId },
+        query: { productor: filterOrgaId },
+      }"
+    >
+      <img
+        v-lazy="proxyImageUrl(podcastRadio.imageUrl, '80')"
+        width="80"
+        height="80"
+        class="small-img-box"
+        :title="$t('Episode name image', {name:podcastRadio.title})"
+        :alt="$t('Episode name image', {name:podcastRadio.title})"
+      >
+      <div>{{ podcastRadio.title }}</div>
+    </router-link>
+    <div v-else-if="currentlyPlayingString.length">
+      {{ currentlyPlayingString }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import imageProxy from '../../mixins/imageProxy';
+import {fetchRadioData} from '../../mixins/radio/fetchRadioData';
+import { defineComponent } from 'vue';
+import { Canal } from '@/stores/class/radio/canal';
+import { MediaRadio } from '@/stores/class/general/player';
+import { Podcast } from '@/stores/class/general/podcast';
+export default defineComponent({
+  name: 'RadioItem',
+
+  components: {
+  },
+
+  mixins: [imageProxy, fetchRadioData],
+
+  props: {
+    radio: { default: undefined, type: Object as ()=>Canal},
+  },
+
+  data() {
+    return {
+      currentMetadata: undefined as undefined|MediaRadio,
+      currentPodcast: undefined as undefined|Podcast,
+      radioInterval: undefined as  ReturnType<typeof setTimeout>|undefined,
+    };
+  },
+
+  computed:{
+    ...mapState(usePlayerStore, ['playerRadio']),
+    ...mapState(useFilterStore, ['filterOrgaId']),
+    playingRadio(){
+      return this.playerRadio && this.playerRadio.canalId === this.radio?.id;
+    },
+    podcastRadio():Podcast|undefined{
+      if(this.playingRadio){
+        return this.playerRadio?.podcast;
+      }
+      return this.currentPodcast;
+    },
+    currentlyPlayingString(): string{
+      if(this.playingRadio && this.playerRadio){
+        return this.displayTitle(this.playerRadio.metadata);
+      }
+      if(this.currentMetadata){
+        return this.displayTitle(this.currentMetadata);
+      }
+      return "";
+    }
+  },
+  
+  mounted() {
+    this.fetchCurrentlyPlaying();
+    this.radioInterval = setInterval(() => {
+      this.fetchCurrentlyPlaying();
+    }, 1000);
+  },
+  methods: {
+    async fetchCurrentlyPlaying(): Promise<void>{
+      if(!this.radio || this.playingRadio){return;}
+      this.fetchRadioMetadata(this.radio.id,this.currentMetadata?.title??"", this.updateMetadata);
+    },
+    updateMetadata(metadata: MediaRadio, podcast?:Podcast): void{
+      this.currentMetadata=metadata;
+      this.currentPodcast=podcast;
+    },
+  },
+})
+</script>
+<style lang="scss">
+.octopus-app{
+  .small-img-box{
+    height: 80px;
+    width: 80px;
+    border-radius: 0.2rem;
+    overflow: hidden;
+    flex-shrink: 0;
+    margin: 0.5rem;
+  }
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="img-box position-relative flex-shrink-0 mb-3 me-3 float-start">
+    <img
+      v-lazy="radio.imageUrl ?proxyImageUrl(radio.imageUrl, '330') :'/img/tempRadio.jpg'"
+      width="330"
+      height="330"
+      class="img-box"
+      :title="$t('Image')+ ' '+radio.name"
+      :alt="$t('Image')+ ' '+radio.name"
+    >
+    <button
+      class="image-play-button"
+      @click="playRadio"
+    >
+      <div class="icon-container">
+        <div
+          v-if="!playingRadio"
+          :title="$t('Play')"
+          class="saooti-play"
+        />
+        <div
+          v-else
+          class="bloc-paddle"
+        >
+          <span class="paddle1" />
+          <span class="paddle2" />
+          <span class="paddle3" />
+        </div>
+        <div class="ms-2">
+          {{ playText }}
+        </div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState, mapActions } from 'pinia';
+import imageProxy from '../../mixins/imageProxy';
+import { defineComponent } from 'vue';
+import { Canal } from '@/stores/class/radio/canal';
+export default defineComponent({
+  name: 'RadioImage',
+
+  components: {
+  },
+
+  mixins: [imageProxy],
+
+  props: {
+    radio: { default: undefined, type: Object as ()=>Canal},
+  },
+
+  computed:{
+    ...mapState(usePlayerStore, ['playerRadio', 'playerStatus']),
+    ...mapState(useFilterStore, ['filterOrgaId']),
+    playingRadio(){
+      return this.playerRadio && this.playerRadio.canalId === this.radio?.id;
+    },
+    playText(): string {
+      return this.playingRadio && "PLAYING"===this.playerStatus ? this.$t('Pause'):this.$t('Play');
+    },
+  },
+
+  methods: {
+    ...mapActions(usePlayerStore, ['playerPlay', 'playerChangeStatus']),
+    playRadio(): void{
+      if(!this.radio){return;}
+      if (this.playingRadio) {
+        this.playerChangeStatus("PLAYING"===this.playerStatus);
+      } else {
+        this.playerPlay({
+          canalId: this.radio.id,
+          url: "https://"+this.radio.url + "/live.m3u8",
+          metadata : ""
+        });
+      }
+    }
+  },
+})
+</script>
+

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

@@ -0,0 +1,54 @@
+<template>
+  <div
+    v-if="radio"
+    class="d-flex border w-100 p-3"
+  >
+    <RadioImage :radio="radio" />
+    <router-link
+      :to="{
+        name: 'radio',
+        params: { canalId: radio.id },
+        query: { productor: filterOrgaId },
+      }"
+      class="text-dark emission-item-text"
+    >
+      <div class="emission-name mb-2">
+        {{ radio.name }}
+      </div>
+      <div
+        v-if="radio.description"
+        class="ten-line-clamp"
+      >
+        {{ radio.description }}
+      </div>
+      <RadioCurrently :radio="radio" />
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import imageProxy from '../../mixins/imageProxy';
+import RadioImage from './RadioImage.vue';
+import RadioCurrently from './RadioCurrently.vue';
+import { defineComponent } from 'vue';
+import { Canal } from '@/stores/class/radio/canal';
+export default defineComponent({
+  name: 'RadioItem',
+
+  components: {
+    RadioCurrently,
+    RadioImage
+  },
+  mixins: [imageProxy],
+
+  props: {
+    radio: { default: undefined, type: Object as ()=>Canal},
+  },
+  computed:{
+    ...mapState(useFilterStore, ['filterOrgaId']),
+  },
+})
+</script>
+