@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/misc/Snackbar.vue

@@ -1,168 +0,0 @@
-<template>
-  <div
-    class="snack-bar-wrap"
-    :style="style.wrap"
-  >
-    <template
-      v-for="(msg, i) in msgs"
-      :key="i"
-    >
-      <div
-        class="snack-bar"
-        :style="style.bar(msg.color)"
-        @click="pop(i)"
-      >
-        {{ msg.msg.message || msg.msg }}
-      </div>
-      <br>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-const getStyle = (baseSize: string, position: { pos:string,textAlign: string}) => {
-  const c = (f: number) => `calc(${f} * ${baseSize})`;
-  const { pos, textAlign } = position;
-  return {
-    wrap: {
-      position: 'fixed',
-      left: 0,
-      pos:pos? pos: c(0.05),
-      zIndex: 9999,
-      width: '100%',
-      padding: `0 ${c(0.2)}`,
-      pointerEvents: 'none',
-      textAlign,
-    },
-    bar: (bg: string) => ({
-      display: 'inline-block',
-      width: 'auto',
-      minWidth: baseSize,
-      maxWidth: `calc(100vw - ${c(0.4)})`,
-      padding: `${c(0.15)} ${c(0.2)}`,
-      margin: `0 0 ${c(0.05)}`,
-      borderRadius: c(0.02),
-      lineHeight: c(0.2),
-      color: '#fff',
-      background: bg,
-      boxShadow: `0 ${c(0.01)} ${c(0.025)} rgba(0,0,0, .15)`,
-      cursor: 'pointer',
-      textAlign: 'center',
-      pointerEvents: 'all',
-      userSelect: 'none',
-    }),
-  };
-};
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'Snackbar',
-  props: {
-    colors: { default: ()=> ({
-          open: '#333',
-          info: '#3DBD7D',
-          error: '#FA7377',
-          warn: '#FF6600',
-        }), type: Object},
-    position: { default: 'top-center', type: String},
-    holdTime: {default:5000, type:Number}
-  },
-  data() {
-    return {
-      msgs: [] as Array<{
-        color: string,
-        msg:string,
-        timer: ReturnType<typeof setTimeout>|undefined,
-      }>,
-      baseSize: '5rem',
-    };
-  },
-  computed: {
-    $_position(): { pos:string,textAlign: string} {
-      const [p, textAlign] = this.position.toString().split('-');
-      return {
-        pos: ['top', 'bottom'].includes(p) ? p : 'top',
-        textAlign: ['left', 'center', 'right'].includes(textAlign)
-          ? textAlign
-          : 'center',
-      };
-    },
-    style(): {wrap: {
-      position: string,
-      left: number,
-      pos: string,
-      zIndex: number,
-      width: string,
-      padding: string,
-      pointerEvents: string,
-      textAlign:string,
-    },
-    bar: (bg:string) =>{
-      display: string,
-      width:string,
-      minWidth: string,
-      maxWidth:string,
-      padding: string,
-      margin: string,
-      borderRadius: string,
-      lineHeight: string,
-      color: string,
-      background: string,
-      boxShadow: string,
-      cursor: string,
-      textAlign: string,
-      pointerEvents: string,
-      userSelect: string,
-    }}{
-      return getStyle(this.baseSize, this.$_position);
-    },
-  },
-  methods: {
-    info(msg: string): boolean {
-      const color = this.colors.info;
-      this.open({ color, msg }, false);
-      return true;
-    },
-    error(msg: string): boolean {
-      const color = this.colors.error;
-      this.open({ color, msg }, false);
-      return false;
-    },
-    warn(msg: string): boolean {
-      const color = this.colors.warn;
-      this.open({ color, msg }, false);
-      return true;
-    },
-    open(message: {color:string, msg:string}|string, isOpen = true): boolean {
-      let msg;
-      let color;
-      if (!isOpen) {
-        color = (message as {color:string, msg:string}).color;
-        msg = (message as {color:string, msg:string}).msg;
-      } else {
-        color = this.colors.open;
-        msg = (message as string);
-      }
-      const msgObj = {
-        color,
-        msg,
-        timer: setTimeout(this.pop, this.holdTime),
-      };
-
-      this.msgs.push(msgObj);
-
-      return true;
-    },
-    pop(i = 0): void {
-      if (this.msgs[i]) clearTimeout((this.msgs[i].timer as unknown as number));
-      this.msgs.splice(i, 1);
-    },
-  },
-})
-</script>
-<style lang="scss">
-.octopus-app{
-.snack-bar-wrap{
-  bottom: 0px;
-}
-}
-</style>

