@saooti/octopus-sdk 40.2.3-SNAPSHOT → 40.2.3

package/package.json

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

package/plateform.conf

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

package/src/components/composable/useImageProxy.ts

@@ -3,7 +3,7 @@ export const useImageProxy = ()=>{
 
   const apiStore = useApiStore();
 
-  function useProxyImageUrl(url: string|undefined, width: string, height?: string): string {
+  function useProxyImageUrl(url: string|undefined, width: string, height?: string, blur=false): string {
     if (!url) {
       return "";
     }
@@ -13,10 +13,12 @@ export const useImageProxy = ()=>{
       return (
         apiStore.imageUrl +
         "image/" +
+        (blur ? "noRedirect/":"")+
         encode +
         "?" +
         size +
-        "&useWebp=true"
+        "&useWebp=true"+
+        (blur ? "&blur=true":"")
       );
     }
     return url;

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

@@ -175,35 +175,5 @@ export default defineComponent({
     margin-right: -18px;
     animation: fadein 1s;
   }
-
-  @keyframes fadein {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fadein {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fadein {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
 }
 </style>

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

@@ -3,15 +3,23 @@
     v-if="podcast"
     class="img-box img-box-podcast mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start"
   >
-    <img
-      v-lazy="useProxyImageUrl(podcast.imageUrl, '270')"
-      width="270"
-      height="270"
-      role="presentation"
-      alt=""
-      class="img-box img-box-podcast"
-      :title="$t('Episode name image', { name: podcast.title })"
-    />
+    <router-link
+      :to="{
+        name: 'podcast',
+        params: { podcastId: podcast.podcastId },
+      }"
+      :title="$t('Episode name page', { name: podcast.title })"
+    >
+      <img
+        v-lazy="useProxyImageUrl(podcast.imageUrl, '270')"
+        width="270"
+        height="270"
+        role="presentation"
+        alt=""
+        class="img-box img-box-podcast"
+        :title="$t('Episode name image', { name: podcast.title })"
+      />
+    </router-link>
     <div
       v-if="isPodcastmaker"
       :class="mainRubrique ? 'mainRubrique' : 'notMainRubrique'"

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

@@ -2,7 +2,7 @@
   <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") }}
+        {{ $t("Color of the QR Code") }}
       </div>
       <VSwatches
         v-model:model-value="color"

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

@@ -123,14 +123,16 @@ export default defineComponent({
     },
   },
   created() {
-    if (this.isVideoPodcast) {
-      this.$emit("update:iFrameModel", "video");
-    }
     if (this.isLive) {
       return;
     }
     this.initCustomPlayers();
   },
+  mounted(){
+    if (this.isVideoPodcast) {
+      this.$emit("update:iFrameModel", "video");
+    }
+  },
   methods: {
     isNumeric(value: string): boolean {
       return /^-?\d+$/.test(value);
@@ -190,7 +192,7 @@ export default defineComponent({
       const customPlayersForType = await this.fetchPlayerPaginate(type);
       this.customPlayers = this.customPlayers.concat(customPlayersForType);
       if (
-        "video" !== this.iFrameModel &&
+        !this.isVideoPodcast &&
         selectIfPossible &&
         customPlayersForType?.[0]?.selected
       ) {

package/src/components/misc/TopBar.vue

@@ -1,29 +1,31 @@
 <template>
   <header
-    class="top-bar-container"
-    :class="{ scrolled: scrolled, 'content-top-bar': isContentToDisplay }"
+    class="header-saooti-play"
+    :style="headerBackgroundImage"
+    :class="[contentToDisplay ? 'header-img-bg':'header-color-bg', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']"
   >
     <TopBarMainContent
-      class="top-bar-z-index"
       :is-phone="isPhone"
       :scrolled="scrolled"
       :title-display="titleToDisplay"
+      style="height: var(--header-size);"
+      :class="headerBackgroundImage.length ? 'header-opacity':''"
     />
-    <template v-if="contentToDisplay">
-      <div class="page-element-bg" :style="backgroundDisplay" />
-      <h1 v-if="!scrolled" class="text-truncate top-bar-z-index">
+  </header>
+  <div v-if="contentToDisplay" class="header-content-bg" :style="headerBackgroundImage" :class="{ scrolled: scrolled, 'header-force-blur':needToBlur }" >
+    <div class="header-additional-content header-content">
+      <h1 v-if="!scrolled" class="text-truncate">
         {{ titleToDisplay }}
       </h1>
       <SubscribeButtons
         v-if="!isGarRole"
         v-show="!scrolled"
-        class="top-bar-z-index"
         :emission="emissionObject"
         :playlist-id="contentToDisplay?.playlistId"
         :window-width="windowWidth"
       />
-    </template>
-  </header>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -38,6 +40,7 @@ import { Emission } from "@/stores/class/general/emission";
 import {useResizePhone} from "../composable/useResizePhone";
 import { Playlist } from "@/stores/class/general/playlist";
 import { Canal } from "@/stores/class/radio/canal";
+import axios from "axios";
 const SubscribeButtons = defineAsyncComponent(
   () => import("../display/sharing/SubscribeButtons.vue"),
 );
@@ -58,6 +61,8 @@ export default defineComponent({
       scrolled: false as boolean,
       oldScrollY: 0 as number,
       minScroll: 0 as number,
+      headerBackgroundImage: "" as string,
+      needToBlur: false as boolean,
     };
   },
   computed: {
@@ -71,15 +76,6 @@ export default defineComponent({
         "radio" === this.$route.name
       );
     },
-    backgroundDisplay(): string {
-      if (!this.contentToDisplay) {
-        return "";
-      }
-      return `background-image: url('${this.useProxyImageUrl(
-        this.contentToDisplay.imageUrl,
-        "270",
-      )}');`;
-    },
     titleToDisplay(): string {
       if ((this.contentToDisplay as Podcast)?.podcastId) {
         return (this.contentToDisplay as Podcast).emission.name;
@@ -105,6 +101,32 @@ export default defineComponent({
       return null;
     },
   },
+  watch:{
+    contentToDisplay: {
+      deep: true,
+      immediate: true,
+      async handler() {
+        if(!this.contentToDisplay){
+          this.headerBackgroundImage = "";
+          this.needToBlur = false;
+          return;
+        }
+        const proxyUrl = this.useProxyImageUrl(this.contentToDisplay.imageUrl,"270", undefined, true);
+        try {
+          const result = await axios.get(proxyUrl);
+          this.headerBackgroundImage = `background-image: url('${result.data}');`;
+          if(result.data !== this.contentToDisplay.imageUrl){
+            this.needToBlur = false;
+          }else{
+            this.needToBlur = true;
+          }
+        } catch {
+          this.headerBackgroundImage = this.contentToDisplay.imageUrl ? `background-image: url('${this.contentToDisplay.imageUrl}');` : "";
+          this.needToBlur = true;
+        }
+      },
+    },
+  },
   mounted() {
     window.addEventListener("scroll", this.handleScroll);
   },
@@ -140,104 +162,77 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-
-
 .octopus-app {
-  .top-bar-container {
-    *:focus-visible {
-      box-shadow: 0 0 10px 1px white !important;
-    }
-
-    background: var(--octopus-primary);
-    background: linear-gradient(
-      90deg,
-      var(--octopus-primary) 0%,
-      var(--octopus-tertiary) 100%
-    );
-    width: 100%;
-    height: 5rem;
-    display: flex;
-    flex-direction: column;
-    transition: height 0.7s;
-    box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important;
-
-    .page-element-bg {
-      opacity: 0.5;
-      filter: blur(8px);
-      background-position: center;
+  --header-size: 5rem;
+  --header-additional-content-size: 22rem;
+  @media (width <= 650px) {
+    --header-size: 3.5rem;
+  }
+  @media (width <= 550px) {
+    --header-additional-content-size: 13rem;
+  }
+  .header-saooti-play{
+    z-index: 11;
+    position: sticky;
+    top: 0;
+    background-color: black;
+    &.header-img-bg{
+      background-position: center -20vw;
       background-repeat: no-repeat;
       background-size: cover;
-      width: 100%;
-      position: absolute;
-      transition: height 0.7s;
     }
-
-    &.content-top-bar {
-      height: 22rem;
-      background: black;
-
-      .page-element-bg {
-        height: 22rem;
-      }
+    &.header-color-bg{
+      background: var(--octopus-primary);
+      background: linear-gradient(
+        90deg,
+        var(--octopus-primary) 0%,
+        var(--octopus-tertiary) 100%
+      );
     }
-
-    &.content-top-bar.scrolled {
-      height: 5rem;
-
-      .page-element-bg {
-        height: 5rem;
-      }
+    &.header-color-bg, &.scrolled{
+      box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; 
     }
-
-    &:not(.scrolled) {
-      position: relative;
+  }
+  .header-content-bg{
+    background-position: center calc(calc(var(--header-size) * -1) - 20vw);
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    display: flex;
+    background-color: black;
+    transition: height 0.7s;
+    height: calc(var(--header-additional-content-size) - var(--header-size));
+    @starting-style {
+      height: 0rem;
     }
-
     &.scrolled {
-      z-index: 11;
-      position: sticky;
-      top: 0;
+      height: 0rem;
     }
-
-    .top-bar-z-index {
-      z-index: 1;
+  }
+  .header-additional-content{
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+  .header-additional-content, .header-opacity{
+    background: oklch(0 0 0 / 0.5);
+  }
+  .header-force-blur .header-additional-content, .header-force-blur .header-opacity{
+    backdrop-filter: blur(8px);
+  }
+  .header-content{
+    *:focus-visible {
+      box-shadow: 0 0 10px 1px white !important;
     }
-
     h1 {
       color: white !important;
       font-size: 1.8rem;
       margin: 2rem 5rem;
-    }
-
-    @media (width <= 650px) {
-      height: 3.5rem;
-
-      &.content-top-bar.scrolled {
-        height: 3.5rem;
-
-        .page-element-bg {
-          height: 3.5rem;
-        }
-      }
-    }
-
-    @media (width <= 550px) {
-      h1 {
+      @media (width <= 550px) {
         font-size: 1rem;
         margin: 1rem 0.5rem 0.5rem;
       }
-
-      &.content-top-bar {
-        height: 13rem;
-
-        .page-element-bg {
-          height: 13rem;
-        }
-      }
     }
-
-
-
     .admin-button:hover,
     .share-btn:hover {
       background: white;

package/src/components/misc/TopBarMainContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="top-bar-grid" :class="{ scrolled: titleIsDisplayed }">
+  <div class="top-bar-grid header-content" :class="{ scrolled: titleIsDisplayed }">
     <router-link
       class="top-bar-logo d-flex align-items-center"
       :to="{
@@ -29,7 +29,7 @@
         :class="platformEducation ? 'education-logo' : ''"
       />
     </router-link>
-    <h1 v-if="titleIsDisplayed" class="text-truncate m-0 align-self-center">
+    <h1 v-if="titleIsDisplayed" class="text-fadein text-truncate m-0 align-self-center">
       {{ titleDisplay }}
     </h1>
     <div
@@ -73,6 +73,7 @@
         <nav role="navigation" :aria-label="$t('Site menu')">
           <ul class="d-flex">
             <template v-for="link in routerLinkArray" :key="link.routeName">
+              <transition name="fade">
               <li v-if="link.condition" class="li-style-none">
                 <router-link
                   v-show="!isPhone"
@@ -85,6 +86,7 @@
                   {{ link.title }}
                 </router-link>
               </li>
+            </transition>
             </template>
           </ul>
         </nav>
@@ -294,8 +296,7 @@ export default defineComponent({
   .top-bar-grid {
     display: grid;
     grid-template-columns: 1fr 5fr;
-    margin-top: 0.5rem;
-    padding: 0 1rem;
+    padding: 0.5rem 1rem 0 1rem;
 
     &.scrolled {
       grid-template-columns: 1fr 2fr 1fr;
@@ -341,6 +342,18 @@ export default defineComponent({
         max-width: 30px !important;
       }
     }
+    .text-fadein{
+      animation: fadein 0.3s ease-in-out;
+    }
+    .fade-enter-active, .fade-leave-active {
+      transition: opacity 0.3s;
+      @starting-style {
+        opacity: 0;
+      }
+    }
+    .fade-enter, .fade-leave-to {
+      opacity: 0;
+    }
   }
 }
 </style>

package/src/locale/de.ts

@@ -414,4 +414,5 @@ export default {
   "And paste it in your newsletter":"Und fügen Sie es in Ihren Newsletter ein 😉",
   "Code copied!":"Code kopiert!",
   "Copied!":"Kopiert!",
+  "Color of the QR Code": "Farbe des QR-Codes",
 }

package/src/locale/en.ts

@@ -417,4 +417,5 @@ export default {
   "And paste it in your newsletter":"And paste it in your newsletter 😉",
   "Code copied!":"Code copied!",
   "Copied!":"Copied!",
+  "Color of the QR Code": "Color of the QR Code",
 };

package/src/locale/es.ts

@@ -415,4 +415,5 @@ export default {
   "And paste it in your newsletter":"Y pégalo en tu boletín informativo 😉",
   "Code copied!":"¡Código copiado!",
   "Copied!":"¡Copiado!",
+  "Color of the QR Code": "Color del código QR",
 }

package/src/locale/fr.ts

@@ -424,4 +424,5 @@ export default {
   "And paste it in your newsletter":"Et collez-le dans votre newsletter 😉",
   "Code copied!":"Code copié !",
   "Copied!":"Copié !",
+  "Color of the QR Code": "Couleur du Qr Code",
 };

package/src/locale/it.ts

@@ -411,4 +411,5 @@ export default{
   "And paste it in your newsletter":"E incollalo nella tua newsletter 😉",
   "Code copied!":"Codice copiato!",
   "Copied!":"Copiato!",
+  "Color of the QR Code": "Colore del codice QR",
 };

package/src/locale/sl.ts

@@ -406,4 +406,5 @@ export default {
   "And paste it in your newsletter":"In ga prilepite v svoje glasilo 😉",
   "Code copied!":"Koda kopirana!",
   "Copied!":"Kopirano!",
+  "Color of the QR Code": "Barva kode QR",
 }

package/src/style/transition.scss

@@ -84,4 +84,8 @@
     }
     
   }
+  @keyframes fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
 }