@saooti/octopus-sdk 41.0.2 → 41.0.3

package/package.json

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

package/src/components/composable/radio/usefetchRadioData.ts

@@ -2,19 +2,17 @@ import classicApi from "../../../api/classicApi";
 import { MediaRadio, MetadataRadio, NextAdvertising } from '@/stores/class/general/player';
 import { Podcast } from '@/stores/class/general/podcast';
 import dayjs from 'dayjs';
+import radioHelper from "../../../helper/radio/radioHelper";
 import {onBeforeUnmount, Ref, ref} from 'vue';
-import { useI18n } from "vue-i18n";
 export const useFetchRadio = ()=>{
 
   const radioInterval : Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);
-
-  const {t} = useI18n();
   
   async function fetchRadioMetadata(
     canalId: number,
     previousTitle: string,
     callbackMetadata: (
-      metadata: MediaRadio|undefined,
+      metadata: MediaRadio,
       podcast: Podcast | undefined,
       history: Array<MediaRadio>
     ) => void,
@@ -35,19 +33,15 @@ export const useFetchRadio = ()=>{
       callbackAdvertising(metadata.nextAdvertising);
     }
     const arrayMetadata = metadata.previously;
-    if(null!==metadata.currently){
-      arrayMetadata.unshift(metadata.currently);
-      for (let index = 0, len = arrayMetadata.length; index < len; index++) {
-        if (
-          dayjs().valueOf() - 18000 >
-          dayjs(arrayMetadata[index].startDate).valueOf()
-        ) {
-          await useCallbackIfNewMetadata(previousTitle, arrayMetadata, index, len,callbackMetadata);
-          return;
-        }
+    arrayMetadata.unshift(metadata.currently);
+    for (let index = 0, len = arrayMetadata.length; index < len; index++) {
+      if (
+        dayjs().valueOf() - 18000 >
+        dayjs(arrayMetadata[index].startDate).valueOf()
+      ) {
+        await useCallbackIfNewMetadata(previousTitle, arrayMetadata, index, len,callbackMetadata);
+        return;
       }
-    }else{
-      callbackMetadata(undefined, undefined, arrayMetadata);
     }
   }
   async function useCallbackIfNewMetadata(previousTitle: string, arrayMetadata: Array<MediaRadio>, index:number, len: number, callbackMetadata: (
@@ -69,22 +63,11 @@ export const useFetchRadio = ()=>{
       }
     }
   }
-  function displayTitle(metadata: MediaRadio|undefined): string {
-    if(!metadata){
-      return t("Silent stream");
-    }
-    let title = "";
-    if (metadata?.title) {
-      title += metadata.title;
-    }
-    if (metadata?.artist) {
-      title += " - " + metadata.artist;
-    }
-    return title;
+  function displayTitle(metadata: MediaRadio): string {
+    return radioHelper.displayTitle(metadata);
   }
 
 
-
   onBeforeUnmount(() => {
     clearInterval(radioInterval.value as unknown as number);
   })

package/src/components/display/categories/CategoryChooser.vue

@@ -17,6 +17,8 @@
     :is-disabled="isDisabled"
     :no-deselect="noDeselect"
     :display-required="displayRequired"
+    :popover="popover"
+    :popover-relative-class="popoverRelativeClass"
     @on-search="onSearchCategory"
     @selected="onCategorySelected"
   />
@@ -52,6 +54,8 @@ const props = defineProps({
   displayLabel: { default: false, type: Boolean },
   textDanger :{ default: undefined, type: String },
   displayRequired: { default: false, type: Boolean },
+  popover: { default: undefined, type: String },
+  popoverRelativeClass: { default: undefined, type: String },
 })
 
 //Emits

package/src/components/display/live/RadioCurrently.vue

@@ -72,7 +72,10 @@ const currentlyPlayingString = computed(() => {
   if (playingRadio.value && playerStore.playerRadio) {
     return displayTitle(playerStore.playerRadio.metadata);
   }
-  return displayTitle(currentMetadata.value);
+  if (currentMetadata.value) {
+    return displayTitle(currentMetadata.value);
+  }
+  return "";
 });
 
 onMounted(()=>{
@@ -99,7 +102,7 @@ async function fetchCurrentlyPlaying(): Promise<void> {
     updateMetadata,
   );
 }
-function updateMetadata(metadata: MediaRadio|undefined, podcast?: Podcast): void {
+function updateMetadata(metadata: MediaRadio, podcast?: Podcast): void {
   currentMetadata.value = metadata;
   currentPodcast.value = podcast;
 }

package/src/components/form/ClassicInputText.vue

@@ -12,6 +12,7 @@
         >{{ label }}
         <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
       </component>
+      <slot name="afterTitle"/>
       <template v-if="popover">
         <button
           :id="'popover' + inputId"
@@ -31,7 +32,9 @@
           <!-- eslint-enable -->
         </ClassicPopover>
       </template>
+      <slot name="afterHelp"/>
     </div>
+    <slot name="betweenTitleInput"/>
     <input
       v-if="!isWysiwyg && !isTextarea"
       v-show="showField"

package/src/components/form/ClassicMultiselect.vue

@@ -7,11 +7,31 @@
     }"
     :style="{ width: width, height: height }"
   >
-    <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
-      label
-    }}
-    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
-  </label>
+    <div class="d-flex align-items-center">
+      <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
+        label
+      }}
+      <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
+      </label>
+      <template v-if="popover">
+        <button
+          :id="'popover' + id"
+          :title="t('Help')"
+          class="btn-transparent"
+        >
+          <HelpCircleIcon :size="30" />
+        </button>
+        <ClassicPopover
+          :target="'popover' + id"
+          popover-class="popover-z-index"
+          :relative-class="popoverRelativeClass"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="popover" />
+          <!-- eslint-enable -->
+        </ClassicPopover>
+      </template>
+    </div>
     <vSelect
       v-model="optionSelected"
       :input-id="id"