package/src/components/pages/Category.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="page-box">
-    <h1>{{ title }}</h1>
-    <PodcastList
-      :first="0"
-      :size="30"
-      :iab-id="iabId"
-      :organisation-id="orgaArray"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import PodcastList from '../display/podcasts/PodcastList.vue';
-import { useFilterStore } from '@/stores/FilterStore';
-import { useGeneralStore } from '@/stores/GeneralStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue'
-import { Category } from '@/stores/class/general/category';
-export default defineComponent({
-  components: {
-    PodcastList,
-  },
-  props: {
-    iabId: { default: undefined, type: Number},
-  },
-
-  computed: {
-    ...mapState(useGeneralStore, ['storedCategories']),
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    orgaArray(): Array<string>{
-      return this.filterOrgaId ? [this.filterOrgaId] : [];
-    },
-    title():string{
-      const matchCategories = this.storedCategories.filter((c: Category) => c.id === this.iabId);
-      if (1 !== matchCategories.length) return "";
-      return matchCategories[0]['name'];
-    }
-  },
-})
-</script>

package/src/components/pages/Home.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="page-box">
-    <template v-if="0 === rubriquageFilter.length">
-      <PodcastInlineList
-        v-for="c in categories"
-        :key="c.id"
-        :iab-id="c.id"
-        :title="c.name"
-        :button-text="$t('All podcast button', { name: c.name })"
-      />
-    </template>
-    <template v-else>
-      <PodcastInlineList
-        v-for="r in rubriqueToShow"
-        :key="r.rubriqueId"
-        :rubrique-id="rubriqueId.concat(r.rubriqueId)"
-        :title="r.name"
-        :button-text="$t('All podcast button', { name: r.name })"
-      />
-      <template v-if="rubriqueDisplay && rubriqueDisplay.length > 0">
-        <PodcastInlineList
-          v-if="rubriqueDisplay.length < rubriqueMaxDisplay"
-          :no-rubriquage-id="[rubriqueDisplay[0].rubriquageId]"
-          :rubrique-id="rubriqueId"
-          :title="$t('Without rubric')"
-          :button-text="$t('All podcast button', { name: $t('Without rubric') })"
-        />
-        <router-link
-          v-else
-          :to="{
-            name: 'podcasts',
-            query: { productor: filterOrgaId, 
-                     iabId: filterIab?.id,
-                     rubriquesId: rubriqueQueryParam },
-          }"
-          class="btn btn-primary align-self-center width-fit-content mt-5 m-auto"
-        >
-          {{
-            $t('See more')
-          }}
-        </router-link>
-      </template>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import PodcastInlineList from '../display/podcasts/PodcastInlineList.vue';
-import { state } from '../../stores/ParamSdkStore';
-import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
-import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
-import { Rubrique } from '@/stores/class/rubrique/rubrique';
-import { useFilterStore } from '@/stores/FilterStore';
-import { useGeneralStore } from '@/stores/GeneralStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-import { Category } from '@/stores/class/general/category';
-export default defineComponent({
-  name: 'Home',
-  components: {
-    PodcastInlineList,
-  },
-  data() {
-    return {
-      rubriqueId: [] as Array<number>,
-      rubriqueMaxDisplay: 20 as number,
-    };
-  },
-  computed: {
-    ...mapState(useGeneralStore, ['storedCategories']),
-    ...mapState(useFilterStore, ['filterRubriquage', 'filterOrgaId', 'filterRubrique', 'filterRubriqueDisplay', 'filterIab']),
-    rubriqueQueryParam(): string|undefined{
-      if(this.filterRubrique?.length){
-        return this.filterRubrique.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
-      }
-      return undefined;
-    },
-    rubriqueDisplay(): Array<Rubrique>{
-      return this.filterRubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
-    },
-    rubriqueToShow(): Array<Rubrique>{
-      if(!this.rubriqueDisplay || this.rubriqueDisplay.length < this.rubriqueMaxDisplay){
-        return this.rubriqueDisplay ?? [];
-      }
-      return this.rubriqueDisplay.slice(0, this.rubriqueMaxDisplay);
-    },
-    rubriquageFilter(): Array<Rubriquage>{
-      return this.filterOrgaId? this.filterRubriquage :[];
-    },
-    rubriqueFilter(): Array<RubriquageFilter>{
-      return this.filterRubrique;
-    },
-    categories(): Array<Category> {
-      if(this.filterIab){
-        return [this.filterIab];
-      }
-      return this.storedCategories.filter((c: Category) => {
-        if (state.generalParameters.podcastmaker) return c.podcastOrganisationCount;
-        return c.podcastCount;
-      });
-    },
-  },
-  watch:{
-    rubriqueFilter:{
-      deep: true,
-      immediate: true,
-      handler(){
-        this.updateRubriquageFilter();
-      }
-    }
-  },
-  methods:{
-    updateRubriquageFilter(){
-      const length = this.rubriqueFilter.length;
-      const rubriqueId: Array<number>= [];
-      for (let index = 0; index < length; index++) {
-        if(0 < this.rubriqueFilter[index].rubriqueId){
-          rubriqueId.push(this.rubriqueFilter[index].rubriqueId);
-        }
-      }
-      this.rubriqueId = rubriqueId;
-    },
-  }
-})
-</script>

