@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/pages/PodcastPage.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="page-box">
+    <template v-if="loaded && !error">
+      <div class="page-element-title-container">
+        <div class="page-element-title">
+          <h1>{{ titlePage }}</h1>
+          <Countdown v-if="isCounter" :time-remaining="timeRemaining" />
+        </div>
+        <div class="page-element-bg" :style="backgroundDisplay" />
+      </div>
+      <div class="d-flex flex-column page-element">
+        <PodcastModuleBox
+          :playing-podcast="playingPodcast"
+          :podcast="podcast"
+          :fetch-conference="fetchConference"
+          @update-podcast="updatePodcast"
+        />
+        <SharePlayer
+          v-if="pageParameters.isSharePlayer && (authenticated || notExclusive)"
+          :podcast="podcast"
+          :emission="podcast.emission"
+          :exclusive="exclusive"
+          :not-exclusive="notExclusive"
+          :organisation-id="myOrganisationId"
+          :is-education="isEducation"
+        />
+        <ShareButtons v-if="pageParameters.isShareButtons" :podcast="podcast" />
+        <SubscribeButtons
+          v-if="pageParameters.isShareButtons && countLink >= 1"
+          :emission="podcast.emission"
+        />
+        <CommentSection
+          v-if="!isPodcastmaker"
+          ref="commentSection"
+          :podcast="podcast"
+          :fetch-conference="fetchConference"
+        />
+        <PodcastInlineList
+          class="mt-4"
+          :emission-id="podcast.emission.emissionId"
+          :href="'/main/pub/emission/' + podcast.emission.emissionId"
+          :title="$t('More episodes of this emission')"
+          :button-text="$t('All podcast emission button')"
+        />
+        <PodcastInlineList
+          :podcast-id="podcastId"
+          :title="$t('Suggested listening')"
+        />
+        <PodcastInlineList
+          v-for="c in categories"
+          :key="c.id"
+          :iab-id="c.id"
+          :href="'/main/pub/category/' + c.id"
+          :title="$t('More episodes of this category : ', { name: c.name })"
+          :button-text="$t('All podcast button', { name: c.name })"
+        />
+      </div>
+    </template>
+    <ClassicLoading
+      :loading-text="!loaded ? $t('Loading content ...') : undefined"
+      :error-text="
+        error
+          ? $t(`This episode is not available for (re)listening`)
+          : undefined
+      "
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { orgaComputed } from "../mixins/orgaComputed";
+import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
+import PodcastModuleBox from "../display/podcasts/PodcastModuleBox.vue";
+import ClassicLoading from "../form/ClassicLoading.vue";
+import octopusApi from "@saooti/octopus-api";
+import crudApi from "@/api/classicCrud";
+import { state } from "../../stores/ParamSdkStore";
+import dayjs from "dayjs";
+import { Podcast } from "@/stores/class/general/podcast";
+import { Conference } from "@/stores/class/conference/conference";
+import { handle403 } from "../mixins/handle403";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { CommentPodcast } from "@/stores/class/general/comment";
+import { Category } from "@/stores/class/general/category";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { mapState } from "pinia";
+import { AxiosError } from "axios";
+const ShareButtons = defineAsyncComponent(
+  () => import("../display/sharing/ShareButtons.vue"),
+);
+const SharePlayer = defineAsyncComponent(
+  () => import("../display/sharing/SharePlayer.vue"),
+);
+const SubscribeButtons = defineAsyncComponent(
+  () => import("../display/sharing/SubscribeButtons.vue"),
+);
+const Countdown = defineAsyncComponent(
+  () => import("../display/live/CountDown.vue"),
+);
+const CommentSection = defineAsyncComponent(
+  () => import("../display/comments/CommentSection.vue"),
+);
+export default defineComponent({
+  name: "PodcastPage",
+  components: {
+    PodcastInlineList,
+    ShareButtons,
+    SharePlayer,
+    SubscribeButtons,
+    Countdown,
+    CommentSection,
+    PodcastModuleBox,
+    ClassicLoading,
+  },
+
+  mixins: [handle403, orgaComputed],
+
+  props: {
+    updateStatus: { default: undefined, type: String },
+    playingPodcast: { default: undefined, type: Object as () => Podcast },
+    podcastId: { default: 0, type: Number },
+    isEducation: { default: false, type: Boolean },
+  },
+
+  emits: ["initConferenceId", "podcastTitle"],
+
+  data() {
+    return {
+      loaded: false as boolean,
+      podcast: undefined as Podcast | undefined,
+      error: false as boolean,
+      exclusive: false as boolean,
+      notExclusive: false as boolean,
+      fetchConference: undefined as Conference | undefined,
+    };
+  },
+
+  computed: {
+    ...mapState(useGeneralStore, ["storedCategories"]),
+    backgroundDisplay(): string {
+      if (!this.podcast) {
+        return "";
+      }
+      return `background-image: url('${this.podcast.imageUrl}');`;
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker as boolean;
+    },
+    pageParameters() {
+      return {
+        isShareButtons: state.podcastPage.ShareButtons as boolean,
+        isSharePlayer: state.podcastPage.SharePlayer as boolean,
+      };
+    },
+    emissionMainCategory(): number {
+      if (!this.podcast) {
+        return 0;
+      }
+      if (this.podcast.emission.annotations?.mainIabId) {
+        return parseInt(
+          this.podcast.emission.annotations.mainIabId as string,
+          10,
+        );
+      } else if (this.podcast.emission.iabIds?.length) {
+        return this.podcast.emission.iabIds[0];
+      }
+      return 0;
+    },
+    categories(): Array<Category> {
+      if ("undefined" === typeof this.podcast) return [];
+      return this.storedCategories
+        .filter((item: Category) => {
+          return (
+            this.podcast?.emission.iabIds &&
+            -1 !== this.podcast.emission.iabIds.indexOf(item.id)
+          );
+        })
+        .sort((a: Category, b: Category) => {
+          if (a.id === this.emissionMainCategory) return -1;
+          if (b.id === this.emissionMainCategory) return 1;
+          return 0;
+        });
+    },
+    editRight(): boolean {
+      return (
+        (true === this.authenticated &&
+          this.myOrganisationId === this.podcast?.organisation.id) ||
+        true === state.generalParameters.isAdmin
+      );
+    },
+    countLink(): number {
+      const platformShare = [
+        "amazon",
+        "googlePodcasts",
+        "applePodcast",
+        "deezer",
+        "spotify",
+        "tunein",
+        "radioline",
+        "podcastAddict",
+        "playerFm",
+        "pocketCasts",
+      ];
+      let count = 0;
+      for (let i = 0, len = platformShare.length; i < len; i++) {
+        if (
+          undefined !== this.podcast?.emission?.annotations?.[platformShare[i]]
+        )
+          count++;
+      }
+      return count;
+    },
+    isLiveReadyToRecord(): boolean {
+      return (
+        undefined !== this.podcast?.conferenceId &&
+        0 !== this.podcast?.conferenceId &&
+        "READY_TO_RECORD" === this.podcast?.processingStatus
+      );
+    },
+    isCounter(): boolean {
+      return (
+        this.isLiveReadyToRecord &&
+        undefined !== this.fetchConference &&
+        ("PLANNED" === this.fetchConference.status ||
+          "PENDING" === this.fetchConference.status)
+      );
+    },
+    isOctopusAndAnimator(): boolean {
+      return (
+        !this.isPodcastmaker &&
+        this.editRight &&
+        (state.generalParameters.isRoleLive as boolean)
+      );
+    },
+    titlePage(): string {
+      return this.isLiveReadyToRecord
+        ? this.$t("Live episode")
+        : this.$t("Episode");
+    },
+    timeRemaining(): string {
+      return !this.podcast
+        ? ""
+        : dayjs(this.podcast.pubDate).diff(dayjs(), "seconds").toString();
+    },
+  },
+  watch: {
+    updateStatus(): void {
+      if (this.fetchConference && null !== this.fetchConference) {
+        this.fetchConference.status = this.updateStatus;
+      }
+    },
+    podcastId: {
+      immediate: true,
+      async handler() {
+        await this.getPodcastDetails();
+        this.initConference();
+      },
+    },
+  },
+
+  methods: {
+    async fetchConferencePublic() {
+      const data = await octopusApi.fetchData<string>(
+        9,
+        "conference/realstatus/" + this.podcast.conferenceId,
+      );
+      this.fetchConference = {
+        status: data,
+        conferenceId: this.podcast.conferenceId,
+        title: "",
+      };
+    },
+    async initConference() {
+      if (!this.podcast || undefined == this.podcast.conferenceId) return;
+      if (this.isOctopusAndAnimator) {
+        try {
+          const data = await crudApi.fetchData<Conference>(
+            9,
+            "conference/" + this.podcast.conferenceId,
+          );
+          this.fetchConference = data ? data : { conferenceId: -1, title: "" };
+        } catch {
+          await this.fetchConferencePublic();
+        }
+      } else {
+        await this.fetchConferencePublic();
+      }
+      if (
+        this.fetchConference &&
+        -1 !== this.fetchConference.conferenceId &&
+        "PUBLISHING" !== this.fetchConference.status &&
+        "DEBRIEFING" !== this.fetchConference.status
+      ) {
+        this.$emit("initConferenceId", this.podcast.conferenceId);
+      }
+    },
+    updatePodcast(podcastUpdated: Podcast): void {
+      this.podcast = podcastUpdated;
+    },
+    initError(): void {
+      this.error = true;
+      this.loaded = true;
+    },
+    handleAnnotations() {
+      if (!this.podcast) {
+        return;
+      }
+      if (this.podcast.emission.annotations?.exclusive) {
+        this.exclusive = "true" === this.podcast.emission.annotations.exclusive;
+        this.exclusive =
+          this.exclusive &&
+          this.myOrganisationId !== this.podcast.organisation.id;
+      }
+      if (this.podcast.emission.annotations?.notExclusive) {
+        this.notExclusive =
+          "true" === this.podcast.emission.annotations.notExclusive;
+      }
+    },
+    async getPodcastDetails(): Promise<void> {
+      this.loaded = false;
+      this.error = false;
+      try {
+        const data: Podcast = await octopusApi.fetchData<Podcast>(
+          0,
+          "podcast/" + this.podcastId,
+        );
+        if (
+          "PUBLIC" !== data.organisation.privacy &&
+          this.filterOrgaId !== data.organisation.id
+        ) {
+          this.initError();
+          return;
+        }
+        this.podcast = data;
+        this.$emit("podcastTitle", this.podcast.title);
+        this.handleAnnotations();
+        if (
+          (!this.podcast.availability.visibility ||
+            ("READY_TO_RECORD" !== this.podcast.processingStatus &&
+              "READY" !== this.podcast.processingStatus &&
+              "PROCESSING" !== this.podcast.processingStatus) ||
+            false === this.podcast.valid) &&
+          !this.editRight
+        ) {
+          this.error = true;
+        }
+        this.loaded = true;
+      } catch (error) {
+        this.handle403(error as AxiosError);
+        this.initError();
+      }
+    },
+
+    receiveCommentEvent(event: {
+      type: string;
+      comment: CommentPodcast;
+      oldStatus?: string;
+    }): void {
+      (
+        this.$refs.commentSection as InstanceType<typeof CommentSection>
+      ).receiveCommentEvent(event);
+    },
+  },
+});
+</script>

