@saooti/octopus-sdk 40.1.21 → 40.2.1-SNAPSHOT

package/index.ts

@@ -49,7 +49,13 @@ export const getOrganisationChooser = () => import("./src/components/display/org
 export const getPodcastFilterList = () => import("./src/components/display/podcasts/PodcastFilterList.vue");
 export const getPodcastInlineList = () => import("./src/components/display/podcasts/PodcastInlineList.vue");
 export const getPodcastList = () => import("./src/components/display/podcasts/PodcastList.vue");
-export const getShareButtons = () => import("./src/components/display/sharing/ShareButtons.vue");
+export const getShareButtons = () => import("./src/components/display/sharing/ShareSocialsButtons.vue");
+export const getShareAnonymous = () => import("./src/components/display/sharing/ShareAnonymous.vue");
+export const getShareNewsletter = () => import("./src/components/display/sharing/ShareNewsletter.vue");
+export const getQrCode = () => import("./src/components/display/sharing/QrCode.vue");
+
+
+
 export const getEmissionInlineList = () => import("./src/components/display/emission/EmissionInlineList.vue");
 export const getRubriqueChooser = () => import("./src/components/display/rubriques/RubriqueChooser.vue");
 export const getCommentList = () => import("./src/components/display/comments/CommentList.vue");

package/package.json

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

package/plateform.conf

@@ -1 +1 @@
-dev2.saooti.org
+preprod.saooti.org

package/src/components/composable/player/usePlayerLive.ts

@@ -8,7 +8,7 @@ import dayjs from "dayjs";
 let Hls:any = null;
 /* eslint-enable*/
 const maxMinutesSessionId = 1;
-export const usePlayerLive = (hlsReady: Ref<Boolean>)=>{
+export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
 
   const { listenTime, initLiveDownloadId, setDownloadId, onTimeUpdateProgress } = usePlayerLogicProgress();
 

package/src/components/display/accessibility/AccessibilityModal.vue

@@ -75,6 +75,13 @@ export default defineComponent({
   },
 
   emits: ["close", "save"],
+  data() {
+    return {
+      fontSize :16 as number,
+      background: "white" as string,
+      color: "black" as string,
+    };
+  },
   computed:{
     isMaxSize(){
       return this.fontSize>=30;
@@ -86,13 +93,6 @@ export default defineComponent({
       return 'font-size:'+this.fontSize+'px; background:'+this.background+'; color:'+this.color;
     }
   },
-  data() {
-    return {
-      fontSize :16 as number,
-      background: "white" as string,
-      color: "black" as string,
-    };
-  },
   created(){
     this.initAccessibility();
   },

package/src/components/display/comments/CommentSection.vue

@@ -21,7 +21,7 @@
       v-model:nb-comments="nbComments"
       :class="inStudio? 'mt-2':'mt-5'"
       :podcast="podcast"
-      :isFlatList="inStudio"
+      :is-flat-list="inStudio"
       :reload="reload"
       :config="configPodcast"
       :event-to-handle="eventToHandle"

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

@@ -59,7 +59,7 @@
           </router-link>
           <PodcastPlayBar
             v-else
-            :displayButonPlay="true"
+            :display-buton-play="true"
             :podcast="p"
           />
         </div>

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

@@ -14,7 +14,7 @@
         @slide-change="slideChange"
       >
         <swiper-slide v-for="(obj, index) in listObject" :key="obj">
-          <slot name="octopusSlide" :option="obj" :index="index" v-if="composableInit" />
+          <slot v-if="composableInit" name="octopusSlide" :option="obj" :index="index" />
         </swiper-slide>
       </swiper>
     </template>

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

@@ -11,7 +11,7 @@
         params: { podcastId: podcast.podcastId },
       }"
       class="text-dark flex-grow-1 title-podcast-item basic-line-clamp three-line"
-      :podcast.title="$t('Episode name page', { name: podcast.title })"
+      :title="$t('Episode name page', { name: podcast.title })"
     >
       {{ podcast.title }}
     </router-link>

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

@@ -1,115 +1,130 @@
 <template>
   <section v-if="podcast" class="module-box">
-    <div class="mb-2 d-flex">
-      <div class="w-100">
-        <PodcastImage
-          :class="[
-            isLiveReadyToRecord &&
-            podcastConference &&
-            'null' !== podcastConference &&
-            podcastConference.status
-              ? podcastConference.status.toLowerCase() + '-shadow'
-              : '',
-          ]"
-          class="me-3"
-          :hide-play="isLiveReadyToRecord"
-          :podcast="podcast"
-          :playing-podcast="playingPodcast"
-          :fetch-conference="podcastConference"
-          :is-animator-live="isOctopusAndAnimator"
-        />
-        <div class="d-flex justify-content-between flex-wrap mb-2">
-          <time 
-            v-if="0 !== date.length" :class="!isLiveReady ? 'me-5' : ''"
-            :datetime="podcast.pubDate">
-            {{ date }}
-          </time>
+    <RecordingItemButton
+      v-if="!!podcastConference && isLiveReadyToRecord && isOctopusAndAnimator"
+      :podcast="podcast"
+      :live="true"
+      :recording="podcastConference"
+      @delete-item="removeDeleted"
+      @validate-podcast="$emit('updatePodcast', $event)"
+    />
+    <EditBox
+      v-else-if="editRight && isEditBox"
+      :podcast="podcast"
+      :display-studio-access="isDebriefing"
+      @validate-podcast="$emit('updatePodcast', $event)"
+    />
+    <div class="mb-2 w-100">
+      <PodcastImage
+        :class="[
+          isLiveReadyToRecord &&
+          podcastConference &&
+          'null' !== podcastConference &&
+          podcastConference.status
+            ? podcastConference.status.toLowerCase() + '-shadow'
+            : '',
+        ]"
+        class="me-3"
+        :hide-play="isLiveReadyToRecord"
+        :podcast="podcast"
+        :playing-podcast="playingPodcast"
+        :fetch-conference="podcastConference"
+        :is-animator-live="isOctopusAndAnimator"
+      />
+      <div class="d-flex justify-content-between flex-wrap mb-2">
+        <time 
+          v-if="0 !== date.length" :class="!isLiveReady ? 'me-5' : ''"
+          :datetime="podcast.pubDate">
+          {{ date }}
+        </time>
+        <div v-if="isLiveReady" class="text-danger">
+          {{ $t("Episode record in live") }}
+        </div>
+        <div class="d-flex flex-column align-items-end flex-grow-1">
           <time :datetime="durationIso">
             {{ duration }}
           </time>
-          <div v-if="isLiveReady" class="text-danger">
-            {{ $t("Episode record in live") }}
-          </div>
+          <ShareAnonymous v-if="!editRight" :podcast="podcast" :organisation-id="podcast.organisation.id"/>
         </div>
-        <h2 class="mb-3">
-          {{ podcast.title }}
-        </h2>
-        <PodcastPlannedSpinner v-if="isPlannedInProcessor"/>
-        <Countdown v-if="isCounter" :time-remaining="timeRemaining" />
-        <!-- eslint-disable vue/no-v-html -->
-        <div
-          class="description-text html-wysiwyg-content"
-          v-html="urlify(podcast.description)"
+      </div>
+      <h2 class="mb-3">
+        {{ podcast.title }}
+      </h2>
+      <PodcastPlannedSpinner v-if="isPlannedInProcessor"/>
+      <Countdown v-if="isCounter" :time-remaining="timeRemaining" />
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        class="description-text html-wysiwyg-content"
+        v-html="urlify(podcast.description)"
+      />
+      <!-- eslint-enable -->
+      <div class="my-3">
+        <div class="mb-1">
+          {{ $t("Emission") + " : " }}
+          <router-link
+            :to="{
+              name: 'emission',
+              params: { emissionId: podcast.emission.emissionId },
+            }"
+            :title="$t('Series name page', { name: podcast.emission.name })"
+          >
+            {{ podcast.emission.name }}
+          </router-link>
+        </div>
+        <ParticipantDescription :participants="podcast.animators" />
+        <ParticipantDescription
+          :participants="podcast.guests"
+          :is-guest="true"
         />
-        <!-- eslint-enable -->
-        <div class="my-3">
-          <div class="mb-1">
-            {{ $t("Emission") + " : " }}
-            <router-link
-              :to="{
-                name: 'emission',
-                params: { emissionId: podcast.emission.emissionId },
-              }"
-              :title="$t('Series name page', { name: podcast.emission.name })"
-            >
-              {{ podcast.emission.name }}
-            </router-link>
-          </div>
-          <ParticipantDescription :participants="podcast.animators" />
-          <ParticipantDescription
-            :participants="podcast.guests"
-            :is-guest="true"
-          />
-          <div v-if="!isPodcastmaker" class="mb-1">
-            {{ $t("Producted by : ") }}
-            <router-link
-              :to="{
-                name: 'productor',
-                params: { productorId: podcast.organisation.id },
-              }"
-            >
-              {{ podcast.organisation.name }}
-            </router-link>
-          </div>
-          <div v-if="'' !== photoCredit" class="mb-1">
-            {{ $t("Photo credits") + " : " + photoCredit }}
-          </div>
-          <div v-if="'' !== audioCredit" class="mb-1">
-            {{ $t("Audio credits") + " : " + audioCredit }}
-          </div>
-          <div v-if="'' !== authorCredit" class="mb-1">
-            {{ $t("Author credits") + " : " + authorCredit }}
-          </div>
-          <a
-            v-if="podcast.article && !isGarRole"
-            class="btn d-flex align-items-center my-2 w-fit-content mb-1"
-            :href="podcast.article"
-            rel="noreferrer noopener"
-            target="_blank"
-            :title="$t('New window', {text : $t('See associated article')})"
+        <div v-if="!isPodcastmaker" class="mb-1">
+          {{ $t("Producted by : ") }}
+          <router-link
+            :to="{
+              name: 'productor',
+              params: { productorId: podcast.organisation.id },
+            }"
           >
