@saooti/octopus-sdk 31.0.6 → 31.0.9

package/src/components/display/podcasts/PodcastItemInfo.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="d-contents podcast-item-info">
+    <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
+      <div class="me-3 small-text">
+        {{ date }}
+      </div>
+      <div
+        v-if="0 !== durationString.length"
+        class="small-text"
+      >
+        {{ durationString }}
+      </div>
+    </div>
+    <AnimatorsItem :animators="animators" />
+    <router-link
+      :to="{
+        name: 'podcast',
+        params: { podcastId: podcastId },
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      class="text-dark d-flex flex-column flex-grow-1"
+    >
+      <div class="title-podcast-item">
+        {{ title }}
+      </div>
+    </router-link>
+    <PodcastPlayBar
+      :podcast-id="podcastId"
+      :duration="duration"
+      class="mx-2"
+    />
+    <div class="d-flex justify-content-between">
+      <router-link
+        v-if="!isPodcastmaker"
+        :to="{
+          name: 'productor',
+          params: { productorId: podcastOrganisationId },
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="text-dark producer-podcast-item"
+      >
+        <div>{{ '© ' + podcastOrganisationName }}</div>
+      </router-link>
+      <span
+        v-if="editRight && podcastOrder && podcastOrder > 1"
+        class="saooti-star-bounty text-danger pe-2"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import AnimatorsItem from './AnimatorsItem.vue';
+import { state } from '../../../store/paramStore';
+import moment from 'moment';
+// @ts-ignore
+import humanizeDuration from 'humanize-duration';
+import PodcastPlayBar from './PodcastPlayBar.vue';
+import { defineComponent } from 'vue'
+import { Participant } from '@/store/class/general/participant';
+export default defineComponent({
+  name: 'PodcastItemInfo',
+  
+  components: {
+    AnimatorsItem,
+    PodcastPlayBar
+  },
+
+  props: {
+    podcastId: { default: undefined, type: Number},
+    title: { default: "", type: String},
+    pubDate: { default: "", type: String},
+    podcastOrganisationId: { default: "", type: String},
+    podcastOrganisationName: { default: "", type: String},
+    podcastOrder: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
+    animators: { default: undefined, type: Object as ()=> Array<Participant>},
+  },
+  
+  computed: {
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
+    },
+    date(): string {
+      return moment(this.pubDate).format('D MMMM YYYY, HH[h]mm');
+    },
+    organisationId(): string|undefined {
+      return state.generalParameters.organisationId;
+    },
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+    editRight(): boolean {
+      if (
+        (this.authenticated &&
+          this.organisationId === this.podcastOrganisationId) ||
+        state.generalParameters.isAdmin
+      )
+        return true;
+      return false;
+    },
+    durationString(): string {
+      if (this.duration <= 1) return '';
+      if (this.duration > 600000) {
+        return humanizeDuration(this.duration, {
+          language: 'short',
+          largest: 1,
+          round: true,
+          languages: {
+            short: {
+              y: () => 'years',
+              mo: () => 'months',
+              w: () => 'weeks',
+              d: () => 'days',
+              h: () => 'h',
+              m: () => 'min',
+              s: () => 'sec',
+              ms: () => 'ms',
+            },
+          },
+        });
+      }
+      return humanizeDuration(this.duration, {
+        language: 'short',
+        largest: 2,
+        round: true,
+        languages: {
+          short: {
+            m: () => 'min',
+            s: () => 'sec',
+            ms: () => 'ms',
+          },
+        },
+      });
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+.podcast-item-info {
+  .text-secondary {
+    margin: 0.5rem !important;
+  }
+  .saooti-star-bounty {
+    font-size: 22px;
+  }
+  .title-podcast-item {
+    font-weight: 700;
+    margin: 0.25rem 0.5rem 0.5rem;
+    overflow: hidden;
+    display: -webkit-box;
+    flex-grow: 1;
+    font-size: 0.7rem;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    min-height: 3rem;
+    line-height: 1rem;
+    word-break: break-word;
+  }
+
+  .producer-podcast-item {
+    margin: 0.2rem 0.5rem 0.5rem;
+    font-size: 0.55rem;
+    color: #666;
+  }
+}
+}
+</style>

package/src/components/display/podcasts/PodcastList.vue

@@ -4,38 +4,39 @@
       :loading-text="loading?$t('Loading podcasts ...'):undefined"
       :error-text="loaded && !podcasts.length?$t(`No podcast match your query`):undefined"
     />
-    <div
-      v-if="showCount && loaded && podcasts.length > 1"
-      class="text-secondary mb-2"
-    >
-      {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
-    </div>
-    <ul
-      v-show="loaded"
-      class="podcast-list"
-    >
-      <PodcastItem
-        v-for="p in podcasts"
-        :key="p.podcastId"
-        :podcast="p"
-      />
-    </ul>
-    <button
-      v-show="!allFetched && loaded"
-      class="btn"
-      :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4' : 'btn-more'"
-      :disabled="inFetching"
-      :title="$t('See more')"
-      @click="displayMore"
-    >
-      <template v-if="buttonPlus">
-        {{ $t('See more') }}
-      </template>
+    <template v-if="loaded">
       <div
-        :class="buttonPlus?'ms-1':''"
-        class="saooti-more"
-      />
-    </button>
+        v-if="showCount && podcasts.length > 1"
+        class="text-secondary mb-2"
+      >
+        {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
+      </div>
+      <ul
+        class="podcast-list"
+      >
+        <PodcastItem
+          v-for="p in podcasts"
+          :key="p.podcastId"
+          :podcast="p"
+        />
+      </ul>
+      <button
+        v-show="!allFetched"
+        class="btn"
+        :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4' : 'btn-more'"
+        :disabled="inFetching"
+        :title="$t('See more')"
+        @click="displayMore"
+      >
+        <template v-if="buttonPlus">
+          {{ $t('See more') }}
+        </template>
+        <div
+          :class="buttonPlus?'ms-1':''"
+          class="saooti-more"
+        />
+      </button>
+    </template>
   </div>
 </template>
 
@@ -93,7 +94,7 @@ export default defineComponent({
       inFetching: false as boolean,
     };
   },
-  
+
   computed: {
     allFetched(): boolean {
       return this.dfirst >= this.totalCount;
@@ -144,8 +145,8 @@ export default defineComponent({
     },
   },
   
-  created() {
-    this.fetchContent(true);
+  async created() {
+    await this.fetchContent(true);
   },
   methods: {
     async fetchContent(reset: boolean): Promise<void> {

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -139,12 +139,6 @@
               :message="$t('Podcast not validated')"
             />
           </div>
-          <ShareButtons
-            v-if="isDownloadButton"
-            :podcast="podcast"
-            :big-round="true"
-            :audio-url="podcast.audioUrl"
-          />
         </div>
       </div>
     </div>
@@ -168,14 +162,12 @@ import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
-const ShareButtons = defineAsyncComponent(() => import('../sharing/ShareButtons.vue'));
 const ErrorMessage = defineAsyncComponent(() => import('../../misc/ErrorMessage.vue'));
 export default defineComponent({
   name: "PodcastModuleBox",
   components: {
     PodcastImage,
     ParticipantDescription,
-    ShareButtons,
     TagList,
     ErrorMessage,
     PodcastPlayBar
@@ -209,9 +201,6 @@ export default defineComponent({
     isOuestFrance(): boolean {
       return (state.podcastPage.ouestFranceStyle as boolean);
     },
-    isDownloadButton(): boolean {
-      return (state.podcastPage.downloadButton as boolean);
-    },
     date(): string {
       if (this.podcast && 1970 !== moment(this.podcast.pubDate).year()){
         return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');

package/src/components/display/podcasts/PodcastPlayBar.vue

@@ -32,7 +32,6 @@
 </template>
 
 <script lang="ts">
-import { Podcast } from '@/store/class/general/podcast';
 import DurationHelper from '../../../helper/duration';
 import { displayMethods } from '../../mixins/functions';
 import { state } from '../../../store/paramStore';
@@ -41,21 +40,22 @@ export default defineComponent({
   name: 'PodcastPlayBar',
   mixins: [displayMethods],
   props: {
-    podcast: { default: ()=>({}), type: Object as ()=>Podcast },
+    podcastId: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
   },
   computed: {
     isProgressBar(): boolean{
       return (state.emissionsPage.progressBar as boolean);
     },
     percentProgress(): number{
-      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){
+      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){
         return 0;
       }
       if(!this.$store.state.player.elapsed){return 0;}
       return this.$store.state.player.elapsed * 100;
     },
     playedTime(): string{
-      if(this.$store.state.player.podcast && this.podcast.podcastId === this.$store.state.player.podcast.podcastId){
+      if(this.$store.state.player.podcast && this.podcastId === this.$store.state.player.podcast.podcastId){
         if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
           return DurationHelper.formatDuration(
             Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
@@ -65,12 +65,12 @@ export default defineComponent({
       return '00:00';
     },
     totalTime(): string {
-      return DurationHelper.formatDuration(Math.round(this.podcast.duration/1000));
+      return DurationHelper.formatDuration(Math.round(this.duration/1000));
     },
   },
   methods: {
     seekTo(event: MouseEvent): void {
-      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){return;}
+      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){return;}
       const rect = (event.currentTarget as Element).getBoundingClientRect();
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;

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

@@ -32,17 +32,18 @@
         verticalDisplay ? 'd-flex-row' : '',
       ]"
     >
-      <a
-        v-if="audioUrl"
-        class="btn btn-big-round"
+      <button
+        v-if="isDownloadButton"
+        class="text-dark"
+        :class="[
+          bigRound ? 'btn btn-big-round' : 'btn share-btn mb-2',
+          verticalDisplay ? '' : 'mx-2',
+        ]"
         :title="$t('Downloading')"
-        :href="audioUrl"
-        rel="noopener"
-        target="_blank"
-        download
+        @click="onDownload(podcast.audioUrl, podcast.title)"
       >
         <div class="saooti-download-bounty" />
-      </a>
+      </button>
       <a
         rel="noopener"
         target="_blank"
@@ -283,6 +284,12 @@ export default defineComponent({
   },
 
   computed: {
+    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;
     },
@@ -334,7 +341,24 @@ export default defineComponent({
       let check = false;
       (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent);
       return check;
-    }
+    },
+    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/form/ClassicSelect.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="classic-select">
+    <label
+      :for="idSelect"
+      class="form-label mt-2"
+      :class="displayLabel?'':'d-none'"
+    >{{ label }}</label>
+    <select
+      :id="idSelect"
+      v-model="textValue"
+      :disabled="isDisabled"
+      class="c-hand"
+    >
+      <option
+        v-for="option in options"
+        :key="option.title"
+        :value="option.value"
+      >
+        {{ option.title }}
+      </option>
+    </select>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicSelect',
+
+  props: {
+    idSelect: { default: '', type: String },
+    label: { default: '', type: String },
+    displayLabel:{default: true, type: Boolean},
+    isDisabled: { default: false, type: Boolean },
+    options: { default: ()=>[], type: Array as () => Array<{title: string, value: string|undefined}> },
+    textInit: { default: undefined, type: String },
+  },
+
+  emits: ['update:textInit'],
+
+  data() {
+    return {
+      textValue: undefined as string|undefined,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+		textInit(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		this.textValue = this.textInit;
+	}
+});
+</script>
+<style lang="scss">
+.octopus-app{
+.classic-select select{
+  width: inherit;
+}
+}
+</style>

package/src/components/misc/Footer.vue

@@ -92,12 +92,18 @@
               $t('Used libraries')
             }}
           </router-link>
-          <a
-            class="link-hover c-hand"
-            @click="changeLanguage"
-          >{{
-            $t('Change locale')
-          }}</a>
+          <ClassicSelect
+            v-model:textInit="language"
+            :display-label="false"
+            id-select="language-chooser-select"
+            :label="$t('Change locale')"
+            :options="[{title:'Deutsch', value:'de'},
+                       {title:'English', value:'en'},
+                       {title:'Español', value:'es'},
+                       {title:'Français', value:'fr'},
+                       {title:'Italiano', value:'it'},
+                       {title:'Slovenščina', value:'sl'}]"
+          />
         </div>
       </div>
       <hr class="show-phone">
@@ -136,6 +142,7 @@
 </template>
 
 <script lang="ts">
+import ClassicSelect from '../form/ClassicSelect.vue';
 import Player from './Player.vue';
 import { state } from '../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
@@ -147,8 +154,16 @@ export default defineComponent({
   name: 'Footer',
   components: {
     Player,
+    ClassicSelect
+  },
+
+  data() {
+    return {
+      language: this.$i18n.locale as string,
+    };
   },
 
+
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
@@ -167,6 +182,12 @@ export default defineComponent({
     },
   },
 
+  watch:{
+    language(){
+      this.changeLanguage();
+    }
+  },
+
   methods: {
     showBlackBorder(hide: boolean): void {
       const footerElement = document.getElementById('footer');
@@ -178,11 +199,7 @@ export default defineComponent({
       }
     },
     changeLanguage(): void{
-      if('fr'===this.$i18n.locale){
-        this.$i18n.locale= "en";
-      }else{
-        this.$i18n.locale= "fr";
-      }
+      this.$i18n.locale= this.language;
       moment.locale(this.$i18n.locale);
       octopusApi.fetchCategories({ lang: this.$i18n.locale }).then((data: Array<Category>) => {
         this.$store.commit('categoriesSet', data);

package/src/components/misc/PlayerButtons.vue

@@ -4,7 +4,7 @@
     :to="podcastShareUrl"
   >
     <img
-      :src="podcastImage"
+      v-lazy="podcastImage"
       :alt="$t('Podcast image')"
       class="player-image"
     >

package/src/components/pages/Emission.vue

@@ -26,7 +26,7 @@
             <div class="mb-5 mt-3 descriptionText">
               <img
                 v-if="!isOuestFrance"
-                :src="imageUrl"
+                v-lazy="imageUrl"
                 :alt="$t('Emission name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >
@@ -246,7 +246,7 @@ export default defineComponent({
       try {
         const data: Emission = await octopusApi.fetchEmission(this.emissionId);
         this.emission = data;
-        if(this.emission.orga.private && this.filterOrga!==this.emission.orga.id){
+        if("PUBLIC"!==this.emission.orga.privacy && this.filterOrga!==this.emission.orga.id){
           this.initError();
           return;
         }

package/src/components/pages/Participant.vue

@@ -14,12 +14,10 @@
       <div
         class="d-flex flex-column align-items-center mb-3"
       >
-        <div
+        <img
+          v-lazy="participant.imageUrl"
           class="img-box-circle mb-3"
-          :style="{
-            'background-image': 'url(\'' + participant.imageUrl + '\')',
-          }"
-        />
+        >
         <h2 class="text-capitalize">
           {{ name }}
         </h2>
@@ -186,7 +184,7 @@ export default defineComponent({
       this.loaded = false;
       try {
         const data = await octopusApi.fetchParticipant(this.participantId ? this.participantId.toString(): "");
-        if(data && data.orga && data.orga.private && this.filterOrga!==data.orga.id){
+        if(data && data.orga && "PUBLIC"!==data.orga.privacy && this.filterOrga!==data.orga.id){
           this.initError();
           return;
         }

package/src/components/pages/Playlist.vue

@@ -15,7 +15,7 @@
             <h2>{{ name }}</h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
-                :src="imageUrl"
+                v-lazy="imageUrl"
                 :alt="$t('Playlist name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >
@@ -143,7 +143,7 @@ export default defineComponent({
         this.error = false;
         const data: Playlist = await octopusApi.fetchPlaylist(this.playlistId ? this.playlistId.toString(): "");
         this.playlist = data;
-        if(this.playlist.organisation.private && this.filterOrga!==this.playlist.organisation.id){
+        if("PUBLIC"!==this.playlist.organisation.privacy && this.filterOrga!==this.playlist.organisation.id){
           this.initError();
           return;
         }

package/src/components/pages/Podcast.vue

@@ -327,7 +327,7 @@ export default defineComponent({
     async getPodcastDetails(podcastId: number): Promise<void> {
       try {
         const data : Podcast = await octopusApi.fetchPodcast(podcastId.toString());
-        if(data.organisation.private && this.filterOrga!==data.organisation.id){
+        if("PUBLIC"!==data.organisation.privacy && this.filterOrga!==data.organisation.id){
           this.initError();
           return;
         }