@saooti/octopus-sdk 36.0.2 → 36.0.3

package/src/components/pages/Emission.vue

@@ -1,11 +1,30 @@
 <template>
   <div class="page-box">
-    <div
-      v-if="loaded && !error"
-    >
-      <h1>{{ $t('Emission') }}</h1>
-      <div class="d-flex">
-        <div class="d-flex flex-column flex-grow-1">
+    <template v-if="loaded && !error" >
+      <div class="page-element-title-container">
+        <div class="page-element-title">
+          <h1>{{ $t('Emission') }}</h1>
+        </div>
+        <div class="page-element-bg" :style="backgroundDisplay"></div>
+      </div>
+      <div class="d-flex flex-column page-element">
+        <div class="module-box">
+          <div class="mb-5 descriptionText">
+            <img
+              v-lazy="proxyImageUrl(imageUrl, '330')"
+              width="330"
+              height="330"
+              :alt="$t('Emission 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"
             :emission="emission"
@@ -13,67 +32,44 @@
             :ftp-emission="ftpEmission"
             @isUpdated="getEmissionDetails"
           />
-          <div class="module-box">
-            <h2>
-              {{ name }}
-            </h2>
-            <div class="mb-5 mt-3 descriptionText">
-              <img
-                v-lazy="proxyImageUrl(imageUrl, '260')"
-                width="260"
-                height="260"
-                :alt="$t('Emission name image', { name: name })"
-                class="img-box shadow-element float-start me-3 mb-3"
-              >
-              <!-- eslint-disable vue/no-v-html -->
-              <p
-                class="html-wysiwyg-content"
-                v-html="urlify(description)"
-              />
-              <!-- eslint-enable -->
-            </div>
-          </div>
-          <SubscribeButtons
-            v-if="pageParameters.isShareButtons && countLink >= 1"
-            :emission="emission"
-          />
         </div>
-        <div class="d-flex flex-column flex-grow-mobile">
-          <SharePlayer
-            v-if="pageParameters.isSharePlayer && (authenticated || notExclusive)"
-            :emission="emission"
-            :exclusive="exclusive"
-            :not-exclusive="notExclusive"
-            :organisation-id="myOrganisationId"
-            :is-education="isEducation"
-          />
-          <ShareButtons
-            v-if="pageParameters.isShareButtons"
-            :emission="emission"
-            :is-vertical="!authenticated && !notExclusive"
-          />
-        </div>
-      </div>
-      <div v-if="editRight">
-        <ShareDistribution
-          v-if="pageParameters.isShareDistribution"
-          :emission-id="emissionId"
+        <SharePlayer
+          v-if="pageParameters.isSharePlayer && (authenticated || notExclusive)"
+          :emission="emission"
+          :exclusive="exclusive"
+          :not-exclusive="notExclusive"
+          :organisation-id="myOrganisationId"
+          :is-education="isEducation"
         />
-      </div>
-      <template v-if="pageParameters.isDisplayPodcasts">
-        <LiveHorizontalList
-          v-if="!isPodcastmaker"
-          :emission-id="emissionId"
+        <ShareButtons
+          v-if="pageParameters.isShareButtons"
+          :emission="emission"
+        />
+        <SubscribeButtons
+          v-if="pageParameters.isShareButtons && countLink >= 1"
+          :emission="emission"
         />
-        <PodcastFilterList
-          :show-count="true"
+        <ShareDistribution
+          v-if="editRight && pageParameters.isShareDistribution"
           :emission-id="emissionId"
-          :category-filter="false"
-          :edit-right="editRight"
-          :productor-id="emission.orga.id"
         />
-      </template>
-    </div>
+        <template v-if="pageParameters.isDisplayPodcasts">
+          <LiveHorizontalList
+            v-if="!isPodcastmaker"
+            class="mx-2"
+            :emission-id="emissionId"
+          />
+          <PodcastFilterList
+            class="mx-2"
+            :show-count="true"
+            :emission-id="emissionId"
+            :category-filter="false"
+            :edit-right="editRight"
+            :productor-id="emission.orga.id"
+          />
+        </template>
+      </div>
+    </template>
     <ClassicLoading
       :loading-text="!loaded?$t('Loading content ...'):undefined"
       :error-text="error?$t(`Emission doesn't exist`):undefined"
@@ -169,6 +165,12 @@ export default defineComponent({
       }
       return count;
     },
