@saooti/octopus-sdk 40.2.19 → 41.0.1-SNAPSHOT

package/src/components/misc/modal/ContractPreviewModal.vue

@@ -1,89 +1,91 @@
 <template>
   <ClassicModal
     id-modal="checking-modal"
-    :title-modal="$t('Contract preview')"
-    @close="$emit('close')"
+    :title-modal="t('Contract preview')"
+    @close="closePopup"
   >
     <template #body>
       <h2 class="mb-3">{{ selectedContract?.name }}</h2>
-      <div v-for="page in pages" :key="page">
-        <VuePDF :pdf="pdf" :page="page" />
+      <div v-for="page in thisPages" :key="page">
+        <VuePDF :pdf="thisPdf" :page="page" />
       </div>
     </template>
     <template #footer>
       <div class="d-flex justify-content-end">
         <button class="btn btn-primary m-1" @click="onDownloadContract()">
-          {{ $t("Download") }}
+          {{ t("Download") }}
         </button>
-        <button class="btn m-1 btn-primary" @click="$emit('close')">
-          {{ $t("Close") }}
+        <button class="btn m-1 btn-primary" @click="closePopup">
+          {{ t("Close") }}
         </button>
       </div>
     </template>
   </ClassicModal>
 </template>
 
-<script lang="ts">
-import { mapState } from "pinia";
+<script setup lang="ts">
 import { useApiStore } from "../../../stores/ApiStore";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { Contract } from "../../../stores/class/contract/contract";
 // @ts-expect-error Problème de bibliothèque
 import { usePDF, VuePDF, PDFDocumentLoadingTask } from "@tato30/vue-pdf";
