@saooti/octopus-sdk 36.0.2 → 36.0.4

package/src/components/pages/Podcast.vue

@@ -1,88 +1,66 @@
 <template>
   <div class="page-box">
     <template v-if="loaded && !error">
-      <div class="page-podcast-title">
-        <h1>{{ titlePage }}</h1>
-        <Countdown
-          v-if="isCounter"
-          :time-remaining="timeRemaining"
-        />
-      </div>
-      <div class="d-flex page-podcast">
-        <div class="d-flex flex-column flex-super-grow">
-          <RecordingItemButton
-            v-if="
-              !!fetchConference &&
-                isLiveReadyToRecord &&
-                !isNotRecorded &&
-                isOctopusAndAnimator
-            "
-            class="module-box text-center-mobile flex-grow-0"
-            :podcast="podcast"
-            :live="true"
-            :recording="fetchConference"
-            @deleteItem="removeDeleted"
-            @validatePodcast="updatePodcast"
-          />
-          <EditBox
-            v-else-if="editRight && pageParameters.isEditBox"
-            :podcast="podcast"
-            @validatePodcast="updatePodcast"
-          />
-          <PodcastModuleBox
-            :playing-podcast="playingPodcast"
-            :podcast="podcast"
-            :fetch-conference="fetchConference"
-          />
-          <SubscribeButtons
-            v-if="pageParameters.isShareButtons && countLink >= 1"
-            :emission="podcast.emission"
-          />
-        </div>
-        <div
-          class="d-flex flex-column flex-grow-mobile"
-        >
-          <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"
-            :is-vertical="!authenticated && !notExclusive"
+      <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>
+      <div class="d-flex flex-column page-element">
+        <PodcastModuleBox
+          :playing-podcast="playingPodcast"
+          :podcast="podcast"
+          :fetch-conference="fetchConference"
+          @updatePodcast="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>
-      <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 })"
-      />
     </template>
     <ClassicLoading
       :loading-text="!loaded?$t('Loading content ...'):undefined"
@@ -104,7 +82,6 @@ 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 CommentSectionVue from '../display/comments/CommentSection.vue';
 import { CommentPodcast } from '@/stores/class/general/comment';
 import { Category } from '@/stores/class/general/category';
 import { useGeneralStore } from '@/stores/GeneralStore';
@@ -112,9 +89,7 @@ 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 EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
 const SubscribeButtons = defineAsyncComponent(() => import('../display/sharing/SubscribeButtons.vue'));
