@saooti/octopus-sdk 36.0.2 → 36.0.4

package/src/components/misc/TopBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="top-bar-container"
-    :class="{ 'shadow-element': scrolled }"
+    :class="{ 'scrolled': scrolled }"
   >
     <router-link
       class="top-bar-logo"
@@ -25,7 +25,7 @@
       width="auto"
       :defaultanswer="$t('No organisation filter')"
       :value="organisationId"
-      class="me-2"
+      class="ms-3 me-2"
       :reset="reset"
       @selected="onOrganisationSelected"
     />
@@ -40,11 +40,39 @@
             name: link.routeName,
             query: getQueriesRouter(link.routeName),
           }"
-          class="link-hover p-3 fw-bold"
+          class="link-hover p-3"
         >
           {{ link.title }}
         </router-link>
       </template>
+      <button id="more-dropdown" class="d-flex align-items-center btn-transparent p-3">
+        <div class="link-hover">{{$t('More')}}</div>
+        <div class="hide-phone ms-1 saooti-down"></div>
+      </button>
+      <Popover
+        target="more-dropdown"
+        :only-click="true"
+        :is-fixed="true"
+        :left-pos="true"
+      >
+        <div class="d-flex flex-column">
+          <template
+            v-for="link in routerLinkInsideArray"
+            :key="link.routeName"
+          >
+            <router-link
+              v-if="link.condition"
+              :to="{
+                name: link.routeName,
+                query: getQueriesRouter(link.routeName),
+              }"
+              class="link-hover p-1 octopus-dropdown-item"
+            >
+              {{ link.title }}
+            </router-link>
+          </template>
+        </div>
+      </Popover>
     </div>
     <button
       class="btn-transparent saooti-menu"
@@ -52,9 +80,7 @@
       @click="onDisplayMenu(false)"
     />
     <div class="d-flex flex-column">
-      <div class="hosted-by">
-        {{ $t('Hosted by') }}<span class="ms-1 me-1 text-primary">Saooti</span>
-      </div>
+      
       <div class="d-flex justify-content-end flex-nowrap">
         <HomeDropdown :is-education="isEducation" />
         <router-link