-import { defineComponent, defineAsyncComponent, ShallowRef } from "vue";
+import { defineAsyncComponent, ShallowRef, ref, Ref, computed, watch, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 const ClassicModal = defineAsyncComponent(() => import("./ClassicModal.vue"));
-export default defineComponent({
-  name: "ContractPreviewModal",
-  components: {
-    ClassicModal,
-    VuePDF,
-  },
-  props: {
-    selectedContract: { default: undefined, type: Object as () => Contract },
-  },
-  emits: ["download", "close"],
-  data() {
-    return {
-      pdfSource: "" as string,
-      pdf: undefined as PDFDocumentLoadingTask,
-      pages: 0 as number | ShallowRef<number>,
-    };
-  },
-  computed: {
-    ...mapState(useAuthStore, ["authParam"]),
-    ...mapState(useApiStore, ["keycloakUrl"]),
 
-    pdfToDisplay(): string | undefined {
-      if ("" !== this.pdfSource) {
-        return this.pdfSource;
-      }
-      return undefined;
-    },
-  },
-  watch: {
-    pdfToDisplay() {
-      if (undefined === this.pdfToDisplay) {
-        return;
-      }
-      const { pdf, pages } = usePDF(this.pdfToDisplay);
-      this.pdf = pdf;
-      this.pages = pages;
-    },
-  },
-  mounted() {
-    this.initSrcContract();
-  },
-  methods: {
-    initSrcContract(): void {
-      let source = "";
-      if (this.selectedContract) {
-        source = this.keycloakUrl + "contract/" + this.selectedContract.id;
-      }
-      this.pdfSource = source + "?access_token=" + this.authParam.accessToken;
-    },
-    onDownloadContract(): void {
-      this.$emit("download", this.selectedContract);
-    },
-  },
+
+//Props 
+const props = defineProps({
+  selectedContract: { default: undefined, type: Object as () => Contract },
+})
+
+//Emits
+const emit = defineEmits(["download", "close"]);
+
+
+//Data 
+const pdfSource = ref("");
+const thisPdf: Ref<PDFDocumentLoadingTask> = ref(undefined);
+const thisPages: Ref< number | ShallowRef<number>> = ref(0);
+
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+const apiStore = useApiStore();
+
+//Computed
+const pdfToDisplay = computed(() => {
+  if ("" !== pdfSource.value) {
+    return pdfSource.value;
+  }
+  return undefined;
 });
+
+//Watch
+watch(pdfToDisplay, async () => {
+  if (undefined === pdfToDisplay.value) {
+    return;
+  }
+  const { pdf, pages } = usePDF(pdfToDisplay.value);
+  thisPdf.value = pdf;
+  thisPages.value = pages;
+});
+
+onMounted(()=>initSrcContract())
+
+
+//Methods
+function closePopup(): void {
+  emit("close");
+}
+function initSrcContract(): void {
+  let source = "";
+  if (props.selectedContract) {
+    source = apiStore.keycloakUrl + "contract/" + props.selectedContract.id;
+  }
+  pdfSource.value = source + "?access_token=" + authStore.authParam.accessToken;
+}
+function onDownloadContract(): void {
+  emit("download", props.selectedContract);
+}
 </script>

package/src/components/misc/modal/MessageModal.vue

@@ -11,8 +11,8 @@
       <!-- eslint-enable -->
       <ClassicLoading
         v-if="save || error"
-        :loading-text="save && !error ? $t('Loading content ...') : undefined"
-        :error-text="error ? $t('An error occurred') : undefined"
+        :loading-text="save && !error ? t('Loading content ...') : undefined"
+        :error-text="error ? t('An error occurred') : undefined"
       />
     </template>
     <template #footer>
@@ -40,52 +40,55 @@
   </ClassicModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicModal from "../modal/ClassicModal.vue";
 import ClassicLoading from "../../form/ClassicLoading.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "MessageModal",
-  components: {
-    ClassicModal,
-    ClassicLoading,
-  },
-  props: {
-    title: { default: undefined, type: String },
-    closable: { default: true, type: Boolean },
-    message: { default: undefined, type: String },
-    validatetext: { default: undefined, type: String },
-    canceltext: { default: undefined, type: String },
-    thirdText: { default: undefined, type: String },
-    focus: { default: true, type: Boolean },
-  },
+import { onMounted, ref, useTemplateRef } from "vue";
+import { useI18n } from "vue-i18n";
+//Props 
+const props = defineProps({
+  title: { default: undefined, type: String },
+  closable: { default: true, type: Boolean },
+  message: { default: undefined, type: String },
+  validatetext: { default: undefined, type: String },
+  canceltext: { default: undefined, type: String },
+  thirdText: { default: undefined, type: String },
+  focus: { default: true, type: Boolean },
+})
 
-  emits: ["close", "validate", "cancel", "thirdEvent"],
-  data() {
-    return {
-      save: false as boolean,
-      error: false as boolean,
-    };
-  },
-  mounted() {
-    if (this.focus) {
-      (this.$refs.focusElement as HTMLElement)?.focus();
-    }
-  },
-  methods: {
-    closePopup(): void {
-      this.$emit("close");
-    },
-    onValid(): void {
-      this.save = true;
-      this.$emit("validate");
-    },
-    onCancel(): void {
-      this.$emit("cancel");
-    },
-    onThirdAction(): void {
-      this.$emit("thirdEvent");
-    },
-  },
-});
+
+//Emits
+const emit = defineEmits(["close","validate", "cancel", "thirdEvent"]);
+
+//Data 
+const save = ref(false);
+const error = ref(false);
+const focusElementRef = useTemplateRef('focusElement');
+
+
+
+//Composables
+const { t } = useI18n();
+
+
+onMounted(()=>{
+  if (props.focus) {
+    (focusElementRef?.value as HTMLElement)?.focus();
+  }
+})
+
+//Mehods
+function closePopup(): void {
+  emit("close");
+}
+function onValid(): void {
+  save.value = true;
+  emit("validate");
+}
+function onCancel(): void {
+  emit("cancel");
+}
+function onThirdAction(): void {
+  emit("thirdEvent");
+}
 </script>

package/src/components/misc/modal/NewsletterModal.vue

@@ -14,49 +14,48 @@
     </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 ClassicModal from "../modal/ClassicModal.vue";
 import ShareNewsletter from "../../display/sharing/ShareNewsletter.vue";
 import { Podcast } from "@/stores/class/general/podcast";
-import { defineComponent } from "vue";
+import { computed } from "vue";
 import { Emission } from "@/stores/class/general/emission";
 import { Playlist } from "@/stores/class/general/playlist";
-export default defineComponent({
-  name: "NewsletterModal",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    ShareNewsletter,
-    ClassicModal
-  },
 
-  props: {
-    podcast: { default: undefined, type: Object as () => Podcast },
-    emission: { default: undefined, type: Object as () => Emission },
-    playlist: { default: undefined, type: Object as () => Playlist },
-  },
+//Props 
+const props = defineProps({
+  podcast: { default: undefined, type: Object as () => Podcast },
+  emission: { default: undefined, type: Object as () => Emission },
+  playlist: { default: undefined, type: Object as () => Playlist },
+})
 
-  emits: ["close"],
-  computed:{
-    modalTitle() {
-      if (this.podcast) {
-        return this.$t("Share the episode in your newsletter");
-      }
-      if (this.emission) {
-        return this.$t("Share the series in your newsletter");
-      }
-      return this.$t("Share the playlist in your newsletter");
-    },
-  },
-  methods: {
-    closePopup(): void {
-      this.$emit("close");
-    },
-  },
+//Emits
+const emit = defineEmits(["close"]);
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const modalTitle = computed(() => {
+  if (props.podcast) {
+    return t("Share the episode in your newsletter");
+  }
+  if (props.emission) {
+    return t("Share the series in your newsletter");
+  }
+  return t("Share the playlist in your newsletter");
 });
+
+//Methods
+function closePopup(): void {
+  emit("close");
+}
 </script>

package/src/components/misc/modal/QrCodeModal.vue

@@ -1,7 +1,7 @@
 <template>
   <ClassicModal
     id-modal="qrcode-modal"
-    :title-modal="$t('Share QR Code')"
+    :title-modal="t('Share QR Code')"
     @close="closePopup"
   >
     <template #body>
@@ -9,31 +9,31 @@
     </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 ClassicModal from "../modal/ClassicModal.vue";
 import QrCode from "../../display/sharing/QrCode.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "QrCodeModal",
-  components: {
-    QrCode,
-    ClassicModal,
-  },
-  props: {
-    urlPage: { default: undefined, type: String },
-    orgaForColor: { default: undefined, type: String },
-  },
-  emits: ["close"],
-  methods: {
-    closePopup(): void {
-      this.$emit("close");
-    },
-  },
-});
+import { useI18n } from "vue-i18n";
+
+//Props 
+defineProps({
+  urlPage: { default: undefined, type: String },
+  orgaForColor: { default: undefined, type: String },
+})
+
+//Emits
+const emit = defineEmits(["close"]);
+ 
+//Composables
+const { t } = useI18n();
+
+//Methods
+function closePopup(): void {
+  emit("close");
+}
 </script>

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -1,7 +1,7 @@
 <template>
   <ClassicModal
     id-modal="share-modal"
