@saooti/octopus-sdk 40.2.9 → 40.2.10

package/package.json

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

package/src/App.vue

@@ -40,7 +40,7 @@ export default defineComponent({
     CategoryFilter,
     FooterOctopus,
     PlayerComponent,
-    ClassicLazy,
+    ClassicLazy
   },
 
   setup(){

package/src/components/display/filter/AdvancedSearch.vue

@@ -7,6 +7,7 @@
       <div>{{ $t("Advanced filters") }}</div>
       <ChevronDownIcon :class="{ 'arrow-transform': showFilters }" />
     </button>
+    <Transition name="advanced-search">
     <div
       v-if="firstLoaded"
       v-show="showFilters"
@@ -76,6 +77,7 @@
         @update:sort="updateSort"
       />
     </div>
+  </Transition>
   </div>
 </template>
 
@@ -282,12 +284,28 @@ export default defineComponent({
     background: var(--octopus-background);
     display: flex;
     width: 100%;
-    margin-bottom: 1rem;
+    padding-bottom: 1rem;
     justify-content: space-around;
 
     @media (width <= 720px) {
       flex-wrap: wrap;
     }
   }
+
+  .advanced-search-enter-active,
+  .advanced-search-leave-active {
+    transition: 0.3s all;
+    opacity: 1;
+    max-height: 900px;
+    height: auto;
+    overflow: hidden;
+  }
+
+  .advanced-search-enter-from,
+  .advanced-search-leave-to {
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+  }
 }
 </style>

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

@@ -40,7 +40,7 @@
         <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">
+        <div class="d-flex flex-column align-items-end">
           <time :datetime="durationIso">
             {{ duration }}
           </time>

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

@@ -1,13 +1,13 @@
 <template>
   <div
-    v-if="undefined !== tagList && 0 !== tagList.length"
+    v-if="undefined !== tagListFiltered && 0 !== tagListFiltered.length"
     class="tag-list-component d-flex align-items-center flex-wrap mb-3 small-text"
   >
     <div class="fw-bold me-3">
       {{ $t("Podcast tags") + " : " }}
     </div>
     <router-link
-      v-for="(tag, index) in tagList"
+      v-for="(tag, index) in tagListFiltered"
       :key="tag"
       class="d-flex align-items-center border p-1 m-1 text-dark"
       :to="{
@@ -72,6 +72,11 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useFilterStore, ["filterOrgaId"]),
+    tagListFiltered(): Array<string>{
+      return this.tagList.filter((tag: string) => {
+        return !tag.match(/^\[\[.*\]\]$/);
+      });
+    },
     organisationQuery(){
       if(this.filterOrgaId){
         return undefined;

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

@@ -25,7 +25,7 @@
       :margin="2"
     />
     <div class="d-flex align-items-center my-3">
-      <FormatSwitch class="me-3" v-model:isSvg="isSvg"/>
+      <FormatSwitch v-model:is-svg="isSvg" class="me-3"/>
       <button class="btn btn-primary" @click="download">
         {{ $t("Download") }}
       </button>

package/src/components/form/ClassicLoading.vue

@@ -4,7 +4,7 @@
     class="d-flex align-items-center justify-content-center"
   >
     <ClassicSpinner class="me-3" />
-    <div class="h3 mt-2">
+    <div class="h3">
       {{ loadingText }}
     </div>
   </div>

package/src/components/misc/ClassicSpinner.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="octopus-spinner" :class="small ? 'small' : ''" />
+  <div class="octopus-spinner" :style="small ? '--size-spinner:1rem;' : ''" >
+    <div v-for="index of 12" :key="index"></div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -13,7 +15,89 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .octopus-app .octopus-spinner {
+
+  --size-spinner: 3rem;
+  --size-spinner-section: calc(var(--size-spinner) / 20);
+  --half-size-spinner: calc(var(--size-spinner) / 2);
+
+  color: #000000;
   display: inline-block;
+  position: relative;
+  width: var(--size-spinner);
+  height: var(--size-spinner);
+
+  div {
+    transform-origin: var(--half-size-spinner) var(--half-size-spinner);
+    animation: octopus-spinner 1.2s linear infinite;
+  }
+  div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 3px;
+    left: calc(var(--half-size-spinner) - calc(var(--size-spinner-section) / 2));
+    width: var(--size-spinner-section);
+    height: calc(var(--half-size-spinner) / 3);
+    border-radius: 20%;
+    background: currentColor;
+  }
+  div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+  }
+  div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+  }
+  div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+  }
+  div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+  }
+  div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+  }
+  div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+  }
+  div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+  }
+  div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+  }
+  div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+  }
+  div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+  }
+  div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+  }
+  div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+  }
+  @keyframes octopus-spinner {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+ /*  display: inline-block;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -31,6 +115,6 @@ export default defineComponent({
     to {
       transform: rotate(360deg);
     }
-  }
+  } */
 }
 </style>

package/src/components/misc/TopBarMainContent.vue