package/src/components/pages/Lives.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="page-box">
-    <template v-if="!filterOrgaId && !organisationId && !isPodcastmaker">
-      <div class="align-self-start fw-bold mb-2">
-        {{ $t('Please chose a productor') }}
-      </div>
-      <OrganisationChooser
-        :defaultanswer="$t('Please chose a productor')"
-        @selected="onOrganisationSelected"
-      />
-    </template>
-    <template v-if="filterOrgaId || organisationId">
-      <LiveList
-        :organisation-id="organisationId"
-      />
-      <RadioList
-        :organisation-id="organisationId"
-      />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { state } from '../../stores/ParamSdkStore';
-import { Organisation } from '@/stores/class/general/organisation';
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-const LiveList = defineAsyncComponent(() => import('../display/live/LiveList.vue'));
-const RadioList = defineAsyncComponent(() => import('../display/live/RadioList.vue'));
-const OrganisationChooser = defineAsyncComponent(() => import('../display/organisation/OrganisationChooser.vue'));
-export default defineComponent({
-  components: {
-    LiveList,
-    RadioList,
-    OrganisationChooser,
-  },
-  props: {
-    organisationId: { default: undefined, type: String },
-    productor:{default:undefined, type: String}
-  },
-  emits: ['update:organisationId'],
-
-  computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
-
-    isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
-    },
-  },
-  created() {
-    if (this.productor) {
-      this.$emit('update:organisationId',this.productor);
-    } else if (this.filterOrgaId) {
-      this.$emit('update:organisationId',this.filterOrgaId);
-    }
-  },
-  methods: {
-    onOrganisationSelected(organisation: Organisation|undefined): void {
-      this.$emit('update:organisationId', organisation?.id);
-    },
-  },
-})
-</script>

package/src/components/pages/Playlist.vue