-            <NewspaperVariantOutlineIcon class="me-1" />
-            <div>{{ $t("See associated article") }}</div>
-          </a>
-          <PodcastPlayBar
-            v-if="isProgressBar"
-            :podcast="podcast"
-          />
-          <div v-if="editRight && !isPodcastmaker">
-            <div
-              v-if="
-                podcast.annotations && 'RSS' === podcast.annotations.SOURCE_KIND
-              "
-              class="me-5 text-secondary"
-            >
-              {{ $t("From RSS") }}
-            </div>
-            <ErrorMessage v-if="'' !== errorMessage" :message="errorMessage" />
-          </div>
-          <div class="d-flex align-items-center flex-wrap">
-            <LikeSection :edit-right="editRight" :podcast="podcast" />
-            <DownloadPodcastButton v-if="isDownloadButton" :podcast="podcast" />
+            {{ podcast.organisation.name }}
+          </router-link>
+        </div>
+        <div v-if="'' !== photoCredit" class="mb-1">
+          {{ $t("Photo credits") + " : " + photoCredit }}
+        </div>
+        <div v-if="'' !== audioCredit" class="mb-1">
+          {{ $t("Audio credits") + " : " + audioCredit }}
+        </div>
+        <div v-if="'' !== authorCredit" class="mb-1">
+          {{ $t("Author credits") + " : " + authorCredit }}
+        </div>
+        <a
+          v-if="podcast.article && !isGarRole"
+          class="btn d-flex align-items-center my-2 w-fit-content mb-1"
+          :href="podcast.article"
+          rel="noreferrer noopener"
+          target="_blank"
+          :title="$t('New window', {text : $t('See associated article')})"
+        >
+          <NewspaperVariantOutlineIcon class="me-1" />
+          <div>{{ $t("See associated article") }}</div>
+        </a>
+        <PodcastPlayBar
+          v-if="isProgressBar"
+          :podcast="podcast"
+        />
+        <div v-if="editRight && !isPodcastmaker">
+          <div
+            v-if="
+              podcast.annotations && 'RSS' === podcast.annotations.SOURCE_KIND
+            "
+            class="me-5 text-secondary"
+          >
+            {{ $t("From RSS") }}
           </div>
