@saooti/octopus-sdk 36.0.1 → 36.0.3

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

@@ -1,24 +1,26 @@
 <template>
-  <div>
-    <div class="module-box text-center-mobile overflow-visible">
-      <h3>{{ $t('Embed') }}</h3>
-      <template v-if="!exclusive && (authenticated || notExclusive)">
-        <div class="d-flex flex-column align-items-center">
-          <div
-            v-if="noAd && !isEducation"
-            class="sticker"
-            :title="$t('You cannot insert advertising')"
-          >
-            {{ $t('No advertising') }}
-          </div>
-          <iframe
-            id="miniplayerIframe"
-            title="miniplayer"
-            :src="iFrameSrc"
-            width="100%"
-            :height="iFrameHeight"
-            class="max-iframe my-2"
-          />
+  <div class="module-box overflow-visible">
+    <div class="d-flex justify-content-between align-items-center">
+      <h2 class="big-h2 mb-3 height-40">{{ $t('Embed') }}</h2>
+      <div
+        v-if="noAd && !isEducation"
+        class="sticker"
+        :title="$t('You cannot insert advertising')"
+      >
+        {{ $t('No advertising') }}
+      </div>
+    </div>
+    <template v-if="!exclusive && (authenticated || notExclusive)">
+      <div class="d-flex">
+        <iframe
+          id="miniplayerIframe"
+          title="miniplayer"
+          :src="iFrameSrc"
+          width="100%"
+          :height="iFrameHeight"
+          class="max-iframe mx-3"
+        />
+        <div class="d-flex flex-column flex-grow-1">
           <SharePlayerTypes 
             v-if="!isLiveReadyToRecord"
             v-model:iFrameModel="iFrameModel"
@@ -37,44 +39,42 @@
             id-checkbox="is-visible-checkbox"
             :label="titleStillAvailable"
           />
-        </div>
-        <PlayerParameters
-          v-if="isPlayerParameter"
-          :is-visible="isVisible"
-          :chose-number-episode="displayChoiceAllEpisodes|| isLargeSuggestion"
-          :display-choice-all-episodes="displayChoiceAllEpisodes"
-          :display-transcript-param="displayTranscriptParam"
-          :display-article-param="displayArticleParam"
-          @displayArticle="displayArticle = $event"
-          @displayTranscript="displayTranscript = $event"
-          @episodeNumbers="episodeNumbers = $event"
-          @proceedReading="proceedReading = $event"
-          @isVisible="isVisible = $event"
-          @iFrameNumber="iFrameNumber = $event"
-        />
-        <div class="d-flex flex-column align-items-center mt-3">
+          <PlayerParameters
+            v-if="isPlayerParameter"
+            :is-visible="isVisible"
+            :chose-number-episode="displayChoiceAllEpisodes|| isLargeSuggestion"
+            :display-choice-all-episodes="displayChoiceAllEpisodes"
+            :display-transcript-param="displayTranscriptParam"
+            :display-article-param="displayArticleParam"
+            @displayArticle="displayArticle = $event"
+            @displayTranscript="displayTranscript = $event"
+            @episodeNumbers="episodeNumbers = $event"
+            @proceedReading="proceedReading = $event"
+            @isVisible="isVisible = $event"
+            @iFrameNumber="iFrameNumber = $event"
+          />
+          <ShareModalPlayer
+            v-if="isShareModal"
+            :embed-link="iFrame"
+            :embedly-link="iFrameSrc"
+            :direct-link="podcast"
+            @close="isShareModal = false"
+          />
           <button
-            class="btn btn-primary mb-3"
+            class="btn btn-primary width-fit-content mt-3"
             @click="isShareModal = true"
           >
             {{ $t('Share the player') }}
           </button>
         </div>
-      </template>
-      <div v-else-if="exclusive && authenticated">
-        {{ $t('Only organisation members can share the content') }}
-      </div>
-      <div v-else-if="!authenticated">
-        {{ $t('Only authenticated members can share the content') }}
       </div>
+    </template>
+    <div v-else-if="exclusive && authenticated">
+      {{ $t('Only organisation members can share the content') }}
+    </div>
+    <div v-else-if="!authenticated">
+      {{ $t('Only authenticated members can share the content') }}
     </div>