-    :title-modal="$t('Share the player')"
+    :title-modal="t('Share the player')"
     @close="closePopup"
   >
     <template #body>
@@ -13,7 +13,7 @@
           <p class="word-break-word">{{ embedLink }}</p>
           <button
             class="btn-transparent"
-            :title="$t('Copy')"
+            :title="t('Copy')"
             @click="onCopyCode(embedLink, afterCopy)"
           >
             <ContentCopyIcon />
@@ -25,7 +25,7 @@
               <p class="word-break-word">{{ embedlyLink }}</p>
               <button
                 class="btn-transparent"
-                :title="$t('Copy')"
+                :title="t('Copy')"
                 @click="onCopyCode(embedlyLink, afterCopy)"
               >
                 <ContentCopyIcon />
@@ -38,7 +38,7 @@
           <p class="word-break-word">{{ directLink.audioUrl }}</p>
           <button
             class="btn-transparent"
-            :title="$t('Copy')"
+            :title="t('Copy')"
             @click="onCopyCode(directLink.audioUrl, snackbarRef)"
           >
             <ContentCopyIcon />
@@ -48,67 +48,58 @@
     </template>
     <template #footer>
       <button class="btn btn-primary m-1" @click="closePopup">
-        {{ $t("Close") }}
+        {{ t("Close") }}
       </button>
     </template>
   </ClassicModal>
   <SnackBar ref="snackbar" position="bottom-left" />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ContentCopyIcon from "vue-material-design-icons/ContentCopy.vue";
 import SnackBar from "../SnackBar.vue";
 import displayHelper from "../../../helper/displayHelper";
 import ClassicModal from "../modal/ClassicModal.vue";
 import ClassicNav from "../ClassicNav.vue";
 import QrCode from "../../display/sharing/QrCode.vue";