+    backgroundDisplay():string{
+      if(!this.emission){
+        return "";
+      }
+      return `background-image: url('${this.emission.imageUrl}');`;
+    },
   },
   watch: {
     emissionId: {

package/src/components/pages/Emissions.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="page-box">
-    <h1>{{ titleDisplay }}</h1>
     <ProductorSearch
-      v-if="isProductorSearch"
       v-model:organisationId="organisationId"
       v-model:search-pattern="searchPattern"
       type="emission"
@@ -11,7 +9,6 @@
       :is-education="isEducation"
       :reset-rubriquage="resetRubriquage"
       :is-emission="true"
-      :is-search-bar="isProductorSearch"
       :sort-criteria="sortEmission"
       :organisation-id="organisationId"
       :include-hidden="includeHidden"
@@ -85,12 +82,6 @@ export default defineComponent({
   
   computed: {
     ...mapState(useFilterStore, ['filterIab', 'filterRubrique']),
-    titleDisplay(): string{
-      return state.emissionsPage.titlePage??this.$t('All emissions');
-    },
-    isProductorSearch(): boolean{
-      return (state.podcastsPage.ProductorSearch as boolean);
-    },
     organisationRight(): boolean {
       return (true===this.authenticated && this.myOrganisationId === this.organisationId) ||
         true===state.generalParameters.isAdmin

package/src/components/pages/Participant.vue

@@ -15,7 +15,7 @@
           height="200"
           :title="$t('Animator image')"
           :alt="$t('Animator image')"
-          class="img-box-circle mb-3"
+          class="img-box mb-3"
         >
         <h2 class="text-capitalize">
           {{ name }}
@@ -26,20 +26,18 @@
           v-html="urlify(description)"
         />
         <!-- eslint-enable -->
-        <div class="d-flex mt-3">
-          <EditBox
-            v-if="editRight && pageParameters.isEditBox"
-            :participant="participant"
-            class="flex-grow-1"
-            @participantUpdate="updateParticipant"
-          />
-          <ShareButtons
-            v-if="pageParameters.isShareButtons"
-            :participant-id="participantId"
-            :organisation-id="participant.orga.id"
-            :is-vertical="false"
-          />
-        </div>
+        <EditBox
+          v-if="editRight && pageParameters.isEditBox"
+          :participant="participant"
+          class="w-100"
+          @participantUpdate="updateParticipant"
+        />
+        <ShareButtons
+          v-if="pageParameters.isShareButtons"
+          class="w-100"
+          :participant-id="participantId"
+          :organisation-id="participant.orga.id"
+        />
       </div>
       <PodcastFilterList
         v-if="!pageParameters.lightStyle"

package/src/components/pages/Participants.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-box">
-    <h1>{{ titleDisplay }}</h1>
     <ProductorSearch
       v-model:organisation-id="organisationId"
       v-model:search-pattern="searchPattern"
@@ -20,7 +19,6 @@
 import { orgaComputed } from '../mixins/orgaComputed';
 import ParticipantList from '../display/participant/ParticipantList.vue';
 import ProductorSearch from '../display/filter/ProductorSearch.vue';
-import { state } from '../../stores/ParamSdkStore';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
@@ -39,11 +37,6 @@ export default defineComponent({
       organisationId: undefined as string | undefined,
     };
   },
-  computed: {
-    titleDisplay(): string{
-      return state.intervenantsPage.titlePage ?? this.$t('All participants');
-    },
-  },
   created() {
     this.organisationId = this.productor ?this.productor: this.filterOrgaId;
   },

package/src/components/pages/Playlist.vue

@@ -1,50 +1,50 @@
 <template>
   <div class="page-box">
-    <div
+    <template
       v-if="loaded && !error"
     >
-      <h1>{{ $t('Playlist') }}</h1>
-      <div class="d-flex">
-        <div class="d-flex flex-column flex-grow-1">
-          <EditBox
-            v-if="editRight && pageParameters.isEditBox"
-            :playlist="playlist"
-          />
-          <div class="module-box">
+      <div class="page-element-title-container">
+        <div class="page-element-title">
+          <h1>{{ $t('Playlist') }}</h1>
+        </div>
+        <div class="page-element-bg" :style="backgroundDisplay"></div>
+      </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>
-            <div class="mb-5 mt-3 descriptionText">
-              <img
-                v-lazy="proxyImageUrl(imageUrl, '260')"
-                width="260"
-                height="260"
-                :alt="$t('Playlist name image', { name: name })"
-                class="img-box shadow-element float-start me-3 mb-3"
-              >
-              <!-- eslint-disable vue/no-v-html -->
-              <p
-                class="html-wysiwyg-content"
-                v-html="urlify(description)"
-              />
-              <!-- eslint-enable -->
-            </div>
+            <!-- eslint-disable vue/no-v-html -->
+            <p
+              class="html-wysiwyg-content"
+              v-html="urlify(description)"
+            />
+            <!-- eslint-enable -->
           </div>
-        </div>
-        <div class="d-flex flex-column flex-grow-mobile">
-          <SharePlayer
-            v-if="pageParameters.isSharePlayer && authenticated"
-            :playlist="playlist"
-            :organisation-id="myOrganisationId"
-            :is-education="isEducation"
-          />
-          <ShareButtons
-            v-if="pageParameters.isShareButtons"
+          <EditBox
+            v-if="editRight && pageParameters.isEditBox"
             :playlist="playlist"
-            :is-vertical="!(pageParameters.isSharePlayer && authenticated)"
           />
         </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>
-      <PodcastList :playlist="playlist" />
-    </div>
+    </template>
     <ClassicLoading
       :loading-text="!loaded?$t('Loading content ...'):undefined"
       :error-text="error?$t(`Playlist doesn't exist`):undefined"
@@ -112,6 +112,12 @@ export default defineComponent({
         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: {

package/src/components/pages/Playlists.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-box">
-    <h1>{{ $t('All playlists') }}</h1>
     <router-link
       v-if="editRight && !isPodcastmaker"
       to="/main/priv/edit/playlist"
@@ -11,7 +10,6 @@
       </div>
     </router-link>
     <ProductorSearch
-      v-if="isProductorSearch"
       v-model:organisationId="organisationId"
       v-model:search-pattern="searchPattern"
       type="playlist"
@@ -52,9 +50,6 @@ export default defineComponent({
   },
   
   computed: {
-    isProductorSearch(): boolean {
-      return (state.podcastsPage.ProductorSearch as boolean);
-    },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },

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);
     },
   },
 })