@saooti/octopus-sdk 33.1.3 → 33.2.0

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

@@ -1,101 +1,72 @@
 <template>
-  <div>
-    <div
-      id="share-modal"
-      class="modal"
-    >
-      <div class="modal-backdrop" />
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">
-              {{ $t('Share the player') }}
-            </h5>
-            <button
-              ref="focusElement"
-              type="button"
-              class="btn-close btn-close-white"
-              title="Close"
-              @click="closePopup"
-            />
-          </div>
-          <div class="modal-body">
-            <ul class="nav nav-tabs">
-              <li
-                v-for="(tab, index) in tabs"
-                :key="tab"
-                class="nav-item"
-              >
-                <div
-                  class="nav-link"
-                  :class="activeTab === index? 'active':''"
-                  @click="activeTab = index"
-                >
-                  {{ tab }}
-                </div>
-              </li>
-            </ul>
-            <div class="tab-content p-2 share-modal-border">
-              <div
-                class="tab-pane tab-pane"
-                :class="activeTab === 0? 'active':''"
-              >
-                <p>{{ embedLink }}</p>
-                <div
-                  class="saooti-copy"
-                  @click="onCopyCode(embedLink, afterCopy)"
-                />
-              </div>
+  <ClassicModal
+    id-modal="share-modal"
+    :title-modal="$t('Share the player')"
+    @close="closePopup"
+  >
+    <template #body>
+      <Nav :tab-number="tabs.length">
+        <template
+          v-for="(tab, index) in tabs"
+          #[index]
+        >
+          {{ tab }}
+        </template>
+        <template 
+          #tab0
+        >
+          <p>{{ embedLink }}</p>
+          <div
+            class="saooti-copy"
+            @click="onCopyCode(embedLink, afterCopy)"
+          />
+        </template>
+        <template 
+          #tab1
+        >
+          <div class="d-flex flex-column">
+            <div class="d-flex">
+              <p>{{ embedlyLink }}</p>
               <div
-                class="tab-pane tab-pane"
-                :class="activeTab === 1? 'active':''"
-              >
-                <div class="d-flex flex-column">
-                  <div class="d-flex">
-                    <p>{{ embedlyLink }}</p>
-                    <div
-                      class="saooti-copy"
-                      @click="onCopyCode(embedlyLink, afterCopy)"
-                    />
-                  </div>
-                  <QrCode :url="embedlyLink" />
-                </div>
-              </div>
-              <div
-                v-if="directLink"
-                class="tab-pane tab-pane"
-                :class="activeTab === 2? 'active':''"
-              >
-                <p>{{ directLink.audioUrl }}</p>
-                <div
-                  class="saooti-copy"
-                  @click="onCopyCode(directLink.audioUrl, snackbarRef)"
-                />
-              </div>
+                class="saooti-copy"
+                @click="onCopyCode(embedlyLink, afterCopy)"
+              />
             </div>
+            <QrCode :url="embedlyLink" />
           </div>