-    <ShareModalPlayer
-      v-if="isShareModal"
-      :embed-link="iFrame"
-      :embedly-link="iFrameSrc"
-      :direct-link="podcast"
-      @close="isShareModal = false"
-    />
   </div>
 </template>
 

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="d-flex justify-content-around mt-3 w-100">
-    <div class="d-flex flex-column align-items-center flex-shrink-0 me-3">
-      <div>{{ $t('Choose color') }}</div>
+  <div class="d-flex mt-3">
+    <div class="d-flex flex-column align-items-center flex-shrink-0 me-4">
+      <div class="h4 mb-2">{{ $t('Choose color') }}</div>
       <VSwatches
         :model-value="color"
         class="c-hand "
@@ -13,7 +13,7 @@
       />
     </div>
     <div class="d-flex flex-column align-items-center">
-      <div>{{ $t('Choose theme') }}</div>
+      <div class="h4 mb-2">{{ $t('Choose theme') }}</div>
       <VSwatches
         :model-value="theme"
         class="c-hand "

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

@@ -1,35 +1,33 @@
 <template>
-  <div class="d-flex flex-column">
-    <label
-      for="iframe-select"
-      title="select miniplayer"
-    />
-    <select
-      id="iframe-select"
-      :value="iFrameModel"
-      class=""
-      @change="$emit('update:iFrameModel',$event.target.value)"
+  <label
+    for="iframe-select"
+    title="select miniplayer"
+  />
+  <select
+    id="iframe-select"
+    :value="iFrameModel"
+    class=""
+    @change="$emit('update:iFrameModel',$event.target.value)"
+  >
+    <template
+      v-for="option in optionsSelect"
+      :key="option.value"
     >
-      <template
-        v-for="option in optionsSelect"
-        :key="option.value"
-      >
-        <option
-          v-if="option.condition"
-          :value="option.value"
-        >
-          {{ option.name }}
-        </option>
-      </template>
       <option
-        v-for="player in customPlayersDisplay"
-        :key="player.customId"
-        :value="player.customId"
+        v-if="option.condition"
+        :value="option.value"
       >
-        {{ $t('Custom version') + " «" +player.name+"»" }}
+        {{ option.name }}
       </option>
-    </select>
-  </div>
+    </template>
+    <option
+      v-for="player in customPlayersDisplay"
+      :key="player.customId"
+      :value="player.customId"
+    >
+      {{ $t('Custom version') + " «" +player.name+"»" }}
+    </option>
+  </select>
 </template>
 
 <script lang="ts">

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

@@ -1,8 +1,8 @@
 <template>
   <div class="module-box flex-grow-0">
-    <h3 class="mb-2 height-40">
+    <h2 class="big-h2 mb-3 height-40">
       {{ $t('Subscribe emission') }}
-    </h3>
+    </h2>
     <template
       v-for="(sub, index) in subscriptionsDisplay"
       :key="sub.name"

package/src/components/form/ClassicCheckbox.vue