@@ -308,12 +308,15 @@ export default defineComponent({
       color: white;
       font-weight: bold;
       font-size: 0.93rem;
+      text-decoration: underline;
+      text-decoration-color: transparent;
+      transition: text-decoration-color 250ms;
+      text-underline-offset: 8px;
 
       &.link-hover:hover,
       &.link-hover.router-link-exact-active.router-link-active {
         color: white;
-        text-decoration: underline;
-        text-underline-offset: 8px;
+        text-decoration-color: white;
       }
     }
 

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

@@ -5,13 +5,15 @@
         <WindowCloseIcon />
       </button>
       <div class="video-wrapper">
-        <PlayerVideoDigiteka v-if="!playerLive" :video-id="videoId" />
+        <PlayerYoutubeEmbed v-if="youtubeId" :youtube-id="youtubeId" />
+        <PlayerVideoDigiteka v-else-if="!playerLive" :video-id="playerPodcast?.video?.videoId" />
         <PlayerVideoHls v-else :hls-url="hlsVideoUrl" />
       </div>
     </template>
   </teleport>
 </template>
 <script lang="ts">
+import youtubeVideoHelper from "../../../../helper/youtubeVideoHelper";
 import WindowCloseIcon from "vue-material-design-icons/WindowClose.vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import { useApiStore } from "../../../../stores/ApiStore";
@@ -23,16 +25,22 @@ const PlayerVideoDigiteka = defineAsyncComponent(
 const PlayerVideoHls = defineAsyncComponent(
   () => import("../video/PlayerVideoHls.vue"),
 );
+const PlayerYoutubeEmbed = defineAsyncComponent(
+  () => import("../video/PlayerYoutubeEmbed.vue"),
+);
 export default defineComponent({
   name: "PlayerVideo",
 
   components: {
     PlayerVideoDigiteka,
     PlayerVideoHls,
+    PlayerYoutubeEmbed,
     WindowCloseIcon,
   },
   data() {
-    return {};
+    return {
+      youtubeId: undefined as string|undefined,
+    };
   },
   computed: {
     ...mapState(useApiStore, ["hlsUrl"]),
@@ -43,9 +51,9 @@ export default defineComponent({
       }
       return `${this.hlsUrl}live/video_dev.${this.playerLive.conferenceId}/index.m3u8`;
     },
-    videoId(): string | undefined {
-      return this.playerPodcast?.video?.videoId;
-    },
+  },
+  created(){
+    this.youtubeId = youtubeVideoHelper.getYoutubeId((this.playerPodcast ?? this.playerLive )?.tags ?? []);
   },
 
   methods: {

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

@@ -0,0 +1,29 @@
+<template>
+  <iframe 
+    width="500"
+    height="281"
+    :title="$t('Video')"
+    class="youtube-iframe"
+    :src="'https://www.youtube.com/embed/'+youtubeId"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen>
+  </iframe>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "PlayerYoutubeEmbed",
+  components: {
+  },
+  props: {
+    youtubeId: { default: undefined, type: String },
+  },
+
+});
+</script>
+<style lang="scss">
+@use "../../../../style/videoPlayer";
+</style>

package/src/components/pages/PodcastPage.vue

@@ -21,7 +21,7 @@
           :organisation-id="podcast.organisation.id"
         />
         <SharePlayer
-          v-if="!isPodcastmaker && editRight"
+          v-if="!isPodcastmaker && editRight && !youtubeId"
           :podcast="podcast"
           :emission="podcast?.emission"
           :organisation-id="authOrgaId"
@@ -68,6 +68,7 @@
 </template>
 
 <script lang="ts">
+import youtubeVideoHelper from "../../helper/youtubeVideoHelper";
 import {useOrgaComputed} from "../composable/useOrgaComputed";
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
 import PodcastModuleBox from "../display/podcasts/PodcastModuleBox.vue";
@@ -135,6 +136,7 @@ export default defineComponent({
       error: false as boolean,
       fetchConference: undefined as Conference | undefined,
       infoReload: undefined as ReturnType<typeof setTimeout> | undefined,
+      youtubeId: undefined as string|undefined,
     };
   },
 
@@ -312,6 +314,9 @@ export default defineComponent({
        this.podcastInProcessing();
         this.updatePathParams(this.podcast.title);
         await this.getCommentsConfig(this.podcast);
+        if((this.fetchConference?.videoProfile?.includes("video_") && "READY_TO_RECORD" === this.podcast.processingStatus) || undefined !== this.podcast.video?.videoId){
+          this.youtubeId = youtubeVideoHelper.getYoutubeId(this.podcast?.tags ?? []);
+        }
         this.loaded = true;
       } catch (error) {
         this.handle403(error as AxiosError);

package/src/helper/youtubeVideoHelper.ts

@@ -0,0 +1,13 @@
+export default {
+    getYoutubeId(tags: Array<string>){
+        let youtubeId = undefined;
+        for(const tag of tags){
+        const regexExec = /^\[\[https:\/\/(?:www.)?youtube.com\/(?:watch\?v=|live\/)(?<id>\S+)\]\]$/.exec(tag);
+        if(regexExec?.groups?.id){
+            youtubeId = regexExec.groups.id;
+            break;
+        }
+        }
+        return youtubeId;
+    }
+}

package/src/style/share.scss

@@ -47,8 +47,8 @@
   }
 
   .img-box-podcast{
-    height: calc(var(--octopus-podcast-size) - 4px);
-    width: calc(var(--octopus-podcast-size) - 4px);
+    height: calc(var(--octopus-podcast-size) - 2px);
+    width: calc(var(--octopus-podcast-size) - 2px);
   }
 
   .img-box,.img-box.img-box-podcast{