-          <div class="modal-footer">
-            <button
-              class="btn btn-primary m-1"
-              @click="closePopup"
-            >
-              {{ $t('Close') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <Snackbar
-      ref="snackbar"
-      position="bottom-left"
-    />
-  </div>
+        </template>
+        <template
+          v-if="directLink"
+          #tab2
+        >
+          <p>{{ directLink.audioUrl }}</p>
+          <div
+            class="saooti-copy"
+            @click="onCopyCode(directLink.audioUrl, snackbarRef)"
+          />
+        </template>
+      </Nav>
+    </template>
+    <template #footer>
+      <button
+        class="btn btn-primary m-1"
+        @click="closePopup"
+      >
+        {{ $t('Close') }}
+      </button>
+    </template>
+  </ClassicModal>
+  <Snackbar
+    ref="snackbar"
+    position="bottom-left"
+  />
 </template>
 
 <script lang="ts">
 import Snackbar from '../Snackbar.vue';
 import displayMethods from '../../mixins/displayMethods';
-
+import ClassicModal from '../modal/ClassicModal.vue';
+import Nav from '../Nav.vue';
 import QrCode from '../../display/sharing/QrCode.vue';
 import { defineComponent } from 'vue'
 import { Podcast } from '@/store/class/general/podcast';
@@ -104,7 +75,9 @@ export default defineComponent({
 
   components: {
     Snackbar,
-    QrCode
+    QrCode,
+    ClassicModal,
+    Nav
   },
   mixins: [displayMethods],
   props: {
@@ -126,12 +99,8 @@ 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();
+    closePopup(): void {
       this.$emit('close');
     },
     afterCopy(): void{
@@ -143,44 +112,11 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-.share-modal-border {
-  border-right: solid 1px rgb(222, 226, 230);
-  border-left: solid 1px rgb(222, 226, 230);
-  border-bottom: solid 1px rgb(222, 226, 230);
-  background-color: #f8fafc;
-  p {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -ms-word-break: break-all;
-    word-break: break-all;
-    word-break: break-word;
-    -ms-hyphens: auto;
-    -moz-hyphens: auto;
-    -webkit-hyphens: auto;
-    hyphens: auto;
-    margin-right: 0.5rem;
-  }
-}
-.nav-tabs {
-  .nav-item {
-    border-right: solid 1px rgb(222, 226, 230);
-    border-left: solid 1px rgb(222, 226, 230);
-    border-top: solid 1px rgb(222, 226, 230);
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-  }
-}
-.tab-content {
-  .tab-pane.active {
-    display: flex;
-    justify-content: space-between;
-  }
-  .saooti-copy {
-    cursor: pointer;
-    align-self: center;
+  #share-modal{
+    .saooti-copy {
+      cursor: pointer;
+      align-self: center;
+    }
   }
 }
-}
 </style>

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

@@ -126,12 +126,6 @@ export default defineComponent({
   background: #282828 !important;
   font-size: 1rem;
 
-  .player-progress-border {
-    height: 10px;
-    width: 3px;
-    background: black;
-  }
-
   @media (max-width: 960px) {
     .d-flex {
       flex-wrap: nowrap !important;

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

@@ -23,9 +23,8 @@
       class="btn play-button-box text-light primary-bg"
       @click="switchPausePlay"
     >
-      <span
+      <Spinner
         v-if="!isPaused&&!isPlaying"
-        class="spinner-border flex-shrink-0"
       />
     </button>
     <div class="text-light player-grow-content">
@@ -78,6 +77,7 @@
 import { CommentPodcast } from '@/store/class/general/comment';
 import { playerDisplay } from '../../mixins/player/playerDisplay';
 import imageProxy from '../../mixins/imageProxy';
+import Spinner from '../Spinner.vue';
 import PlayerProgressBar from './PlayerProgressBar.vue';
 import PlayerTimeline from './PlayerTimeline.vue';
 import { defineComponent } from 'vue';
@@ -86,7 +86,8 @@ export default defineComponent({
 
   components: {
     PlayerProgressBar,
-    PlayerTimeline
+    PlayerTimeline,
+    Spinner
   },
   mixins:[playerDisplay, imageProxy],
 

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

@@ -31,6 +31,7 @@
     <div class="player-grow-large-content">
       <PlayerProgressBar
         ref="progressbar"
+        class-progress="large"
         :hls-ready="hlsReady"
         :show-timeline="showTimeline"
         :comments="comments"
@@ -46,8 +47,13 @@
         <div>{{ totalTime }}</div>
       </div>
     </div>
-    <div class="flex-grow-1 d-flex align-items-center w-100" v-if="''!=transcriptText">
-      <div class="flex-grow-1 p-1 text-center mx-3 transcript-bg rounded">{{transcriptText}}</div>
+    <div
+      v-if="''!=transcriptText"
+      class="flex-grow-1 d-flex align-items-center w-100"
+    >
+      <div class="flex-grow-1 p-1 text-center mx-3 transcript-bg rounded">
+        {{ transcriptText }}
+      </div>
     </div>
     <div class="d-flex align-items-center flex-grow-1">
       <button
@@ -65,9 +71,8 @@
         class="btn play-big-button-box text-light primary-bg"
         @click="switchPausePlay"
       >
-        <span
+        <Spinner
           v-if="!isPaused&&!isPlaying"
-          class="spinner-border flex-shrink-0"
         />
       </button>
       <button
@@ -82,6 +87,7 @@
   </div>
 </template>
 <script lang="ts">
+import Spinner from '../Spinner.vue';
 import { playerDisplay } from '../../mixins/player/playerDisplay';
 import imageProxy from '../../mixins/imageProxy';
 import PlayerProgressBar from './PlayerProgressBar.vue';
@@ -93,7 +99,8 @@ export default defineComponent({
 
   components: {
     PlayerProgressBar,
-    PlayerTimeline
+    PlayerTimeline,
+    Spinner
   },
     mixins:[playerDisplay, imageProxy],
 
@@ -148,9 +155,6 @@ export default defineComponent({
     @media (max-width: 960px) {
       padding: 0.5rem;
     }
-    .progress, .progress-bar{
-      height: 15px !important;
-    }
   }
   .play-big-button-box {
     height: 5rem;

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

@@ -1,31 +1,12 @@
 <template>
-  <div
+  <ProgressBar
     v-if="!playerError"
-    class="progress c-hand"
+    :main-progress="percentProgress"
+    :secondary-progress="percentLiveProgress"
+    :alert-bar="displayAlertBar?durationLivePosition:undefined"
+    :class="classProgress"
     @mouseup="seekTo"
-  >
-    <div
-      class="progress-bar bg-light"
-      role="progressbar"
-      aria-valuenow="0"
-      aria-valuemin="0"
-      aria-valuemax="100"
-      :style="'width: ' + percentLiveProgress + '%'"
-    />
-    <div
-      class="progress-bar primary-bg"
-      role="progressbar"
-      aria-valuenow="0"
-      aria-valuemin="0"
-      aria-valuemax="100"
-      :style="'width: ' + percentProgress + '%'"
-    />
-    <div
-      v-if="displayAlertBar"
-      class="progress-bar progress-bar-duration bg-danger"
-      :style="'left: ' + durationLivePosition + '%'"
-    />
-  </div>
+  />
   <CommentPlayer
     v-if="showTimeline"
     :total-time="totalSecondes"
@@ -34,6 +15,7 @@
 </template>
 
 <script lang="ts">
+import ProgressBar from '../ProgressBar.vue'
 import { CommentPodcast } from '@/store/class/general/comment';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CommentPlayer = defineAsyncComponent(() => import('../../display/comments/CommentPlayer.vue'));
@@ -42,8 +24,10 @@ export default defineComponent({
 
   components: {
     CommentPlayer,
+    ProgressBar
   },
   props: {
+    classProgress:{ default: "", type: String},
     hlsReady: { default: false, type: Boolean},
     showTimeline: { default: false, type: Boolean},
     comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
@@ -87,26 +71,4 @@ export default defineComponent({
     
   },
 })
-</script>
-
-<style lang="scss">
-.octopus-app{
-  .progress {
-    height: 4px;
-    position: relative;
-    @media (max-width: 960px) {
-      height: 8px;
-    }
-  }
-  .progress-bar-duration {
-    width: 10px;
-  }
-  .progress-bar {
-    height: 4px;
-    position: absolute;
-    @media (max-width: 960px) {
-      height: 8px;
-    }
-  }
-}
-</style>
+</script>

package/src/components/pages/Podcast.vue

@@ -72,7 +72,7 @@
         :button-text="$t('All podcast emission button')"
       />
       <PodcastInlineList
-        :podcastId="podcastId"
+        :podcast-id="podcastId"
         title="Les recommendations de Vincent !"
       />
       <PodcastInlineList

package/src/assets/bootstrap-diff.scss

@@ -1,195 +0,0 @@
-// Bootstrap styles overload
-.octopus-app{
-    .btn-group {
-        > .btn:not(:first-child),
-        > .btn-group:not(:first-child) {
-          margin-left: 5px;
-          display: flex;
-        }
-    }
-    .btn{
-        font-size:.7rem;
-        border-radius: 4px;
-        background: $octopus-secondary-color; 
-        text-decoration: none !important;
-        white-space: nowrap;
-        border-width: 0;
-        @media (max-width: 960px) {
-            white-space: normal;
-        }
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-          box-shadow: none;
-        }
-        &:hover{
-          background: $primaryColorMoreTransparent;
-        }
-        //Button disable halo after click
-        &.btn-underline{
-					background: none;
-					padding: 0;
-					margin: 0 2rem 1rem 0;
-					border-radius: 0;
-					@media (max-width: 600px) {
-						margin: 0 1rem 1rem 0;
-						font-size: 0.8em;
-					}
-					position: relative;
-					&:after {    
-						bottom: 0;
-						content: "";
-						display: block;
-						height: 2px;
-						left: 50%;
-						position: absolute;
-						background: $octopus-primary-color;
-						transition: width 0.3s ease 0s, left 0.3s ease 0s;
-						width: 0;
-					}
-					&:hover:after,&.active:after { 
-						width: 100%; 
-						left: 0; 
-					}
-        }
-    
-        &.btn-primary {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: $octopus-primary-color;
-            border: 1px solid $octopus-primary-color;
-            border-radius: 4px !important;
-            color: white !important;
-            font-weight: bold;
-            &:focus,
-            &:hover,
-            &:active,
-            &.active {
-                background: transparent;
-                color: $octopus-primary-color !important;
-            }
-            &:disabled{
-                background-color: #cccccc;
-                border: black;
-                cursor: default;
-                color: gray !important;
-            }
-            @media (max-width: 500px){
-            margin: 0.3rem;
-            }
-        }
-
-        &.btn-more{
-            background: $octopus-primary-color;
-            color: $octopus-background;
-            width: 2rem;
-            height: 2rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50px;
-            margin: 1rem;
-        }
-    
-        &.admin-button{
-            padding: 0.3rem;
-            height: 2.2rem !important;
-            width: 2.2rem !important;
-            font-size: 1.1rem;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            color : $octopus-primary-color;
-            flex-shrink: 0;
-            font-weight: normal;
-            border-radius: 50% !important;
-        }
-    
-    }
-    .share-btn {
-        font-size: 1.3rem;
-        width: 2.5rem !important;
-        height: 2.5rem !important;
-        padding: 0.5rem;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color : $octopus-primary-color;
-        flex-shrink: 0;
-        border-radius: 50% !important;
-    }
-
-    .btn-rss {
-        background: #ddd !important;
-        &:hover {
-            border: 0;
-            background: #ccc !important;
-        }
-    }
-    .btn-facebook {
-        background: #d8dfea !important;
-        color: #3b5998 !important;
-        &:hover {
-            background: #afbdd4 !important;
-        }
-    }
-    .btn-twitter {
-        background: #d2ecfc !important;
-        color: #1da1f2 !important;
-        &:hover {
-            background: #bbe3fb !important;
-        }
-    }
-    .btn-linkedin {
-        background: #0077b550 !important;
-        color: #0077b5 !important;
-        &:hover {
-            background: #00a0dc !important;
-        }
-    }
-    .btn-whatsapp {
-        background: #25d36645 !important;
-        color: #25D366 !important;
-        &:hover {
-            background: #25d36563 !important;
-        }
-    }
-
-    .dropdown-toggle-no-caret::after{
-        display: none;
-    }    
-    .dropdown-menu {
-        padding: 0.5rem;
-    }
-    .dropdown-item {
-        cursor: pointer;
-        font-size: 0.8rem;
-        @media (max-width: 450px) {
-            padding: 0.25rem 0;
-        } 
-    }
-    .dropdown-header {
-        @media (max-width: 450px) {
-            margin: 1rem 0 0;
-        } 
-    }   
-
-    .accordion-button {
-        padding: 0.5rem;
-    }
-    .accordion-item:not(:first-of-type) {
-        border-top: 0.1rem solid rgba(0, 0, 0, 0.125);
-    }
-    .breadcrumb{
-        padding: 1rem;
-        align-items: center;
-        background: #FAFAFA;
-    }
-    .bg-secondary{
-        background: #eee !important;
-    }
-}
-
-