@saooti/octopus-sdk 31.0.21 → 31.0.24

package/README.md

@@ -597,3 +597,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.19 Add access_token player
  * 31.0.20 Player mobile
  * 31.0.21 Player mobile
+ * 31.0.22 Merge 30
+ * 31.0.23 Qr Code option noir
+ * 31.0.24 Amélioration accessibilité

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.21",
+  "version": "31.0.24",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,7 +14,7 @@
   },
   "main": "./dist/octopus.common.js",
   "dependencies": {
-    "@saooti/octopus-api": "^0.31.2",
+    "@saooti/octopus-api": "^0.31.3",
     "@vue/cli": "^5.0.4",
     "@vue/compat": "^3.2.31",
     "axios": "^0.24.0",

package/src/assets/live.scss

@@ -1,39 +1,39 @@
   .planned-bg {
-    background: #f09653;
+    background: rgb(188, 88, 16);
   }
   .pending-bg {
-    background: #f1643e;
+    background: rgb(216, 58, 14);
   }
   .recording-bg {
-    background: #f34a4a;
+    background: rgb(233, 12, 12);
   }
   .error-bg {
-    background: #ff0000;
+    background: rgb(173, 0, 0);
   }
   .debriefing-bg {
-    background: #6ec66e;
+    background: rgb(54, 134, 54);
   }
   .done-bg {
-    background: #679fe9;
+    background: rgb(42, 117, 218);
   }
   .publishing-bg {
-    background: #7d7d7d;
+    background: rgb(112, 112, 112);
   }
   .planned-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(240, 151, 83, 0.2);
+    box-shadow: 0px 12px 48px 6px rgba(188, 88, 16, 0.2);
   }
   .pending-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(241, 101, 62, 0.2);
+    box-shadow: 0px 12px 48px 6px rgba(216, 58, 14, 0.2);
   }
   .recording-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(243, 74, 74, 0.2);
+    box-shadow: 0px 12px 48px 6px rgba(233, 12, 12, 0.2);
   }
   .debriefing-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(110, 198, 110, 0.2);
+    box-shadow: 0px 12px 48px 6px rgba(54, 134, 54, 0.2);
   }
   .publishing-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(125, 125, 125, 0.2);
+    box-shadow: 0px 12px 48px 6px rgba(112, 112, 112, 0.2);
   }
   .error-shadow {
-    box-shadow: 0px 12px 48px 6px rgba(255, 0, 0, 0.2);
+    box-shadow: 0px 12px 48px 6px rgba(173, 0, 0, 0.2);
   }

package/src/assets/multiselect.scss

