@saooti/octopus-sdk 36.0.2 → 36.0.4

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

@@ -1,61 +1,77 @@
 <template>
-  <button
-    v-if="isDownloadButton"
-    class="text-dark"
-    :class="getClass()"
-    :title="$t('Downloading')"
-    @click="onDownload(podcast.audioUrl, podcast.title)"
-  >
-    <div class="saooti-download" />
-  </button>
-  <template
-    v-for="button in arrayShareButtons"
-    :key="button.title"
-  >
-    <a
-      v-if="button.condition"
-      rel="noopener"
-      target="_blank"
-      :href="button.url"
-      :class="getClass(button.className)"
-      :title="button.title"
-    >
-      <div :class="button.icon" />
-    </a>
-  </template>
-  <a
-    v-if="''!==rssUrl && displayRss"
-    rel="noopener"
-    target="_blank"
-    :class="getClass()"
-    :href="rssUrl"
-    :title="titleRssButton"
-    @click.prevent="openPopup()"
-  >
-    <div class="saooti-rss" />
-  </a>
-  <button
-    :class="getClass()"
-    :title="$t('Copy this page URL')"
-    @click="onCopyCode(urlPage,afterCopy)"
-  >
-    <div class="saooti-link" />
-  </button>
-  <button
-    v-if="podcast || emission ||playlist"
-    :class="getClass()"
-    :title="$t('Share newsletter')"
-    @click="newsletter = true"
-  >
-    <div class="saooti-newsletter" />
-  </button>
-  <button
-    :class="getClass()"
-    :title="$t('Share QR Code')"
-    @click="qrCode = true"
-  >
-    <div class="saooti-qrcode" />
-  </button>
+  <div class="d-flex flex-column me-2">
+    <div class="h4 mb-2">{{$t('Social networks')}}</div>
+    <div class="d-flex align-items-center">
+      <template
+        v-for="button in arrayShareButtons"
+        :key="button.title"
+      >
+        <a
+          v-if="button.condition"
+          rel="noopener"
+          target="_blank"
+          :href="button.url"
+          :class="getClass(button.className)"
+          class="me-2"
+          :title="button.title"
+        >
+          <div :class="button.icon" />
+        </a>
+      </template>
+    </div>
+  </div>
+  <div class="d-flex flex-column me-2" v-if="podcast || emission ||playlist">
+    <div class="h4 mb-2">{{$t('Newsletter')}}</div>
+    <div class="d-flex align-items-center justify-content-center">
+      <button
+        :class="getClass()"
+        class="saooti-newsletter"
+        :title="$t('Share newsletter')"
+        @click="newsletter = true"
+      />
+    </div>
+  </div>
+
+  <div class="d-flex flex-column me-2">
+    <div class="h4 mb-2">{{$t('QR Code')}}</div>
+    <div class="d-flex align-items-center justify-content-center">
+      <button
+        :class="getClass()"
+        :title="$t('Share QR Code')"
+        @click="qrCode = true"
+        class="saooti-qrcode"
+      />
+    </div>
+  </div>
+
+  <div class="d-flex flex-column me-2">
+    <div class="h4 mb-2">{{$t('Copy this page URL')}}</div>
+    <div class="d-flex align-items-center justify-content-center">
+      <button
+        :class="getClass()"
+        class="saooti-link"
+        :title="$t('Copy this page URL')"
+        @click="onCopyCode(urlPage,afterCopy)"
+      />
+    </div>
+  </div>
+
+  <div class="d-flex flex-column me-2" v-if="''!==rssUrl && displayRss">
+    <div class="h4 mb-2">{{$t('Rss feed')}}</div>
+    <div class="d-flex align-items-center justify-content-center">
+      <a
+        rel="noopener"
+        target="_blank"
+        class="saooti-rss"
+        :class="getClass()"
+        :href="rssUrl"
+        :title="titleRssButton"
+        @click.prevent="openPopup()"
+      />
+    </div>
+  </div>
+ 
+  
   <ClipboardModal
     v-if="dataRSSSave"
     :link="rssUrl"
@@ -140,12 +156,6 @@ export default defineComponent({
         { title: 'Whatsapp', icon:'saooti-Whatsapp', className:'btn-whatsapp', url :`whatsapp://send?text=${this.urlPage}`, condition:  window.matchMedia('(hover: none)').matches}
       ]
     },
-    isDownloadButton(): boolean{
-      return this.isDownloadButtonParam && undefined!==this.podcast && (!this.podcast.tags || !this.podcast.tags.includes('copyright'));
-    },
-    isDownloadButtonParam(): boolean {
-      return (state.podcastPage.downloadButton as boolean);
-    },
     urlPage(): string{
       return window.location.href;
     },
@@ -179,9 +189,7 @@ export default defineComponent({
 
   methods: {
     getClass(className='btn-rss'): string{
-      let returnString = `btn ${className} share-btn mb-2 text-dark`;
-      returnString+= this.isVertical ? '' : ' mx-2';
-      return returnString;
+      return `btn ${className} share-btn mb-2 text-dark`;
     },
     openPopup(): void {
       this.dataRSSSave = !this.dataRSSSave;
@@ -189,23 +197,6 @@ export default defineComponent({
     afterCopy(): void{
       (this.$refs.snackbar as InstanceType<typeof Snackbar>).open(this.$t('Link in clipboard'));
     },
-    onDownload(urlToDownload: string, nameOfDownload: string): void{
-      const xhr = new XMLHttpRequest();
-      xhr.open('GET', urlToDownload, true);
-      xhr.responseType = 'blob';
-      xhr.onload = function() {
-        const urlCreator = window.URL || window.webkitURL;
-        const imageUrl = urlCreator.createObjectURL(this.response);
-        const tag = document.createElement('a');
-        tag.href = imageUrl;
-        tag.target = '_blank';
-        tag.download = nameOfDownload.replace(/ /g, '_');
-        document.body.appendChild(tag);
-        tag.click();
-        document.body.removeChild(tag);
-      };
-      xhr.send();
-    },
   },
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="module-box">
-    <h3>{{ $t('Distribute') }}</h3>
+    <h2 class="big-h2 mb-3">{{ $t('Distribute') }}</h2>
     <div class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
       <div class="text-primary hide-small-screen text-break">
@@ -101,10 +101,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
 .sharing-distribution-container {
   border: 0.05rem solid #dee2e6;
-  border-radius: 0.3rem;
+  border-radius: $octopus-borderradius;
   padding: 0.4rem;
   margin: 0.2rem 1rem 0.2rem 0;
   display: flex;

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;