+          <ErrorMessage v-if="'' !== errorMessage" :message="errorMessage" />
+        </div>
+        <div class="d-flex align-items-center flex-wrap">
+          <LikeSection :edit-right="editRight" :podcast="podcast" />
+          <DownloadPodcastButton v-if="isDownloadButton" :podcast="podcast" />
         </div>
       </div>
     </div>
@@ -132,20 +147,6 @@
       :window-width="1000"
       :justify-center="false"
     />
-    <RecordingItemButton
-      v-if="!!podcastConference && isLiveReadyToRecord && isOctopusAndAnimator"
-      :podcast="podcast"
-      :live="true"
-      :recording="podcastConference"
-      @delete-item="removeDeleted"
-      @validate-podcast="$emit('updatePodcast', $event)"
-    />
-    <EditBox
-      v-else-if="editRight && isEditBox"
-      :podcast="podcast"
-      :display-studio-access="isDebriefing"
-      @validate-podcast="$emit('updatePodcast', $event)"
-    />
   </section>
 </template>
 
@@ -188,6 +189,7 @@ const PodcastPlannedSpinner = defineAsyncComponent(
 );
 const Countdown = defineAsyncComponent(() => import("../live/CountDown.vue"));
 const TagList = defineAsyncComponent(() => import("./TagList.vue"));
