@saooti/octopus-sdk 39.0.47 → 39.0.48

package/package.json

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

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="emission-item-container emission-presentation-container mt-3" :class="isVertical?'emission-vertical-item':''">
+  <div
+    class="emission-item-container emission-presentation-container mt-3"
+    :class="isVertical ? 'emission-vertical-item' : ''"
+  >
     <router-link
       :to="{
         name: 'emission',
@@ -8,13 +11,13 @@
       }"
       :title="$t('Emission')"
       class="d-flex-column flex-grow-1 text-dark"
-      :class="isVertical? 'flex-column':''"
+      :class="isVertical ? 'flex-column' : ''"
     >
       <img
-        v-lazy="proxyImageUrl(emission.imageUrl, isVertical?'400':'250')"
-        :width="isVertical?'400':'250'"
-        :height="isVertical?'400':'250'"
-        :class="isVertical?'img-box-bigger':''"
+        v-lazy="proxyImageUrl(emission.imageUrl, isVertical ? '400' : '250')"
+        :width="isVertical ? '400' : '250'"
+        :height="isVertical ? '400' : '250'"
+        :class="isVertical ? 'img-box-bigger' : ''"
         class="img-box"
         :title="$t('Emission name image', { name: emission.name })"
         :alt="$t('Emission name image', { name: emission.name })"
