@saooti/octopus-sdk 40.0.3 → 40.1.0

package/src/components/pages/RubriquePage.vue

@@ -16,63 +16,52 @@
   </section>
 </template>
 
-<script lang="ts">
-import { paginateParamInit } from "../mixins/routeParam/paginateParamInit";
-import { seoTitleUrl } from "../mixins/seoTitleUrl";
+<script setup lang="ts">
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
+import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
 import classicApi from "../../api/classicApi";
 import PodcastList from "../display/podcasts/PodcastList.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
-import { useGeneralStore } from "../../stores/GeneralStore";
-import { mapState } from "pinia";
 const ProductorSearch = defineAsyncComponent(
   () => import("../display/filter/ProductorSearch.vue"),
 );
-export default defineComponent({
-  name: "RubriquePage",
-  components: {
-    PodcastList,
-    ProductorSearch
-  },
-  mixins: [paginateParamInit, seoTitleUrl],
-  props: {
-    pr: { default: 0, type: Number },
-    ps: { default: 30, type: Number },
-    rubriqueId: { default: undefined, type: Number },
-    routeOrga: { default: undefined, type: String },
-    routeQuery: { default: "", type: String },
-  },
-  data() {
-    return {
-      title: "" as string,
-      organisationId: undefined as string | undefined,
-      searchPattern: "" as string,
-    };
-  },
-  computed:{
-    ...mapState(useGeneralStore, ["metaTitle"]),
-    orgaArray(): Array<string> {
-      return this.organisationId ? [this.organisationId] : [];
-    },
-    sortOrder(){
-      if(this.searchMinSize.length){
-        return "SCORE";
-      }
-      return undefined;
-    }
-  },
-  watch: {
-    rubriqueId: {
-      immediate: true,
-      async handler() {
-        const data = await classicApi.fetchData<Rubrique>({
-          api: 0,
-          path: "rubrique/" + this.rubriqueId,
-        });
-        this.updatePathParams(data.name);
-        this.title = data.name;
-      },
-    },
-  },
+
+const props = defineProps({
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  rubriqueId: { default: undefined, type: Number },
+  routeOrga: { default: undefined, type: String },
+  routeQuery: { default: "", type: String },
 });
+
+const {
+  searchPattern,
+  organisationId,
+  searchMinSize,
+  paginateFirst,
+} = useSimplePageParam(props);
+
+const { updatePathParams } = useSeoTitleUrl();
+
+const title = ref("");
+
+const orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);
+const sortOrder = computed(() =>{
+  if(searchMinSize.value.length){
+    return "SCORE";
+  }
+  return undefined;
+});
+
+
+watch(()=>props.rubriqueId, async () => {
+  const data = await classicApi.fetchData<Rubrique>({
+    api: 0,
+    path: "rubrique/" + props.rubriqueId,
+  });
+  updatePathParams(data.name);
+  title.value = data.name;
+}, {immediate: true});
+
 </script>

package/src/components/pages/VideoPage.vue

@@ -90,22 +90,21 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ChevronLeftIcon from "vue-material-design-icons/ChevronLeft.vue";
 import ClassicLoading from "../form/ClassicLoading.vue";
 import classicApi from "../../api/classicApi";
 import { Podcast } from "@/stores/class/general/podcast";
 import ClassicNav from "../misc/ClassicNav.vue";
-import { handle403 } from "../mixins/handle403";
-import { seoTitleUrl } from "../mixins/seoTitleUrl";
-import podcastView from "../mixins/podcast/podcastView";
-import { defineAsyncComponent, defineComponent } from "vue";
+import {useErrorHandler} from "../composable/useErrorHandler";
+import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
+import {usePodcastView} from "../composable/podcasts/usePodcastView";
+import { computed, defineAsyncComponent, onBeforeUnmount, Ref, ref, watch } from "vue";
 import { AxiosError } from "axios";
 import { useFilterStore } from "../../stores/FilterStore";
 import { useAuthStore } from "../../stores/AuthStore";
 import { useCommentStore } from "../../stores/CommentStore";
 import { useApiStore } from "../../stores/ApiStore";
-import { mapActions, mapState } from "pinia";
 import { CommentsConfig } from "@/stores/class/config/commentsConfig";
 import {
   Conference,
@@ -113,6 +112,8 @@ import {
 } from "@/stores/class/conference/conference";
 import { usePlayerStore } from "../../stores/PlayerStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 const PlayerVideoDigiteka = defineAsyncComponent(
   () => import("../misc/player/video/PlayerVideoDigiteka.vue"),
 );
@@ -128,173 +129,158 @@ const VideoModuleBox = defineAsyncComponent(
 const CountdownOctopus = defineAsyncComponent(
   () => import("../display/live/CountdownOctopus.vue"),
 );
-export default defineComponent({
-  name: "VideoPage",
-  components: {
-    ClassicLoading,
-    PlayerVideoDigiteka,
-    ClassicNav,
-    CommentSection,
-    VideoModuleBox,
-    PlayerVideoHls,
-    CountdownOctopus,
-    ChevronLeftIcon,
-  },
 
-  mixins: [handle403, podcastView, seoTitleUrl],
+const props = defineProps({
+  podcastId:{ default: 0, type: Number },
+})
 
-  props: {
-    podcastId: { default: 0, type: Number },
-  },
+const loaded = ref(false);
+const podcast: Ref<Podcast | undefined> = ref(undefined);
+const error = ref(false);
+const activeTab = ref(0);
+const configPodcast: Ref<CommentsConfig | undefined> = ref(undefined);
+const podcastConference: Ref<Conference | undefined> = ref(undefined);
+const intervalStatusConference: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);
 
-  data() {
-    return {
-      loaded: false as boolean,
-      podcast: undefined as Podcast | undefined,
-      error: false as boolean,
-      activeTab: 0 as number,
-      configPodcast: undefined as CommentsConfig | undefined,
-      podcastConference: undefined as Conference | undefined,
-      intervalStatusConference: undefined as
-        | ReturnType<typeof setTimeout>
-        | undefined,
-    };
-  },
-  computed: {
-    ...mapState(useGeneralStore, ["metaTitle"]),
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    ...mapState(useAuthStore, ["authOrgaId"]),
-    ...mapState(useApiStore, ["hlsUrl"]),
-    videoId(): string | undefined {
-      return this.podcast?.video?.videoId;
-    },
-    tabs(): Array<string> {
-      if (this.canPostComment) {
-        return [this.$t("Information"), this.$t("Comments")];
-      }
-      return [];
-    },
-    canPostComment(): boolean {
-      return this.getCanPostComment(
-        this.configPodcast,
-        this.podcast,
-        undefined !== this.authOrgaId,
-      );
-    },
-    recordingLive(): boolean {
-      return (
-        undefined !== this.podcastConference &&
-        -1 !== this.podcastConference.conferenceId &&
-        ("RECORDING" === this.podcastConference.status ||
-          "PENDING" === this.podcastConference.status)
+const { 
+  isLiveReadyToRecord,
+  isCounter,
+  timeRemaining,
+  date,
+  duration,
+  durationIso,
+  editRight
+} = usePodcastView(podcast, podcastConference);
+
+const { updatePathParams } = useSeoTitleUrl();
+const {handle403} = useErrorHandler();
+
+const authStore = useAuthStore();
+const apiStore = useApiStore();
+const generalStore = useGeneralStore();
+const playerStore = usePlayerStore();
+const filterStore = useFilterStore();
+const commentStore = useCommentStore();
+
+const {t} = useI18n();
+const route = useRoute();
+
+const videoId = computed(() => podcast.value?.video?.videoId);
+const canPostComment = computed(() => {
+  return commentStore.getCanPostComment(
+    configPodcast.value,
+    podcast.value,
+    undefined !== authStore.authOrgaId,
+  );
+});
+const tabs = computed(() => {
+  if (canPostComment.value) {
+    return [t("Information"), t("Comments")];
+  }
+  return [];
+});
+const recordingLive = computed(() => {
+  return (
+        undefined !== podcastConference.value &&
+        -1 !== podcastConference.value.conferenceId &&
+        ("RECORDING" === podcastConference.value.status ||
+          "PENDING" === podcastConference.value.status)
       );
-    },
-    hlsVideoUrl(): string {
-      if (!this.recordingLive || !this.podcastConference) {
-        return "";
-      }
-      return `${this.hlsUrl}live/video_dev.${this.podcastConference.conferenceId}/index.m3u8`;
-    },
-    overrideText(): string | undefined {
-      if ("PUBLISHING" !== this.podcastConference?.status) {
-        return;
-      }
-      return this.$t("In the process of being published");
-    },
-  },
-  watch: {
-    podcastId: {
-      immediate: true,
-      async handler() {
-        await this.getPodcastDetails();
-        if (!this.podcast) {
-          return;
-        }
-        this.initCommentUser();
-        this.configPodcast = await this.getCommentsConfig(this.podcast);
-      },
-    },
-  },
-  unmounted() {
-    clearInterval(this.intervalStatusConference as unknown as number);
-  },
+});
+const hlsVideoUrl = computed(() => {
+  if (!recordingLive.value || !podcastConference.value) {
+    return "";
+  }
+  return `${apiStore.hlsUrl}live/video_dev.${podcastConference.value.conferenceId}/index.m3u8`;
+});
+const overrideText = computed(() => {
+  if ("PUBLISHING" !== podcastConference.value?.status) {
+    return;
+  }
+  return t("In the process of being published");
+});
 
-  methods: {
-    ...mapActions(usePlayerStore, ["playerPlay"]),
-    ...mapActions(useCommentStore, [
-      "getCommentsConfig",
-      "getCanPostComment",
-      "initCommentUser",
-    ]),
-    async getPodcastDetails(): Promise<void> {
-      this.loaded = false;
-      this.error = false;
-      try {
-        this.podcast = await classicApi.fetchData<Podcast>({
-          api: 0,
-          path: "podcast/" + this.podcastId,
-        });
-        document.title = this.podcast.title + " - "+this.metaTitle;
-        const orga = this.podcast.organisation;
-        const privateAccess =
-          "PUBLIC" !== orga.privacy &&
-          this.filterOrgaId !== orga.id &&
-          this.$route.query.productor !== orga.id;
-        const notValid =
-          (!this.podcast.availability.visibility ||
-            !["READY_TO_RECORD", "READY", "PROCESSING"].includes(
-              this.podcast.processingStatus ?? "",
-            ) ||
-            !this.podcast.valid) &&
-          !this.editRight;
-        if (privateAccess || notValid) {
-          this.error = true;
-        } else {
-          this.updatePathParams(this.podcast.title);
-          if (
-            this.podcast.conferenceId &&
-            "READY" !== this.podcast.processingStatus
-          ) {
-            await this.fetchConferenceStatus();
-            this.intervalStatusConference = setInterval(() => {
-              this.fetchConferenceStatus();
-            }, 3000);
-            this.playerPlay(
-              {
-                ...this.podcast,
-                ...{ conferenceId: this.podcast.conferenceId },
-              },
-              true,
-            );
-          }
-        }
-      } catch (error) {
-        this.handle403(error as AxiosError);
-        this.error = true;
-      }
-      this.loaded = true;
-    },
-    async fetchConferenceStatus() {
-      if (!this.podcast?.conferenceId) {
-        return;
-      }
-      const data = await classicApi.fetchData<ConferencePublicInfo>({
-        api: 9,
-        path: "conference/info/" + this.podcast.conferenceId,
-      });
-      this.podcastConference = {
-        ...data,
-        ...{
-          conferenceId: this.podcast.conferenceId,
-          title: "",
-        },
-      };
-      if ("DEBRIEFING" === data.status) {
-        clearInterval(this.intervalStatusConference as unknown as number);
+
+watch(()=>props.podcastId, async () => {
+  await getPodcastDetails();
+  if (!podcast.value) {
+    return;
+  }
+  commentStore.initCommentUser();
+  configPodcast.value = await commentStore.getCommentsConfig(podcast.value);
+}, {immediate: true});
+
+
+onBeforeUnmount(() => {
+  clearInterval(intervalStatusConference.value as unknown as number);
+})
+
+async function getPodcastDetails(): Promise<void> {
+  loaded.value = false;
+  error.value = false;
+  try {
+    podcast.value = await classicApi.fetchData<Podcast>({
+      api: 0,
+      path: "podcast/" + props.podcastId,
+    });
+    document.title = podcast.value.title + " - "+generalStore.metaTitle;
+    const orga = podcast.value.organisation;
+    const privateAccess =
+      "PUBLIC" !== orga.privacy &&
+      filterStore.filterOrgaId !== orga.id &&
+      route.query.productor !== orga.id;
+    const notValid =
+      (!podcast.value.availability.visibility ||
+        !["READY_TO_RECORD", "READY", "PROCESSING"].includes(
+          podcast.value.processingStatus ?? "",
+        ) ||
+        !podcast.value.valid) &&
+      !editRight.value;
+    if (privateAccess || notValid) {
+      error.value = true;
+    } else {
+      updatePathParams(podcast.value.title);
+      if (
+        podcast.value.conferenceId &&
+        "READY" !== podcast.value.processingStatus
+      ) {
+        await fetchConferenceStatus();
+        intervalStatusConference.value = setInterval(() => { fetchConferenceStatus(); }, 3000);
+        playerStore.playerPlay(
+          {
+            ...podcast.value,
+            ...{ conferenceId: podcast.value.conferenceId },
+          },
+          true,
+        );
       }
+    }
+  } catch (errorCatched) {
+    this.handle403(errorCatched as AxiosError);
+    error.value = true;
+  }
+  loaded.value = true;
+}
+
+async function fetchConferenceStatus() {
+  if (!podcast.value?.conferenceId) {
+    return;
+  }
+  const data = await classicApi.fetchData<ConferencePublicInfo>({
+    api: 9,
+    path: "conference/info/" + podcast.value.conferenceId,
+  });
+  podcastConference.value = {
+    ...data,
+    ...{
+      conferenceId: podcast.value.conferenceId,
+      title: "",
     },
-  },
-});
+  };
+  if ("DEBRIEFING" === data.status) {
+    clearInterval(intervalStatusConference.value as unknown as number);
+  }
+}
 </script>
 <style lang="scss">
 

package/src/helper/cookiesHelper.ts

@@ -0,0 +1,20 @@
+export default{
+  setCookie(name: string, value: string, domain = "") {
+    const date = new Date();
+    date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
+    const expires = "; expires=" + date.toUTCString();
+    document.cookie =
+      name + "=" + (value || "") + expires + domain + "; path=/";
+  },
+  getCookie(name: string): string | null {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(";");
+    for (const cookieValue of ca) {
+      let c = cookieValue;
+      while (c.startsWith(" ")) c = c.substring(1, c.length);
+      if (0 === c.indexOf(nameEQ))
+        return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+};

package/src/helper/displayHelper.ts

@@ -0,0 +1,15 @@
+export default {
+  urlify(text: string|undefined): string {
+    const urlRegex = /[^">](https?:\/\/[^\s<]+)/g;
+    if (!text) return "";
+    return text.replace(urlRegex, (url: string) => {
+      return (
+        '<a href="' + url + '" target="_blank" rel="noreferrer noopener" :title="$t(\'New window\', {text: '+url+'})">' + url + "</a>"
+      );
+    });
+  },
+  async onCopyCode(link: string, callback: () => void): Promise<void> {
+    await navigator.clipboard.writeText(link);
+    return callback();
+  },
+};

package/src/helper/downloadHelper.ts

@@ -0,0 +1,30 @@
+import fetchHelper from "./fetchHelper";
+export default {
+  async onDownload(
+    urlToDownload: string,
+    nameOfDownload: string,
+    auth = true,
+  ): Promise<void> {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", urlToDownload, true);
+    if (auth) {
+      const header = await fetchHelper.createAuthenticatedFetchHeader();
+      if (header) {
+        xhr.setRequestHeader("Authorization", header.Authorization);
+      }
+    }
+    xhr.responseType = "blob";
+    xhr.onload = function () {
+      const urlCreator = window.URL || window.webkitURL;
+      const imageUrl = urlCreator.createObjectURL(this.response);
+      const tag = document.createElement("a");
+      tag.href = imageUrl;
+      tag.target = "_blank";
+      tag.download = nameOfDownload.replace(/ /g, "_");
+      document.body.appendChild(tag);
+      tag.click();
+      document.body.removeChild(tag);
+    };
+    xhr.send();
+  },
+};

package/src/helper/{fetch.ts → fetchHelper.ts}

@@ -108,7 +108,6 @@ export default {
       timing
     );
   },
-
   getUriSearchParams(parameters: FetchParam): URLSearchParams {
     const _return = new URLSearchParams();
     for (const [key, value] of Object.entries(parameters)) {

package/src/helper/loadScript.ts

@@ -0,0 +1,22 @@
+function loadScript(src: string, async:boolean, callback: any) {
+  const firstElement = document.getElementsByTagName('head')[0] || document.documentElement,
+  scriptElement = document.createElement('script');
+  scriptElement.type = 'text/javascript';
+  scriptElement.src = src;
+  scriptElement.async = async;
+  scriptElement.addEventListener('load', function() {
+    if(callback && typeof callback === 'function') {
+      callback(true, window);
+    }
+  }, false);
+  scriptElement.addEventListener('error', function(error) {
+    firstElement.removeChild(scriptElement);
+    if(callback && typeof callback === 'function') {
+      callback(false, error);
+    }
+  }, false);
+  firstElement.insertBefore(scriptElement, firstElement.firstChild);
+}
+export {
+  loadScript
+}

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/helper/{string.ts → stringHelper.ts}

@@ -10,4 +10,9 @@ export default {
 
     return string;
   },
+  uuidv4() {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    );
+  },
 };

package/src/locale/de.ts

@@ -407,4 +407,8 @@ export default {
   Rubrics: "Rubriken",
   "New window":"{text} - Neues Fenster",
   "Mandatory input":"Pflichteingabe",
+  "Transcript Accessibility":"Barrierefreiheit von Transkripten",
+  "Font size":"Schriftgröße",
+  "Preview":"Vorschau",
+  "Save":"Speichern",
 }

package/src/locale/en.ts

@@ -410,4 +410,8 @@ export default {
   Rubrics: "Rubrics",
   "New window":"{text} - New window",
   "Mandatory input":"Mandatory input",
+  "Transcript Accessibility":"Transcript Accessibility",
+  "Font size":"Font size",
+  "Preview":"Preview",
+  "Save":"Save",
 };

package/src/locale/es.ts

@@ -408,4 +408,8 @@ export default {
   Rubrics: "Secciones",
   "New window":"{text} - Nueva ventana",
   "Mandatory input":"Entrada obligatoria",
+  "Transcript Accessibility":"Accesibilidad de transcripción",
+  "Font size":"Tamaño de fuente",
+  "Preview":"Avance",
+  "Save":"Ahorrar",
 }

package/src/locale/fr.ts

@@ -417,4 +417,8 @@ export default {
   Rubrics: "Rubriques",
   "New window":"{text} - Nouvelle fenêtre",
   "Mandatory input":"Saisie obligatoire",
+  "Transcript Accessibility":"Accessibilité de la transcription",
+  "Font size":"Taille de la police",
+  "Preview":"Aperçu",
+  "Save":"Sauvegarder",
 };

package/src/locale/it.ts

@@ -404,4 +404,8 @@ export default{
   Rubrics: "Rubriche",
   "New window":"{text} - Nuova finestra",
   "Mandatory input":"Ingresso obbligatorio",
+  "Transcript Accessibility":"Accessibilità della trascrizione",
+  "Font size":"Dimensione del carattere",
+  "Preview":"Anteprima",
+  "Save":"Salva",
 };

package/src/locale/sl.ts

@@ -399,4 +399,8 @@ export default {
   Rubrics: "Rubrike",
   "New window":"{text} - Novo okno",
   "Mandatory input":"Obvezen vnos",
+  "Transcript Accessibility":"Dostopnost prepisa",
+  "Font size":"Velikost pisave",
+  "Preview":"Predogled",
+  "Save":"Shrani",
 }

package/src/stores/AuthStore.ts

@@ -183,8 +183,7 @@ export const useAuthStore = defineStore("AuthStore", {
           api: 0,
           path:"user/me/organisations",
         });
-        const array = availablesOrganisations ?? [];
-        array.sort(function (a: Organisation, b: Organisation) {
+        const array = (availablesOrganisations ?? []).toSorted(function (a: Organisation, b: Organisation) {
           if (a.name.toLowerCase() < b.name.toLowerCase()) {
             return -1;
           }