@saooti/octopus-sdk 31.0.46 → 32.0.2

package/README.md

@@ -637,3 +637,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.44 Début CRUD API
  * 31.0.45 Live 
  * 31.0.46 Pb css
+
+
+ * 32.0.0 Passage en 32
+ * 32.0.1 Navigation clavier
+ * 32.0.2 Newsletter pour emission & playlist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.46",
+  "version": "32.0.2",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/api/classicCrud.ts

@@ -14,6 +14,11 @@ enum ModuleApi {
   }
 /* eslint-disable */
 export default {
+    async fetchData<Type>(state: StoreState,moduleName: ModuleApi,wsPath:string): Promise<Type>{
+        console.log(state,moduleName,wsPath);
+        const response = await axios.get('/mock');
+        return response.data;
+    },
     async postData<Type>(state: StoreState,moduleName: ModuleApi,wsPath:string, elementToCreate: unknown): Promise<Type>{
         console.log(state,moduleName,wsPath);
         const response = await axios.post('/mock', elementToCreate, {

package/src/assets/bootstrap-diff.scss

@@ -22,7 +22,6 @@
         &:focus,
         &:active,
         &.active {
-          outline: none !important;
           box-shadow: none;
         }
         &:hover{

package/src/assets/form.scss

@@ -1,16 +1,13 @@
 .octopus-app{
-	.input-no-outline{
-		outline-width: 0 !important;
-	}
-	:-moz-focusring {
-		outline: 0px solid black;
+	button.btn-transparent{
+		background: transparent;
+		border: 0;
 	}
 	.width-auto{
 	width: auto !important;
 	}
 	select {
 		background: white !important;
-		outline-color: transparent !important;
 		padding: 0.5rem;
 		border: 0.1rem solid #dee2e6;
 		border-radius: 0.3rem;
@@ -38,7 +35,6 @@
 		height: 2rem;
 		line-height: 1.2rem;
 		max-width: 100%;
-		outline: none;
 		padding: 0.25rem 0.4rem;
 		position: relative;
 		-webkit-transition: background 0.2s, border 0.2s, color 0.2s, -webkit-box-shadow 0.2s;

package/src/assets/general.scss

@@ -13,6 +13,10 @@ body{
   overscroll-behavior-y: contain;
 }
 .octopus-app{
+  *:focus-visible{
+    outline: none;
+    box-shadow: 0 0 10px 1px $octopus-primary-color !important;
+  }
   a{
     word-break: break-word;
   }
@@ -138,7 +142,6 @@ body{
 	}
   a, a:hover{
     text-decoration: none;
-    outline-width: 0;
   }
   a.link-hover{
     color: black !important;

package/src/assets/multiselect.scss

@@ -140,10 +140,6 @@
         box-sizing: border-box;
     }
 
-    .multiselect:focus {
-        outline: none;
-    }
-
     .multiselect--disabled {
         background: #ededed;
         pointer-events: none;
@@ -195,7 +191,6 @@
     .multiselect__input:focus,
     .multiselect__single:focus {
         border-color: #a8a8a8;
-        outline: none;
     }
 
     .multiselect__single {
@@ -392,7 +387,6 @@
 
     .multiselect__option--highlight {
         background: #f8f9fa;
-        outline: none;
         color: #000;
     }
 

package/src/assets/share.scss

@@ -143,6 +143,7 @@
     display: flex;
     flex-direction: column;
     max-height: 13rem;
+    flex-grow: 1;
     @media (max-width: 450px) {
       padding: 0.5rem 0;
       text-align: center;

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

@@ -316,7 +316,6 @@ export default defineComponent({
       color: black;
     }
     textarea {
-      outline-width: 0 !important;
       border-top: 0;
       border-right: 0;
       border-left: 0;

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

@@ -8,6 +8,7 @@
     />
     <template v-else>
       <input
+        ref="focusElement"
         v-model="temporaryName"
         class="form-input"
         type="text"
@@ -135,7 +136,7 @@ import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
 import CommentBasicView from './CommentBasicView.vue';
 import Constants from '../../../../public/config';
-import { defineComponent, defineAsyncComponent } from 'vue';
+import { defineComponent, defineAsyncComponent, nextTick } from 'vue';
 const CommentInput = defineAsyncComponent(() => import('./CommentInput.vue'));
 const CommentParentInfo = defineAsyncComponent(() => import('./CommentParentInfo.vue'));
 const EditCommentBox = defineAsyncComponent(() => import('@/components/display/edit/EditCommentBox.vue'));
@@ -250,6 +251,9 @@ export default defineComponent({
       this.temporaryName = this.comment.name && null !== this.comment.name ? this.comment.name : '';
       this.temporaryContent = this.comment.content && null !== this.comment.content ? this.comment.content : '';
       this.isEditing = true;
+      this.$nextTick(() => {
+        (this.$refs.focusElement as HTMLElement)?.focus();
+      });
     },
     validEdit(): void {
       const comment = this.comment;

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

@@ -9,7 +9,7 @@
         query: { productor: filterOrga },
       }"
       :title="$t('Emission')"
-      class="d-flex text-dark"
+      class="d-flex flex-grow-1 text-dark"
     >
       <img
         v-lazy="emission.imageUrl"

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

@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <div
-      class="d-flex justify-content-center mb-3 text-secondary c-hand"
+  <div class="d-flex flex-column justify-content-center align-items-center">
+    <button
+      class="d-flex justify-content-center mb-3 text-secondary btn-transparent"
       @click="showFilters = !showFilters"
     >
       <div>{{ $t('Advanced filters') }}</div>
@@ -9,7 +9,7 @@
         class="h3 saooti-arrow_down m-0"
         :class="{ 'arrow-transform': showFilters }"
       />
-    </div>
+    </button>
     <div
       v-show="showFilters"
       class="advanced-search-container"
@@ -53,7 +53,7 @@
             >
               <template #default="{ inputValue, inputEvents }">
                 <input
-                  class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
+                  class="px-2 py-1 border rounded focus:border-blue-300"
                   :value="inputValue"
                   v-on="inputEvents"
                 >
@@ -77,7 +77,7 @@
             >
               <template #default="{ inputValue, inputEvents }">
                 <input
-                  class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
+                  class="px-2 py-1 border rounded focus:border-blue-300"
                   :value="inputValue"
                   v-on="inputEvents"
                 >

package/src/components/display/list/ListPaginate.vue

@@ -8,7 +8,7 @@
       :error-text="errorText"
     />
     <template v-if="!loading">
-      <div class="paginate-section page-box">
+      <div class="paginate-section mb-2 page-box">
         <div class="text-secondary">
           <template v-if="textCount && (windowWidth > 1300 || windowWidth<=960)">
             {{ textCount }}

package/src/components/display/list/Paginate.vue

@@ -207,7 +207,6 @@ export default defineComponent({
 		border-right: 0;
 		border-left: 0;
 		background: transparent !important;
-		outline-width: 0;
 	}
   .btn{
     border-radius: 0;

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

@@ -10,23 +10,14 @@
         query: { productor: $store.state.filter.organisationId },
       }"
       :title="$t('Playlist')"
-      class="text-dark"
+      class="d-flex flex-grow-1 text-dark"
     >
       <img
         v-lazy="playlist.imageUrl"
         :title="$t('Playlist name image', {name:name})"
         class="img-box"
       >
-    </router-link>
-    <div class="emission-item-text">
-      <router-link
-        :to="{
-          name: 'playlist',
-          params: { playlistId: playlist.playlistId },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="text-dark"
-      >
+      <div class="emission-item-text">
         <div class="emission-name">
           <img
             v-if="!activePlaylist && !isPodcastmaker"
@@ -46,22 +37,22 @@
           />
           <!-- eslint-enable -->
         </div>
-      </router-link>
-      <div class="flex-grow-1" />
-      <router-link
-        v-if="!isPodcastmaker && playlist.organisation"
-        :to="{
-          name: 'productor',
-          params: { productorId: playlist.organisation.id },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="text-dark"
-      >
-        <div class="emission-producer primary-darker">
-          © {{ playlist.organisation.name }}
-        </div>
-      </router-link>
-    </div>
+        <div class="flex-grow-1" />
+        <router-link
+          v-if="!isPodcastmaker && playlist.organisation"
+          :to="{
+            name: 'productor',
+            params: { productorId: playlist.organisation.id },
+            query: { productor: $store.state.filter.organisationId },
+          }"
+          class="text-dark"
+        >
+          <div class="emission-producer primary-darker">
+            © {{ playlist.organisation.name }}
+          </div>
+        </router-link>
+      </div>
+    </router-link>
   </li>
 </template>
 

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

@@ -6,7 +6,7 @@
     <ClassicSearch
       v-if="!loading && notEmptyPlaylist"
       v-model:textInit="searchPattern"
-      class="width-600 align-self-baseline"
+      class="width-600 align-self-baseline mb-2"
       id-checkbox="podcast-list-search"
       :label="$t('Search')"
     />

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

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

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

@@ -1,7 +1,7 @@
 <template>
   <div class="p-3">
     <h2>{{ titleFilter }}</h2>
-    <div class="d-flex align-items-center flex-wrap">
+    <div class="d-flex align-items-center flex-wrap mb-2">
       <div
         class="d-flex align-items-center flex-grow-1 me-3"
       >

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

@@ -29,7 +29,7 @@
     >
       {{ $t('Recorded in live') }}
     </div>
-    <div
+    <button
       v-if="hidePlay || recordingLive"
       class="podcast-image-play-button"
       :class="classicPodcastPlay ? '' : 'transparent-background'"
@@ -74,7 +74,7 @@
       >
         {{ textVisible }}
       </div>
-    </div>
+    </button>
     <div
       v-if="displayDescription && isMobile"
       class="background-icon primary-bg saooti-arrow-up2"
@@ -330,7 +330,7 @@ export default defineComponent({
   .transparent-background {
     background-color: rgba(255, 255, 255, 0.5);
   }
-  .podcast-image-play-button {
+  .podcast-image-play-button{
     position: absolute;
     display: flex;
     align-items: center;
@@ -341,6 +341,11 @@ export default defineComponent({
     bottom: 0;
     cursor: pointer;
     flex-direction: column;
+    background: transparent;
+    border-width: 0;
+    &:focus{
+      background: rgba(0, 0, 0, 0.5);
+    }
 
     .icon-container {
       background: #00000050;

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

@@ -62,7 +62,7 @@
                 type="number"
                 min="1"
                 max="50"
-                class="input-share-player input-no-outline text-center m-2"
+                class="input-share-player  text-center m-2"
               >
               <label
                 for="number-input"

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

@@ -11,7 +11,7 @@
           v-if="authenticated"
           id="popover-share-help"
           role="button"
-          tabindex="-1"
+          tabindex="0"
           class="saooti-help ms-2 align-items-start"
           :title="$t('Help')"
         />
@@ -27,6 +27,7 @@
         <ShareButtonsIntern
           :podcast="podcast"
           :emission="emission"
+          :playlist="playlist"
           :participant-id="participantId"
           :organisation-id="organisationId"
           :not-exclusive="notExclusive"
@@ -40,6 +41,7 @@
       <ShareButtonsIntern
         :podcast="podcast"
         :emission="emission"
+        :playlist="playlist"
         :participant-id="participantId"
         :organisation-id="organisationId"
         :not-exclusive="notExclusive"
@@ -56,6 +58,7 @@ import { displayMethods } from '../../mixins/functions';
 import Popover from '../../misc/Popover.vue';
 import ShareButtonsIntern from './ShareButtonsIntern.vue';
 import { defineComponent } from 'vue';
+import { Playlist } from '@/store/class/general/playlist';
 export default defineComponent({
   components: {
     ShareButtonsIntern,
@@ -65,6 +68,7 @@ export default defineComponent({
   props: {
     podcast: { default: undefined, type: Object as ()=> Podcast},
     emission: { default: undefined, type: Object as ()=> Emission},
+    playlist: { default: undefined, type: Object as ()=>Playlist},
     participantId: { default: undefined, type: Number},
     organisationId: { default: undefined, type: String},
     notExclusive: { default: true, type: Boolean},

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

@@ -42,34 +42,28 @@
   >
     <div class="saooti-rss-bounty" />
   </a>
-  <a
-    rel="noopener"
-    target="_blank"
+  <button
     :class="getClass()"
     :title="$t('Copy this page URL')"
     @click="onCopyCode(urlPage,afterCopy)"
   >
     <div class="saooti-link" />
-  </a>
-  <a
-    v-if="podcast"
-    rel="noopener"
-    target="_blank"
+  </button>
+  <button
+    v-if="podcast || emission ||playlist"
     :class="getClass()"
     :title="$t('Share newsletter')"
     @click="newsletter = true"
   >
     <div class="saooti-newsletter" />
-  </a>
-  <a
-    rel="noopener"
-    target="_blank"
+  </button>
+  <button
     :class="getClass()"
     :title="$t('Share QR Code')"
     @click="qrCode = true"
   >
     <div class="saooti-qrcode" />
-  </a>
+  </button>
   <ClipboardModal
     v-if="dataRSSSave"
     :link="rssUrl"
@@ -81,6 +75,8 @@
     v-if="newsletter"
     :closable="true"
     :podcast="podcast"
+    :emission="emission"
+    :playlist="playlist"
     @close="newsletter = false"
   />
   <QrCodeModal
@@ -104,6 +100,7 @@ import Snackbar from '../../misc/Snackbar.vue';
 import { displayMethods } from '../../mixins/functions';
 import { defineComponent, defineAsyncComponent } from 'vue';
 import SnackbarVue from '../../misc/Snackbar.vue';
+import { Playlist } from '@/store/class/general/playlist';
 const ClipboardModal = defineAsyncComponent(() => import('../../misc/modal/ClipboardModal.vue'));
 const NewsletterModal = defineAsyncComponent(() => import('../../misc/modal/NewsletterModal.vue'));
 const QrCodeModal = defineAsyncComponent(() => import('../../misc/modal/QrCodeModal.vue'));
@@ -120,6 +117,7 @@ export default defineComponent({
   props: {
     podcast: { default: undefined, type: Object as ()=> Podcast},
     emission: { default: undefined, type: Object as ()=> Emission},
+    playlist: { default: undefined, type: Object as ()=>Playlist},
     participantId: { default: undefined, type: Number},
     organisationId: { default: undefined, type: String},
     notExclusive: { default: true, type: Boolean},
@@ -195,7 +193,7 @@ export default defineComponent({
 
   methods: {
     getClass(className='btn-rss'): string{
-      let returnString = `btn ${className} share-btn mb-2`;
+      let returnString = `btn ${className} share-btn mb-2 text-dark`;
       returnString+= this.verticalDisplay ? '' : ' mx-2';
       return returnString;
     },

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

@@ -291,7 +291,6 @@ export default defineComponent({
     color: white;
     font-weight: bold;
     letter-spacing: 1px;
-    outline: none;
     box-shadow: 10px 10px 34px -15px hsla(0, 0%, 0%, 0.4);
     border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
     border: solid 2px #41403e;

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

@@ -4,7 +4,7 @@
       <div>{{ $t('Choose color') }}</div>
       <VSwatches
         v-model="internColor"
-        class="c-hand input-no-outline"
+        class="c-hand "
         show-fallback
         colors="text-advanced"
         popover-to="right"
@@ -15,7 +15,7 @@
       <div>{{ $t('Choose theme') }}</div>
       <VSwatches
         v-model="internTheme"
-        class="c-hand input-no-outline"
+        class="c-hand "
         show-fallback
         colors="text-advanced"
         popover-to="right"

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

@@ -7,7 +7,7 @@
     <select
       id="iframe-select"
       :value="iFrameModel"
-      class="input-no-outline"
+      class=""
       @change="$emit('update:iFrameModel',$event.target.value)"
     >
       <template

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

@@ -45,7 +45,7 @@ export default defineComponent({
         {name:'applePodcast', icon:'saooti-apple', url : this.getUrl('applePodcast')},
         {name:'deezer', icon:'saooti-deezer', url : this.getUrl('deezer')},
         {name:'googlePodcasts', icon:"saooti-google-podcasts", url : this.getUrl('googlePodcasts')},
-        {name:'playerFm', icon: 'saooti-saooti-playerfm', url : this.getUrl('playerFm')},
+        {name:'playerFm', icon: 'saooti-playerfm', url : this.getUrl('playerFm')},
         {name:'pocketCasts', icon:'saooti-pocket-casts', url : this.getUrl('pocketCasts')},
         {name:'podcastAddict', icon: 'saooti-podcast-addict', url : this.getUrl('podcastAddict')},
         {name:'radioline', icon:'saooti-radioline', url : this.getUrl('radioline')},

package/src/components/form/ClassicSearch.vue

@@ -5,7 +5,7 @@
       ref="search"
       v-model="textValue"
       type="text"
-      class="search-input w-100 p-2 input-no-outline"
+      class="search-input w-100 p-2 "
       :placeholder="label"
       :autofocus="autofocus"
     >

package/src/components/misc/TopBar.vue

@@ -46,8 +46,8 @@
         </router-link>
       </template>
     </div>
-    <div
-      class="saooti-burger-menu"
+    <button
+      class="btn-transparent saooti-burger-menu"
       :title="$t('open left Menu')"
       @click="onDisplayMenu(false)"
     />
@@ -63,9 +63,8 @@
             name: 'podcasts',
             query: { productor: $store.state.filter.organisationId },
           }"
-        >
-          <div class="btn admin-button m-1 saooti-search" />
-        </router-link>
+          class="btn admin-button m-1 saooti-search"
+        />
       </div>
     </div>
   </div>

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

@@ -8,6 +8,7 @@
             {{ $t('RSS Link') }}
           </div>
           <button
+            ref="focusElement"
             type="button"
             class="btn-close btn-close-white"
             title="Close"
@@ -53,6 +54,9 @@ export default defineComponent({
     emission: { default: undefined, type: Object as ()=> Emission},
   },
   emits: ['close', 'copy'],
+  mounted(){
+    (this.$refs.focusElement as HTMLElement)?.focus();
+  },
 
   methods: {
     closePopup(): void {

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

@@ -12,6 +12,7 @@
           </h5>
           <button
             v-if="closable"
+            :ref="closable?'focusElement':''"
             type="button"
             class="btn-close btn-close-white"
             title="Close"
@@ -32,6 +33,7 @@
         >
           <button
             v-if="canceltext"
+            :ref="!closable && canceltext?'focusElement':''"
             class="btn m-1"
             @click="onCancel"
           >
@@ -46,6 +48,7 @@
           </button>
           <button
             class="btn btn-primary m-1"
+            :ref="!closable && !canceltext?'focusElement':''"
             @click="onValid"
           >
             {{ validatetext }}
@@ -70,6 +73,9 @@ export default defineComponent({
     thirdText: { default: undefined, type: String},
   },
   emits: ['close', 'validate', 'cancel', 'thirdEvent'],
+  mounted(){
+    (this.$refs.focusElement as HTMLElement)?.focus();
+  },
   methods: {
     closePopup(): void {
       this.$emit('close');

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

@@ -21,20 +21,30 @@
                 <h4 class="mb-3">
                   {{ $t('Configuration') }}
                 </h4>
-                <ClassicCheckbox
-                  v-model:textInit="displayEmissionName"
-                  id-checkbox="display-emission-name"
-                  :label="$t('Display emission name')"
-                />
-                <ClassicCheckbox
-                  v-model:textInit="displayParticipantsNames"
-                  id-checkbox="display-participants-names"
-                  :label="$t('Display participants list')"
-                />
+                <label for="share-url-newsletter">{{$t('Share')}}</label>
+                <input
+                  v-model="shareUrl"
+                  id="share-url-newsletter"
+                  class="form-input mb-2"
+                  type="text"
+                  :class="{ 'border border-danger': 0 === shareUrl }"
+                >
+                <template v-if="podcast">
+                  <ClassicCheckbox
+                    v-model:textInit="displayEmissionName"
+                    id-checkbox="display-emission-name"
+                    :label="$t('Display emission name')"
+                  />
+                  <ClassicCheckbox
+                    v-model:textInit="displayParticipantsNames"
+                    id-checkbox="display-participants-names"
+                    :label="$t('Display participants list')"
+                  />
+                </template>
                 <div class="d-flex align-items-center mt-2">
                   <VSwatches
                     v-model="color"
-                    class="c-hand input-no-outline me-2 mt-2"
+                    class="c-hand  me-2 mt-2"
                     show-fallback
                     colors="text-advanced"
                     popover-to="right"
@@ -101,6 +111,9 @@ import { Podcast } from '@/store/class/general/podcast';
 import { state } from '../../../store/paramStore';
 import { defineComponent } from 'vue'
 import SnackbarVue from '../../misc/Snackbar.vue';
+import octopusApi from '@saooti/octopus-api';
+import { Emission } from '@/store/class/general/emission';
+import { Playlist } from '@/store/class/general/playlist';
 export default defineComponent({
   name: 'NewsletterModal',
 
@@ -113,7 +126,9 @@ export default defineComponent({
   mixins: [displayMethods],
 
   props: {
-    podcast: { default: ()=>({}), type: Object as ()=> Podcast},
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    emission: { default: undefined, type: Object as ()=> Emission},
+    playlist: { default: undefined, type: Object as ()=>Playlist},
   },
 
   emits: ['close'],
@@ -123,164 +138,150 @@ export default defineComponent({
       displayParticipantsNames: true as boolean,
       displayEmissionName: true as boolean,
       color: '#40a372' as string,
-      dummyParam: new Date().getTime().toString() as string,
+      shareUrl: window.location.href as string,
+
     };
   },
 
   computed: {
-    resourcesUrl(): string{
-      return state.podcastPage.resourceUrl? state.podcastPage.resourceUrl : window.location.origin;
+    date(): string {
+      if(!this.podcast || 1970 === moment(this.podcast.pubDate).year()){return '';}
+      return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
+    },
+    duration(): string {
+      if (!this.podcast || this.podcast.duration <= 1) return '';
+      if (this.podcast.duration > 600000) {
+        return humanizeDuration(this.podcast.duration, {
+          language: this.$i18n.locale,
+          largest: 1,
+          round: true,
+        });
+      }
+      return humanizeDuration(this.podcast.duration, {
+        language: this.$i18n.locale,
+        largest: 2,
+        round: true,
+      });
     },
     emissionName(): string {
-      if (this.displayEmissionName)
-        return (
-          `<tr><td colspan="2" style="font-size: 16px;line-height:24px;font-weight: bold;">` +
-          this.podcast.emission.name +
-          `</td></tr>`
-        );
-      return '';
+      if (!this.displayEmissionName || !this.podcast){return ''}
+      return (
+        `<tr><td colspan="2" style="font-size: 16px;line-height:24px;font-weight: bold;">${this.podcast.emission.name}</td></tr>`
+      );
     },
     articleHtml(): string{
-      if(this.podcast.article && 0 !== this.podcast.article.length){
-        return (`<a href="` +
-          this.podcast.article +
-          `" title="` +
-          this.$t('See associated article') +
-          `">
-          <img width="44" height="44" style="display: inline-block;vertical-align: middle; margin-right:3px" src="` +
-          this.resourcesUrl + `/img/article.png">
-        </a>
-        <a style="color: #000;text-decoration: none;" href="` +
-          this.podcast.article +
-          `">` +
-          this.$t('See associated article') +
-          `</a>`);
-      }
-      return '';
+      if (!this.podcast || this.podcast.article ||0 !== this.podcast.article?.length){return ''}
+      return (`<a href="${this.podcast.article}" title="${this.$t('See associated article')}">
+        <img width="44" height="44" style="display: inline-block;vertical-align: middle; margin-right:3px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAA6UlEQVRIie3WPUpEMRTF8R9+4QpEBGttrcdeV+E2pp3KdYi7GBRttNVCZgOCjSuQ+UCLJzLIe7l3HpFpPJAuOf+T5F4SYh3jFZ/JMVlevJUwv8c+HvEQzD/FIBEaHOFtKdkosWb0PfdHGwXzOxxk03SpDVDNvA1Q1bwNcFMwn/cB/K6iQ+3VMsVVDQDcylVMSl1VBOea5FFjTXHWZVJqtCdcYjcI+YHnPoB3FY6qdERVVNrBHi6wGXgscK3Z8UqAE80dbAeAGV4wXhUwxk5gHurP72CtgP9Gw5oabYBhT7/wwZ/If09S35Yv52lVAXwyqt0AAAAASUVORK5CYII=">
+      </a>
+      <a style="color: #000;text-decoration: none;" href="${this.podcast.article}">${this.$t('See associated article')}</a>`);
     },
     participantsName(): string {
-      if (!this.displayParticipantsNames || !this.podcast.animators) return '';
+      if (!this.displayParticipantsNames || !this.podcast || !this.podcast.animators) return '';
       const text = [''];
       this.podcast.animators.forEach((element: Participant) => {
         text.push(
           `<table width='100%' style="width:100%;background: #f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;border-bottom-left-radius: 1.5em;border-bottom-right-radius: 1.5em;">
 					<tr>
 						<td width="90" rowspan="2" style="text-align:left; vertical-align: top; width: 90px;padding:0 15px 15px 10px">
-							<img width="72"  style="width: 62px;height: 62px;border-radius: 50%;background-color: #fff;" src="` +
-            element.imageUrl +
-            `" alt="` +
-            this.$t('Animator image') +
-            `">
+							<img width="72"  style="width: 62px;height: 62px;border-radius: 50%;background-color: #fff;" src="${element.imageUrl}" alt="${this.$t('Animator image')}">
 						</td>
-						<td height="1" style="height: 1px;text-align:left; font-size: 14px;line-height:20px;vertical-align: top;font-weight: bold;padding-top: 23px;">` +
-            this.getName(element) +
-            `</td>
+						<td height="1" style="height: 1px;text-align:left; font-size: 14px;line-height:20px;vertical-align: top;font-weight: bold;padding-top: 23px;">${this.getName(element)}</td>
 					</tr>`
         );
         if (element.description) {
           text.push(
-            `<tr>
-							<td style="height: 100%;text-align:justify;padding-bottom: 15px;padding-right: 15px; font-size: 12px;line-height:16px;vertical-align: top">
-								` +
-              element.description +
-              `
-							</td>
-						</tr>`
+            `<tr><td style="height: 100%;text-align:justify;padding-bottom: 15px;padding-right: 15px; font-size: 12px;line-height:16px;vertical-align: top">
+							${element.description}</td></tr>`
           );
         }
         text.push(`</table>`);
       });
       return text.join('');
     },
+    imageUrl():string{
+      if(this.podcast){
+        return `${this.podcast.imageUrl}" alt="${this.$t('Podcast image')}`;
+      }
+      if(this.emission){
+        return `${this.emission.imageUrl}" alt="${this.$t('Emission image')}`;
+      }
+      if(this.playlist){
+        return `${this.playlist.imageUrl}" alt="${this.$t('Playlist image')}`;
+      }
+      return '';
+    },
+    title():string{
+      if(this.podcast){
+        return this.podcast.title;
+      }
+      if(this.emission){
+        return this.emission.name;
+      }
+      if(this.playlist){
+        return this.playlist.title;
+      }
+      return '';
+    },
+    description():string{
+      if (this.podcast && this.podcast.description) {
+        return `<tr><td colspan="2" valign="top" style="line-height:24px;font-size: 14px;max-width: 500px;">${this.podcast.description}</td></tr>`;
+      }
+      if(this.emission && this.emission.description){
+        return `<tr><td colspan="2" valign="top" style="line-height:24px;font-size: 14px;max-width: 500px;">${this.emission.description}</td></tr>`;
+      }
+      if(this.playlist && this.playlist.description){
+        return `<tr><td colspan="2" valign="top" style="line-height:24px;font-size: 14px;max-width: 500px;">${this.playlist.description}</td></tr>`;
+      }
+      return '';
+    },
+    shareText():string{
+      if (this.podcast) {
+        return this.$t('Listen this episode');
+      }
+      if (this.emission) {
+        return this.$t('All podcast emission button');
+      }
+      return this.$t('Podcasts in the playlist');
+    },
+    durationPodcast():string{
+      if(!this.podcast){return ''}
+      return `<td colspan="2" style="height: 1px;color: #666;font-size: 12px;line-height: 16px;padding-top:15px;">
+          <span>${this.date}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <span style="padding: 0 10px">${this.$t('Duration', { duration: this.duration })}</span>
+				</td>`;
+    },
     newsletterHtml(): string {
       const html = [
         `<table width='100%' style="width:100%;background:#f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;border-top-left-radius: 1.5em;border-top-right-radius: 1.5em;">
-		<tr>
+        <tr>
 				<td valign="top" rowspan="4" style="vertical-align: top; padding: 10px;">
-						<img width="140" height="140" src="` +
-          this.podcast.imageUrl +
-          `" alt="` +
-          this.$t('Podcast image') +
-          `" style="width: 140px;border-radius: 16px; box-shadow: 0px 12px 48px 6px rgba(64, 163, 114, 0.2);">
-				</td>
-				<td colspan="2" style="height: 1px;color: #666;font-size: 12px;line-height: 16px;padding-top:15px;">
-						<span>` +
-          this.date +
-          `</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="padding: 0 10px">` +
-          this.$t('Duration', { duration: this.duration }) +
-          `</span>
+						<img width="140" height="140" src="${this.imageUrl}" style="width: 140px;border-radius: 16px; box-shadow: 0px 12px 48px 6px rgba(64, 163, 114, 0.2);">
 				</td>
+				${this.durationPodcast}
 		</tr>
 		<tr>
-				<td colspan="2" valign="top" style="line-height:24px;color: ` +
-          this.color +
-          `;font-size: 17px;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 400px;padding-top: 0.5em;">
-						` +
-          this.podcast.title +
-          `
+				<td colspan="2" valign="top" style="line-height:24px;color: ${this.color};font-size: 17px;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 400px;padding-top: 0.5em;">
+          ${this.title}
 				</td>
 		</tr>
-		` +
-          this.emissionName,
+    ${this.emissionName},${this.description}`
       ];
-      if (this.podcast.description) {
-        html.push(
-          `<tr>
-				<td colspan="2" valign="top" style="line-height:24px;font-size: 14px;max-width: 500px;">
-						` +
-            this.podcast.description +
-            `
-				</td>
-		</tr>`
-        );
-      }
       html.push(
-        `
-    </table>
+      `</table>
       <div style="font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;background: #f3f3f3;vertical-align: middle;padding: 15px 10px;display: flex; align-items:center; flex-wrap:wrap">
-        <a href="` +
-          window.location.href +
-          `" title="` +
-          this.$t('Listen this episode') +
-          `">
+        <a href="${this.shareUrl}">
           <img width="44" height="44" style="display: inline-block;vertical-align: middle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAAAxElEQVRIie3WMWpCURBG4Q8FSRrtbC2SPhvICmzchVuwtXQLbsE2pVUIkjqQHVgqNmIj6EvxGHhFQAIvcxt/OPVhhrlzh3sKZ4MvTLLFVYNPvJYQB294LiGucMYSw2xxcMQcj9niYIsputni4BvjEuJgjZcS4goXrDDKFgcnLDDIFgd7zNDLFgfvTUHnL23ISJuV7iS3Ooarn1VxkeeUvkDSV2b6J3FQT+pDW8Jb4vRD4Kqe1Kf/Ev4mTj32PhQ6b+9pPT+XHgysHrPM6QAAAABJRU5ErkJggg=="/>
         </a>
-        <a style="color: #000;text-decoration: none; margin-right:8px" href="` +
-          window.location.href +
-          `">` +
-          this.$t('Listen this episode') +
-          `</a>` + this.articleHtml + `
-      </div>
-		` +
-          this.participantsName
+        <a style="color: #000;text-decoration: none; margin-right:8px" href="${this.shareUrl}">${this.shareText}</a>
+        ${this.articleHtml}
+      </div>${this.participantsName}`
       );
       return html.join('');
     },
-    
-    date(): string {
-      if (1970 !== moment(this.podcast.pubDate).year()){
-        return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
-      }
-      return '';
-    },
-    duration(): string {
-      if (this.podcast.duration <= 1) return '';
-      if (this.podcast.duration > 600000) {
-        return humanizeDuration(this.podcast.duration, {
-          language: this.$i18n.locale,
-          largest: 1,
-          round: true,
-        });
-      }
-      return humanizeDuration(this.podcast.duration, {
-        language: this.$i18n.locale,
-        largest: 2,
-        round: true,
-      });
-    },
   },
   created(){
-    this.initColor();
+    this.initData();
   },
   methods: {
     closePopup(event: { preventDefault: () => void }): void {
@@ -302,11 +303,24 @@ export default defineComponent({
     afterCopy(): void{
       (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Data in clipboard'));
     },
-    initColor(): void {
+    async initData(): Promise<void> {
+      let attributes;
+      if(this.$store.state.organisation && this.$store.state.organisation.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
+        attributes = this.$store.state.organisation.attributes;
+      }else{
+        attributes = await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
+      }
+      if (Object.prototype.hasOwnProperty.call(attributes,'podcastmakerUrl')) {
+        this.shareUrl = attributes.podcastmakerUrl + window.location.pathname+window.location.search;
+      }
       if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
         this.color = state.generalParameters.podcastmakerColor;
+        return;
       }
-    }
+      if (Object.prototype.hasOwnProperty.call(attributes,'COLOR')) {
+        this.color = attributes.COLOR;
+      }
+    },
   },
 })
 </script>
@@ -319,9 +333,6 @@ export default defineComponent({
     height: 200px;
     padding: 1em;
     border-radius: 1em;
-    &:focus {
-      outline-width: 0;
-    }
   }
 
   .modal-dialog {

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

@@ -11,6 +11,7 @@
             {{ $t('Share QR Code') }}
           </h5>
           <button
+            ref="focusElement"
             type="button"
             class="btn-close btn-close-white"
             title="Close"
@@ -45,6 +46,9 @@ export default defineComponent({
     urlPage: { default: undefined, type: String},
   },
   emits: ['close'],
+  mounted(){
+    (this.$refs.focusElement as HTMLElement)?.focus();
+  },
   methods:{
     closePopup(): void {
       this.$emit('close');

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

@@ -12,6 +12,7 @@
               {{ $t('Share the player') }}
             </h5>
             <button
+              ref="focusElement"
               type="button"
               class="btn-close btn-close-white"
               title="Close"
@@ -126,6 +127,9 @@ export default defineComponent({
       return [this.$t('Embed link'),this.$t('Embedly link')];
     }
   },
+  mounted(){
+    (this.$refs.focusElement as HTMLElement)?.focus();
+  },
   methods: {
     closePopup(event: { preventDefault: () => void }): void {
       event.preventDefault();

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

@@ -55,7 +55,7 @@ export const playerLive = defineComponent({
         if (!Hls.isSupported()) {
           reject('Hls is not supported ! ');
         }
-        let hls = new Hls();
+        const hls = new Hls();
         /* if(this.$store.state.authentication.isAuthenticated && this.$store.state.oAuthParam.accessToken){
           hls = new Hls({xhrSetup:
             (xhr: XMLHttpRequest) => {

package/src/components/pages/Playlist.vue

@@ -34,7 +34,7 @@
             :organisation-id="myOrganisationId"
             :is-education="isEducation"
           />
-          <ShareButtons v-if="pageParameters.isShareButtons" />
+          <ShareButtons v-if="pageParameters.isShareButtons" :playlist="playlist" />
         </div>
       </div>
       <PodcastList :playlist="playlist" />

package/src/components/pages/Playlists.vue

@@ -6,9 +6,9 @@
       to="/main/priv/edit/playlist"
       class="d-flex justify-content-center my-3"
     >
-      <button class="btn btn-primary">
+      <div class="btn btn-primary">
         {{ $t('Create playlist') }}
-      </button>
+      </div>
     </router-link>
     <ProductorSearch
       v-if="isProductorSearch"