package/src/components/pages/PodcastsPage.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="page-box">
+    <ProductorSearch
+      v-model:organisation-id="organisationId"
+      v-model:search-pattern="searchPattern"
+    />
+    <AdvancedSearch
+      :is-education="isEducation"
+      :is-emission="false"
+      :reset-rubriquage="resetRubriquage"
+      :sort-criteria="sortCriteria"
+      :include-hidden="includeHidden"
+      :organisation-id="organisationId"
+      @update-category="iabId = $event"
+      @update-rubriquage-filter="updateRubriquageFilter"
+      @update-monetization="monetization = $event"
+      @update-from-date="fromDate = $event"
+      @update-to-date="toDate = $event"
+      @update-sort-criteria="sortCriteria = $event"
+      @include-hidden="includeHidden = $event"
+      @not-valid="notValid = $event"
+    />
+    <PodcastList
+      :show-count="true"
+      :first="0"
+      :size="30"
+      :organisation-id="orgaArray"
+      :query="searchPattern"
+      :monetization="monetization"
+      :before="toDate"
+      :after="fromDate"
+      :sort-criteria="sortCriteria"
+      :include-hidden="includeHidden"
+      :not-valid="notValid"
+      :iab-id="iabId"
+      :rubrique-id="rubriqueId"
+      :rubriquage-id="rubriquageId"
+      :no-rubriquage-id="noRubriquageId"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { orgaComputed } from "../mixins/orgaComputed";
+import PodcastList from "../display/podcasts/PodcastList.vue";
+import { state } from "../../stores/ParamSdkStore";
+import ProductorSearch from "../display/filter/ProductorSearch.vue";
+import AdvancedSearch from "../display/filter/AdvancedSearch.vue";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "PodcastsPage",
+  components: {
+    PodcastList,
+    ProductorSearch,
+    AdvancedSearch,
+  },
+  mixins: [orgaComputed],
+  props: {
+    productor: { default: undefined, type: String },
+    isEducation: { default: false, type: Boolean },
+    searchInit: { default: "", type: String },
+  },
+  data() {
+    return {
+      isInit: false as boolean,
+      searchPattern: "" as string,
+      organisationId: undefined as string | undefined,
+      monetization: "UNDEFINED" as string, // UNDEFINED, YES, NO
+      fromDate: undefined as string | undefined,
+      toDate: undefined as string | undefined,
+      resetRubriquage: false as boolean,
+      includeHidden: false as boolean,
+      sortCriteria: "DATE" as string, // SCORE, DATE, POPULARITY, NAME, LAST_PODCAST_DESC
+      notValid: false as boolean,
+      iabId: undefined as number | undefined,
+      noRubriquageId: [] as Array<number>,
+      rubriquageId: [] as Array<number>,
+      rubriqueId: [] as Array<number>,
+    };
+  },
+
+  computed: {
+    ...mapState(useFilterStore, ["filterRubrique", "filterIab"]),
+    organisationRight(): boolean {
+      return (
+        (true === this.authenticated &&
+          this.myOrganisationId === this.organisationId) ||
+        true === state.generalParameters.isAdmin
+      );
+    },
+    orgaArray(): Array<string> {
+      return this.organisationId ? [this.organisationId] : [];
+    },
+    organisation(): string | undefined {
+      return this.organisationId ? this.organisationId : this.filterOrgaId;
+    },
+  },
+  watch: {
+    organisationId(): void {
+      if (!this.isInit) {
+        return;
+      }
+      this.resetRubriquage = !this.resetRubriquage;
+      this.rubriquageId = [];
+      this.rubriqueId = [];
+      this.noRubriquageId = [];
+    },
+    searchPattern(value: string): void {
+      this.sortCriteria = "" !== value ? "SCORE" : "DATE";
+    },
+  },
+  created() {
+    this.initPodcastsPage();
+  },
+  methods: {
+    initPodcastsPage() {
+      this.searchPattern = this.searchInit ?? "";
+      this.organisationId = this.productor ? this.productor : this.filterOrgaId;
+      this.includeHidden =
+        this.organisation && this.organisationRight ? true : false;
+      this.iabId = this.filterIab?.id;
+      if (this.filterRubrique.length) {
+        this.updateRubriquageFilter(this.filterRubrique);
+      }
+      this.$nextTick(() => {
+        this.isInit = true;
+      });
+    },
+    updateRubriquageFilter(value: Array<RubriquageFilter>) {
+      const length = value.length;
+      const allRubriquageId: Array<number> = [];
+      const noRubriquageId: Array<number> = [];
+      const rubriqueId: Array<number> = [];
+      for (let index = 0; index < length; index++) {
+        if (-1 === value[index].rubriqueId) {
+          noRubriquageId.push(value[index].rubriquageId);
+        } else if (0 === value[index].rubriqueId) {
+          allRubriquageId.push(value[index].rubriquageId);
+        } else {
+          rubriqueId.push(value[index].rubriqueId);
+        }
+      }
+      this.rubriquageId = allRubriquageId;
+      this.rubriqueId = rubriqueId;
+      this.noRubriquageId = noRubriquageId;
+    },
+  },
+});
+</script>

