@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

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

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex align-items-center flex-wrap">
-    <span class="flex-shrink-0">{{ $t("Show") }}</span>
+    <span class="flex-shrink-0">{{ t("Show") }}</span>
     <input
       id="number-input"
       v-model="internNumber"
@@ -8,44 +8,45 @@
       min="1"
       max="50"
       class="input-share-player border text-center m-2"
-      :title="$t('Number of player podcasts')"
+      :title="t('Number of player podcasts')"
     />
-    <span class="flex-shrink-0">{{ $t("Last podcasts") }}</span>
+    <span class="flex-shrink-0">{{ t("Last podcasts") }}</span>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  props: {
-    episodesNumber: { default: 3, type: Number },
-  },
-  emits: [
-    "updateNumber",
-  ],
-
-  data() {
-    return {
-      internNumber: 3 as number
-    };
-  },
-  watch:{
-    internNumber(){
-      if (this.internNumber < 1) {
-        this.$emit("updateNumber", 1);
-      }else if(this.internNumber > 50){
-        this.$emit("updateNumber", 50);
-      }else{
-        this.$emit("updateNumber", this.internNumber);
-      }
-    }
-  },
-
-  created(){
-    this.internNumber = this.episodesNumber;
-  }
+<script setup lang="ts">
+import { onBeforeMount, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
+//Props
+const props = defineProps({
+  episodesNumber: { default: 3, type: Number },
 });
+
+//Emits
+const emit = defineEmits(["updateNumber"]);
+
+//Data
+const internNumber = ref(3);
+
+//Composables
+const { t } = useI18n();
+
+//Watch
+watch(internNumber, () => {
+  if (internNumber.value < 1) {
+    emit("updateNumber", 1);
+  }else if(internNumber.value > 50){
+    emit("updateNumber", 50);
+  }else{
+    emit("updateNumber", internNumber.value);
+  }
+});
+
+onBeforeMount(()=>{
+  internNumber.value = props.episodesNumber;
+})
+
 </script>
 
 <style lang="scss">

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

@@ -5,23 +5,28 @@
         :checked="isSvg"
         class="format-switch-checkbox" 
         type="checkbox" 
-        @input="$emit('update:isSvg', !isSvg)"/>
+        @input="changeIsSvg"/>
       <label class="format-switch-label" for="format-switch-checkbox">
         <span class="format-switch-label-span">SVG</span>
       </label>
     </div>
   </template>
   
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  export default defineComponent({
-    name: "FormatSwitch",
-    props:{
-      isSvg: { default: true, type: Boolean },
-    },
-    emits: ['update:isSvg'],
-  });
-  </script>
+<script setup lang="ts">
+
+//Props 
+const props = defineProps({
+  isSvg: { default: true, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(['update:isSvg']);
+
+//Methods
+function changeIsSvg(){
+  emit('update:isSvg', !props.isSvg)
+}
+</script>
   <style lang="scss">
   .octopus-app {
 

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

@@ -1,7 +1,7 @@
 <template>
   <ClassicModal
     id-modal="player-anonymous-modal"
-    :title-modal="$t('Share the player')"
+    :title-modal="t('Share the player')"
     @close="closePopup"
   >
     <template #body>
@@ -10,45 +10,42 @@
         :emission="emission"
         :exclusive="exclusive"
         :not-exclusive="notExclusive"
-        :organisation-id="authOrgaId"
+        :organisation-id="authStore.authOrgaId"
       />
     </template>
     <template #footer>
       <button class="btn btn-primary m-1" @click="closePopup">
-        {{ $t("Close") }}
+        {{ t("Close") }}
       </button>
     </template>
   </ClassicModal>
 </template>
 
-<script lang="ts">
+<script setup 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");
-    },
-  },
+import { useI18n } from "vue-i18n";
+
+//Props
+defineProps({
+  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
+const emit = defineEmits(["close"]);
+
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+
+//Methods
+function closePopup(): void {
+  emit("close");
+}
 </script>

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

@@ -2,21 +2,28 @@
   <ClassicCheckbox
     :text-init="insertCode"
     id-checkbox="insert-code-checkbox"
-    :label="$t('Insert custom code')"
-    @update:text-init="$emit('update:insertCode', $event)"
+    :label="t('Insert custom code')"
+    @update:text-init="updateInsertCode($event)"
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    ClassicCheckbox,
-  },
-  props: {
-    insertCode: { default: false, type: Boolean },
-  },
-  emits: ["update:insertCode"],
-});
+
+//Props 
+defineProps({
+  insertCode: { default: false, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(["update:insertCode"]);
+
+//Composables
+const { t } = useI18n();
+
+//Methods
+function updateInsertCode(value:boolean){
+  emit('update:insertCode', value)
+}
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <fieldset class="mt-3">
     <legend class="h4 mb-2 mt-3">
-      {{ $t("player parameters") }}
+      {{ t("player parameters") }}
     </legend>
     <template v-if="choseNumberEpisode">
       <div v-if="displayChoiceAllEpisodes" role="radiogroup">
@@ -17,7 +17,7 @@
             value="all"
           />
           <label for="radio-all-episodes" class="flex-shrink-0">{{
-            $t("Show every episode")
+            t("Show every episode")
           }}</label>
         </div>
         <div
@@ -30,17 +30,17 @@
             type="radio"
             name="episodeNumbers"
             value="number"
-            :title="$t('Show') + ' ' + $t('Last podcasts')"
+            :title="t('Show') + ' ' + t('Last podcasts')"
           />
-          <ChooseEpisodesNumber :episodes-number="episodesNumber" @update-number="$emit('update:episodesNumber', $event)"/>
+          <ChooseEpisodesNumber :episodes-number="episodesNumber" @update-number="emit('update:episodesNumber', $event)"/>
         </div>
       </div>
-      <ChooseEpisodesNumber v-else :episodes-number="episodesNumber" @update-number="$emit('update:episodesNumber', $event)"/>
+      <ChooseEpisodesNumber v-else :episodes-number="episodesNumber" @update-number="emit('update:episodesNumber', $event)"/>
       <ClassicCheckbox
         :text-init="proceedReading"
         id-checkbox="proceed-reading-checkbox"
-        :label="$t('Proceed reading')"
-        @update:text-init="$emit('update:proceedReading', $event)"
+        :label="t('Proceed reading')"
+        @update:text-init="emit('update:proceedReading', $event)"
       />
     </template>
     <ClassicCheckbox
@@ -48,102 +48,100 @@
       :text-init="isVisible"
       id-checkbox="is-visible-checkbox"
       :label="titleStillAvailable"
-      @update:text-init="$emit('update:isVisible', $event)"
+      @update:text-init="emit('update:isVisible', $event)"
     />
     <ClassicCheckbox
       v-if="displayArticleParam"
       :text-init="displayArticle"
       id-checkbox="display-article-checkbox"
-      :label="$t('Display associated article')"
-      @update:text-init="$emit('update:displayArticle', $event)"
+      :label="t('Display associated article')"
+      @update:text-init="emit('update:displayArticle', $event)"
     />
     <ClassicCheckbox
       v-if="displayTranscriptParam"
       :text-init="displayTranscript"
       id-checkbox="display-transcript-checkbox"
-      :label="$t('If the transcript is available, show it')"
-      @update:text-init="$emit('update:displayTranscript', $event)"
+      :label="t('If the transcript is available, show it')"
+      @update:text-init="emit('update:displayTranscript', $event)"
     />
     <ClassicCheckbox
       v-if="displayWaveParam"
       :text-init="displayWave"
       id-checkbox="display-wave-checkbox"
-      :label="$t('Show animated wave')"
-      @update:text-init="$emit('update:displayWave', $event)"
+      :label="t('Show animated wave')"
+      @update:text-init="emit('update:displayWave', $event)"
     />
     <ClassicCheckbox
       :text-init="playerAutoPlay"
       id-checkbox="player-autoplay-checkbox"
-      :label="$t('Trigger automatic reading if this is possible')"
-      @update:text-init="$emit('update:playerAutoPlay', $event)"
+      :label="t('Trigger automatic reading if this is possible')"
+      @update:text-init="emit('update:playerAutoPlay', $event)"
     />
     <PlayerCommonParameters
       v-if="displayInsertCode"
       :insert-code="insertCode"
-      @update:insert-code="$emit('update:insertCode', $event)"
+      @update:insert-code="emit('update:insertCode', $event)"
     />
   </fieldset>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 const ChooseEpisodesNumber = defineAsyncComponent(() => import("./ChooseEpisodesNumber.vue"));
 const PlayerCommonParameters = defineAsyncComponent(
   () => import("./PlayerCommonParameters.vue"),
 );
-export default defineComponent({
-  components: {
-    ClassicCheckbox,
-    ChooseEpisodesNumber,
-    PlayerCommonParameters
-  },
-  props: {
-    isVisible: { default: false, type: Boolean },
-    choseNumberEpisode: { default: false, type: Boolean },
-    displayWaveParam: { default: true, type: Boolean },
-    displayChoiceAllEpisodes: { default: false, type: Boolean },
-    displayTranscriptParam: { default: false, type: Boolean },
-    displayArticleParam: { default: false, type: Boolean },
-    displayIsVisible: { default: false, type: Boolean },
-    displayInsertCode: { default: false, type: Boolean },
-    proceedReading: { default: true, type: Boolean },
-    displayArticle: { default: true, type: Boolean },
-    displayTranscript: { default: true, type: Boolean },
-    displayWave: { default: true, type: Boolean },
-    playerAutoPlay: { default: false, type: Boolean },
-    isPodcastNotVisible: { default: false, type: Boolean },
-    episodesNumber: { default: 3, type: Number },
-    insertCode: { default: false, type: Boolean },
-  },
-  emits: [
-    "episodeChoiceDisplay",
-    "update:proceedReading",
-    "update:isVisible",
-    "update:episodesNumber",
-    "update:displayArticle",
-    "update:displayTranscript",
-    "update:displayWave",
-    "update:playerAutoPlay",
-    "update:insertCode"
-  ],
 
-  data() {
-    return {
-      episodeChoiceDisplay: "number" as string,
-    };
-  },
-  computed: {
-    titleStillAvailable(): string {
-      return this.isPodcastNotVisible
-        ? this.$t("Podcast still available")
-        : this.$t("Podcasts still available");
-    },
-  },
-  watch: {
-    episodeChoiceDisplay(): void {
-      this.$emit("episodeChoiceDisplay", this.episodeChoiceDisplay);
-    },
-  },
+//Props 
+const props = defineProps({
+  isVisible: { default: false, type: Boolean },
+  choseNumberEpisode: { default: false, type: Boolean },
+  displayWaveParam: { default: true, type: Boolean },
+  displayChoiceAllEpisodes: { default: false, type: Boolean },
+  displayTranscriptParam: { default: false, type: Boolean },
+  displayArticleParam: { default: false, type: Boolean },
+  displayIsVisible: { default: false, type: Boolean },
+  displayInsertCode: { default: false, type: Boolean },
+  proceedReading: { default: true, type: Boolean },
+  displayArticle: { default: true, type: Boolean },
+  displayTranscript: { default: true, type: Boolean },
+  displayWave: { default: true, type: Boolean },
+  playerAutoPlay: { default: false, type: Boolean },
+  isPodcastNotVisible: { default: false, type: Boolean },
+  episodesNumber: { default: 3, type: Number },
+  insertCode: { default: false, type: Boolean },
+})
+
+
+//Emits
+const emit = defineEmits([
+  "episodeChoiceDisplay",
+  "update:proceedReading",
+  "update:isVisible",
+  "update:episodesNumber",
+  "update:displayArticle",
+  "update:displayTranscript",
+  "update:displayWave",
+  "update:playerAutoPlay",
+  "update:insertCode"]);
+
+
+//Data 
+const episodeChoiceDisplay = ref("number");
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const titleStillAvailable = computed(() =>{
+  return props.isPodcastNotVisible ? t("Podcast still available"): t("Podcasts still available");
+});
+
+//Watch
+watch(episodeChoiceDisplay, async () => {
+  emit("episodeChoiceDisplay", episodeChoiceDisplay.value);
 });
+
 </script>

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("Color of the QR Code") }}
+        {{ t("Color of the QR Code") }}
       </div>
       <VSwatches
         v-model:model-value="color"
@@ -27,86 +27,74 @@
     <div class="d-flex align-items-center my-3">
       <FormatSwitch v-model:is-svg="isSvg" class="me-3"/>
       <button class="btn btn-primary" @click="download">
-        {{ $t("Download") }}
+        {{ t("Download") }}
       </button>
     </div>
     <SnackBar ref="snackbar" position="bottom-left" />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VSwatches } from "vue3-swatches";
 import "vue3-swatches/dist/style.css";
 import SnackBar from "../../misc/SnackBar.vue";
 import QrcodeVue from "qrcode.vue";
 import FormatSwitch from "./FormatSwitch.vue";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
-import { mapActions } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "QrCode",
+import { computed, onBeforeMount, ref, useTemplateRef } from "vue";
+import { useI18n } from "vue-i18n";
 
-  components: {
-    SnackBar,
-    VSwatches,
-    QrcodeVue,
-    FormatSwitch
-  },
-  props: {
-    url: { default: "", type: String },
+//Props 
+const props = defineProps({
+  url: { default: "", type: String },
     orgaForColor: { default: undefined, type: String },
-  },
-  data() {
-    return {
-      size: 1000 as number,
-      color: "#000000" as string,
-      isSvg: true as boolean
-    };
-  },
-  computed:{
-    renderQrCode(){
-      return this.isSvg ? 'svg' : 'canvas';
-    }
-  },
-  created() {
-    this.initDefaultColor();
-  },
-  methods: {
-    ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
-    download(): void {
-      const canvas = document.getElementsByClassName("myQrCode");
-      if (!canvas || canvas.length <=0 || !canvas[0]) {
-        return;
-      }
-      const downloadLink = document.createElement("a");
-      if (this.isSvg) {
-        const svgData = canvas[0].outerHTML;
-        const svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
-        const svgUrl = URL.createObjectURL(svgBlob);
-        downloadLink.href = svgUrl;
-        downloadLink.download = "qrcode.svg";
-        downloadLink.click();
-        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-          this.$t("Download started"),
-        );
-      }else{
-        downloadLink.download = "qrcode.png";
-        downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();
-      }
-      downloadLink.click();
-      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-        this.$t("Download started"),
-      );
-    },
-    async initDefaultColor(): Promise<void> {
-      if (undefined === this.orgaForColor) return;
-      const attributes = await this.getOrgaAttributes(this.orgaForColor);
-      if (Object.hasOwn(attributes, "COLOR")) {
-        this.color = attributes.COLOR as string;
-      }
-    },
-  },
-});
+})
+
+//Data 
+const size = ref(1000);
+const color = ref("#000000");
+const isSvg = ref(true);
+const snackBarRef = useTemplateRef('snackbar');
+
+//Composables
+const { t } = useI18n();
+const saveFetchStore = useSaveFetchStore();
+
+
+//Computed
+const renderQrCode = computed(() => isSvg.value ? 'svg' : 'canvas');
+
+onBeforeMount(()=>initDefaultColor())
+
+//Methods
+function download(): void {
+  const canvas = document.getElementsByClassName("myQrCode");
+  if (!canvas || canvas.length <=0 || !canvas[0]) {
+    return;
+  }
+  const downloadLink = document.createElement("a");
+  if (isSvg.value) {
+    const svgData = canvas[0].outerHTML;
+    const svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
+    const svgUrl = URL.createObjectURL(svgBlob);
+    downloadLink.href = svgUrl;
+    downloadLink.download = "qrcode.svg";
+  }else{
+    downloadLink.download = "qrcode.png";
+    downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();
+  }
+  downloadLink.click();
+  (snackBarRef?.value as InstanceType<typeof SnackBar>).open(
+    t("Download started"),
+  );
+}
+async function initDefaultColor(): Promise<void> {
+  if (undefined === props.orgaForColor) return;
+  const attributes = await saveFetchStore.getOrgaAttributes(props.orgaForColor);
+  if (Object.hasOwn(attributes, "COLOR")) {
+    color.value = attributes.COLOR as string;
+  }
+}
 </script>
 <style lang="scss">
 .octopus-app {