@@ -77,12 +97,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, Ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import vSelect from "vue-select";
-
+import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../misc/ClassicPopover.vue"),
+);
 
 //Props 
 const props = defineProps({
@@ -106,6 +129,8 @@ const props = defineProps({
   allowEmpty: { default: true, type: Boolean },
   textDanger :{ default: undefined, type: String },
   displayRequired: { default: false, type: Boolean },
+  popover: { default: undefined, type: String },
+  popoverRelativeClass: { default: undefined, type: String },
 })
 
 //Emits

package/src/components/misc/ClassicAccordion.vue

@@ -20,11 +20,11 @@
           class="img-accordion"
           :src="imageUrl"
           aria-hidden="true"
-        alt=""
-          
+          alt=""
         />
-        <span class="flex-grow-1">{{ title }}</span>
-        <ChevronDownIcon :class="{ 'arrow-transform': isOpen }" />
+        <span>{{ title }}</span>
+        <slot name="afterTitle"/>
+        <ChevronDownIcon class="ms-auto" :class="{ 'arrow-transform': isOpen }" />
       </button>
       <div v-show="isOpen" class="body p-2">
         <slot />

package/src/components/misc/ClassicSpinner.vue

@@ -16,7 +16,7 @@ defineProps({
   --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;

package/src/components/misc/TopBar.vue

@@ -3,7 +3,7 @@
     role="banner"
     class="header-saooti-play"
     :style="headerBackgroundImage"
-    :class="[generalStore.contentToDisplay ? 'header-img-bg':'header-color-bg', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']"
+    :class="[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']"
   >
     <TopBarMainContent
       :is-phone="isPhone"
@@ -160,15 +160,7 @@ function handleScroll(): void {
       background-repeat: no-repeat;
       background-size: cover;
     }
-    &.header-color-bg{
-      background: var(--octopus-primary);
-      background: linear-gradient(
-        90deg,
-        var(--octopus-primary) 0%,
-        var(--octopus-tertiary) 100%
-      );
-    }
-    &.header-color-bg, &.scrolled{
+    &.bg-gradient, &.scrolled{
       box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; 
     }
   }

package/src/components/misc/player/elements/PlayerTitle.vue

@@ -89,7 +89,7 @@ onUnmounted(()=>{
 async function fetchCurrentlyPlaying(): Promise<void> {
   fetchRadioMetadata(
     playerStore.playerRadio?.canalId ?? 0,
-    playerStore.playerRadio?.metadata?.title ?? "",
+    playerStore.playerRadio?.metadata.title ?? "",
     updateMetadata,
     updateAdvertising,
   );
@@ -98,11 +98,11 @@ function updateAdvertising(nextAdvertising: NextAdvertising): void {
   playerStore.playerRadioUpdateNextAdvertising(nextAdvertising);
 }
 function updateMetadata(
-  metadata: MediaRadio|undefined,
+  metadata: MediaRadio,
   podcast: Podcast | undefined,
   history: Array<MediaRadio>,
 ): void {
-  playerStore.playerMetadata(metadata, history); //TODO
+  playerStore.playerMetadata(metadata, history);
   playerStore.playerRadioPodcast(podcast);
 }
 </script>

package/src/components/misc/player/radio/RadioHistory.vue

@@ -40,10 +40,10 @@ import ChevronLeftIcon from "vue-material-design-icons/ChevronLeft.vue";
 import ChevronRightIcon from "vue-material-design-icons/ChevronRight.vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import dayjs from "dayjs";
+import radioHelper from "../../../../helper/radio/radioHelper";
 import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { MediaRadio } from "@/stores/class/general/player";
 import { useI18n } from "vue-i18n";
-import { useFetchRadio } from "../../../composable/radio/usefetchRadioData";
 
 
 //Data 
@@ -54,7 +54,6 @@ const historyListContainerRef = useTemplateRef('historyListContainer');
 //Composables
 const { t } = useI18n();
 const playerStore = usePlayerStore();
-const {displayTitle} = useFetchRadio();
 
 
 //Computed
@@ -120,7 +119,7 @@ function displayPreviousItem(item: MediaRadio): string {
   if (item.podcastId) {
     return item.title;
   }
-  return displayTitle(item);
+  return radioHelper.displayTitle(item);
 }
 </script>
 <style lang="scss">

package/src/components/pages/PageLogout.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="page-box page-box-absolute page-logout"
+    class="page-box page-box-absolute page-logout bg-gradient"
   >
     <div class="logout-section">
       <h1 class="mb-3">{{ t("Logout") }}</h1>
@@ -19,11 +19,6 @@ const { t } = useI18n();
 </script>
 <style lang="scss">
 .octopus-app .page-logout {
-  background: linear-gradient(
-    90deg,
-    var(--octopus-primary) 0%,
-    var(--octopus-tertiary) 100%
-  );
   display: flex;
   align-items: center;
   justify-content: center;

package/src/helper/radio/radioHelper.ts

@@ -0,0 +1,15 @@
+import { MediaRadio } from "@/stores/class/general/player";
+
+export default {
+    displayTitle(metadata: MediaRadio): string {
+        let title = "";
+        if (metadata.title) {
+          title += metadata.title;
+        }
+        if (metadata.artist) {
+          title += " - " + metadata.artist;
+        }
+        return title;
+      }
+};
+  

package/src/locale/de.ts

@@ -414,5 +414,4 @@ export default {
   "Code copied!":"Code kopiert!",
   "Copied!":"Kopiert!",
   "Color of the QR Code": "Farbe des QR-Codes",
-  "Silent stream":"Stiller Fluss",
 }

package/src/locale/en.ts

@@ -417,5 +417,4 @@ export default {
   "Code copied!":"Code copied!",
   "Copied!":"Copied!",
   "Color of the QR Code": "Color of the QR Code",
-  "Silent stream":"Silent stream",
 };

package/src/locale/es.ts

@@ -415,5 +415,4 @@ export default {
   "Code copied!":"¡Código copiado!",
   "Copied!":"¡Copiado!",
   "Color of the QR Code": "Color del código QR",
-  "Silent stream":"Flujo silencioso",
 }

package/src/locale/fr.ts

@@ -424,5 +424,4 @@ export default {
   "Code copied!":"Code copié !",
   "Copied!":"Copié !",
   "Color of the QR Code": "Couleur du Qr Code",
-  "Silent stream":"Flux silencieux",
 };

package/src/locale/it.ts

@@ -411,5 +411,4 @@ export default{
   "Code copied!":"Codice copiato!",
   "Copied!":"Copiato!",
   "Color of the QR Code": "Colore del codice QR",
-  "Silent stream":"Flusso silenzioso",
 };

package/src/locale/sl.ts

@@ -406,5 +406,4 @@ export default {
   "Code copied!":"Koda kopirana!",
   "Copied!":"Kopirano!",
   "Color of the QR Code": "Barva kode QR",
-  "Silent stream":"Tihi tok",
 }

package/src/stores/PlayerStore.ts

@@ -210,7 +210,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerUpdateSeekTime(seekTime: number) {
       this.playerSeekTime = seekTime;
     },
-    playerMetadata(metadata: MediaRadio|undefined, history: Array<MediaRadio>) {
+    playerMetadata(metadata: MediaRadio, history: Array<MediaRadio>) {
       if (!this.playerRadio) {
         return;
       }

package/src/stores/class/general/player.ts

@@ -4,7 +4,7 @@ import { Podcast } from "./podcast";
 export interface Radio {
   canalId: number;
   url: string;
-  metadata?: MediaRadio;
+  metadata: MediaRadio;
   history: Array<MediaRadio>;
   nextAdvertising: NextAdvertising;
   isInit: boolean;
@@ -30,7 +30,7 @@ export interface NextAdvertising {
 
 export interface MetadataRadio {
   channelId: number;
-  currently: MediaRadio|null;
+  currently: MediaRadio;
   previously: Array<MediaRadio>;
   nextAdvertising: NextAdvertising;
 }

package/src/style/_variables.scss

@@ -27,6 +27,9 @@
     --octopus-background-transparent: oklch(from var(--octopus-background) l c h / 40%);
     --octopus-tertiary-really-transparent: oklch(from var(--octopus-tertiary) l c h / 30%);
 
+    //Gradient
+    --octopus-gradient : linear-gradient(90deg,var(--octopus-primary) 0%, var(--octopus-tertiary) 100%);
+
     // Size
     --octopus-image-size: 12.5rem;
     --octopus-podcast-size: 13.5rem;

package/src/style/general.scss

@@ -114,6 +114,11 @@ main, #app{
 		background: var(--octopus-complementary-color) !important;
 	}
 
+  .bg-gradient{
+    background: var(--octopus-primary);
+    background:var(--octopus-gradient);
+  }
+
   .text-blue-octopus{
     color: var(--octopus-tertiary) !important
   }