@saooti/octopus-sdk 32.0.2 → 32.0.5

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

@@ -82,7 +82,7 @@ export default defineComponent({
       }
       if (!state.generalParameters.authenticated) return;
       let data;
-      if(this.$store.state.organisation && this.$store.state.organisation.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
+      if(this.$store.state.organisation?.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
         data = this.$store.state.organisation.attributes;
       }else{
         data= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);

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

@@ -6,7 +6,7 @@
     :title="$t('Downloading')"
     @click="onDownload(podcast.audioUrl, podcast.title)"
   >
-    <div class="saooti-download-bounty" />
+    <div class="saooti-download" />
   </button>
   <template
     v-for="button in arrayShareButtons"
@@ -40,7 +40,7 @@
     :title="titleRssButton"
     @click.prevent="openPopup()"
   >
-    <div class="saooti-rss-bounty" />
+    <div class="saooti-rss" />
   </a>
   <button
     :class="getClass()"
@@ -143,9 +143,9 @@ export default defineComponent({
     },
     arrayShareButtons(){
       return [
-        { title: 'Facebook', icon:'saooti-facebook-bounty', nbPath:0, className:'btn-facebook', url :`https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`, condition: true},
-        { title: 'Twitter', icon:'saooti-twitter-bounty', nbPath:0, className:'btn-twitter', url :`https://twitter.com/intent/tweet?text=${this.urlPage}`, condition: true},
-        { title: 'Linkedin', icon:'saooti-linkedin1', nbPath:0, className:'btn-linkedin', url :`https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`, condition: true},
+        { title: 'Facebook', icon:'saooti-facebook', nbPath:0, className:'btn-facebook', url :`https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`, condition: true},
+        { title: 'Twitter', icon:'saooti-twitter', nbPath:0, className:'btn-twitter', url :`https://twitter.com/intent/tweet?text=${this.urlPage}`, condition: true},
+        { title: 'Linkedin', icon:'saooti-linkedin', nbPath:0, className:'btn-linkedin', url :`https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`, condition: true},
         { title: 'Whatsapp', icon:'saooti-Whatsapp', nbPath:3, className:'btn-whatsapp', url :`whatsapp://send?text=${this.urlPage}`, condition:  window.matchMedia('(hover: none)').matches}
       ]
     },

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

@@ -17,103 +17,19 @@
       :emission="emission"
     />
     <div class="sharing-distribution-container">
-      <router-link
-        :to="'/main/priv/distribution/amazon/' + emissionId"
+      <router-link 
+        v-for="platform in platformShare" 
+        :key="platform.title"
+        :to="platform.url"
         class="text-dark"
       >
-        <span class="saooti-amazon">
-          <div class="path1" />
-          <div class="path2" />
-          <div class="path3" />
-        </span> Amazon Music | Podcasters
-      </router-link>
-      <router-link
-        :to="'/main/priv/distribution/apple/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-apple" />Apple Podcast / iTunes
-      </router-link>
-      <router-link
-        :to="'/main/priv/distribution/deezer/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-deezer" />Deezer
-      </router-link>
-      <router-link
-        :to="'/main/priv/distribution/googlePodcasts/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-google-podcasts">
-          <div class="path1" />
-          <div class="path2" />
-          <div class="path3" />
-          <div class="path4" />
-          <div class="path5" />
-          <div class="path6" />
-          <div class="path7" />
-        </span> Google Podcasts
-      </router-link>
-      <router-link
-        :to="'/main/priv/distribution/PlayerFM/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-playerfm" />PlayerFM
-      </router-link>
-      <router-link
-        :to="'/main/priv/distribution/PocketCasts/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-pocket-casts" />Pocket Casts
-      </router-link>
-      <router-link
-        :to="'/main/priv/distribution/PodcastAddict/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-podcast-addict" />Podcast Addict
-      </router-link>
-      <router-link
-        :to="'/main/priv/distribution/radioline/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-radioline" />Radioline
-      </router-link>
-      <router-link
-        :to="'/main/priv/distribution/spotify/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-spotify" />Spotify
-      </router-link>
-
-      <router-link
-        :to="'/main/priv/distribution/Stitcher/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-stitcher-logo">
-          <div class="path1" />
-          <div class="path2" />
-          <div class="path3" />
-          <div class="path4" />
-          <div class="path5" />
-          <div class="path6" />
-          <div class="path7" />
-          <div class="path8" />
-          <div class="path9" />
-          <div class="path10" />
-          <div class="path11" />
-          <div class="path12" />
-          <div class="path13" />
-          <div class="path14" />
-          <div class="path15" />
-          <div class="path16" />
-          <div class="path17" />
-          <div class="path18" /> </span>Stitcher
-      </router-link>
-
-      <router-link
-        :to="'/main/priv/distribution/tuneIn/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-tunin" />TuneIn
+        <span :class="platform.icon">
+          <div
+            v-for="index in platform.path"
+            :key="index"
+            :class="'path'+index"
+          />
+        </span>{{ platform.title }}
       </router-link>
     </div>
     <Snackbar
@@ -149,6 +65,22 @@ export default defineComponent({
       rss: '' as string,
     };
   },
+  computed:{
+    platformShare(){
+      return [
+      {url:this.getUrl('amazon'), icon:'saooti-amazon', title:'Amazon Music | Podcasters', path:3},
+      {url:this.getUrl('apple'), icon:'saooti-apple', title:'Apple Podcast / iTunes', path:0},
+      {url:this.getUrl('deezer'), icon:'saooti-deezer', title:'Deezer', path:0},
+      {url:this.getUrl('googlePodcasts'), icon:'saooti-google-podcasts', title:'Google Podcasts', path:7},
+      {url:this.getUrl('PlayerFM'), icon:'saooti-playerfm', title:'PlayerFM', path:0},
+      {url:this.getUrl('PocketCasts'), icon:'saooti-pocket-casts', title:'Pocket Casts', path:0},
+      {url:this.getUrl('PodcastAddict'), icon:'saooti-podcast-addict', title:'Podcast Addict', path:0},
+      {url:this.getUrl('radioline'), icon:'saooti-radioline', title:'Radioline', path:0},
+      {url:this.getUrl('spotify'), icon:'saooti-spotify', title:'Spotify', path:0},
+      {url:this.getUrl('Stitcher'), icon:'saooti-stitcher-logo', title:'Stitcher', path:18},
+      {url:this.getUrl('tuneIn'), icon:'saooti-tunin', title:'TuneIn', path:0}];
+    }
+  },
 
   mounted() {
     this.getEmissionDetails();
@@ -156,6 +88,9 @@ export default defineComponent({
   },
 
   methods: {
+    getUrl(platform: string): string{
+      return `/main/priv/distribution/${platform}/${this.emissionId}`;
+    },
     async getEmissionDetails(): Promise<void> {
       this.emission = await octopusApi.fetchData<Emission>(0,'emission/'+this.emissionId);
     },

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

@@ -140,8 +140,7 @@ export default defineComponent({
       return 'largeSuggestion' === this.iFrameModel;
     },
     titleStillAvailable(): string {
-      if (this.isPodcastNotVisible) return this.$t('Podcast still available').toString();
-      return this.$t('Podcasts still available').toString();
+      return this.isPodcastNotVisible ?this.$t('Podcast still available') : this.$t('Podcasts still available');
     },
     isLiveReadyToRecord(): boolean {
       if (this.podcast)
@@ -153,17 +152,10 @@ export default defineComponent({
       return false;
     },
     noAd(): boolean {
-      if (
-        (this.podcast &&
-          this.podcast.organisation.id !== this.organisationId &&
-          'NO' === this.podcast.monetisable) ||
-        (this.podcast &&
-          'UNDEFINED' === this.podcast.monetisable &&
-          'NO' === this.podcast.emission.monetisable)
-      ) {
-        return true;
-      }
-      return false;
+      return (this.podcast?.organisation.id !== this.organisationId &&
+          'NO' === this.podcast?.monetisable) ||
+        ('UNDEFINED' === this.podcast?.monetisable &&
+          'NO' === this.podcast?.emission.monetisable);
     },
     iFrameSrc(): string {
       const url = [''];
@@ -268,7 +260,7 @@ export default defineComponent({
     async initColor(): Promise<void> {
       if (!this.authenticated) return;
       let data;
-      if(this.$store.state.organisation && this.$store.state.organisation.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
+      if(this.$store.state.organisation?.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
         data = this.$store.state.organisation.attributes;
       }else{
         data= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+this.myOrganisationId);

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

@@ -68,7 +68,7 @@ export default defineComponent({
     },
     customPlayersDisplay(): Array<CustomPlayer>{
       return this.customPlayers.filter((player: CustomPlayer)=>{
-        return (('EPISODE' === player.typePlayer ||'SUGGESTION' === player.typePlayer) && this.podcast && this.podcast.podcastId) ||
+        return (('EPISODE' === player.typePlayer ||'SUGGESTION' === player.typePlayer) &&this.podcast?.podcastId) ||
                           ('EMISSION' === player.typePlayer && this.emission  && !this.podcast)|| ('PLAYLIST' === player.typePlayer && this.playlist );
       });
     },

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

@@ -67,14 +67,12 @@ export default defineComponent({
       }
     },
     getUrl(sub: string): string | undefined{
-      return this.externaliseLinks(this.emission && this.emission.annotations? (this.emission.annotations[sub] as string): undefined);
+      return this.externaliseLinks(this.emission?.annotations?.[sub] as string|undefined);
     },
     externaliseLinks(link?: string): string|undefined {
       if (!link) return link;
       link = link.trim();
-      if (!link.startsWith('http') && !link.startsWith('//'))
-        return '//' + link;
-      return link;
+      return !link.startsWith('http') && !link.startsWith('//') ? '//' + link:link;
     },
   },
 })

package/src/components/form/ClassicSearch.vue

@@ -15,11 +15,11 @@
     />
     <div
       v-if="!textValue"
-      class="saooti-search-bounty search-icon-container"
+      class="saooti-search search-icon-container"
     />
     <div
       v-else
-      class="saooti-cross search-icon-container c-hand"
+      class="saooti-remove search-icon-container c-hand"
       @click="textValue = ''"
     />
   </div>
@@ -68,8 +68,8 @@ export default defineComponent({
       border-radius: 10px;
       margin: 0 !important;
     }
-    .saooti-search-bounty,
-    .saooti-cross {
+    .saooti-search,
+    .saooti-remove {
       font-size: 1rem;
     }
     .search-icon-container {

package/src/components/form/ClassicSelect.vue

@@ -50,7 +50,7 @@ export default defineComponent({
       handler() {
         if(this.textInit !== this.textValue){
           this.textValue =this.textInit;
-          }
+        }
       },
     },
   }

package/src/components/misc/Footer.vue

@@ -136,7 +136,7 @@ export default defineComponent({
       return state.footer.contactLink;
     },
     rubriqueQueryParam(): string|undefined{
-      if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
+      if(this.$store.state.filter?.rubriqueFilter?.length){
         return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
       }
       return undefined;
@@ -153,7 +153,7 @@ export default defineComponent({
         return { productor: this.$store.state.filter.organisationId};
       }
       return { productor: this.$store.state.filter.organisationId,
-                   iabId: this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined,
+                   iabId: this.$store.state.filter.iab?.id,
                    rubriquesId: this.rubriqueQueryParam}
     },
     showBlackBorder(hide: boolean): void {

package/src/components/misc/HomeDropdown.vue

@@ -13,7 +13,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user-octopus"
+        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('User menu')"

package/src/components/misc/LeftMenu.vue

@@ -97,7 +97,7 @@ export default defineComponent({
       return this.$store.state.filter.live;
     },
     rubriqueQueryParam(): string|undefined{
-      if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
+      if(this.$store.state.filter?.rubriqueFilter?.length){
         return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
       }
       return undefined;
@@ -122,14 +122,14 @@ export default defineComponent({
         return { productor: this.$store.state.filter.organisationId};
       }
       return { productor: this.$store.state.filter.organisationId,
-                   iabId: this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined,
+                   iabId: this.$store.state.filter.iab?.id,
                    rubriquesId: this.rubriqueQueryParam}
     },
     onMenuClick() {
       this.$emit('update:displayMenu', false);
     },
     async onOrganisationSelected(organisation: Organisation|undefined) {
-      if (organisation && organisation.id) {
+      if (organisation?.id) {
         await this.selectOrganisation(organisation.id);
         return;
       }

package/src/components/misc/TopBar.vue

@@ -8,7 +8,7 @@
       :to="{
         name: 'home',
         query: { productor: $store.state.filter.organisationId,
-                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                 iabId: $store.state.filter.iab?.id ,
                  rubriquesId: rubriqueQueryParam},
       }"
       @click="onDisplayMenu(true)"
@@ -47,7 +47,7 @@
       </template>
     </div>
     <button
-      class="btn-transparent saooti-burger-menu"
+      class="btn-transparent saooti-menu"
       :title="$t('open left Menu')"
       @click="onDisplayMenu(false)"
     />
@@ -111,14 +111,13 @@ export default defineComponent({
         {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrga || this.isEducation)}]
     },
     rubriqueQueryParam(): string|undefined{
-      if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
+      if(this.$store.state.filter?.rubriqueFilter?.length){
         return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
       }
       return undefined;
     },
     logoUrl(): string {
-      if (this.isEducation) return '/img/logo_education.png';
-      return '/img/logo_octopus_final.svg';
+      return this.isEducation ?'/img/logo_education.png': '/img/logo_octopus_final.svg';
     },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
@@ -130,11 +129,8 @@ export default defineComponent({
       return this.$store.state.filter.live;
     },
     imgUrl(): string {
-      if (
-        this.$store.state.filter.imgUrl &&
-        !this.$store.state.filter.imgUrl.includes('emptypodcast')
-      )
-        return this.$store.state.filter.imgUrl + '?dummy=' + this.dummyParam;
+      if (!this.$store.state.filter.imgUrl?.includes('emptypodcast'))
+        return `${this.$store.state.filter.imgUrl}?dummy=${this.dummyParam}`;
       return '';
     },
   },
@@ -162,7 +158,7 @@ export default defineComponent({
         return { productor: this.$store.state.filter.organisationId};
       }
       return { productor: this.$store.state.filter.organisationId,
-                   iabId: this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined,
+                   iabId: this.$store.state.filter.iab?.id,
                    rubriquesId: this.rubriqueQueryParam}
     },
     handleScroll(): void {
@@ -193,7 +189,7 @@ export default defineComponent({
       this.$emit('update:displayMenu',param?false:!this.displayMenu);
     },
     async onOrganisationSelected(organisation: Organisation | undefined): Promise<void> {
-      if (organisation && organisation.id) {
+      if (organisation?.id) {
         await this.selectOrganisation(organisation.id);
         return;
       }
@@ -222,7 +218,7 @@ export default defineComponent({
     padding: 0 0.5rem;
   }
 
-  .saooti-burger-menu {
+  .saooti-menu {
     display: none;
     cursor: pointer;
     font-size: 2rem;
@@ -255,7 +251,7 @@ export default defineComponent({
     .link-hover,.hosted-by {
       display: none;
     }
-    .saooti-burger-menu {
+    .saooti-menu {
       display: block;
     }
   }
@@ -265,7 +261,7 @@ export default defineComponent({
     .default-multiselect-width, .hosted-by, .link-hover {
       display: none;
     }
-    .saooti-burger-menu {
+    .saooti-menu {
       display: block;
     }
   }

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

@@ -47,8 +47,8 @@
             {{ thirdText }}
           </button>
           <button
-            class="btn btn-primary m-1"
             :ref="!closable && !canceltext?'focusElement':''"
+            class="btn btn-primary m-1"
             @click="onValid"
           >
             {{ validatetext }}

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

@@ -21,10 +21,10 @@
                 <h4 class="mb-3">
                   {{ $t('Configuration') }}
                 </h4>
-                <label for="share-url-newsletter">{{$t('Share')}}</label>
+                <label for="share-url-newsletter">{{ $t('Share') }}</label>
                 <input
-                  v-model="shareUrl"
                   id="share-url-newsletter"
+                  v-model="shareUrl"
                   class="form-input mb-2"
                   type="text"
                   :class="{ 'border border-danger': 0 === shareUrl }"
@@ -170,7 +170,7 @@ export default defineComponent({
       );
     },
     articleHtml(): string{
-      if (!this.podcast || this.podcast.article ||0 !== this.podcast.article?.length){return ''}
+      if (!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>
@@ -289,9 +289,7 @@ export default defineComponent({
       this.$emit('close');
     },
     getName(person: Participant): string {
-      const first = person.firstName || '';
-      const last = person.lastName || '';
-      return (first + ' ' + last).trim();
+      return (`${person.firstName??''} ${person.lastName??''}`).trim();
     },
     selectAll(element: Event): void {
       const target = element.target;
@@ -305,7 +303,7 @@ export default defineComponent({
     },
     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){
+      if(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);

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

@@ -42,7 +42,7 @@
               >
                 <p>{{ embedLink }}</p>
                 <div
-                  class="saooti-copy-octopus"
+                  class="saooti-copy"
                   @click="onCopyCode(embedLink, afterCopy)"
                 />
               </div>
@@ -54,7 +54,7 @@
                   <div class="d-flex">
                     <p>{{ embedlyLink }}</p>
                     <div
-                      class="saooti-copy-octopus"
+                      class="saooti-copy"
                       @click="onCopyCode(embedlyLink, afterCopy)"
                     />
                   </div>
@@ -68,7 +68,7 @@
               >
                 <p>{{ directLink.audioUrl }}</p>
                 <div
-                  class="saooti-copy-octopus"
+                  class="saooti-copy"
                   @click="onCopyCode(directLink.audioUrl, snackbarRef)"
                 />
               </div>
@@ -178,7 +178,7 @@ export default defineComponent({
     display: flex;
     justify-content: space-between;
   }
-  .saooti-copy-octopus {
+  .saooti-copy {
     cursor: pointer;
     align-self: center;
   }

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

@@ -100,7 +100,7 @@ export default defineComponent({
 
   watch: {
     playerHeight(): void {
-      this.$emit('hide', 0 === this.playerHeight ? true : false);
+      this.$emit('hide', 0 === this.playerHeight);
     },
   },
   

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

@@ -16,8 +16,8 @@
       v-if="!playerError"
       :title="$t('Play')"
       :class="{
-        'saooti-play2-bounty': isPaused,
-        'saooti-pause-bounty': isPlaying,
+        'saooti-play': isPaused,
+        'saooti-pause': isPlaying,
         'spinner-border':!isPaused&&!isPlaying
       }"
       class="btn play-button-box text-light primary-bg"
@@ -55,12 +55,12 @@
     </div>
     <button
       :title="$t('Enlarge')"
-      class="btn play-button-box primary-bg text-light saooti-up-bounty"
+      class="btn play-button-box primary-bg text-light saooti-up"
       @click="changePlayerLargeVersion"
     />
     <button
       :title="$t('Close')"
-      class="btn play-button-box primary-bg text-light saooti-cross"
+      class="btn play-button-box primary-bg text-light saooti-remove"
       @click="stopPlayer"
     />
     <PlayerTimeline

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

@@ -4,7 +4,7 @@
   >
     <button
       :title="$t('Reduce')"
-      class="player-reduce-button btn bg-transparent text-light saooti-down-bounty"
+      class="player-reduce-button btn bg-transparent text-light saooti-down"
       @click="changePlayerLargeVersion"
     />
     <router-link
@@ -55,15 +55,15 @@
         v-if="!playerError"
         :title="$t('Play')"
         :class="{
-          'saooti-play2-bounty': isPaused,
-          'saooti-pause-bounty': isPlaying,
+          'saooti-play': isPaused,
+          'saooti-pause': isPlaying,
           'spinner-border':!isPaused&&!isPlaying
         }"
         class="btn play-big-button-box text-light primary-bg"
         @click="switchPausePlay"
       />
       <button
-        class="btn fs-1 bg-transparent text-light saooti-forward2"
+        class="btn fs-1 bg-transparent text-light saooti-forward"
         @click="seekClick(15)"
       />
     </div>

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

@@ -5,7 +5,7 @@
     @click="$emit('update:showTimeline', !showTimeline)"
   >
     <div
-      class="saooti-arrow_down"
+      class="saooti-down"
       :class="showTimeline ? '' : 'arrow-transform'"
     />
     <div>Timeline</div>
@@ -25,11 +25,6 @@ export default defineComponent({
   },
   emits:['update:showTimeline'],
 
-  data() {
-    return {
-    };
-  },
-
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);