@saooti/octopus-sdk 40.1.21 → 40.2.0-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.0-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

@@ -24,12 +24,15 @@
             :datetime="podcast.pubDate">
             {{ date }}
           </time>
-          <time :datetime="durationIso">
-            {{ duration }}
-          </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>
+            <ShareAnonymous v-if="!editRight" :podcast="podcast" :organisation-id="podcast.organisation.id"/>
+          </div>
         </div>
         <h2 class="mb-3">
           {{ podcast.title }}
@@ -188,6 +191,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 +211,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;
       }
     },
   },

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

@@ -0,0 +1,291 @@
+<template>
+  <div v-if="!isLoading && !noSharing">
+    <button
+      id="anonymous-share-button"
+      :class="btnClass"
+      :title="$t('Share')"
+    >
+      <DotsHorizontalIcon />
+    </button>
+    <ClassicPopover
+      target="anonymous-share-button"
+      :relative-class="relativeClass"
+      :is-fixed="true"
+      :left-pos="true"
+      :only-click="true"
+    >
+      <div  
+        v-for="button in dropdownButtons"
+        :key="button.icon"
+        class="d-flex flex-column"
+      >
+        <button
+          v-if="button.condition"
+          :key="button.title"
+          class="btn-transparent d-flex flex-nowrap justify-content-start align-items-center octopus-dropdown-item py-2"
+          :title="button.title"
+          @mousedown="clickButton(button.emitName)"
+          @keydown.enter="clickButton(button.emitName)"
+        >
+          <component :is="button.icon" />
+          <div class="ms-1">{{ button.title }}</div>
+        </button>
+      </div>
+    </ClassicPopover>
+    <QrCodeModal
+      v-if="isQrCodeModal"
+      :url-page="urlPage"
+      :orga-for-color="organisationId"
+      @close="isQrCodeModal = false"
+    />
+    <PlayerAnonymousModal
+      v-if="isPlayerModal"
+      :podcast="podcast"
+      :emission="emission ?? podcast?.emission"
+      :exclusive="!playerCanBeSharedOthers"
+      :not-exclusive="playerCanBeSharedAnonymous"
+      @close="isPlayerModal = false"
+    />
+    <NewsletterModal
+      v-if="isNewsletterModal"
+      :closable="true"
+      :podcast="podcast"
+      :emission="emission"
+      :playlist="playlist"
+      @close="isNewsletterModal = false"
+    />
+    <ClipboardModal
+      v-if="isRssModal"
+      :link="rssUrl"
+      @close="isRssModal = false"
+      @copy="afterCopy"
+    />
+    <SnackBar
+      v-if="lazyLoadingSnackbar"
+      ref="snackbar"
+      position="bottom-left"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import QrcodeIcon from "vue-material-design-icons/Qrcode.vue";
+import LinkVariantIcon from "vue-material-design-icons/LinkVariant.vue";
+import DotsHorizontalIcon from "vue-material-design-icons/DotsHorizontal.vue";
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import displayHelper from "../../../helper/displayHelper";
+import { defineAsyncComponent, defineComponent } from "vue";
+import { useApiStore } from "../../../stores/ApiStore";
+import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { Podcast } from "@/stores/class/general/podcast";
+import { Emission } from "@/stores/class/general/emission";
+import { Playlist } from "@/stores/class/general/playlist";
+import { mapActions, mapState } from "pinia";
+import { state } from "../../../stores/ParamSdkStore";
+import classicApi from "../../../api/classicApi";
+const SnackBar = defineAsyncComponent(() => import("../../misc/SnackBar.vue"));
+const NewsletterModal = defineAsyncComponent(
+  () => import("../../misc/modal/NewsletterModal.vue"),
+);
+const QrCodeModal = defineAsyncComponent(
+  () => import("../../misc/modal/QrCodeModal.vue"),
+);
+const ClipboardModal = defineAsyncComponent(
+  () => import("../../misc/modal/ClipboardModal.vue"),
+);
+const PlayerAnonymousModal = defineAsyncComponent(
+  () => import("../sharing/PlayerAnonymousModal.vue"),
+);
+const CodeTagsIcon = defineAsyncComponent(
+  () => import("vue-material-design-icons/CodeTags.vue"),
+);
+const EmailNewsletterIcon = defineAsyncComponent(
+  () => import("vue-material-design-icons/EmailNewsletter.vue"),
+);
+const RssIcon = defineAsyncComponent(
+  () => import("vue-material-design-icons/Rss.vue"),
+);
+export default defineComponent({
+  name: "PodcastShareAnonymous",
+  components: {
+    ClassicPopover,
+    DotsHorizontalIcon,
+    LinkVariantIcon,
+    EmailNewsletterIcon,
+    QrcodeIcon,
+    CodeTagsIcon,
+    RssIcon,
+    SnackBar,
+    NewsletterModal,
+    QrCodeModal,
+    ClipboardModal,
+    PlayerAnonymousModal
+  },
+
+  props: {
+    podcast: { default: undefined, type: Object as () => Podcast },
+    emission: { default: undefined, type: Object as () => Emission },
+    playlist: { default: undefined, type: Object as () => Playlist },
+    participantId: { default: undefined, type: Number },
+    organisationId: { default: undefined, type: String },
+    relativeClass: { default: "page-element", type: String },
+    btnClass: { default: "btn btn-transparent", type: String },
+  },
+
+  data() {
+    return {
+      lazyLoadingSnackbar: false as boolean,
+      isNewsletterModal: false as boolean,
+      isQrCodeModal: false as boolean,
+      displayRss: false as boolean,
+      noSharing: true as boolean,
+      playerCanBeSharedAnonymous: false as boolean,
+      playerCanBeSharedOthers: false as boolean,
+      isLoading: true as boolean,
+      isRssModal: false as boolean,
+      isPlayerModal: false as boolean
+    };
+  },
+  computed:{
+    ...mapState(useAuthStore, ["isGarRole","authOrgaId"]),
+    ...mapState(useApiStore, ["apiUrl"]),
+    urlPage(): string {
+      return window.location.href;
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker as boolean;
+    },
+    rssUrl(): string {
+      const api = this.apiUrl + "rss/";
+      if (
+        (!this.isPodcastmaker && this.playlist) ||
+        this.podcast ||
+        this.emission
+      ) {
+        return "";
+      }
+      if (this.participantId) {
+        return api + "participant/" + this.participantId + ".rss";
+      }
+      if (this.playlist) {
+        return api + "playlist/" + this.playlist.playlistId + ".rss";
+      }
+      if (this.organisationId) {
+        return api + "productor/" + this.organisationId + ".rss";
+      }
+      return "";
+    },
+    titleRssButton(): string {
+      if (this.participantId) {
+        return this.$t("Subscribe to this participant");
+      }
+      if (this.emission) {
+        return this.$t("Subscribe to this emission");
+      }
+      return this.$t("Subscribe to this RSS feed");
+    },
+    dropdownButtons() {
+      return [
+        {
+          title: this.$t("Copy this page URL"),
+          icon: "LinkVariantIcon",
+          condition:true,
+          emitName: "link",
+        },
+        {
+          title: this.$t("Share the player"),
+          icon: "CodeTagsIcon",
+          condition: !this.isPodcastmaker && (this.playerCanBeSharedAnonymous || (this.playerCanBeSharedOthers && this.authOrgaId)),
+          emitName: "player",
+        },
+        {
+          title: this.$t("Share newsletter"),
+          icon: "EmailNewsletterIcon",
+          condition: this.podcast || this.emission || this.playlist,
+          emitName: "newsletter",
+        },
+        {
+          title: this.$t("Share QR Code"),
+          icon: "QrcodeIcon",
+          condition: true,
+          emitName: "qrcode",
+        },
+        {
+          title: this.titleRssButton,
+          icon: "RssIcon",
+          condition: '' !== this.rssUrl && this.displayRss && !this.isGarRole,
+          emitName: "rss",
+        },
+      ];
+    },
+  },
+  created() {
+    this.initShareButtons();
+  },
+  methods:{
+    ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    async initShareButtons() {
+      if (undefined !== this.participantId) {
+        this.displayRss = await classicApi.fetchData<boolean>({
+          api: 0,
+          path: `rss/participants/allowed/${this.organisationId}`,
+          isNotAuth: true,
+        });
+      } else {
+        this.displayRss = true;
+      }
+      this.determinePlayerCanBeShared();
+      if (!this.organisationId) {
+        return;
+      }
+      const attributes = await this.getOrgaAttributes(this.organisationId);
+      this.noSharing = "true" === attributes.noSharing;
+      this.isLoading = false;
+    },
+    determinePlayerCanBeShared() {
+      const emissionAnnot = this.podcast?.emission.annotations ?? this.emission?.annotations;
+      if (!emissionAnnot) { return }
+      if (emissionAnnot.exclusive) {
+        this.playerCanBeSharedOthers = "true" !== emissionAnnot.exclusive;
+      }
+      if (emissionAnnot.notExclusive) {
+        this.playerCanBeSharedAnonymous = "true" === emissionAnnot.notExclusive;
+      }
+    },
+    clickButton(name: string) {
+      switch (name) {
+        case "link":
+          displayHelper.onCopyCode(this.urlPage, this.afterCopy);
+          break;
+        case "newsletter":
+          this.isNewsletterModal = true;
+          break;
+        case "qrcode":
+          this.isQrCodeModal = true;
+          break;
+        case "rss":
+          this.isRssModal = true;
+          break;
+        case "player": 
+          this.isPlayerModal = true;
+          break;
+        default:
+          break;
+      }
+    },
+    afterCopy(): void {
+      if (!this.lazyLoadingSnackbar) {
+        this.lazyLoadingSnackbar = true;
+        setTimeout(() => {
+          this.afterCopy();
+        }, 500);
+      } else {
+        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+          this.$t("Link in clipboard"),
+        );
+      }
+    },
+  }
+});
+</script>