@@ -79,6 +105,7 @@ import imageProxy from '../mixins/imageProxy';
 import { useFilterStore } from '@/stores/FilterStore';
 import { mapState } from 'pinia';
 import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import Popover from '../misc/Popover.vue';
 import { defineComponent,defineAsyncComponent } from 'vue';
 const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
 export default defineComponent({
@@ -86,6 +113,7 @@ export default defineComponent({
   components: {
     OrganisationChooserLight,
     HomeDropdown,
+    Popover
   },
   mixins:[orgaFilter, imageProxy],
   props: {
@@ -108,7 +136,11 @@ export default defineComponent({
       return [
         {title : this.$t('Live'), routeName: 'lives', condition : (state.generalParameters.isLiveTab as boolean) &&((this.filterOrgaId && this.filterLive) || !this.filterOrgaId)},
         {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
-        {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
+        {title : this.$t('Emissions'), routeName: 'emissions', condition : true}
+      ]
+    },
+    routerLinkInsideArray(){
+      return [
         {title : this.$t('Speakers'), routeName: 'participants', condition : true},
         {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
         {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrgaId || this.isEducation)}]
@@ -204,7 +236,7 @@ export default defineComponent({
   top: 0;
   background: #fff;
   width: 100%;
-  height: 5rem;
+  height: 3.5rem;
   z-index: 10;
   padding: 0 1rem;
   display: flex;
@@ -222,26 +254,19 @@ export default defineComponent({
     margin: 0.5rem;
   }
 
-  .top-bar-logo {
-    margin: 1rem 2rem 1rem 1rem;
-    img {
-      max-width: 160px !important;
-      max-height: 2.5rem;
-      height: 2.5rem;
-      &.educationLogo {
-        height: auto;
-      }
+  .top-bar-logo img{
+    max-width: 140px !important;
+    max-height: 2.5rem;
+    height: 2.5rem;
+    &.educationLogo {
+      height: auto;
+    }
+    @media (max-width: 650px) {
+      height: 2rem;
     }
   }
-  .hosted-by {
-    font-size: 0.6rem;
-    position: absolute;
-    top: 5px;
-    right: 0;
-  }
-  &.shadow-element {
-    height: 3.5rem;
-    .link-hover,.hosted-by {
+  &.cscrolled{
+    .link-hover {
       display: none;
     }
     .saooti-menu {
@@ -249,30 +274,15 @@ export default defineComponent({
     }
   }
   /** PHONES*/
-  @media (max-width: 1470px) {
-    height: 3.5rem;
-    .default-multiselect-width, .hosted-by, .link-hover {
+  @media (max-width: 960px) {
+    .default-multiselect-width, .link-hover {
       display: none;
     }
     .saooti-menu {
       display: block;
     }
   }
-  @media (max-width: 650px) {
-    .top-bar-logo img{
-      height: 2rem;
-    }
-  }
-  @media (max-width: 380px) {
-    .top-bar-logo img{
-      height: 1rem;
-    }
-  }
-  @media (max-width: 290px) {
-    .top-bar-logo{
-      display: none;
-    }
-  }
+  
 }
 }
 </style>

package/src/components/misc/modal/ClassicModal.vue

@@ -102,7 +102,7 @@ export default defineComponent({
 		align-items: center;
 		justify-content: space-between;
 		border: 0;
-		border-radius: 0.8rem 0.8rem 0 0;
+		border-radius: $octopus-borderradius $octopus-borderradius 0 0;
 		background: $octopus-primary-color;
 		color: white;
 		padding: 1rem;
@@ -122,7 +122,7 @@ export default defineComponent({
 		outline: 0;
 		height: auto !important;
 		max-height: initial !important;
-		border-radius: 0.8rem;
+		border-radius: $octopus-borderradius;
 		box-shadow: 0 0.2rem 0.5rem rgba(40,40,40,.3);
 	}
 	.octopus-modal-footer{

package/src/components/misc/modal/NewsletterModal.vue

@@ -323,7 +323,6 @@ export default defineComponent({
       border: 2px solid #eee;
       height: 200px;
       padding: 1em;
-      border-radius: 1em;
     }
     .octopus-modal-dialog{
       max-width: 80%;

package/src/components/misc/player/Player.vue

@@ -17,7 +17,7 @@
         @seeked="onSeeked"
       />
       <PlayerCompact
-        v-if="!largeVersion"
+        v-if="!playerLargeVersion"
         v-model:notListenTime="notListenTime"
         :player-error="playerError"
         :hls-ready="hlsReady"
@@ -27,7 +27,7 @@
         :duration-live-position="durationLivePosition"
         :listen-time="listenTime"
         @stopPlayer="stopPlayer"
-        @changePlayerLargeVersion="largeVersion = true"
+        @changePlayerLargeVersion="playerUpdateLargeVersion(true)"
       />
       <PlayerLarge
         v-else
@@ -40,7 +40,7 @@
         :duration-live-position="durationLivePosition"
         :listen-time="listenTime"
         @stopPlayer="stopPlayer"
-        @changePlayerLargeVersion="largeVersion = false"
+        @changePlayerLargeVersion="playerUpdateLargeVersion(false)"
       />
     </template>
   </div>
@@ -76,23 +76,14 @@ export default defineComponent({
       displayAlertBar: false as boolean,
       hlsReady: false as boolean,
       comments: [] as Array<CommentPodcast>,
-      showTimeline: false as boolean,
-      largeVersion: false as boolean,
       audioUrlToPlay: "" as string
     };
   },
   computed: {
-    ...mapState(usePlayerStore, ['playerStatus']),
+    ...mapState(usePlayerStore, ['playerStatus', 'playerHeight', 'playerLargeVersion']),
     display(){
       return 'STOPPED' !== this.playerStatus;
     },
-    playerHeight() {
-      if ('STOPPED' === this.playerStatus || this.forceHide) return 0;
-      if (this.largeVersion) return '27rem';
-      if (window.innerWidth > 450 && !this.showTimeline) return '5rem';
-      if (window.innerWidth > 450 && this.showTimeline) return '6rem';
-      return '3.5rem';
-    },
   },
 
   watch: {
@@ -102,7 +93,7 @@ export default defineComponent({
   },
   
   methods: {
-    ...mapActions(usePlayerStore, ['playerPlay']),
+    ...mapActions(usePlayerStore, ['playerPlay', 'playerUpdateLargeVersion']),
     onHidden(): void {
       if (this.forceHide) {
         this.playerPlay();

package/src/components/misc/player/PlayerCompact.vue

@@ -128,6 +128,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
   .player-grow-content {
     display: flex;
@@ -138,7 +139,7 @@ export default defineComponent({
     font-size: 0.8rem;
   }
   .player-image {
-    border-radius: 0.2rem;
+    border-radius: $octopus-borderradius;
     height: 2.4rem;
     width: 2.4rem;
     cursor: pointer;

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