@@ -72,7 +72,7 @@ export default defineComponent({
       bottom: 0;
       background-color: #ccc;
       transition: .4s;
-      border-radius: 1rem;
+      border-radius: $octopus-borderradius;
     }
     .slider:before {
       position: absolute;

package/src/components/form/ClassicSearch.vue

@@ -41,11 +41,12 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
   .champs-searchPage{
     input {
       border: 2px solid #dee2e6;
-      border-radius: 10px;
+      border-radius: $octopus-borderradius;
       margin: 0 !important;
     }
     .saooti-search,

package/src/components/misc/Footer.vue

@@ -41,21 +41,26 @@
       rel="noopener"
       target="_blank"
     >{{ $t('Contact') }}</a>
-    <a
-      href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
-      rel="noopener"
-      target="_blank"
-      :title="$t('Octopus is ACPM Podcast accredited')"
-    >
-      <img
-        width="44"
-        height="44"
-        class="acpm_image"
-        src="/img/ACPM.webp"
+    <div class="d-flex align-items-center">
+      <div class="hosted-by">
+        {{ $t('Hosted by') }}<span class="ms-1 me-1 text-primary">Saooti</span>
+      </div>
+      <a
+        href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
+        rel="noopener"
+        target="_blank"
         :title="$t('Octopus is ACPM Podcast accredited')"
-        :alt="$t('Octopus is ACPM Podcast accredited')"
       >
-    </a>
+        <img
+          width="44"
+          height="44"
+          class="acpm_image"
+          src="/img/ACPM.webp"
+          :title="$t('Octopus is ACPM Podcast accredited')"
+          :alt="$t('Octopus is ACPM Podcast accredited')"
+        >
+      </a>
+    </div>
   </div>
 </template>
 
@@ -143,8 +148,7 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app{
   #footer{
-    font-size: 0.7rem;
-    position: sticky;
+    font-size: 0.6rem;
     bottom: 0;
     z-index: 10;
     background: white;

package/src/components/misc/HomeDropdown.vue

@@ -2,13 +2,18 @@
   <div
     class="d-flex align-items-center"
   >
-    <button
+    <router-link
       v-if="authenticated"
-      class="btn btn-primary hide-phone m-1"
-      @click="goToUrl('/main/priv/backoffice')"
-    >
-      {{ $t('My space') }}
-    </button>
+      :title="$t('My space')"
+      to="/main/priv/backoffice"
+      class="btn admin-button hide-smallest-screen m-1 saooti-admin-menu"
+    />
+    <router-link
+      v-if="isContribution"
+      :title="$t('Upload')"
+      to="/main/priv/upload"
+      class="btn admin-button hide-smallest-screen m-1 saooti-upload"
+    />
     <button
       id="home-dropdown"
       class="btn m-1 admin-button saooti-user"
@@ -112,7 +117,6 @@ export default defineComponent({
     },
     routerBackoffice(){
       return [
-        {title:this.$t('Upload'),class:"btn btn-primary w-100", path:'/main/priv/upload', condition: (state.generalParameters.isContribution as boolean)},
         {title:this.$t('My space'),class:"show-phone octopus-dropdown-item", path:'/main/priv/backoffice', condition: true},
         {title:this.$t('Edit my profile'),class:"octopus-dropdown-item", path:'/main/priv/edit/profile', condition: true},
         {title:this.$t('Edit my organisation'),class:"octopus-dropdown-item", path:'/main/priv/edit/organisation', condition: (state.generalParameters.isOrganisation as boolean) || 1<this.organisationsAvailable.length}];
@@ -124,14 +128,10 @@ export default defineComponent({
     authenticated(): boolean {
       return state.generalParameters.authenticated??false;
     },
-  },
-
-  methods: {
-    goToUrl(url: string): void {
-      if (this.authenticated) {
-        this.$router.push(url);
-      }
+    isContribution(): boolean {
+      return state.generalParameters.isContribution??false;
     },
   },
+
 })
 </script>

package/src/components/misc/Popover.vue

@@ -158,10 +158,11 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-popover{
 	background: white;
 	border: 1px solid #ccc;
-	border-radius: 5px;
+	border-radius: $octopus-borderradius;
 	position: absolute;
 	z-index: 9999;
 	&.octopus-dropdown{

package/src/components/misc/ProgressBar.vue

@@ -52,7 +52,7 @@ export default defineComponent({
     display: flex;
     overflow: hidden;
     background-color:#e9ecef;
-    border-radius: 0.375rem;
+    border-radius: $octopus-borderradius;
     position: relative;
     cursor: pointer;
 

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

@@ -77,8 +77,8 @@ export default defineComponent({
 		position: relative;
 		pointer-events: none;
 		margin: 1.75rem auto;
-		max-height: 75vh;
-		max-width: 640px;
+		max-width: 800px;
+    max-height: 90vh;
 		width: 100%;
 		display: flex;
 		color: #353535 !important;
@@ -88,7 +88,6 @@ export default defineComponent({
 		}
 	}
 	.octopus-modal-body{
-		position: relative;
 		flex: 1 1 auto;
 		padding: 1rem;
 		overflow-x: auto;
@@ -103,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;
@@ -113,7 +112,6 @@ export default defineComponent({
 		min-height: 300px;
 	}
 	.octopus-modal-content{
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		pointer-events: auto;
@@ -123,8 +121,8 @@ export default defineComponent({
 		border: 0;
 		outline: 0;
 		height: auto !important;
-		max-height: calc(100vh - 250px) !important;
-		border-radius: 0.8rem;
+		max-height: initial !important;
+		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();