@saooti/octopus-sdk 38.0.31 → 38.0.33

package/package.json

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

package/src/assets/general.scss

@@ -111,6 +111,7 @@ body{
       margin: 1rem 0;
     }
   }
+
   .flex-super-grow{
     flex-grow: 2;
   }

package/src/assets/progressbar.scss

@@ -20,6 +20,19 @@
       background-color: $octopus-primary-color;
       transition: width 0.6s ease;
     }
+    .octopus-chapter{
+      position: absolute;
+      background: transparent;
+      background-clip: content-box;
+      padding: 0 5px;
+      box-shadow: inset -2px 1px 0px 0px rgb(0 0 0),
+                  inset 2px 1px 0px 0px rgb(0 0 0);
+
+      &:hover{
+        background: rgba(255, 255, 255, 0.4);
+        box-shadow: -4px 1px 0px 0px rgb(0 0 0);
+      }
+    }
     &,.octopus-progress-bar{
       height: 4px;
       @media (max-width: 960px) {

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

@@ -1,51 +1,151 @@
 <template>
   <div v-if="!isLoading && (authenticated || !noSharing)" class="module-box">
-    <div class="d-flex align-items-center mb-3">
-      <h2 class="big-h2 mb-0">
-        {{ $t("Share") }}
-      </h2>
-      <span
-        v-if="authenticated"
-        id="popover-share-help"
-        role="button"
-        tabindex="0"
-        class="saooti-help ms-2"
-        :aria-label="$t('Help')"
+    <div class="d-flex align-items-center justify-content-between">
+      <div v-if="!isGarStudent && !noSharing" class="d-flex flex-column me-2">
+        <div class="h4 mb-2">
+          {{ $t("Share in one click") }}
+        </div>
+        <div class="d-flex align-items-center">
+          <template v-for="button in arrayShareButtons" :key="button.title">
+            <a
+              v-if="button.condition"
+              rel="noopener"
+              target="_blank"
+              :href="button.url"
+              :class="getClass(button.className)"
+              class="me-2"
+              :title="button.title"
+            >
+              <div :class="button.icon" />
+            </a>
+          </template>
+          <button
+            :class="getClass()"
+            class="saooti-link"
+            :title="$t('Copy this page URL')"
+            @click="onCopyCode(urlPage, afterCopy)"
+          />
+        </div>
+      </div>
+      <div v-if="podcast || emission || playlist" class="d-flex flex-column me-2">
+        <div class="h4 mb-2">
+          {{ $t("Newsletter") }}
+        </div>
+        <div class="d-flex align-items-center justify-content-center">
+          <button
+            :class="getClass()"
+            class="saooti-newsletter"
+            :title="$t('Share newsletter')"
+            @click="newsletter = true"
+          />
+        </div>
+      </div>
+      <div class="d-flex flex-column me-2">
+        <div class="h4 mb-2">
+          {{ $t("QR Code") }}
+        </div>
+        <div class="d-flex align-items-center justify-content-center">
+          <button
+            :class="getClass()"
+            :title="$t('Share QR Code')"
+            class="saooti-qrcode"
+            @click="qrCode = true"
+          />
+        </div>
+      </div>
+      <div v-if="'' !== rssUrl && displayRss" class="d-flex flex-column me-2">
+        <div class="h4 mb-2">
+          {{ $t("Rss feed") }}
+        </div>
+        <div class="d-flex align-items-center justify-content-center">
+          <a
+            rel="noopener"
+            target="_blank"
+            class="saooti-rss"
+            :class="getClass()"
+            :href="rssUrl"
+            :title="titleRssButton"
+            @click.prevent="openPopup()"
+          />
+        </div>
+      </div>
+      <div v-if="!isPodcastmaker && authenticated && podcast && isProduction" class="d-flex flex-column me-2">
+        <div class="h4 mb-2">
+          {{ $t("Generate a social media post (with AI)") }}
+        </div>
+        <div class="d-flex align-items-center justify-content-center">
+          <router-link
+            :class="getClass()"
+            :title="$t('Generate a social media post (with AI)')"
+            :to="{
+              name: 'advancedShare',
+              params: { podcastId: podcast.podcastId },
+            }"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-stars" viewBox="0 0 16 16">
+              <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
+            </svg>
+          </router-link>
+        </div>
+      </div>
+
+      <ClipboardModal
+        v-if="dataRSSSave"
+        :link="rssUrl"
+        :emission="emission"
+        @close="dataRSSSave = false"
+        @copy="afterCopy"
+      />
+      <NewsletterModal
+        v-if="newsletter"
+        :closable="true"
+        :podcast="podcast"
+        :emission="emission"
+        :playlist="playlist"
+        @close="newsletter = false"
       />
-      <ClassicPopover
-        v-if="authenticated"
-        target="popover-share-help"
-        :content="$t('Share this page without edit and share blocks')"
-        relative-class="page-element"
-        :is-fixed="true"
+      <QrCodeModal
+        v-if="qrCode"
+        :closable="true"
+        :url-page="urlPage"
+        @close="qrCode = false"
+      />
+      <SnackBar
+        v-if="lazyLoadingSnackbar"
+        ref="snackbar"
+        position="bottom-left"
       />
     </div>
-    <ShareButtonsIntern
-      :no-sharing="noSharing"
-      :podcast="podcast"
-      :emission="emission"
-      :playlist="playlist"
-      :participant-id="participantId"
-      :organisation-id="organisationId"
-    />
   </div>
 </template>
 
 <script lang="ts">
 import { useSaveFetchStore } from "@/stores/SaveFetchStore";
-import { mapActions } from "pinia";
+import { mapActions, mapState } from "pinia";
 import { Emission } from "@/stores/class/general/emission";
 import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
+import octopusApi from "@saooti/octopus-api";
 import displayMethods from "../../mixins/displayMethods";
-import ClassicPopover from "../../misc/ClassicPopover.vue";
-import ShareButtonsIntern from "./ShareButtonsIntern.vue";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
 import { Playlist } from "@/stores/class/general/playlist";
+import { useAuthStore } from "@/stores/AuthStore";
+const ClipboardModal = defineAsyncComponent(
+  () => import("../../misc/modal/ClipboardModal.vue"),
+);
+const NewsletterModal = defineAsyncComponent(
+  () => import("../../misc/modal/NewsletterModal.vue"),
+);
+const QrCodeModal = defineAsyncComponent(
+  () => import("../../misc/modal/QrCodeModal.vue"),
+);
+const SnackBar = defineAsyncComponent(() => import("../../misc/SnackBar.vue"));
 export default defineComponent({
   components: {
-    ShareButtonsIntern,
-    ClassicPopover,
+    ClipboardModal,
+    NewsletterModal,
+    QrCodeModal,
+    SnackBar,
   },
   mixins: [displayMethods],
   props: {
@@ -59,14 +159,94 @@ export default defineComponent({
     return {
       noSharing: true as boolean,
       isLoading: true as boolean,
+      dataRSSSave: false as boolean,
+      newsletter: false as boolean,
+      qrCode: false as boolean,
+      displayRss: false as boolean,
+      lazyLoadingSnackbar: false as boolean,
     };
   },
   computed: {
+    ...mapState(useAuthStore, ["isGarStudent"]),
     authenticated(): boolean {
       return state.generalParameters.authenticated as boolean;
     },
+    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");
+    },
+    arrayShareButtons() {
+      return [
+        {
+          title: "Facebook",
+          icon: "saooti-facebook",
+          className: "btn-facebook",
+          url: `https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "X",
+          icon: "saooti-twitter",
+          className: "btn-twitter",
+          url: `https://twitter.com/intent/tweet?text=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Linkedin",
+          icon: "saooti-linkedin",
+          className: "btn-linkedin",
+          url: `https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Whatsapp",
+          icon: "saooti-Whatsapp",
+          className: "btn-whatsapp",
+          url: `whatsapp://send?text=${this.urlPage}`,
+          condition: window.matchMedia("(hover: none)").matches,
+        },
+      ];
+    },
+    urlPage(): string {
+      return window.location.href;
+    },
+    isProduction(): boolean {
+      return state.generalParameters.isProduction as boolean;
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker as boolean;
+    },
+    rssUrl(): string {
+      let api = state.generalParameters.ApiUri + "rss/";
+      if (this.emission) {
+        return api + "emission/" + this.emission.emissionId + ".rss";
+      }
+      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 "";
+    },
   },
   async created() {
+    if (undefined !== this.participantId) {
+      this.displayRss = await octopusApi.fetchDataPublic<boolean>(
+        0,
+        `rss/participants/allowed/${this.organisationId}`,
+      );
+    } else {
+      this.displayRss = true;
+    }
     if (!this.organisationId) {
       return;
     }
@@ -76,6 +256,24 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    getClass(className = "btn-rss"): string {
+      return `btn ${className} share-btn mb-2 text-dark`;
+    },
+    openPopup(): void {
+      this.dataRSSSave = !this.dataRSSSave;
+    },
+    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>

package/src/components/misc/ClassicPopover.vue

@@ -5,7 +5,7 @@
     ref="popover"
     tabindex="0"
     class="octopus-popover"
-    :class="onlyClick ? 'octopus-dropdown' : ''"
+    :class="[onlyClick ? 'octopus-dropdown' : '', popoverClass]"
     :style="positionInlineStyle"
     @blur="clearDataBlur"
     @mouseenter="overPopover=true"
@@ -30,10 +30,12 @@ export default defineComponent({
     target: { type: String, required: true },
     disable: { type: Boolean, default: false },
     onlyClick: { type: Boolean, default: false },
+    onlyMouse: { type: Boolean, default: false },
     isFixed: { type: Boolean, default: false },
     relativeClass: { type: String, default: undefined },
     leftPos: { type: Boolean, default: false },
     topPos: { type: Boolean, default: false },
+    popoverClass: { type: String, default: undefined },
   },
   data() {
     return {
@@ -70,7 +72,9 @@ export default defineComponent({
           );
           this.targetElement.addEventListener("mouseleave", this.clearDataTimeout);
         }
-        this.targetElement.addEventListener("click", this.setPopoverData);
+        if (!this.onlyMouse) {
+          this.targetElement.addEventListener("click", this.setPopoverData);
+        }
         this.targetElement.addEventListener("blur", this.clearDataBlur);
       }
     },
@@ -83,7 +87,9 @@ export default defineComponent({
           );
           this.targetElement.removeEventListener("mouseleave", this.clearDataTimeout);
         }
-        this.targetElement.removeEventListener("click", this.setPopoverData);
+        if (!this.onlyMouse) {
+          this.targetElement.removeEventListener("click", this.setPopoverData);
+        }
         this.targetElement.addEventListener("blur", this.clearDataBlur);
       }
     },

package/src/components/misc/HomeDropdown.vue

@@ -60,7 +60,7 @@
           </template>
         </template>
         <hr />
-        <a class="octopus-dropdown-item" href="/sso/logout" realLink="true">
+        <a class="octopus-dropdown-item c-hand" @click="logoutFunction" >
           {{ $t("Logout") }}
         </a>
       </template>
@@ -72,6 +72,7 @@
 </template>
 
 <script lang="ts">
+import crudApi from "@/api/classicCrud";
 import { state } from "../../stores/ParamSdkStore";
 import ClassicPopover from "../misc/ClassicPopover.vue";
 import { useAuthStore } from "@/stores/AuthStore";
@@ -148,8 +149,17 @@ export default defineComponent({
     },
   },
   methods:{
+    async logoutFunction(){
+      try {
+        await crudApi.postData(4, '/logout', undefined);
+        await this.$router.push({ path: '/' });
+        location.reload();
+      } catch (error) {
+        //Do nothing
+      }
+    },
     goToAdministration(){
-      if("homePriv" !== this.$route.name){
+      if("backoffice" !== this.$route.name){
         this.$router.push("/main/priv/backoffice");
       }else if (window.history.length > 1) {
         this.$router.go(-1);

package/src/components/misc/ProgressBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="octopus-progress">
+  <div v-if="display" id="test-menu-dropdown" class="octopus-progress">
     <div
       v-if="secondaryProgress"
       class="octopus-progress-bar bg-light"
@@ -48,18 +48,50 @@
     />
     <div
       v-if="isProgressCursor"
-      class="progress-bar-cursor"
+      class="octopus-progress-bar-cursor"
       :style="'left:' + mainProgress + '%'"
     />
+    <template v-if="playerChapteringPercent">
+      <template v-for="chapter in playerChapteringPercent" :key="chapter">
+        <div
+          :id="'chapter-' + chapter.startPercent"
+          class="octopus-progress-bar octopus-chapter"
+          role="progressbar"
+          aria-valuenow="0"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :style="{
+            left: chapter.startPercent + '%',
+            right: 100 - chapter.endPercent + '%',
+          }"
+        />
+        <Teleport to="#octopus-player-component">
+          <ClassicPopover
+            :target="'chapter-' + chapter.startPercent"
+            :is-fixed="true"
+            relative-class="player-container"
+            :only-mouse="true"
+            popover-class="octopus-small-popover"
+            :content="chapter.title"
+          />
+        </Teleport>
+      </template>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState } from "pinia";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../misc/ClassicPopover.vue"),
+);
 export default defineComponent({
   name: "ProgressBar",
+  components: {
+    ClassicPopover,
+  },
   props: {
     alertBar: { default: undefined, type: Number },
     mainProgress: { default: 0, type: Number },
@@ -73,7 +105,14 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(usePlayerStore, ["playerMedia"]),
+    ...mapState(usePlayerStore, [
+      "playerMedia",
+      "playerChapteringPercent",
+      "playerStatus",
+    ]),
+    display() {
+      return "STOPPED" !== this.playerStatus;
+    },
   },
   watch: {
     playerMedia: {
@@ -104,4 +143,15 @@ export default defineComponent({
 
 <style lang="scss">
 @import "../../assets/progressbar.scss";
+.octopus-app .player-container {
+  .octopus-small-popover {
+    font-size: 0.7rem;
+    background: #282828;
+    color: white;
+    border: 0;
+    .p-2 {
+      padding: 0.2rem !important;
+    }
+  }
+}
 </style>

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

@@ -0,0 +1,95 @@
+<template>
+  <ClassicModal
+    id-modal="chaptering-modal"
+    :title-modal="$t('Chaptering')"
+    @close="closePopup"
+  >
+    <template #body>
+      <div class="d-flex flex-column">
+        <button
+          v-for="(chapter, index) in playerChapteringPercent"
+          :key="chapter"
+          class="btn d-flex flex-nowrap align-items-center p-2 mt-1 c-hand text-truncate mb-1"
+          :class="actualChapter === index ? 'chapter-selected':'border'"
+          @click="goToChapter(index)"
+        >
+          <div class="d-flex align-items-center me-auto">
+            <svg v-if="actualChapter === index" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-soundwave" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M8.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5m-2 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m-6 1.5A.5.5 0 0 1 5 6v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m8 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m-10 1A.5.5 0 0 1 3 7v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5m12 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5"/>
+            </svg>
+            <div v-else>{{ index + 1 }}</div>
+            <div class="ms-2">{{ "- " + chapter.title }}</div>
+          </div>
+          <div>{{ chapter.startDisplay }}</div>
+        </button>
+      </div>
+    </template>
+    <template #footer>
+      <button class="btn m-1" @click="closePopup">
+        {{ $t("Close") }}
+      </button>
+    </template>
+  </ClassicModal>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState, mapActions } from "pinia";
+import ClassicModal from "../modal/ClassicModal.vue";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ChapteringModal",
+  components: {
+    ClassicModal,
+  },
+  props: {actualChapter: {default: -1, type: Number}},
+  emits: ["close"],
+  data() {
+    return {
+      audioPlayer: null as HTMLAudioElement | null,
+    };
+  },
+  computed: {
+    ...mapState(usePlayerStore, [
+      "playerPodcast",
+      "playerLive",
+      "playerChapteringPercent",
+      "playerTotal",
+      "playerElapsed",
+    ]),
+  },
+  created() {
+    this.audioPlayer = document.querySelector("#audio-player");
+  },
+  methods: {
+    ...mapActions(usePlayerStore, [
+      "playerUpdateSeekTime",
+      "playerUpdateElapsed",
+    ]),
+    closePopup(): void {
+      this.$emit("close");
+    },
+    goToChapter(index: number) {
+      if (!this.playerChapteringPercent || !this.audioPlayer) {
+        return;
+      }
+      const seekTime =
+        this.playerTotal *
+        (this.playerChapteringPercent[index].startPercent / 100);
+      this.playerUpdateSeekTime(seekTime);
+      if (0 === seekTime) {
+        this.playerUpdateElapsed(0);
+      }
+      this.audioPlayer.currentTime = seekTime;
+    },
+  },
+});
+</script>
+<style lang="scss">
+@import "@scss/_variables.scss";
+.octopus-app {
+ .chapter-selected{
+    border: $octopus-primary-color 3px solid;
+ }
+}
+</style>