package/src/components/pages/RadioPage.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="page-box">
+    <template v-if="loaded && !error">
+      <div class="page-element-title-container">
+        <div class="page-element-title">
+          <h1>{{ $t("Radio") }}</h1>
+        </div>
+        <div class="page-element-bg" :style="backgroundDisplay" />
+      </div>
+      <div v-if="radio" class="d-flex flex-column page-element">
+        <div class="module-box">
+          <div class="mb-5 descriptionText">
+            <RadioImage :radio="radio" />
+            <h2>{{ radio.name }}</h2>
+            <div v-if="radio.description">
+              {{ radio.description }}
+            </div>
+          </div>
+          <RadioCurrently :radio="radio" />
+          <EditBoxRadio v-if="editRight" :radio="radio" />
+        </div>
+        <RadioPlanning :radio="radio" />
+        <SharePlayerRadio
+          v-if="authenticated"
+          :canal="radio"
+          :organisation-id="myOrganisationId"
+        />
+        <ShareButtons />
+      </div>
+    </template>
+    <ClassicLoading
+      :loading-text="!loaded ? $t('Loading content ...') : undefined"
+      :error-text="error ? $t(`Emission doesn't exist`) : undefined"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import octopusApi from "@saooti/octopus-api";
+import { state } from "../../stores/ParamSdkStore";
+import displayMethods from "../mixins/displayMethods";
+import imageProxy from "../mixins/imageProxy";
+import { orgaComputed } from "../mixins/orgaComputed";
+import { handle403 } from "../mixins/handle403";
+import ClassicLoading from "../form/ClassicLoading.vue";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { AxiosError } from "axios";
+import { Canal } from "@/stores/class/radio/canal";
+const SharePlayerRadio = defineAsyncComponent(
+  () => import("../display/sharing/SharePlayerRadio.vue"),
+);
+const ShareButtons = defineAsyncComponent(
+  () => import("../display/sharing/ShareButtons.vue"),
+);
+const EditBoxRadio = defineAsyncComponent(
+  () => import("@/components/display/edit/EditBoxRadio.vue"),
+);
+const RadioCurrently = defineAsyncComponent(
+  () => import("../display/live/RadioCurrently.vue"),
+);
+const RadioImage = defineAsyncComponent(
+  () => import("../display/live/RadioImage.vue"),
+);
+const RadioPlanning = defineAsyncComponent(
+  () => import("../display/live/RadioPlanning.vue"),
+);
+export default defineComponent({
+  components: {
+    SharePlayerRadio,
+    ShareButtons,
+    EditBoxRadio,
+    ClassicLoading,
+    RadioCurrently,
+    RadioImage,
+    RadioPlanning,
+  },
+  mixins: [displayMethods, handle403, orgaComputed, imageProxy],
+  props: {
+    canalId: { default: undefined, type: Number },
+  },
+  emits: ["radioTitle"],
+
+  data() {
+    return {
+      loaded: false as boolean,
+      radio: undefined as Canal | undefined,
+      error: false as boolean,
+    };
+  },
+
+  computed: {
+    editRight(): boolean {
+      return (
+        (true === this.authenticated &&
+          this.myOrganisationId === this.radio?.organisationId) ||
+        true === state.generalParameters.isAdmin
+      );
+    },
+    backgroundDisplay(): string {
+      return !this.radio
+        ? ""
+        : `background-image: url('${this.radio.imageUrl}');`;
+    },
+  },
+  watch: {
+    canalId: {
+      immediate: true,
+      handler() {
+        this.getRadioDetails();
+      },
+    },
+  },
+  methods: {
+    async getRadioDetails(): Promise<void> {
+      this.loaded = false;
+      this.error = false;
+      try {
+        this.radio = await octopusApi.fetchData<Canal>(
+          14,
+          "canal/" + this.canalId,
+        );
+        this.$emit("radioTitle", this.radio.name);
+      } catch (error) {
+        this.handle403(error as AxiosError);
+        this.error = true;
+      }
+      this.loaded = true;
+    },
+  },
+});
+</script>

package/src/components/pages/RubriquePage.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="page-box">
+    <h1>{{ title }}</h1>
+    <PodcastList
+      :first="firstRoute"
+      :size="sizeRoute"
+      :rubrique-id="rubriqueId"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import octopusApi from "@saooti/octopus-api";
+import PodcastList from "../display/podcasts/PodcastList.vue";
+import { defineComponent } from "vue";
+import { Rubrique } from "@/stores/class/rubrique/rubrique";
+export default defineComponent({
+  name: "RubriquePage",
+  components: {
+    PodcastList,
+  },
+  props: {
+    firstRoute: { default: 0, type: Number },
+    sizeRoute: { default: 30, type: Number },
+    rubriqueId: { default: undefined, type: [Number] },
+  },
+  data() {
+    return {
+      title: "" as string,
+    };
+  },
+  watch: {
+    rubriqueId: {
+      immediate: true,
+      async handler() {
+        const data = await octopusApi.fetchData<Rubrique>(
+          0,
+          "rubrique/" + this.rubriqueId,
+        );
+        this.title = data.name;
+      },
+    },
+  },
+});
+</script>