@@ -1,164 +0,0 @@
-<template>
-  <div class="page-box">
-    <template
-      v-if="loaded && !error"
-    >
-      <div class="page-element-title-container">
-        <div class="page-element-title">
-          <h1>{{ pageTitle }}</h1>
-        </div>
-        <div
-          class="page-element-bg"
-          :style="backgroundDisplay"
-        />
-      </div>
-      <div class="d-flex flex-column page-element">
-        <div class="module-box">
-          <div class="mb-5 mt-3 descriptionText">
-            <img
-              v-lazy="proxyImageUrl(imageUrl, '330')"
-              width="330"
-              height="330"
-              :alt="$t('Playlist name image', { name: name })"
-              class="img-box float-start me-3 mb-3"
-            >
-            <h2>{{ name }}</h2>
-            <!-- eslint-disable vue/no-v-html -->
-            <p
-              class="html-wysiwyg-content"
-              v-html="urlify(description)"
-            />
-            <!-- eslint-enable -->
-          </div>
-          <EditBox
-            v-if="editRight && pageParameters.isEditBox"
-            :playlist="playlist"
-          />
-        </div>
-        <SharePlayer
-          v-if="pageParameters.isSharePlayer && authenticated"
-          :playlist="playlist"
-          :organisation-id="myOrganisationId"
-          :is-education="isEducation"
-        />
-        <ShareButtons
-          v-if="pageParameters.isShareButtons"
-          :playlist="playlist"
-        />
-        <PodcastList :playlist="playlist" />
-      </div>
-    </template>
-    <ClassicLoading
-      :loading-text="!loaded?$t('Loading content ...'):undefined"
-      :error-text="error?$t(`Playlist doesn't exist`):undefined"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { orgaComputed } from '../mixins/orgaComputed';
-import ClassicLoading from '../form/ClassicLoading.vue';
-import PodcastList from '../display/playlist/PodcastList.vue';
-import octopusApi from '@saooti/octopus-api';
-import { state } from '../../stores/ParamSdkStore';
-import displayMethods from '../mixins/displayMethods';
-import imageProxy from '../mixins/imageProxy';
-import { handle403 } from '../mixins/handle403';
-import { Playlist } from '@/stores/class/general/playlist';
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { AxiosError } from 'axios';
-const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
-const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
-const SharePlayer = defineAsyncComponent(() => import('../display/sharing/SharePlayer.vue'));
-export default defineComponent({
-  components: {
-    ShareButtons,
-    EditBox,
-    PodcastList,
-    SharePlayer,
-    ClassicLoading
-  },
-  mixins:[displayMethods, handle403, orgaComputed, imageProxy],
-
-  props: {
-    playlistId: { default: undefined, type: Number},
-    isEducation: { default: false, type: Boolean},
-  },
-
-  emits: ['playlistTitle'],
-  data() {
-    return {
-      loaded: false as boolean,
-      playlist: undefined as Playlist | undefined,
-      error: false as boolean,
-    };
-  },
-  computed: {
-    pageParameters(){
-      return {
-        isEditBox : (state.podcastPage.EditBox as boolean),
-        isShareButtons: (state.podcastPage.ShareButtons as boolean),
-        isSharePlayer: (state.podcastPage.SharePlayer as boolean),
-      };
-    },
-    pageTitle(): string{
-      return this.playlistRadio ? this.$t('Mix of episodes'):this.$t('Playlist');
-    },
-    playlistRadio(): boolean{
-      return "AMBIANCE"===this.playlist?.ambianceType || "AMBIANCE_PROGRAMMED"===this.playlist?.ambianceType
-    },
-    name(): string {
-      return this.playlist?.title ??'';
-    },
-    imageUrl(): string {
-      return this.playlist?.imageUrl ?? '';
-    },
-    description(): string {
-      return this.playlist?.description ??'';
-    },
-    editRight(): boolean {
-      return (true===state.generalParameters.isPlaylist &&
-        this.myOrganisationId === this.playlist?.organisation?.id) ||
-        true ===state.generalParameters.isAdmin
-    },
-    backgroundDisplay():string{
-      if(!this.playlist){
-        return "";
-      }
-      return `background-image: url('${this.playlist.imageUrl}');`;
-    },
-  },
-  watch: {
-    playlistId: {
-      immediate: true,
-      handler() {
-        this.getPlaylistDetails();
-      },
-    },
-  },
-
-  methods: {
-    initError():void{
-      this.error = true;
-      this.loaded = true;
-    },
-    async getPlaylistDetails(): Promise<void> {
-      try {
-        this.loaded = false;
-        this.error = false;
-        this.playlist = await octopusApi.fetchData<Playlist>(0, 'playlist/'+this.playlistId);
-        if((!this.editRight && this.playlistRadio) ||
-          ("PUBLIC"!==this.playlist.organisation?.privacy && this.filterOrgaId!==this.playlist.organisation?.id)){
-          this.initError();
-          return;
-        }
-        this.$emit('playlistTitle', this.playlist.title);
-      } catch(error) {
-        this.handle403((error as AxiosError));
-        this.initError();
-      }
-      this.loaded = true;
-    },
-  },
-})
-</script>