@saooti/octopus-sdk 31.0.45 → 32.0.1

package/README.md

@@ -636,3 +636,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.43 #10963
  * 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.45",
+  "version": "32.0.1",
   "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/podcasts/PodcastInlineListTemplate.vue

@@ -56,7 +56,7 @@
     <slot name="list-inline" />
     <router-link
       v-if="!isButtonNextTitle"
-      class="btn btn-link align-self-center width-fit-content m-4"
+      class="btn btn-primary align-self-center width-fit-content m-4"
       :to="refTo"
       @click="handleSeeMoreButton"
     >

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')"
         />

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
+  </button>
+  <button
     v-if="podcast"
-    rel="noopener"
-    target="_blank"
     :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"
@@ -195,7 +189,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

@@ -34,7 +34,7 @@
                 <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"
@@ -319,9 +319,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/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"