@@ -315,7 +315,7 @@
     }
 
     .multiselect__placeholder {
-        color: #adadad;
+        color: #757575;
         display: inline-block;
         margin-bottom: 10px;
         padding-top: 2px;

package/src/components/display/categories/CategoryChooser.vue

@@ -15,6 +15,7 @@
       :disabled="isDisabled"
       label="name"
       track-by="id"
+      :aria-expanded="false"
       :placeholder="$t('Type string to filter by categories')"
       :options="categories"
       :multiple="multiple"

package/src/components/display/comments/CommentBasicView.vue

@@ -7,6 +7,7 @@
       >{{ $t('Live') }}</b>
       <b
         :id="'popover-comment' + comment.comId"
+        role="button"
         tabindex="-1"
         :class="editRight || isValid? '':'text-danger'"
         class="me-2"

package/src/components/display/emission/EmissionChooser.vue

@@ -14,6 +14,7 @@
       v-model="emission"
       label="name"
       track-by="emissionId"
+      :aria-expanded="false"
       :placeholder="$t('Type string to filter by emission')"
       :options="emissions"
       :multiple="false"

package/src/components/display/emission/EmissionItem.vue

@@ -14,6 +14,7 @@
       <img
         v-lazy="emission.imageUrl"
         class="img-box"
+        :title="$t('Emission name image', {name:emission.name})"
       >
       <div class="emission-item-text">
         <div

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -21,6 +21,7 @@
       >
         <img
           v-lazy="emission.imageUrl"
+          :title="$t('Emission name image', {name:emission.name})"
           class="img-box rounded-0"
         >
         <div

package/src/components/display/filter/ProductorSearch.vue

@@ -13,6 +13,8 @@
         v-if="!!organisationId"
         v-model:textInit="keepOrganisation"
         class="m-3"
+        :label="$t('check this box if you want to keep this filter for the rest of your visit')"
+        :display-label="false"
         id-checkbox="organisation-checkbox"
         @clickAction="onKeepOrganisation"
       />

package/src/components/display/organisation/OrganisationChooser.vue

@@ -15,6 +15,7 @@
       v-model="organisation"
       label="name"
       track-by="id"
+      :aria-expanded="false"
       :placeholder="$t('Type string to filter by organisation')"
       :options="organisations"
       :multiple="false"

package/src/components/display/participant/ParticipantItem.vue

@@ -14,6 +14,7 @@
     >
       <img
         v-lazy="participant.imageUrl"
+        :title="$t('Animator image')"
         class="img-box-circle"
       >
       <div class="participant-name">

package/src/components/display/playlist/PlaylistItem.vue

@@ -14,6 +14,7 @@
     >
       <img
         v-lazy="playlist.imageUrl"
+        :title="$t('Playlist name image', {name:name})"
         class="img-box"
       >
     </router-link>

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

@@ -6,6 +6,7 @@
     {{ title }}
     <span
       :id="idPopover"
+      role="button"
       tabindex="-1"
       class="saooti-help m-0"
       :title="title"

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

@@ -6,6 +6,7 @@
     <img
       v-lazy="podcast.imageUrl"
       class="img-box"
+      :alt="$t('Episode name image', {name:podcast.title})"
     >
     <template v-if="isPodcastmaker">
       <div

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

@@ -13,10 +13,12 @@
     >
       <div
         :id="'tag-list-from-podcast-page'+index"
+        role="button"
       >
         <img
           v-if="isOuestFranceTag(tag)"
           class="ouest-france-logo"
+          alt="Logo Ouest France"
           src="/img/ouest_france_logo.svg"
         >
         {{ formateOfTag(tag) }}

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -16,6 +16,7 @@
       class="rubriqueChooser"
       label="name"
       track-by="rubriqueId"
+      :aria-expanded="false"
       :placeholder="$t('Type string to filter by rubrics')"
       :options="rubriques"
       :multiple="multiple"

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

@@ -8,6 +8,13 @@
       class="myQrCode"
       :margin="2" 
     />
+    <ClassicCheckbox
+      v-if="'#000000'!==otherColor"
+      v-model:textInit="isNotBlack"
+      class="flex-shrink-0"
+      id-checkbox="is-black-qr-code"
+      :label="$t('Use organization color')"
+    />
     <button
       class="btn m-3"
       @click="download"
@@ -22,6 +29,7 @@
 </template>
 
 <script lang="ts">
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import { state } from '../../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
 import Snackbar from '../../misc/Snackbar.vue';
@@ -33,7 +41,8 @@ export default defineComponent({
 
   components: {
     Snackbar,
-    QrcodeVue
+    QrcodeVue,
+    ClassicCheckbox
   },
   props: {
     url: { default: '', type: String},
@@ -42,7 +51,9 @@ export default defineComponent({
   data() {
     return {
       size: 200 as number,
-      color: "#40a372" as string
+      color: "#000000" as string,
+      otherColor:"#000000" as string,
+      isNotBlack: false as boolean,
     };
   },
   computed:{
@@ -50,6 +61,15 @@ export default defineComponent({
       return (state.generalParameters.authenticated as boolean);
     },
   },
+  watch:{
+    isNotBlack(){
+      if(this.isNotBlack){
+        this.color = this.otherColor;
+      }else{
+        this.color = "#000000";
+      }
+    }
+  },
   created(){
     this.initColor();
   },
@@ -66,7 +86,7 @@ export default defineComponent({
     },
     async initColor(): Promise<void> {
       if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
-        this.color = state.generalParameters.podcastmakerColor;
+        this.otherColor = state.generalParameters.podcastmakerColor;
         return;
       }
       if (!this.authenticated) return;
@@ -79,7 +99,7 @@ export default defineComponent({
         );
       }
       if (Object.prototype.hasOwnProperty.call(data,'COLOR')) {
-        this.color = data.COLOR;
+        this.otherColor = data.COLOR;
       }
     },
   }

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

@@ -13,6 +13,7 @@
       <span
         v-if="authenticated"
         id="popover-share-help"
+        role="button"
         tabindex="-1"
         class="saooti-help ms-2"
         :title="$t('Help')"

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="module-box text-center-mobile">
+    <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">

package/src/components/form/ClassicCheckbox.vue

@@ -9,10 +9,13 @@
       type="checkbox"
       class="form-check-input"
       :disabled="isDisabled"
+      :title="displayLabel?'':label"
+      :data-selenium="selenium"
       @click="emitClickAction"
     >
     <label
       class="form-check-label"
+      :class="displayLabel? '': 'd-none'"
       :for="idCheckbox"
     >{{ label }}</label>
   </div>
@@ -28,7 +31,9 @@ export default defineComponent({
     label: { default: '', type: String },
     isDisabled: { default: false, type: Boolean },
     textInit: { default: false, type: Boolean },
-    isSwitch:{default:false, type:Boolean}
+    isSwitch:{default:false, type:Boolean},
+    displayLabel: {default:true, type: Boolean},
+    selenium: { default: '', type: String },
   },
   emits: ['update:textInit', 'clickAction'],
 

package/src/components/form/ClassicLoading.vue

@@ -4,9 +4,9 @@
     class="d-flex justify-content-center"
   >
     <div class="spinner-border me-3" />
-    <h3 class="mt-2">
+    <div class="h3 mt-2">
       {{ loadingText }}
-    </h3>
+    </div>
   </div>
   <div
     v-else-if="errorText"

package/src/components/form/ClassicRadio.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="d-flex flex-column">
+  <div
+    class="d-flex"
+    :class="isColumn? 'flex-column':''"
+  >
     <div
       v-for="option in options"
       :key="option.title"
       class="form-check"
+      :class="isColumn? '':'me-2'"
     >
       <input
         :id="idRadio + option.value"
@@ -34,6 +38,7 @@ export default defineComponent({
     isDisabled: { default: false, type: Boolean },
     options: { default: ()=>[], type: Array as () => Array<{title: string, value: string|undefined}> },
     textInit: { default: undefined, type: String },
+    isColumn: {default:true, type:Boolean}
   },
   emits: ['update:textInit'],
 

package/src/components/misc/ErrorMessage.vue

@@ -8,6 +8,7 @@
     >
       <img
         src="/img/caution.png"
+        alt="Caution"
         class="icon-caution"
       >
       <div class="alert-text">

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

@@ -11,7 +11,7 @@
       <template v-if="display">
         <audio
           id="audio-player"
-          :src="!live? audioUrl: undefined"
+          :src="!live? audioUrlToPlay: undefined"
           autoplay
           @timeupdate="onTimeUpdate"
           @ended="onFinished"
@@ -82,6 +82,7 @@ export default defineComponent({
       comments: [] as Array<CommentPodcast>,
       showTimeline: false as boolean,
       largeVersion: false as boolean,
+      audioUrlToPlay: "" as string
     };
   },
   computed: {

package/src/components/mixins/player/playerLive.ts

@@ -100,11 +100,15 @@ export const playerLive = defineComponent({
     },
     async endListeningProgress(): Promise<void> {
       if (!this.downloadId) return;
-      await octopusApi.updatePlayerTime(
-        this.downloadId,
-        Math.round(this.listenTime)
-      );
-      this.setDownloadId(null);
+      try {
+        await octopusApi.updatePlayerTime(
+          this.downloadId,
+          Math.round(this.listenTime)
+        );
+      } catch{
+        //Do nothing
+      }
+      this.downloadId = null;
       this.notListenTime = 0;
       this.lastSend = 0;
       this.listenTime = 0;

package/src/components/mixins/player/playerLogic.ts

@@ -23,6 +23,7 @@ export const playerLogic = defineComponent({
       hlsReady: false as boolean,
       comments: [] as Array<CommentPodcast>,
       showTimeline: false as boolean,
+      audioUrlToPlay: "" as string
     };
   },
   computed: {
@@ -44,8 +45,15 @@ export const playerLogic = defineComponent({
   },
 
   watch: {
-    audioUrl(): void{
+    async audioUrl(): Promise<void>{
       this.playerError = false;
+      if(this.media || !this.podcast || !this.podcast.availability.visibility ||this.listenError){
+        this.audioUrlToPlay = this.audioUrl;
+      }
+      if(!this.podcast){return;}
+      const response = await octopusApi.fetchPodcastDownloadUrl("podcast/download/register/"+this.podcast.podcastId+".mp3"+ this.audioUrl);
+      this.setDownloadId(response.downloadId.toString());
+      this.audioUrlToPlay = response.location;
     },
     podcast: {
       deep: true,
@@ -88,6 +96,14 @@ export const playerLogic = defineComponent({
   },
   
   methods: {
+    getDomain(): string{
+      let domain = "";
+      const domainArray: RegExpExecArray | null = /\.(.+)/.exec(window.location.host);
+      if(domainArray &&  null !== domainArray){
+        domain = domainArray[1];
+      }
+      return domain;
+    },
     getAudioUrl(): string{
       if (this.media) return this.media.audioUrl? this.media.audioUrl:"";
       if (!this.podcast) return '';
@@ -96,7 +112,6 @@ export const playerLogic = defineComponent({
       if (this.listenError) return this.podcast.audioStorageUrl;
       const parameters = [];
       parameters.push('origin=octopus');
-      parameters.push('cookieName=player_' + this.podcast.podcastId);
       parameters.push('listenerId='+this.getListenerId());
       if (
         this.$store.state.authentication &&
@@ -109,7 +124,7 @@ export const playerLogic = defineComponent({
       if("SECURED" === this.podcast.organisation.privacy && this.$store.state.authentication.isAuthenticated && this.$store.state.oAuthParam.accessToken){
         parameters.push('access_token='+this.$store.state.oAuthParam.accessToken);
       }
-      return this.podcast.audioUrl + '?' + parameters.join('&');
+      return this.podcast.podcastId + '.mp3?' + parameters.join('&');
     },
     reInitPlayer():void{
       this.setDownloadId(null);
@@ -123,12 +138,7 @@ export const playerLogic = defineComponent({
       let listenerId = this.getCookie("octopus_listenerId");
       if(!listenerId){
         listenerId = new Date().valueOf().toString() + Math.random();
-        let domain = "";
-        const domainArray: RegExpExecArray | null = /\.(.+)/.exec(window.location.host);
-        if(domainArray &&  null !== domainArray){
-          domain = domainArray[1];
-        }
-        this.setCookie("octopus_listenerId", listenerId, ';domain='+domain);
+        this.setCookie("octopus_listenerId", listenerId, ';domain='+this.getDomain());
       }
       return listenerId;
     },
@@ -153,9 +163,9 @@ export const playerLogic = defineComponent({
       );
     },
     onError(): void {
-      if (this.podcast && !this.listenError) {
+      if (this.podcast && ""!==this.audioUrlToPlay &&  !this.listenError) {
         this.listenError = true;
-      } else if (this.podcast || this.media) {
+      } else if ((this.podcast && ""!==this.audioUrlToPlay ) || this.media) {
         this.playerError = true;
       }
     },
@@ -163,7 +173,7 @@ export const playerLogic = defineComponent({
       const mediaTarget = (event.currentTarget as HTMLMediaElement);
       if (this.podcast || this.live) {
         if (!this.downloadId) {
-          this.loadDownloadId();
+          return;
         }
         if (
           this.live &&
@@ -214,21 +224,5 @@ export const playerLogic = defineComponent({
       }
       this.forceHide = true;
     },
-    loadDownloadId(): void {
-      if (!this.podcast) return;
-      const matching_cookies = document.cookie
-        .split(';')
-        .map(item => {
-          const _return = item.trim().split('=');
-          return _return.map(item => item.trim());
-        })
-        .filter(item => {
-          if(!this.podcast){return '';}
-          return 'player_' + this.podcast.podcastId === item[0];
-        });
-      if (1 === matching_cookies.length) {
-        this.setDownloadId(matching_cookies[0][1]);
-      }
-    },
   },
 })

package/src/components/pages/Participant.vue

@@ -16,6 +16,7 @@
       >
         <img
           v-lazy="participant.imageUrl"
+          :title="$t('Animator image')"
           class="img-box-circle mb-3"
         >
         <h2 class="text-capitalize">

package/src/locale/de.ts

@@ -299,4 +299,5 @@ export default{
   'Podcast tags': "Podcast-Tags",
   "Enlarge":"Vergrößern",
   "Reduce":"Reduzieren",
+  "Use organization color":"Verwenden Sie die Organisationsfarbe",
 }

package/src/locale/en.ts

@@ -300,4 +300,5 @@ export default{
   "You do not have the right to access this page":"You do not have the right to access this page",
   "Enlarge":"Enlarge",
   "Reduce":"Reduce",
+  "Use organization color":"Use organization color",
 };

package/src/locale/es.ts

@@ -299,4 +299,5 @@ export default{
   'Podcast tags': 'Etiquetas de pódcast',
   "Enlarge":"Agrandar",
   "Reduce":"Reducir",
+  "Use organization color":"Usar el color de la organización",
 }

package/src/locale/fr.ts

@@ -300,4 +300,5 @@ export default{
   "You do not have the right to access this page":"Vous n’avez pas le droit d’accéder à cette page",
   "Enlarge":"Agrandir",
   "Reduce":"Réduire",
+  "Use organization color":"Utiliser la couleur de l'organisation",
 };

package/src/locale/it.ts

@@ -297,4 +297,5 @@ export default{
     'More episodes of this category : ': "Altri episodi su questo tema : {name}",
     "Enlarge":"Ingrandire",
     "Reduce":"Ridurre",
+    "Use organization color":"Usa il colore dell'organizzazione",
   };

package/src/locale/sl.ts

@@ -299,4 +299,5 @@ export default{
   'Podcast tags': 'Oznake podkastov',
   "Enlarge":"Povečaj",
   "Reduce":"Zmanjšaj",
+  "Use organization color":"Uporabite barvo organizacije",
 }

package/src/sass/_variables.scss

@@ -6,6 +6,8 @@ $font-family-sans-serif: 'Roboto', sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 $primary: #32815C;
+$secondary: #636C73;
+$danger: #E22C27;
 
 // Colors
 $blue: #3490dc;