-import { defineComponent } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { Podcast } from "@/stores/class/general/podcast";
-export default defineComponent({
-  name: "ShareModalPlayer",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    SnackBar,
-    QrCode,
-    ClassicModal,
-    ClassicNav,
-    ContentCopyIcon,
-  },
-  props: {
-    embedLink: { default: undefined, type: String },
-    embedlyLink: { default: undefined, type: String },
-    directLink: { default: undefined, type: Object as () => Podcast },
-  },
-  emits: ["close"],
-  data() {
-    return {
-      activeTab: 0 as number,
-    };
-  },
-  computed: {
-    tabs(): Array<string> {
-      if (this.directLink) {
-        return [
-          this.$t("Embed link"),
-          this.$t("Embedly link"),
-          this.$t("Direct link"),
-        ];
-      }
-      return [this.$t("Embed link"), this.$t("Embedly link")];
-    },
-  },
-  methods: {
-    onCopyCode(link: string, callback: () => void){
-      displayHelper.onCopyCode(link, callback);
-    },
-    closePopup(): void {
-      this.$emit("close");
-    },
-    afterCopy(): void {
-      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-        this.$t("Data in clipboard"),
-      );
-    },
-  },
+//Props 
+const props = defineProps({
+  embedLink: { default: undefined, type: String },
+  embedlyLink: { default: undefined, type: String },
+  directLink: { default: undefined, type: Object as () => Podcast },
+})
+
+//Emits
+const emit = defineEmits(["close"]);
+
+//Data 
+const activeTab = ref(0);
+const snackBarRef = useTemplateRef('snackbar');
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const tabs = computed(() => {
+  if (props.directLink) {
+    return [t("Embed link"),t("Embedly link"),t("Direct link"),];
+  }
+  return [t("Embed link"), t("Embedly link")];
 });
+
+
+//Methods
+function onCopyCode(link: string, callback: () => void){
+  displayHelper.onCopyCode(link, callback);
+}
+function closePopup(): void {
+  emit("close");
+}
+function afterCopy(): void {
+  (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t("Data in clipboard"),);
+}
 </script>

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

@@ -24,14 +24,14 @@
     <PlayerSpeedButton v-if="!radioUrl" />
     <button
       id="player-up-btn"
-      :title="'' != transcriptText ? $t('View transcript') : $t('Enlarge')"
+      :title="'' != transcriptText ? t('View transcript') : t('Enlarge')"
       class="btn play-button-box btn-transparent text-light me-0"
       @click="changePlayerLargeVersion"
     >
       <ChevronUpIcon />
     </button>
     <button
-      :title="$t('Close')"
+      :title="t('Close')"
       class="btn play-button-box btn-transparent text-light"
       @click="stopPlayer"
     >
@@ -49,6 +49,7 @@ import PlayerImage from "./elements/PlayerImage.vue";
 import PlayerPlayButton from "./elements/PlayerPlayButton.vue";
 import PlayerSpeedButton from "./elements/PlayerSpeedButton.vue";
 import { defineAsyncComponent} from "vue";
+import { useI18n } from "vue-i18n";
 const PlayerProgressBar = defineAsyncComponent(
   () => import("./progressbar/PlayerProgressBar.vue"),
 );
@@ -73,15 +74,16 @@ const {
   displayPlayTime,
   displayTotalTime,
  } = usePlayerDisplayTime();
+const { t } = useI18n();
 
+
+//Methods
 function stopPlayer() {
   emit("stopPlayer");
 }
 function changePlayerLargeVersion() {
   emit("changePlayerLargeVersion");
 }
-
-
 </script>
 
 <style lang="scss">

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

@@ -57,8 +57,6 @@ import {usePlayerLogic} from "../../composable/player/usePlayerLogic";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { defineAsyncComponent, ref, computed, watch } from "vue";
 import { useRoute } from "vue-router";
-
-//Components
 const PlayerVideo = defineAsyncComponent(
   () => import("./video/PlayerVideo.vue"),
 );
@@ -68,11 +66,11 @@ const PlayerCompact = defineAsyncComponent(
 const PlayerLarge = defineAsyncComponent(
   () => import("../player/PlayerLarge.vue"),
 );
-// Define stores
-const playerStore = usePlayerStore();
-const route = useRoute();
 
-// Variables
+//Emits
+const emit = defineEmits(['hide']);
+
+//Data
 const displayWithTimeout= ref(false);
 const forceHide= ref(false);
 
@@ -93,9 +91,10 @@ const {
   onFinished, 
   onPlay
 } = usePlayerLogic(forceHide);
+const playerStore = usePlayerStore();
+const route = useRoute();
+
 
-// Emits
-const emit = defineEmits(['hide']);
 
 // Computed
 const display = computed(() => { return "STOPPED" !== playerStore.playerStatus;});
@@ -115,7 +114,7 @@ watch(display, async () => {
   }
 });
 
-// Functions
+//Methods
 function onHidden(): void {
   if (forceHide.value) {
     playerStore.playerPlay();