+const ShareAnonymous = defineAsyncComponent(() => import("../sharing/ShareAnonymous.vue"));
 const PodcastRubriqueList = defineAsyncComponent(() => import("./PodcastRubriqueList.vue"));
 import { mapState } from "pinia";
 export default defineComponent({
@@ -207,7 +209,8 @@ export default defineComponent({
     DownloadPodcastButton,
     NewspaperVariantOutlineIcon,
     PodcastPlannedSpinner,
-    PodcastRubriqueList
+    PodcastRubriqueList,
+    ShareAnonymous
   },
 
   props: {

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

@@ -80,15 +80,15 @@ export default defineComponent({
   },
   methods: {
     getAccessibility(){
-      let fontSize = cookiesHelper.getCookie("octopus-font-size");
+      const fontSize = cookiesHelper.getCookie("octopus-font-size");
       if (null !== fontSize) {
         this.setCssProperty('--octopus-accessibility-font-size', fontSize);
       }
-      let background = cookiesHelper.getCookie("octopus-background");
+      const background = cookiesHelper.getCookie("octopus-background");
       if (null !== background) {
         this.setCssProperty('--octopus-accessibility-background', background);
       }
-      let color = cookiesHelper.getCookie("octopus-color");
+      const color = cookiesHelper.getCookie("octopus-color");
       if (null !== color) {
         this.setCssProperty('--octopus-accessibility-color', color);
       }
@@ -212,25 +212,12 @@ export default defineComponent({
     white-space: pre-wrap;
     background: var(--octopus-accessibility-background);
     color: var(--octopus-accessibility-color);
+    border: 2px solid var(--octopus-border-default);
+    border-radius: var(--octopus-border-radius);
 
     .transcription-text {
       overflow: hidden auto;
     }
-
-    &::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      padding: 3px;
-      background: repeating-conic-gradient(
-          var(--octopus-secondary) 0 25%,
-          var(--octopus-primary) 0 50%
-        )
-        0 0/30px 30px round;
-      mask:linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
-      mask-composite: exclude;
-      pointer-events: none;
-    }
   }
 }
 </style>

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

@@ -0,0 +1,54 @@
+<template>
+  <ClassicModal
+    id-modal="player-anonymous-modal"
+    :title-modal="$t('Share the player')"
+    @close="closePopup"
+  >
+    <template #body>
+      <SharePlayer
+        :podcast="podcast"
+        :emission="emission"
+        :exclusive="exclusive"
+        :not-exclusive="notExclusive"
+        :organisation-id="authOrgaId"
+      />
+    </template>
+    <template #footer>
+      <button class="btn btn-primary m-1" @click="closePopup">
+        {{ $t("Close") }}
+      </button>
+    </template>
+  </ClassicModal>
+</template>
+
+<script lang="ts">
+import { Podcast } from "@/stores/class/general/podcast";
+import ClassicModal from "../../misc/modal/ClassicModal.vue";
+import SharePlayer from "./SharePlayer.vue";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { defineComponent } from "vue";
+import { Emission } from "@/stores/class/general/emission";
+import { mapState } from "pinia";
+export default defineComponent({
+  name: "PlayerAnonymousModal",
+  components: {
+    ClassicModal,
+    SharePlayer
+  },
+  props: {
+    podcast: { default: undefined, type: Object as () => Podcast },
+    emission: { default: undefined, type: Object as () => Emission },
+    exclusive: { default: false, type: Boolean },
+    notExclusive: { default: true, type: Boolean },
+  },
+  emits: ["close"],
+  computed:{
+    ...mapState(useAuthStore, ["authOrgaId"]),
+  },
+  methods: {
+    closePopup(): void {
+      this.$emit("close");
+    },
+  },
+});
+</script>

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

@@ -1,5 +1,20 @@
 <template>
   <div class="d-flex flex-column align-items-center">
+    <div class="d-flex align-items-center mb-3">
+      <div class="form-label me-3">
+        {{ $t("Choose color") }}
+      </div>
+      <VSwatches
+        v-model:model-value="color"
+        class="c-hand"
+        show-fallback
+        fallback-input-type="color"
+        colors="text-advanced"
+        popover-to="right"
+        popover-y="bottom"
+        :data-color="color"
+      />
+    </div>
     <qrcode-vue
       :value="url"
       :size="size"
@@ -8,14 +23,7 @@
       class="myQrCode"
       :margin="2"
     />
-    <ClassicCheckbox
-      v-if="'#000000' !== otherColor"
-      v-model:text-init="isNotBlack"
-      class="flex-shrink-0"
-      id-checkbox="is-black-qr-code"
-      :label="$t('Use organization color')"
-    />
-    <button class="btn m-3" @click="download">
+    <button class="btn btn-primary my-3" @click="download">
       {{ $t("Download") }}
     </button>
     <SnackBar ref="snackbar" position="bottom-left" />
@@ -23,12 +31,12 @@
 </template>
 
 <script lang="ts">
-import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
+import { VSwatches } from "vue3-swatches";
+import "vue3-swatches/dist/style.css";
 import SnackBar from "../../misc/SnackBar.vue";
 import QrcodeVue from "qrcode.vue";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
-import { useAuthStore } from "../../../stores/AuthStore";
-import { mapState, mapActions } from "pinia";
+import { mapActions } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "QrCode",
@@ -36,29 +44,20 @@ export default defineComponent({
   components: {
     SnackBar,
     QrcodeVue,
-    ClassicCheckbox,
+    VSwatches,
   },
   props: {
     url: { default: "", type: String },
+    orgaForColor: { default: undefined, type: String },
   },
   data() {
     return {
       size: 200 as number,
       color: "#000000" as string,
-      otherColor: "#000000" as string,
-      isNotBlack: false as boolean,
     };
   },
-  computed: {
-    ...mapState(useAuthStore, ["authOrganisation", "authOrgaId"]),
-  },
-  watch: {
-    isNotBlack() {
-      this.color = this.isNotBlack ? this.otherColor : "#000000";
-    },
-  },
   created() {
-    this.initColor();
+    this.initDefaultColor();
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
@@ -74,12 +73,11 @@ export default defineComponent({
         );
       }
     },
-    async initColor(): Promise<void> {
-      if (undefined === this.authOrgaId) return;
-      const orgaId = this.authOrgaId;
-      const attributes = await this.getOrgaAttributes(orgaId ?? "");
+    async initDefaultColor(): Promise<void> {
+      if (undefined === this.orgaForColor) return;
+      const attributes = await this.getOrgaAttributes(this.orgaForColor);
       if (Object.hasOwn(attributes, "COLOR")) {
-        this.otherColor = attributes.COLOR as string;
+        this.color = attributes.COLOR as string;
       }
     },
   },