@saooti/octopus-sdk 29.0.7 → 29.0.11

package/README.md

@@ -472,6 +472,10 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 29.0.5 vue3
  * 29.0.6 vue3
  * 29.0.7 Nouvelle version api
+ * 29.0.8 Nouvelle version api
+ * 29.0.9 vue3
+ * 29.0.10 vue3
+ * 29.0.11 Popover (encore il est dur ce popover)
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "29.0.7",
+  "version": "29.0.11",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/assets/general.scss

@@ -1,16 +1,16 @@
-.octopus-app{
-  html{
-    font-size: 20px;
-  }
-
-  body{
-    color: #353535;
-    font-family: Montserrat,sans-serif,Helvetica Neue;
-    font-size: 0.8rem;
-    overflow-x: hidden;
-    background: #fff;
-  }
 
+html{
+  font-size: 20px;
+}
+
+body{
+  color: #353535;
+  font-family: Montserrat,sans-serif,Helvetica Neue;
+  font-size: 0.8rem;
+  overflow-x: hidden;
+  background: #fff;
+}
+.octopus-app{
   h1{
     font-size: 1.8rem;
     text-align: center;

package/src/components/display/categories/CategoryFilter.vue

@@ -31,7 +31,9 @@
           <template v-else>
             {{ filter.nameRubriquage }}
           </template>
-          <div class="mx-1">:</div>
+          <div class="mx-1">
+            :
+          </div>
           <RubriqueChooser
             v-if="getRubriques(filter.rubriquageId).length"
             class="ms-2 multiselect-transparent"
@@ -39,7 +41,7 @@
             :rubriquage-id="filter.rubriquageId"
             :rubrique-selected="filter.rubriqueId"
             :all-rubriques="getRubriques(filter.rubriquageId)"
-            :cannotBeUndefined="true"
+            :cannot-be-undefined="true"
             width="auto"
             @selected="onRubriqueSelected(index,$event)"
           />

package/src/components/display/podcasts/PodcastImage.vue

@@ -370,6 +370,7 @@ export default defineComponent({
 
   > span {
     width: 0.1rem;
+    margin: 0.05rem;
     background: #fff;
   }
 

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="module-box">
+    <h2
+      v-if="!isOuestFrance"
+      class="text-uppercase fw-bold title-page-podcast"
+    >
+      {{ podcast.title }}
+    </h2>
+    <router-link
+      v-else
+      :to="{
+        name: 'emission',
+        params: { emissionId: podcast.emission.emissionId },
+        query: { productor: $store.state.filter.organisationId },
+      }"
+    >
+      <h1>{{ podcast.emission.name }}</h1>
+    </router-link>
+    <div class="mb-5 mt-3 d-flex">
+      <div class="w-100">
+        <PodcastImage
+          :class="[
+            !isOuestFrance && !isLiveReadyToRecord
+              ? 'shadow-element'
+              : '',
+            isLiveReadyToRecord &&
+              fetchConference &&
+              'null' !== fetchConference &&
+              fetchConference.status
+              ? fetchConference.status.toLowerCase() + '-shadow'
+              : '',
+          ]"
+          class="me-3"
+          :podcast="podcast"
+          :hide-play="!isLiveReadyToRecord"
+          :playing-podcast="playingPodcast"
+          :fetch-conference="fetchConference"
+          :is-animator-live="isOctopusAndAnimator"
+          @playPodcast="playPodcast"
+        />
+        <h3 v-if="isOuestFrance">
+          {{ podcast.title }}
+        </h3>
+        <div
+          class="date-text-zone"
+          :class="isLiveReady ? 'justify-content-between' : ''"
+        >
+          <div
+            v-if="!isOuestFrance && 0 !== date.length"
+            :class="!isLiveReady ? 'me-5' : ''"
+          >
+            {{ date }}
+          </div>
+          <div class="ms-2 me-2 duration">
+            <span
+              v-if="isOuestFrance"
+              class="saooti-clock3"
+            />{{ $t('Duration', { duration: duration }) }}
+          </div>
+          <div
+            v-if="isLiveReady"
+            class="text-danger"
+          >
+            {{ $t('Episode record in live') }}
+          </div>
+        </div>
+        <div
+          class="descriptionText html-wysiwyg-content"
+          v-html="urlify(podcast.description)"
+        />
+        <div class="mt-3 mb-3">
+          <ParticipantDescription :participants="podcast.animators" />
+          <div v-if="!isOuestFrance">
+            {{ $t('Emission') + ' : ' }}
+            <router-link
+              class="link-info"
+              :to="{
+                name: 'emission',
+                params: { emissionId: podcast.emission.emissionId },
+                query: {
+                  productor: $store.state.filter.organisationId,
+                },
+              }"
+            >
+              {{ podcast.emission.name }}
+            </router-link>
+          </div>
+          <div v-if="!isPodcastmaker">
+            {{ $t('Producted by : ') }}
+            <router-link
+              class="link-info"
+              :to="{
+                name: 'productor',
+                params: { productorId: podcast.organisation.id },
+                query: {
+                  productor: $store.state.filter.organisationId,
+                },
+              }"
+            >
+              {{ podcast.organisation.name }}
+            </router-link>
+          </div>
+          <a
+            v-if="podcast.article"
+            class="btn d-flex align-items-center my-2 width-fit-content"
+            :href="podcast.article"
+            rel="noopener"
+            target="_blank"
+          >
+            <span class="saooti-newspaper me-1" />
+            <div>{{ $t('See associated article') }}</div>
+          </a>
+          <ParticipantDescription
+            :participants="podcast.guests"
+            :is-guest="true"
+          />
+          <div v-if="editRight && !isPodcastmaker">
+            <div
+              v-if="podcast.annotations && podcast.annotations.RSS"
+              class="me-5"
+            >
+              {{ $t('From RSS') }}
+            </div>
+            <ErrorMessage
+              v-if="!podcast.availability.visibility"
+              :message="$t('Podcast is not visible for listeners')"
+            />
+            <ErrorMessage
+              v-if="'ERROR' === podcast.processingStatus"
+              :message="$t('Podcast in ERROR, please contact Saooti')"
+            />
+            <ErrorMessage
+              v-if="podcastNotValid"
+              :message="$t('Podcast not validated')"
+            />
+          </div>
+          <ShareButtons
+            v-if="isDownloadButton"
+            :podcast="podcast"
+            :big-round="true"
+            :audio-url="podcast.audioUrl"
+          />
+        </div>
+      </div>
+    </div>
+    <TagList
+      v-if="isTagList"
+      :tag-list="podcast.tags"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import PodcastImage from './PodcastImage.vue';
+import ParticipantDescription from './ParticipantDescription.vue';
+import { state } from '../../../store/paramStore';
+const moment = require('moment');
+const humanizeDuration = require('humanize-duration');
+import { displayMethods } from '../../mixins/functions';
+import { Podcast } from '@/store/class/podcast';
+import { Conference } from '@/store/class/conference';
+
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ShareButtons = defineAsyncComponent(() => import('../sharing/ShareButtons.vue'));
+const TagList = defineAsyncComponent(() => import('./TagList.vue'));
+const ErrorMessage = defineAsyncComponent(() => import('../../misc/ErrorMessage.vue'));
+export default defineComponent({
+  name: "PodcastModuleBox",
+  components: {
+    PodcastImage,
+    ParticipantDescription,
+    ShareButtons,
+    TagList,
+    ErrorMessage,
+  },
+
+  mixins:[displayMethods],
+
+  props: {
+    playingPodcast: { default: undefined, type: Object as ()=> Podcast},
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    fetchConference: { default: undefined, type: Object as ()=> Conference},
+  },
+
+  emits: ['playPodcast'],
+
+  data() {
+    return {
+    };
+  },
+
+  computed: {
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    organisationId(): string {
+      return state.generalParameters.organisationId;
+    },
+    authenticated(): boolean {
+      return state.generalParameters.authenticated;
+    },
+    isOuestFrance(): boolean {
+      return state.podcastPage.ouestFranceStyle;
+    },
+    isTagList(): boolean {
+      return state.podcastPage.tagList;
+    },
+    isDownloadButton(): boolean {
+      return state.podcastPage.downloadButton;
+    },
+    date(): string {
+      if (this.podcast && 1970 !== moment(this.podcast.pubDate).year()){
+        if('fr' === this.$i18n.locale){
+          return moment(this.podcast.pubDate).format('D MMMM YYYY [à] HH[h]mm');
+        }
+        return moment(this.podcast.pubDate).format('D MMMM YYYY [at] HH[h]mm');
+      }
+      return '';
+    },
+    duration(): string {
+      if (!this.podcast || this.podcast.duration <= 1) return '';
+      if (this.podcast.duration > 600000) {
+        return humanizeDuration(this.podcast.duration, {
+          language: this.$i18n.locale,
+          largest: 1,
+          round: true,
+        });
+      }
+      return humanizeDuration(this.podcast.duration, {
+        language: this.$i18n.locale,
+        largest: 2,
+        round: true,
+      });
+    },
+    editRight(): boolean {
+      if ( this.podcast &&
+        (this.authenticated &&
+          this.organisationId === this.podcast.organisation.id) ||
+        state.generalParameters.isAdmin
+      )
+        return true;
+      return false;
+    },
+    isLiveReadyToRecord(): boolean {
+      return (undefined!==this.podcast && undefined!==this.podcast.conferenceId && 0 !== this.podcast.conferenceId && 'READY_TO_RECORD' === this.podcast.processingStatus);
+    },
+    isLiveReady(): boolean {
+      return (
+        undefined!==this.podcast &&
+        undefined!==this.podcast.conferenceId &&
+        0 !== this.podcast.conferenceId &&
+        'READY' === this.podcast.processingStatus
+      );
+    },
+    isNotRecorded(): boolean {
+      return (
+        this.isLiveReadyToRecord &&
+        undefined!==this.fetchConference &&
+        'DEBRIEFING' === this.fetchConference.status
+      );
+    },
+    isOctopusAndAnimator(): boolean {
+      return (
+        !this.isPodcastmaker &&
+        this.editRight &&
+        state.generalParameters.isRoleLive
+      );
+    },
+    podcastNotValid(): boolean {
+      if (
+        this.podcast &&
+        this.podcast.availability &&
+        false === this.podcast.valid
+      )
+        return true;
+      return false;
+    },
+  },
+  methods: {
+    playPodcast(podcast: Podcast): void {
+      this.$emit('playPodcast', podcast);
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.title-page-podcast {
+  font-size: 0.9rem;
+}
+.width-fit-content{
+  width: fit-content;
+}
+
+.date-text-zone {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+  @media (max-width: 600px) {
+    display: initial;
+    .duration {
+      margin-left: 0 !important;
+    }
+  }
+}
+</style>

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -45,7 +45,7 @@
         #option="{ option }"
       >
         <div
-         v-if="undefined!==option"
+          v-if="undefined!==option"
           class="multiselect-octopus-proposition"
           :class="option.rubriqueId <= 0 ? 'primary-dark' : ''"
           :data-selenium="'rubric-chooser-' + seleniumFormat(option.name)"

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

@@ -54,8 +54,8 @@ export default defineComponent({
       const link = document.createElement('a');
       link.download = 'qrcode.png';
       const canvas = document.getElementsByClassName('myQrCode');
-      if(canvas && canvas.length > 0 && canvas[0] && canvas[0].firstChild){
-        link.href = (canvas[0].firstChild as any).toDataURL();
+      if(canvas && canvas.length > 0 && canvas[0]){
+        link.href = (canvas[0] as any).toDataURL();
         link.click();
         (this.$refs.snackbar as any).open(this.$t('Download started'));
       }

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

@@ -21,7 +21,6 @@
         target="popover-share-help"
         triggers="hover"
         placement="right"
-        custom-class="wizard-help"
       >
         {{ $t('Share this page without edit and share blocks') }}
       </Popover>
@@ -288,7 +287,7 @@ export default defineComponent({
       dataRSSSave: false as boolean,
       newsletter: false as boolean,
       isMobile: false as boolean,
-      qrCode: false as boolean
+      qrCode: false as boolean,
     };
   },
 

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

@@ -27,110 +27,21 @@
             >
               {{ $t('Share the player') }}
             </button>
-            <template v-if="!isLiveReadyToRecord">
-              <label
-                for="iframe-select"
-                class="d-inline"
-                aria-label="select miniplayer"
-              />
-              <select
-                id="iframe-select"
-                v-model="iFrameModel"
-                class="frame-select input-no-outline"
-              >
-                <option value="default">
-                  {{ $t('Default version') }}
-                </option>
-                <option value="large">
-                  {{ $t('Large version') }}
-                </option>
-                <template v-if="isBeta">
-                  <option
-                    v-for="player in customPlayersDisplay"
-                    :key="player.customId"
-                    :value="player.customId"
-                  >
-                    {{ $t('Custom version') + " «" +player.name+"»" }}
-                  </option>
-                </template>
-                <option
-                  v-if="podcast && podcast.podcastId"
-                  value="emission"
-                >
-                  {{
-                    $t('Emission version')
-                  }}
-                </option>
-                <option
-                  v-if="podcast && podcast.podcastId"
-                  value="largeEmission"
-                >
-                  {{ $t('Large emission version') }}
-                </option>
-                <option
-                  v-if="podcast && podcast.podcastId"
-                  value="largeSuggestion"
-                >
-                  {{ $t('Large suggestion version') }}
-                </option>
-              </select>
-            </template>
-          </div>
-          <div class="d-flex justify-content-around mt-3 flex-grow w-100">
-            <div class="d-flex flex-column align-items-center flex-shrink me-3">
-              <div class="fw-600">
-                {{ $t('Choose color') }}
-              </div>
-              <VSwatches
-                v-model="color"
-                class="c-hand input-no-outline"
-                show-fallback
-                colors="text-advanced"
-                popover-to="right"
-                :data-color="color"
-              />
-            </div>
-            <div class="d-flex flex-column align-items-center">
-              <div class="fw-600">
-                {{ $t('Choose theme') }}
-              </div>
-              <div
-                v-if="!isBeta"
-                class="d-flex"
-              >
-                <VSwatches
-                  v-for="myColor in colors"
-                  :key="myColor"
-                  v-model="theme"
-                  :data-theme="theme"
-                  class="c-hand input-no-outline me-1"
-                  :swatch-style="{
-                    padding: '0px 0px',
-                    marginRight: '0px',
-                    marginBottom: '0px',
-                    border: '1px gray solid',
-                  }"
-                  :wrapper-style="{
-                    paddingTop: '0px',
-                    paddingLeft: '0px',
-                    paddingRight: '0px',
-                    paddingBottom: '0px',
-                  }"
-                  :swatches="[myColor]"
-                  inline
-                />
-              </div>
-              <VSwatches
-                v-else
-                v-model="theme"
-                class="c-hand input-no-outline"
-                show-fallback
-                colors="text-advanced"
-                popover-to="right"
-                :data-color="theme"
-              />
-            </div>
+            <SharePlayerTypes 
+              v-if="!isLiveReadyToRecord"
+              v-model:iFrameModel="iFrameModel"
+              :podcast="podcast"
+              :emission="emission"
+              :playlist="playlist"
+              :custom-players="customPlayers"
+              :is-beta="isBeta"
+            />
           </div>
+          <SharePlayerColors
+            v-model:color="color"
+            v-model:theme="theme"
+            :is-beta="isBeta"
+          />
           <div v-if="displayBetaChoice">
             <input
               id="isBetaCheckbox"
@@ -194,7 +105,6 @@
 
 <script lang="ts">
 import { state } from '../../../store/paramStore';
-import VSwatches from 'vue3-swatches';
 import profileApi from '@/api/profile';
 const octopusApi = require('@saooti/octopus-api');
 import { Podcast } from '@/store/class/podcast';
@@ -204,11 +114,14 @@ import { CustomPlayer } from '@/store/class/customPlayer';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/ShareModalPlayer.vue'));
 const PlayerParameters = defineAsyncComponent(() => import('./PlayerParameters.vue'));
+const SharePlayerTypes = defineAsyncComponent(() => import('./SharePlayerTypes.vue'));
+const SharePlayerColors = defineAsyncComponent(() => import('./SharePlayerColors.vue'));
 export default defineComponent({
   components: {
     ShareModalPlayer,
-    VSwatches,
+    SharePlayerColors,
     PlayerParameters,
+    SharePlayerTypes
   },
 
   props: {
@@ -241,12 +154,6 @@ export default defineComponent({
   },
   
   computed: {
-    customPlayersDisplay(): Array<CustomPlayer>{
-      return this.customPlayers.filter((player: CustomPlayer)=>{
-        return (('EPISODE' === player.typePlayer ||'SUGGESTION' === player.typePlayer) && this.podcast && this.podcast.podcastId) ||
-                          ('EMISSION' === player.typePlayer && this.emission  && !this.podcast)|| ('PLAYLIST' === player.typePlayer && this.playlist );
-      });
-    },
     miniplayerBaseUrl(): string{
       if(this.isBeta){
         return state.podcastPage.MiniplayerBetaUri;  
@@ -457,7 +364,7 @@ export default defineComponent({
       if (Object.prototype.hasOwnProperty.call(data,'THEME')) {
         this.theme = data.THEME;
       } else {
-        this.theme = '#ffffff';
+        this.theme = '#000000';
       }
       if (Object.prototype.hasOwnProperty.call(data,'playerBeta')) {
         this.displayBetaChoice = data.playerBeta;