-const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));
 const Countdown = defineAsyncComponent(() => import('../display/live/CountDown.vue'));
 const CommentSection = defineAsyncComponent(() => import('../display/comments/CommentSection.vue'));
 export default defineComponent({
@@ -123,9 +98,7 @@ export default defineComponent({
     PodcastInlineList,
     ShareButtons,
     SharePlayer,
-    EditBox,
     SubscribeButtons,
-    RecordingItemButton,
     Countdown,
     CommentSection,
     PodcastModuleBox,
@@ -156,12 +129,17 @@ export default defineComponent({
 
   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 {
-        isEditBox : (state.podcastPage.EditBox as boolean),
         isShareButtons: (state.podcastPage.ShareButtons as boolean),
         isSharePlayer: (state.podcastPage.SharePlayer as boolean),
       };
@@ -212,13 +190,6 @@ export default defineComponent({
           'PENDING' === this.fetchConference.status)
       );
     },
-    isNotRecorded(): boolean {
-      return (
-        this.isLiveReadyToRecord &&
-        undefined!==this.fetchConference &&
-        'DEBRIEFING' === this.fetchConference.status
-      );
-    },
     isOctopusAndAnimator(): boolean {
       return (
         !this.isPodcastmaker &&
@@ -317,15 +288,9 @@ export default defineComponent({
         this.initError();
       }
     },
-    removeDeleted(): void {
-      if (window.history.length > 1) {
-        this.$router.go(-1);
-      } else {
-        this.$router.push('/');
-      }
-    },
+
     receiveCommentEvent(event:{type: string; comment: CommentPodcast; oldStatus?:string } ): void {
-      (this.$refs.commentSection as InstanceType<typeof CommentSectionVue>).receiveCommentEvent(event);
+      (this.$refs.commentSection as InstanceType<typeof CommentSection>).receiveCommentEvent(event);
     },
   },
 })

package/src/components/pages/Podcasts.vue

@@ -1,24 +1,6 @@
 <template>
   <div class="page-box">
-    <div
-      class="d-flex"
-      :class="
-        pageParameters.isEmissionChooser ? 'justify-content-between' : 'justify-content-center'
-      "
-    >
-      <h1 class="flex-shrink-0">
-        {{ titleDisplay }}
-      </h1>
-      <EmissionChooser
-        v-if="pageParameters.isEmissionChooser"
-        :defaultanswer="$t('No emission filter')"
-        width="auto"
-        class="ms-3"
-        @selected="emissionSelected"
-      />
-    </div>
     <ProductorSearch
-      v-if="pageParameters.isProductorSearch"
       v-model:organisation-id="organisationId"
       v-model:search-pattern="searchPattern"
     />
@@ -26,7 +8,6 @@
       :is-education="isEducation"
       :is-emission="false"
       :reset-rubriquage="resetRubriquage"
-      :is-search-bar="pageParameters.isProductorSearch"
       :sort-criteria="sortCriteria"
       :include-hidden="includeHidden"
       :organisation-id="organisationId"
@@ -46,7 +27,6 @@
       :organisation-id="organisationId"
       :query="searchPattern"
       :monetization="monetization"
-      :emission-id="emissionId"
       :before="toDate"
       :after="fromDate"
       :sort-criteria="sortCriteria"
@@ -66,18 +46,15 @@ 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 { Emission } from '@/stores/class/general/emission';
 import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
 import { useFilterStore } from '@/stores/FilterStore';
 import { mapState } from 'pinia';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const EmissionChooser = defineAsyncComponent(() => import('../display/emission/EmissionChooser.vue'));
+import { defineComponent } from 'vue';
 export default defineComponent({
   name:"Podcasts",
   components: {
     PodcastList,
     ProductorSearch,
-    EmissionChooser,
     AdvancedSearch,
   },
   mixins:[orgaComputed],
@@ -92,7 +69,6 @@ export default defineComponent({
       searchPattern: '' as string,
       organisationId: undefined as string|undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
-      emissionId: undefined as number|undefined,
       fromDate: undefined as string|undefined,
       toDate: undefined as string|undefined,
       resetRubriquage: false as boolean,
@@ -108,9 +84,6 @@ export default defineComponent({
 
   computed: {
     ...mapState(useFilterStore, ['filterRubrique', 'filterIab']),
-    titleDisplay(): string{
-      return state.podcastsPage.titlePage ?? this.$t('All podcasts');
-    },
     organisationRight(): boolean {
       return (true===this.authenticated && this.myOrganisationId === this.organisationId) ||
         true===state.generalParameters.isAdmin;
@@ -118,12 +91,6 @@ export default defineComponent({
     organisation(): string|undefined {
       return this.organisationId ?this.organisationId: this.filterOrgaId;
     },
-    pageParameters(){
-      return {
-        isProductorSearch: state.podcastsPage.ProductorSearch,
-        isEmissionChooser: state.podcastsPage.emissionChooser
-      }
-    }
   },
   watch:{
     organisationId(): void {
@@ -171,9 +138,6 @@ export default defineComponent({
       this.rubriqueId = rubriqueId;
       this.noRubriquageId = noRubriquageId;
     },
-    emissionSelected(emission: Emission): void {
-      this.emissionId = emission && emission.emissionId ? emission.emissionId : undefined;
-    },
   },
 })
 </script>

package/src/locale/de.ts

@@ -287,7 +287,7 @@ export default{
   'Refresh': "Aktualisieren",
   'See associated article':"Artikel lesen",
   "Display associated article":"Zugehörigen Artikel anzeigen",
-  "Copy this page URL":"URL dieser Seite kopieren",
+  "Copy this page URL":"Link kopieren",
   "Custom version":"Benutzerdefiniert",
   "All":"Alle",
   'By category': "Nach IAB-Kategorie",
@@ -311,4 +311,9 @@ export default{
   "Audio credits":"Audio-Credits",
   "View transcript":"Transkript ansehen",
   "Suggested listening":"Anhören empfohlen",
+  "More":"Mehr",
+  "Social networks":"Soziale Netzwerke",
+  "Newsletter":"Newsletter",
+  "QR Code":"QR-Code",
+  "Rss feed": "RSS-Feed",
 }

package/src/locale/en.ts

@@ -287,7 +287,7 @@ export default{
   'Refresh': 'Refresh',
   'See associated article':"Read the article",
   "Display associated article":"Display associated article",
-  "Copy this page URL":"Copy this page URL",
+  "Copy this page URL":"Copy link",
   "Custom version":"Custom version",
   "All":"All",
   'By category': 'By IAB category',
@@ -318,4 +318,9 @@ export default{
   "Audio credits":"Audio credits",
   "View transcript":"View transcript",
   "Suggested listening":"Suggested listening",
+  "More":"More",
+  "Social networks":"Social networks",
+  "Newsletter":"Newsletter",
+  "QR Code":"QR Code",
+  "Rss feed": "Rss feed",
 };

package/src/locale/es.ts

@@ -287,7 +287,7 @@ export default{
   'Refresh': 'Volver a cargar',
   'See associated article':"Leer el artículo",
   "Display associated article":"Mostrar el artículo asociado",
-  "Copy this page URL":"Copiar la URL de esta página",
+  "Copy this page URL":"Copiar link",
   "Custom version":"Versión personalizada",
   "All":"Todos",
   'By category': 'Por categoría IAB',
@@ -311,4 +311,9 @@ export default{
   "Audio credits":"Créditos de audio",
   "View transcript":"Ver transcripción",
   "Suggested listening":"Escucha sugerida",
+  "More":"Más",
+  "Social networks":"Redes sociales",
+  "Newsletter":"Newsletter",
+  "QR Code":"Código QR",
+  "Rss feed": "RSS Feed",
 }

package/src/locale/fr.ts

@@ -287,7 +287,7 @@ export default{
   'Refresh': 'Rafraichir',
   'See associated article':"Lire l'article",
   "Display associated article":"Afficher l'article associé",
-  "Copy this page URL":"Copier l'adresse de cette page",
+  "Copy this page URL":"Copier le lien",
   "Custom version":"Version customisée",
   "All":"Tous",
   'By category': 'Selon la catégorie IAB',
@@ -318,4 +318,9 @@ export default{
   "Audio credits":"Crédits audio",
   "View transcript":"Afficher la transcription",
   "Suggested listening":"Suggestion d'écoute",
+  "More":"Plus",
+  "Social networks":"Réseaux sociaux",
+  "Newsletter":"Newsletter",
+  "QR Code":"QR Code",
+  "Rss feed": "Flux RSS",
 };

package/src/locale/it.ts

@@ -282,7 +282,7 @@ export default{
     'Refresh': 'Aggiorna', 
     'See associated article':"Leggi l'articolo", 
     "Display associated article":"Mostra articolo associato",
-    "Copy this page URL":"Copia la URL di questa pagina", 
+    "Copy this page URL":"Copia link", 
     "Custom version":"Versione customizzata",
     "All":"Tutto", 
     'By category': 'Per categoria',
@@ -308,4 +308,9 @@ export default{
     "Audio credits":"Crediti audio",
     "View transcript":"Visualizza trascrizione",
     "Suggested listening":"Ascolto suggerito",
+    "More":"Di più",
+    "Social networks":"Social networks",
+    "Newsletter":"Newsletter",
+    "QR Code":"QR Code",
+    "Rss feed": "RSS Feed",
   };

package/src/locale/sl.ts

@@ -287,7 +287,7 @@ export default{
   'Refresh': 'Osveži',
   'See associated article':"Read the article",
   "Display associated article": "Prikaži povezan vir",
-  "Copy this page URL": "Kopiraj URL te strani",
+  "Copy this page URL": "Kopiraj povezavo",
   "Custom version": "Prilagojena različica",
   "All":"Vse",
   'By category': 'Po kategoriji IAB',
@@ -311,4 +311,9 @@ export default{
   "Audio credits":"Avdio krediti",
   "View transcript":"Ogled prepisa",
   "Suggested listening":"Predlagano poslušanje",
+  "More":"Več",
+  "Social networks":"Socialna omrežja",
+  "Newsletter":"Newsletter",
+  "QR Code":"koda QR",
+  "Rss feed": "Rss vir",
 }

package/src/sass/_variables.scss

@@ -3,6 +3,10 @@ $font-family-sans-serif: sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 
+$octopus-item-size: 16.5rem !default;
+$octopus-mobile-item-size: 12.5rem !default;
+$octopus-borderradius: 0.2rem !default;
+
 // bootstrap color
 $primary: #1a8658 !default;
 $secondary: #636C73 !default;
@@ -11,10 +15,11 @@ $danger: #E22C27 !default;
 $blue-octopus: #08667E !default;
 
 //SDK Octopus style
-$octopus-background: #fafafa !default;
+$octopus-background: white !default;
 $octopus-primary-color: #1a8658 !default;
 $octopus-secondary-color : #ddd !default;
 
 $primaryColorTransparent : #1a865893 !default;
+$primaryColorLessTransparent : #1a8657d0 !default;
 $primaryColorMoreTransparent : #1a865854 !default;
 $primaryColorReallyTransparent : #cef7e250 !default;

package/src/stores/ParamSdkStore.ts

@@ -11,14 +11,14 @@ const state:ParamStore = {
     isOrganisation: false,
     isPlaylist: false,
     isProduction: false,
-    isContribution: false,
-    ApiUri: 'https://api.dev2.saooti.org/',
+    isContribution: true,
+    ApiUri: 'https://api.staging.saooti.org/',
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
     isLiveTab: false,
     isCaptchaTest: true,
-    podcastItem:13,
+    podcastItem:16.5,
     isInlineAnimation:true,
   },
   podcastPage: {
@@ -26,23 +26,19 @@ const state:ParamStore = {
     SharePlayer: true,
     ShareButtons: true,
     ShareDistribution: true,
-    MiniplayerUri: 'https://playerbeta.dev2.saooti.org/',
-    downloadButton: false,
-    hlsUri: 'https://hls.dev2.saooti.org/',
+    MiniplayerUri: 'https://playerbeta.staging.saooti.org/',
+    hlsUri: 'https://hls.staging.saooti.org/',
     mainRubrique: 0,
     resourceUrl: undefined,
     podcastItemShowEmission: false,
     clickPlayGoPage:false,
-    listTypeClassic: true,
+    listTypeClassic: false,
     podcastItemDescription:true
   },
   podcastsPage: {
-    ProductorSearch: true,
     MonetizableFilter: true,
-    podcastShadow: true,
     podcastBorderBottom: false,
-    titlePage: undefined,
-    emissionChooser: false,
+    titlePage: undefined
   },
   emissionsPage: {
     smallItems: false,
@@ -83,13 +79,13 @@ const state:ParamStore = {
     userName: '',
   },
   octopusApi: {
-    url: 'https://api.dev2.saooti.org/',
-    commentsUrl: 'https://comments.dev2.saooti.org/',
-    imageUrl:'https://imageproxy.dev2.saooti.org/',
-    studioUrl: 'https://studio.dev2.saooti.org/',
-    playerUrl: 'https://playerbeta.dev2.saooti.org/',
-    speechToTextUrl:'https://speech2text.dev2.saooti.org/',
-    recoUrl: 'https://reco.dev2.saooti.org/',
+    url: 'https://api.staging.saooti.org/',
+    commentsUrl: 'https://comments.staging.saooti.org/',
+    imageUrl:'https://imageproxy.staging.saooti.org/',
+    studioUrl: 'https://studio.staging.saooti.org/',
+    playerUrl: 'https://playerbeta.staging.saooti.org/',
+    speechToTextUrl:'https://speech2text.staging.saooti.org/',
+    recoUrl: 'https://reco.staging.saooti.org/',
     organisationId: undefined,
     rubriqueIdFilter: undefined,
   },
@@ -120,7 +116,6 @@ export interface PodcastPage{
   ShareButtons?: boolean,
   ShareDistribution?: boolean,
   MiniplayerUri?: string,
-  downloadButton?: boolean,
   hlsUri?: string,
   mainRubrique?: number,
   resourceUrl?: string,
@@ -130,12 +125,9 @@ export interface PodcastPage{
   podcastItemDescription?:boolean,
 }
 export interface PodcastsPage{
-  ProductorSearch?: boolean,
     MonetizableFilter?: boolean,
-    podcastShadow?: boolean,
     podcastBorderBottom?: boolean,
     titlePage?: string,
-    emissionChooser?: boolean,
 }
 export interface EmissionsPage{
   smallItems?: boolean,

package/src/stores/PlayerStore.ts

@@ -20,6 +20,7 @@ interface PlayerState{
 	playerStop?: boolean;
 	playerSeekTime?: number;
 	playerTranscript?:Transcript;
+	playerLargeVersion: boolean;
 }
 export const usePlayerStore = defineStore('PlayerStore', {
   state: (): PlayerState => ({
@@ -32,8 +33,15 @@ export const usePlayerStore = defineStore('PlayerStore', {
     playerLive: undefined,
     playerRadio: undefined,
     playerSeekTime:0,
+		playerLargeVersion: false
   }),
 	getters: {
+		playerHeight() {
+      if ('STOPPED' === this.playerStatus) return 0;
+      if (this.playerLargeVersion) return '27rem';
+      if (window.innerWidth > 450) return '5rem';
+      return '3.5rem';
+    },
 		playedTime(): string{
       if (this.playerElapsed && this.playerElapsed > 0 && this.playerTotal && this.playerTotal > 0) {
         return DurationHelper.formatDuration(
@@ -130,5 +138,8 @@ export const usePlayerStore = defineStore('PlayerStore', {
 		playerUpdateTranscript(transcript?:Transcript) {
 			this.playerTranscript = transcript;
 		},
+		playerUpdateLargeVersion(largeVersion: boolean){
+			this.playerLargeVersion = largeVersion;
+		}
   }
 })