@@ -43,23 +46,22 @@ export default defineComponent({
     emission: { default: () => ({}), type: Object as () => Emission },
     isVertical: { default: false, type: Boolean },
   },
-
 });
 </script>
 <style lang="scss">
 .octopus-app {
-  .emission-presentation-container{
+  .emission-presentation-container {
     @media (max-width: 960px) {
       width: 250px !important;
       margin-right: 0.5rem;
     }
   }
-  .emission-item-container.emission-vertical-item{
+  .emission-item-container.emission-vertical-item {
     flex-grow: 0;
     width: 400px;
     flex-shrink: 0;
   }
-  .img-box-bigger{
+  .img-box-bigger {
     width: 400px;
     height: 400px;
   }

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

@@ -7,20 +7,38 @@
     />
     <template v-if="!loading && !error">
       <div class="d-flex flex-nowrap align-items-stretch overflow-phone-auto">
-          <EmissionItemPresentation 
-            v-if="allEmissions[0]" 
-            :class="!isPhone? 'me-3':''"
-            :emission="allEmissions[0]" 
-            :isVertical="!isPhone"
+        <EmissionItemPresentation
+          v-if="allEmissions[0]"
+          :class="!isPhone ? 'me-3' : ''"
+          :emission="allEmissions[0]"
+          :is-vertical="!isPhone"
+        />
+        <div
+          v-if="allEmissions.length > 1"
+          class="emission-column emission-column-margin d-flex-row flex-nowrap"
+        >
+          <EmissionItemPresentation
+            v-if="allEmissions[1]"
+            :emission="allEmissions[1]"
           />
-          <div v-if="allEmissions.length > 1" class="emission-column emission-column-margin d-flex-row flex-nowrap">
-            <EmissionItemPresentation v-if="allEmissions[1]" :emission="allEmissions[1]" />
-            <EmissionItemPresentation  v-if="allEmissions[2]" :emission="allEmissions[2]"/>
-          </div>
-          <div v-if="allEmissions.length > 3" class="emission-column d-flex-row flex-nowrap show-emission-column">
-            <EmissionItemPresentation v-if="allEmissions[3]" :emission="allEmissions[3]" />
-            <EmissionItemPresentation  v-if="allEmissions[4]" :emission="allEmissions[4]"/>
-          </div>
+          <EmissionItemPresentation
+            v-if="allEmissions[2]"
+            :emission="allEmissions[2]"
+          />
+        </div>
+        <div
+          v-if="allEmissions.length > 3"
+          class="emission-column d-flex-row flex-nowrap show-emission-column"
+        >
+          <EmissionItemPresentation
+            v-if="allEmissions[3]"
+            :emission="allEmissions[3]"
+          />
+          <EmissionItemPresentation
+            v-if="allEmissions[4]"
+            :emission="allEmissions[4]"
+          />
+        </div>
       </div>
       <router-link
         v-if="buttonText && href"
@@ -34,9 +52,7 @@
 </template>
 
 <script lang="ts">
-import SwiperList from "../list/SwiperList.vue";
 import octopusApi from "@saooti/octopus-api";
-import EmissionPlayerItem from "./EmissionPlayerItem.vue";
 import { handle403 } from "../../mixins/handle403";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { Emission } from "@/stores/class/general/emission";
@@ -44,14 +60,14 @@ import { defineAsyncComponent, defineComponent } from "vue";
 import { AxiosError } from "axios";
 import imageProxy from "../../mixins/imageProxy";
 import resizePhone from "../../mixins/resizePhone";
-const EmissionItemPresentation = defineAsyncComponent(() => import("./EmissionPresentationItem.vue"));
+const EmissionItemPresentation = defineAsyncComponent(
+  () => import("./EmissionPresentationItem.vue"),
+);
 export default defineComponent({
   name: "EmissionPresentationList",
   components: {
-    EmissionPlayerItem,
     ClassicLoading,
-    SwiperList,
-    EmissionItemPresentation
+    EmissionItemPresentation,
   },
 
   mixins: [handle403, imageProxy, resizePhone],
@@ -102,36 +118,36 @@ export default defineComponent({
         this.handle403(error as AxiosError);
         this.error = true;
       }
-      this.loading= false;
+      this.loading = false;
     },
   },
 });
 </script>
 <style lang="scss">
 .octopus-app {
-  .overflow-phone-auto{
+  .overflow-phone-auto {
     @media (max-width: 960px) {
       overflow-y: auto;
     }
   }
-  .emission-column{
+  .emission-column {
     flex-shrink: 0;
     width: calc((100% - 420px) / 2);
     @media (max-width: 1550px) {
-      width: calc((100% - 420px)) ;
+      width: calc((100% - 420px));
     }
     @media (max-width: 960px) {
       width: auto;
       flex-direction: row !important;
     }
   }
-  .emission-column-margin{
-      margin-right: 1rem;
-      @media (max-width: 960px) {
-        margin-right: 0;
-      }
+  .emission-column-margin {
+    margin-right: 1rem;
+    @media (max-width: 960px) {
+      margin-right: 0;
     }
-  .show-emission-column{
+  }
+  .show-emission-column {
     display: flex;
     @media (max-width: 1550px) {
       display: none !important;

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

@@ -96,7 +96,7 @@ export default defineComponent({
     listObject: {
       deep: true,
       handler() {
-        this.manualReload+=1;
+        this.manualReload += 1;
       },
     },
   },

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

@@ -116,6 +116,19 @@
         </div>
       </div>
     </div>
+    <TagList
+      v-if="undefined !== podcast.tags && 0 !== podcast.tags.length && !isPhone"
+      :tag-list="podcast.tags"
+      :podcast-annotations="podcast.annotations"
+    />
+    <PodcastRawTranscript :podcast-id="podcast.podcastId" />
+    <SubscribeButtons
+      v-if="isPodcastmaker"
+      class="mt-4"
+      :emission="podcast.emission"
+      :window-width="1000"
+      :justify-center="false"
+    />
     <RecordingItemButton
       v-if="!!fetchConference && isLiveReadyToRecord && isOctopusAndAnimator"
       :podcast="podcast"
@@ -130,24 +143,13 @@
       :display-studio-access="isDebriefing"
       @validate-podcast="$emit('updatePodcast', $event)"
     />
-    <TagList
-      v-if="undefined !== podcast.tags && 0 !== podcast.tags.length && !isPhone"
-      :tag-list="podcast.tags"
-      :podcast-annotations="podcast.annotations"
-    />
-    <SubscribeButtons
-      v-if="isPodcastmaker"
-      class="mt-4"
-      :emission="podcast.emission"
-      :window-width="1000"
-      :justify-center="false"
-    />
   </div>
 </template>
 
 <script lang="ts">
 import PodcastImage from "./PodcastImage.vue";
 import ParticipantDescription from "./ParticipantDescription.vue";
+import PodcastRawTranscript from "./PodcastRawTranscript.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import dayjs from "dayjs";
 // @ts-ignore
@@ -188,6 +190,7 @@ export default defineComponent({
     RecordingItemButton,
     SubscribeButtons,
     Countdown,
+    PodcastRawTranscript,
   },
 
   mixins: [displayMethods, orgaComputed, resizePhone],

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

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <button
+      class="btn btn-transcript"
+      :class="{ open: isOpen }"
+      @click="isOpen = !isOpen"
+    >
+      {{ buttonText }}
+    </button>
+    <div v-if="isOpen" class="transcription-body">
+      <ClassicLoading
+        :loading-text="!firstLoaded ? $t('Loading content ...') : undefined"
+      />
+      <div class="transcription-text">
+        <template v-if="firstLoaded && transcript?.length">{{
+          transcript
+        }}</template>
+        <template v-if="firstLoaded && !transcript?.length">{{
+          $t("Transcript does not yet exist for this episode")
+        }}</template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import octopusApi from "@saooti/octopus-api";
+import ClassicLoading from "../../form/ClassicLoading.vue";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "PodcastRawTranscript",
+
+  components: {
+    ClassicLoading,
+  },
+
+  props: {
+    podcastId: { default: undefined, type: Number },
+  },
+  data() {
+    return {
+      isOpen: false as boolean,
+      firstLoaded: false as boolean,
+      transcript: undefined as string | undefined,
+    };
+  },
+
+  computed: {
+    buttonText() {
+      return this.isOpen
+        ? this.$t("Hide transcript")
+        : this.$t("View transcript");
+    },
+  },
+  watch: {
+    async isOpen() {
+      if (this.isOpen && !this.firstLoaded) {
+        this.fetchTranscript();
+      }
+    },
+  },
+  methods: {
+    async fetchTranscript() {
+      if (!this.podcastId) {
+        return;
+      }
+      try {
+        this.transcript = await octopusApi.fetchData(
+          11,
+          `transcription/text/${this.podcastId}`,
+        );
+      } catch {
+        //Do nothing
+      }
+      this.firstLoaded = true;
+    },
+  },
+});
+</script>
+<style lang="scss">
+@import "@scss/_variables.scss";
+.octopus-app {
+  .btn-transcript {
+    position: relative;
+    border-radius: $octopus-borderradius;
+    overflow: hidden;
+    background: $octopus-secondary-color;
+    transition: all 0.2s linear 0s;
+
+    &:not(.open):before,
+    &.open:after {
+      content: "➤";
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 30px;
+      border-radius: 0 50% 50% 0;
+      background-color: rgba(#fff, 0.4);
+      transform: scale(0, 1);
+      transition: all 0.2s linear 0s;
+    }
+    &:not(.open):before {
+      left: 0px;
+      transform-origin: left center;
+    }
+    &.open:after {
+      right: -30px;
+      transform-origin: center left;
+    }
+    &.open {
+      direction: rtl;
+    }
+    &:hover {
+      text-indent: 30px;
+    }
+    &:not(.open):hover:before,
+    &.open:hover:after {
+      text-indent: 0;
+    }
+    &:not(.open):hover:before {
+      transform: scale(1, 1);
+    }
+    &.open:hover:after {
+      transform: scale(-1, 1);
+    }
+  }
+  .transcription-body {
+    position: relative;
+    padding: 1rem;
+    max-height: 250px;
+    display: flex;
+    justify-content: center;
+    .transcription-text {
+      overflow-y: auto;
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      padding: 3px;
+      background: repeating-conic-gradient(
+          $octopus-secondary-color 0 25%,
+          $octopus-primary-color 0 50%
+        )
+        0 0/30px 30px round;
+      -webkit-mask:
+        linear-gradient(#000 0 0) content-box,
+        linear-gradient(#000 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+    }
+  }
+}
+</style>

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

@@ -138,7 +138,9 @@ export default defineComponent({
         true,
       );
       this.loading = true;
-      this.allPodcasts = data.result.filter((pod: Podcast | null) => null !== pod);
+      this.allPodcasts = data.result.filter(
+        (pod: Podcast | null) => null !== pod,
+      );
       this.loading = false;
     },
     sortPopular(): void {
@@ -150,7 +152,7 @@ export default defineComponent({
       if (!this.popularSort) return;
       this.popularSort = false;
       this.fetchNext();
-    }
+    },
   },
 });
 </script>

package/src/components/display/sharing/SharePlayer.vue

@@ -166,7 +166,7 @@ export default defineComponent({
     displayWaveParam(): boolean {
       return "default" === this.iFrameModel || "emission" === this.iFrameModel;
     },
-    choseNumberEpisodes():boolean{
+    choseNumberEpisodes(): boolean {
       return this.displayChoiceAllEpisodes || this.isTypeSuggestion;
     },
     displayArticleParam(): boolean {
@@ -222,10 +222,17 @@ export default defineComponent({
       return "emissionLarge" === this.iFrameModel;
     },
     isTypeSuggestion(): boolean {
-      return "largeSuggestion" === this.iFrameModel || "SUGGESTION"===this.typeCustomPlayer;
+      return (
+        "largeSuggestion" === this.iFrameModel ||
+        "SUGGESTION" === this.typeCustomPlayer
+      );
     },
-    isTypeEmission():boolean{
-      return this.isEmission || this.isLargeEmission || "EMISSION"===this.typeCustomPlayer;
+    isTypeEmission(): boolean {
+      return (
+        this.isEmission ||
+        this.isLargeEmission ||
+        "EMISSION" === this.typeCustomPlayer
+      );
     },
     titleStillAvailable(): string {
       return this.isPodcastNotVisible

package/src/components/display/sharing/SharePlayerTypes.vue

@@ -120,24 +120,26 @@ export default defineComponent({
     this.initCustomPlayers();
   },
   methods: {
-    isNumeric(value: string):boolean {
+    isNumeric(value: string): boolean {
       return /^-?\d+$/.test(value);
     },
-    selectChange($event: any){
+    selectChange($event: any) {
       const val = $event.target.value;
-      if(!val){
+      if (!val) {
         return;
       }
-      if(this.isNumeric(val)){
-        var customPlayer = this.customPlayersDisplay.find((p) => {return p.customId.toString() === val});
-        if(customPlayer){
+      if (this.isNumeric(val)) {
+        var customPlayer = this.customPlayersDisplay.find((p) => {
+          return p.customId.toString() === val;
+        });
+        if (customPlayer) {
           this.selectCustomPlayer(customPlayer);
         }
-      }else{
-        this.$emit('update:iFrameModel',val)
+      } else {
+        this.$emit("update:iFrameModel", val);
       }
     },
-    async fetchPlayerPaginate(type: string): Promise<CustomPlayer[]>{
+    async fetchPlayerPaginate(type: string): Promise<CustomPlayer[]> {
       let players = await octopusApi.fetchDataPublic<
         InterfacePageable<CustomPlayer>
       >(6, "customPlayer/type/" + this.organisationId + "/" + type);
@@ -161,11 +163,14 @@ export default defineComponent({
       }
       return playersContent;
     },
-    selectCustomPlayer(customPlayer: CustomPlayer){
+    selectCustomPlayer(customPlayer: CustomPlayer) {
       this.$emit("update:typeCustomPlayer", customPlayer.typePlayer);
-      this.$emit("update:iFrameModel",customPlayer.customId.toString());
+      this.$emit("update:iFrameModel", customPlayer.customId.toString());
     },
-    async fetchCustomPlayers(type: string, selectIfPossible = true): Promise<boolean> {
+    async fetchCustomPlayers(
+      type: string,
+      selectIfPossible = true,
+    ): Promise<boolean> {
       let customPlayersForType = await this.fetchPlayerPaginate(type);
       this.customPlayers = this.customPlayers.concat(customPlayersForType);
       if (
@@ -186,8 +191,14 @@ export default defineComponent({
         this.fetchCustomPlayers("EMISSION");
       } else {
         const episodeSelected = await this.fetchCustomPlayers("EPISODE");
-        const emissionSelected = await this.fetchCustomPlayers("EMISSION", !episodeSelected);
-        await this.fetchCustomPlayers("SUGGESTION", !episodeSelected && !emissionSelected);
+        const emissionSelected = await this.fetchCustomPlayers(
+          "EMISSION",
+          !episodeSelected,
+        );
+        await this.fetchCustomPlayers(
+          "SUGGESTION",
+          !episodeSelected && !emissionSelected,
+        );
       }
     },
   },

package/src/components/form/ClassicMultiselect.vue

@@ -20,7 +20,11 @@
       :disabled="isDisabled"
       :loading="isLoading"
       :placeholder="placeholder"
-      :clearSearchOnBlur="()=>{return true}"
+      :clear-search-on-blur="
+        () => {
+          return true;
+        }
+      "
       :filter="fakeSearch"
       :selectable="() => !maxOptionsSelected"
       @open="onSearch"
@@ -101,7 +105,7 @@ export default {
       remainingElements: 0 as number,
       isLoading: false as boolean,
       nbOptionsSelected: 0 as number,
-      searchInput: "" as string
+      searchInput: "" as string,
     };
   },
   computed: {
@@ -141,13 +145,13 @@ export default {
     onSearch(search?: string): void {
       if (search && search.length < this.minSearchLength) {
         return;
-      }else if(search){
+      } else if (search) {
         this.searchInput = search;
       }
       this.isLoading = true;
       this.$emit("onSearch", search);
     },
-    onClose(){
+    onClose() {
       this.$emit("onClose", this.searchInput);
       this.searchInput = "";
     },

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

@@ -28,7 +28,7 @@
       />
     </div>
     <!-- <AdsSkipButton/> -->
-    <PlayerSpeedButton/>
+    <PlayerSpeedButton />
     <button
       :title="'' != transcriptText ? $t('View transcript') : $t('Enlarge')"
       class="btn play-button-box btn-transparent text-light saooti-up me-0"
@@ -71,7 +71,7 @@ export default defineComponent({
     PlayerImage,
     PlayerPlayButton,
     PlayerTitle,
-    PlayerSpeedButton
+    PlayerSpeedButton,
     /* AdsSkipButton */
   },
   mixins: [playerDisplayTime, imageProxy],

package/src/components/misc/player/elements/PlayerPlayButton.vue

@@ -127,7 +127,7 @@ export default defineComponent({
     flex-shrink: 0;
     cursor: pointer;
   }
-  .play-button-box:not(.small-font){
+  .play-button-box:not(.small-font) {
     font-size: 1rem !important;
   }
   .play-big-button-box {

package/src/components/misc/player/elements/PlayerSpeedButton.vue

@@ -4,12 +4,10 @@
     class="btn play-button-box small-font btn-transparent text-light me-0"
     @click="changeSpeed"
   >
-  {{
-    "×"+speedArray[speedIndex]
-  }}</button>
+    {{ "×" + speedArray[speedIndex] }}
+  </button>
 </template>
 <script lang="ts">
-
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PlayerSpeedButton",
@@ -18,11 +16,11 @@ export default defineComponent({
     return {
       audioPlayer: null as HTMLAudioElement | null,
       speedIndex: 2 as number,
-      speedArray: [0.5,0.75, 1, 1.25, 1.5,1.75],
+      speedArray: [0.5, 0.75, 1, 1.25, 1.5, 1.75],
     };
   },
-  mounted(){
-    this.audioPlayer =document.querySelector("#audio-player");
+  mounted() {
+    this.audioPlayer = document.querySelector("#audio-player");
   },
   methods: {
     changeSpeed() {
@@ -30,7 +28,7 @@ export default defineComponent({
       if (this.speedIndex > this.speedArray.length - 1) {
         this.speedIndex = 0;
       }
-      if(this.audioPlayer){
+      if (this.audioPlayer) {
         this.audioPlayer.playbackRate = this.speedArray[this.speedIndex];
       }
     },
@@ -41,6 +39,5 @@ export default defineComponent({
 <style lang="scss">
 @import "@scss/_variables.scss";
 .octopus-app {
-
 }
 </style>

package/src/components/misc/player/video/PlayerVideoHls.vue

@@ -15,7 +15,7 @@ import { mapActions } from "pinia";
 import { playerLogicProgress } from "../../../mixins/player/playerLogicProgress";
 import videojs, { VideoJsPlayer } from "video.js";
 import qualitySelectorHls from "videojs-quality-selector-hls";
-if (undefined===videojs.getPlugin("qualitySelectorHls")) {
+if (undefined === videojs.getPlugin("qualitySelectorHls")) {
   videojs.registerPlugin("qualitySelectorHls", qualitySelectorHls);
 }
 import { defineComponent } from "vue";
@@ -104,7 +104,7 @@ export default defineComponent({
         document.getElementById("video-element-hls") as Element,
         this.videoOptions,
         () => {
-          this.player.qualitySelectorHls( {displayCurrentQuality: true} );
+          this.player.qualitySelectorHls({ displayCurrentQuality: true });
           /*console.log(this.player.tech(true).vhs.playlistController_); */
           this.errorPlay = "";
           this.playing = true;

package/src/locale/de.ts

@@ -364,4 +364,6 @@ export default {
   "Evening":"Abend",
   "Now":"Jetzt",
   "Change speed":"Geschwindigkeit ändern",
+  "Hide transcript":"Transkript ausblenden",
+  "Transcript does not yet exist for this episode":"Für diese Episode existiert noch kein Transkript",
 }

package/src/locale/en.ts

@@ -365,4 +365,6 @@ export default {
   "Evening":"Evening",
   "Now":"Now",
   "Change speed":"Change speed",
+  "Hide transcript":"Hide transcript",
+  "Transcript does not yet exist for this episode":"Transcript does not yet exist for this episode",
 };

package/src/locale/es.ts

@@ -365,4 +365,6 @@ export default {
   "Evening":"Noche",
   "Now":"Ahora",
   "Change speed":"Cambiar velocidad",
+  "Hide transcript":"Ocultar transcripción",
+  "Transcript does not yet exist for this episode":"La transcripción aún no existe para este episodio",
 }

package/src/locale/fr.ts

@@ -372,4 +372,6 @@ export default {
   "Evening":"Soirée",
   "Now":"Maintenant",
   "Change speed":"Changer la vitesse",
+  "Hide transcript":"Cacher la transcription",
+  "Transcript does not yet exist for this episode":"La transcription n'existe pas encore pour cet épisode",
 };

package/src/locale/it.ts

@@ -358,4 +358,6 @@ export default{
   "Evening":"Sera",
   "Now":"Ora",
   "Change speed":"Cambia velocità",
+  "Hide transcript":"Nascondi trascrizione",
+  "Transcript does not yet exist for this episode":"La trascrizione di questo episodio non esiste ancora",
 };

package/src/locale/sl.ts

@@ -355,4 +355,6 @@ export default {
   "Evening":"Večer",
   "Now":"Zdaj",
   "Change speed":"Spremenite hitrost",
+  "Hide transcript":"Skrij prepis",
+  "Transcript does not yet exist for this episode":"Prepis za to epizodo še ne obstaja",
 }