@saooti/octopus-sdk 33.2.0 → 33.2.2

package/index.ts

@@ -15,6 +15,10 @@ export const getRubrique = () => import("./src/components/pages/Rubrique.vue");
 export const getError403Page = () => import("./src/components/pages/Error403Page.vue");
 
 //Misc
+export const getAccordion = () => import("./src/components/misc/Accordion.vue");
+export const getNav = () => import("./src/components/misc/Nav.vue");
+export const getProgressBar = () => import("./src/components/misc/ProgressBar.vue");
+export const getSpinner = () => import("./src/components/misc/Spinner.vue");
 export const getFooter = () => import("./src/components/misc/Footer.vue");
 export const getLeftMenu = () => import("./src/components/misc/LeftMenu.vue");
 export const getPlayer = () => import("./src/components/misc/player/Player.vue");
@@ -24,6 +28,7 @@ export const getHomeDropdown = () => import("./src/components/misc/HomeDropdown.
 export const getMessageModal = () => import("./src/components/misc/modal/MessageModal.vue");
 export const getErrorMessage = () => import("./src/components/misc/ErrorMessage.vue");
 export const getPopover = () => import("./src/components/misc/Popover.vue");
+export const getClassicModal = () => import("./src/components/misc/modal/ClassicModal.vue");
 
 
 //Display

package/package.json

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

package/src/assets/_utilities.scss

@@ -23,7 +23,7 @@ $primary:       #0d6efd !default;
 $secondary:     #6c757d !default;
 $success:       #198754 !default;
 $info:          #0dcaf0 !default;
-$warning:       #ffc107 !default;
+$warning:       #ff924f94 !default;
 $danger:        #dc3545 !default;
 $light:         #f8f9fa !default;
 $dark:          #212529 !default;
@@ -39,6 +39,7 @@ $theme-colors: (
   "black":      $black,
   "white":      $white,
 ) !default;
+
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map-merge(
@@ -128,8 +129,17 @@ $utilities: map-merge(
       property: width,
       class: w,
       values: (
+        0: 0,
+        5: 5%,
+        10: 10%,
+        15: 15%,
+        20: 20%,
         25: 25%,
+        30: 30%,
+        35: 35%,
+        40: 40%,
         50: 50%,
+        60: 60%,
         75: 75%,
         100: 100%,
         auto: auto

package/src/assets/bootstrap.scss

@@ -13,10 +13,56 @@
 	button {
 		cursor: pointer;
 	}
+	p{
+		margin: 0;
+	}
+	h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
+		&:not(.text-uppercase){
+      letter-spacing: -0.03em;
+    }
+		margin-top: 0;
+		margin-bottom:0;
+		font-weight: 600;
+		line-height: 1.2;
+	}
+	h1,.h1{
+		font-size: 1.8rem;
+		text-align: center;
+    color: #666;
+    margin-bottom: 2rem;
+		@media (max-width: 500px){
+      font-size: 1.2rem;
+      margin: 0.5rem 0 1rem;
+    }
+	}
+	h2,.h2{
+		font-size: 1.17rem;
+		@media (max-width: 500px){
+      font-size: 1rem;
+    }
+	}
+	h3,.h3{
+		font-size: 1.125rem;
+	}
+	h4,.h4{
+		font-size: 0.99rem;
+	}
+	h5,.h5{
+		font-size: .81rem;
+	}
+	h6,.h6{
+		font-size: .63rem;
+		display: flex;
+    align-items: center;
+	}
+	.text-truncate{
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 	.btn{
 		display: inline-block;
 		padding: 0.375rem 0.75rem;
-		font-size: 1rem;
 		line-height: 1.5;
 		color: #212529;
 		text-align: center;
@@ -124,6 +170,10 @@
 			}
 	
 	}
+	.btn-transparent{
+		background: transparent;
+		border: 0;
+	}
 	.share-btn {
 			font-size: 1.3rem;
 			width: 2.5rem !important;

package/src/assets/form.scss

@@ -1,10 +1,6 @@
 .octopus-app{
-	button.btn-transparent{
-		background: transparent;
-		border: 0;
-	}
-	.width-auto{
-	width: auto !important;
+	.octopus-form-item{
+		min-height: 1.44rem;
 	}
 	select {
 		background: white !important;
@@ -15,18 +11,7 @@
 		height: 2rem;
 		padding-right: 40px;
 	}
-	.form-check-label {
-		cursor: pointer;
-		&::before {
-		top: 0;
-		}
-		&::after {
-		top: 0;
-		}
-	}
 	.form-input {
-		-webkit-appearance: none;
-		-moz-appearance: none;
 		appearance: none;
 		background: #fff;
 		background-image: none;
@@ -42,16 +27,8 @@
 		position: relative;
 		width: 100%;
 	}
-
-	.form-check-input{
-		margin-right: 5px;
-		cursor: pointer;
-	}
-	.classic-select select {
-		width: 100%;
-	}
 	.vc-select select{
-		padding: 0 20px 0 8px !important;
+		padding: 0 !important;
 	}
 	.vc-date{
 		.vc-month,.vc-day,.vc-year{

package/src/assets/general.scss

@@ -20,44 +20,22 @@ body{
   }
   a{
     word-break: break-word;
-  }
-
-  h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
-    &:not(.text-uppercase){
-      letter-spacing: -0.03em;
-    }
-    font-weight: 600;
-    margin-top: 0;
-    @media (max-width: 500px){
-      margin: 0.2rem;
+    text-decoration: none;
+    color: $octopus-primary-color;
+    &.link-hover{
+      color: black !important;
     }
-  }
-  h1{
-    font-size: 1.8rem;
-    text-align: center;
-    color: #666;
-    margin-bottom: 2rem;
-    @media (max-width: 500px){
-      font-size: 1.2rem;
-      margin: 0.5rem 0 1rem;
+    &.link-hover:hover, &.link-hover.router-link-exact-active.router-link-active{
+      color: $octopus-primary-color !important;
     }
-  }
-  h2{
-    @media (max-width: 500px){
-      font-size: 1rem;
+    &.btn, &.btn:hover{
+      color: #383838;
     }
   }
   hr{
     height: 0.01rem;
     color: #999;
   }
-
-  .small-text{
-    font-size: 0.6rem;
-    display: flex;
-    align-items: center;
-  }
-
   .d-flex-column{
 		display: flex;
 		flex-direction: row;
@@ -73,16 +51,6 @@ body{
       flex-wrap: wrap;
 		}
 	}
-
-  .primary-color{
-    color: $octopus-primary-color;
-  }
-  .primary-darker{
-    color: $octopus-primary-color;
-  }
-  .primary-bg{
-    background: $octopus-primary-color;
-  }
   .secondary-bg{
     background: $octopus-background;
   }
@@ -95,7 +63,6 @@ body{
   .width-fit-content{
     width: fit-content !important;
   }
-
   .page-box{
     background-color: $octopus-background;
     padding: 2rem 5rem 5rem 5rem;
@@ -131,21 +98,7 @@ body{
       box-shadow:0px 6px 20px 3px $primaryColorMoreTransparent !important;
     }
   }
-  a.btn{
-		color: #383838;
-		&:hover{
-			color: #383838;
-		}
-	}
-  a, a:hover{
-    text-decoration: none;
-  }
-  a.link-hover{
-    color: black !important;
-  }
-  a.link-hover.router-link-exact-active.router-link-active, a.link-hover:hover {
-    color: $octopus-primary-color !important;
-  }
+  
   .descriptionText{
     white-space: pre-wrap; 
     word-wrap: break-word;
@@ -191,11 +144,9 @@ body{
   .hid{
     display: none !important;
   }
-
   .d-contents{
     display: contents;
   }
-
   .img-box{
     height: 13rem;
     width: 13rem;

package/src/assets/multiselect.scss

@@ -59,19 +59,24 @@
         width: 1.2rem;
         font-size: 1.2rem;
         cursor: pointer;
-        position: absolute;
-        right: 10px;
-        top: 0.4rem;
         margin: 0;
         background-color: #ccc;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
+        flex-shrink: 0;
+        padding: 0;
         &:before{
             font-size: 0.8rem;
         }
     }
+    .octopus-arrow-down-absolute
+    {
+        position: absolute;
+        right: 10px;
+        top: 0.4rem;
+    }
 
 
     /************************************************************************/

package/src/assets/octopus-library.scss

@@ -17,6 +17,5 @@ $breadcrumb-border-radius:          2rem !default;
 @import './form.scss';
 @import './multiselect.scss';
 @import './transition.scss';
-@import './modal.scss';
 @import './share.scss';
 @import 'v-calendar/dist/style.css';

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

@@ -55,7 +55,7 @@
       <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-down octopus-arrow-down"
+            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

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

@@ -16,7 +16,7 @@
           :class="{ 'border border-danger': 0 === countName || !validName }"
         >
         <p
-          class="d-flex justify-content-end small-text"
+          class="d-flex justify-content-end h6"
           :class="{ 'text-danger': !validName }"
         >
           {{ countName + ' / ' + maxName }}

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="d-flex small-text">
+    <div class="d-flex h6">
       <strong
         v-if="recordingInLive && ('Live' === comment.phase || 'Prelive' === comment.phase)"
         class="recording-bg me-1 text-light p-1"

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

@@ -5,7 +5,7 @@
   >
     <strong
       v-if="knownIdentity && !editName"
-      class="small-text mt-1 c-hand"
+      class="h6 mt-1 c-hand"
       @click="changeIdentity"
     >{{ knownIdentity }}</strong>
     <div
@@ -15,12 +15,12 @@
       <div class="d-flex flex-column">
         <input
           v-model="temporaryName"
-          class="small-text mt-1"
+          class="h6 mt-1"
           type="text"
           :class="{ 'border border-danger': 0 === countName || !validName }"
         >
         <p
-          class="d-flex justify-content-end small-text mb-0"
+          class="d-flex justify-content-end h6 mb-0"
           :class="{ 'text-danger': !validName }"
         >
           {{ countName + ' / ' + maxName }}
@@ -51,7 +51,7 @@
     />
     <template v-if="textareaFocus">
       <p
-        class="d-flex justify-content-end small-text"
+        class="d-flex justify-content-end h6"
         :class="{ 'text-danger': !validComment }"
       >
         {{ countComment + ' / ' + maxComment }}

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

@@ -15,7 +15,7 @@
         :class="{ 'border border-danger': 0 === countName || !validName }"
       >
       <p
-        class="d-flex justify-content-end small-text"
+        class="d-flex justify-content-end h6"
         :class="{ 'text-danger': !validName }"
       >
         {{ countName + ' / ' + maxName }}
@@ -27,7 +27,7 @@
         type="text"
       />
       <p
-        class="d-flex justify-content-end small-text"
+        class="d-flex justify-content-end h6"
         :class="{ 'text-danger': !validComment }"
       >
         {{ countComment + ' / ' + maxComment }}

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

@@ -20,9 +20,9 @@
     </div>
     <div
       v-if="displayContent"
-      class="small-text mt-auto"
+      class="h6 mt-auto"
     >
-      <div class="primary-color flex-shrink-0">
+      <div class="text-primary flex-shrink-0">
         {{ displayContent.name }}
       </div>
       <div class="ms-1 me-1">

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

@@ -71,7 +71,7 @@
       <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-down octopus-arrow-down"
+            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

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

@@ -15,7 +15,7 @@
       class="advanced-search-container"
     >
       <div class="d-flex flex-column">
-        <div class="primary-darker mb-2">
+        <div class="text-primary mb-2">
           {{ $t('Filter') }}
         </div>
         <MonetizableFilter
@@ -59,7 +59,7 @@
         </div>
       </div>
       <div class="d-flex flex-column">
-        <div class="primary-darker mb-2">
+        <div class="text-primary mb-2">
           {{ $t('Sort') }}
         </div>
         <SearchOrder

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

@@ -12,7 +12,7 @@
         <option value="YES">{{ $t('Authorized advertising') }}</option>
         <option value="NO">{{ $t('Prohibited advertising') }}</option>
       </select>
-      <div class="saooti-down octopus-arrow-down" />
+      <div class="saooti-down octopus-arrow-down octopus-arrow-down-absolute" />
     </label>
   </div>
 </template>

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

@@ -13,7 +13,7 @@
         >{{ rubriquage.title }}</option>
       </select>
       <div
-        class="saooti-down octopus-arrow-down"
+        class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
       />
     </label>
     <template v-if="rubriquageId">

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

@@ -100,7 +100,7 @@
           class="position-relative"
         >
           <span
-            class="saooti-down octopus-arrow-down"
+            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

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

@@ -50,7 +50,7 @@
           }"
           class="text-dark"
         >
-          <div class="emission-producer primary-darker">
+          <div class="emission-producer text-primary">
             © {{ playlist.organisation.name }}
           </div>
         </router-link>

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

@@ -13,6 +13,7 @@
     />
     <span class="mx-1">:</span>
     <Popover
+      :title="$t('Animated by')"
       :target="idPopover"
     >
       <div 
@@ -24,7 +25,7 @@
         <!-- eslint-disable vue/no-v-html -->
         <div
           v-if="participant.description"
-          class="h6 participant-desc html-wysiwyg-content"
+          class="participant-desc html-wysiwyg-content"
           v-html="participant.description"
         />
         <!-- eslint-enable -->

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

@@ -42,7 +42,7 @@
         <div
           v-show="!playingPodcast"
           :title="$t('Play')"
-          class="saooti-play primary-color"
+          class="saooti-play text-primary"
         />
         <div
           v-if="!classicPodcastPlay"
@@ -70,14 +70,14 @@
       </div>
       <div
         v-if="!classicPodcastPlay"
-        class="small-text mt-3 fw-bolder"
+        class="h6 mt-3 fw-bolder"
       >
         {{ textVisible }}
       </div>
     </button>
     <div
       v-if="displayDescription && isMobile"
-      class="background-icon primary-bg saooti-arrow-up"
+      class="background-icon bg-primary saooti-arrow-up"
       :class="isDescription ? 'saooti-arrow-down':'saooti-arrow-up'"
       :title="isDescription ? $t('Hide description'):$t('Show description')"
       @click="showDescription"

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

@@ -1,12 +1,12 @@
 <template>
   <div class="d-contents podcast-item-info">
     <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
-      <div class="me-3 small-text">
+      <div class="me-3 h6">
         {{ date }}
       </div>
       <div
         v-if="0 !== durationString.length"
-        class="small-text"
+        class="h6"
       >
         {{ durationString }}
       </div>

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

@@ -47,7 +47,7 @@
         <div
           v-if="undefined!==option"
           class="multiselect-octopus-proposition"
-          :class="option.rubriqueId <= 0 ? 'primary-darker' : ''"
+          :class="option.rubriqueId <= 0 ? 'text-primary' : ''"
           :data-selenium="'rubric-chooser-' + seleniumFormat(option.name)"
         >
           <span class="option__title">{{ option.name }}</span>
@@ -60,7 +60,7 @@
         {{ $t('No elements found. Consider changing the search query.') }}
       </template>
       <template #caret>
-        <span class="saooti-down octopus-arrow-down" />
+        <span class="saooti-down octopus-arrow-down octopus-arrow-down-absolute" />
       </template>
     </VueMultiselect>
   </div>

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

@@ -3,7 +3,7 @@
     <h3>{{ $t('Distribute') }}</h3>
     <p class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
-    </p><div class="primary-darker hide-small-screen text-break">
+    </p><div class="text-primary hide-small-screen text-break">
       {{ rss }}
     </div>
     <input
@@ -12,7 +12,7 @@
       class="btn btn-primary"
       :title="$t('Copy')"
       @click="onCopyCode(rss, afterCopy)"
-    />
+    >
     <RssSection
       v-if="emission"
       :emission="emission"

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

@@ -317,6 +317,9 @@ export default defineComponent({
 <style lang="scss">
 @import '@scss/_variables.scss';
 .octopus-app{
+  iframe{
+    border:0;
+  }
   .sticker {
     align-self: center;
     background: $octopus-primary-color;

package/src/components/form/ClassicCheckbox.vue

@@ -1,20 +1,25 @@
 <template>
-  <div
-    class="form-check"
-    :class="isSwitch?'form-switch':''"
-  >
-    <input
-      :id="idCheckbox"
-      v-model="textValue"
-      type="checkbox"
-      class="form-check-input"
-      :disabled="isDisabled"
-      :title="displayLabel?'':label"
-      :data-selenium="selenium"
-      @click="emitClickAction"
+  <div class="d-flex octopus-form-item">
+    <div
+      :class="isSwitch?'octopus-form-switch me-2':''"
     >
+      <input
+        :id="idCheckbox"
+        v-model="textValue"
+        type="checkbox"
+        :disabled="isDisabled"
+        :title="displayLabel?'':label"
+        :data-selenium="selenium"
+        @click="emitClickAction"
+      >
+      <span
+        v-if="isSwitch"
+        class="slider"
+        @click="textValue=!textValue;emitClickAction"
+      />
+    </div>
     <label
-      class="form-check-label"
+      class="c-hand"
       :class="displayLabel? '': 'd-none'"
       :for="idCheckbox"
     >{{ label }}</label>
@@ -64,3 +69,57 @@ export default defineComponent({
   }
 });
 </script>
+
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app{
+  input[type="checkbox"] {
+    accent-color: $octopus-primary-color;
+    cursor: pointer;
+    margin-right: 5px;
+  }
+  .octopus-form-switch{
+    position: relative;
+    display: inline-block;
+    width: 2rem;
+    height: 1rem;
+    input{
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    .slider{
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      transition: .4s;
+      border-radius: 1rem;
+    }
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 0.8rem;
+      width: 0.8rem;
+      left: 2px;
+      bottom: 2px;
+      background-color: white;
+      transition: .4s;
+      border-radius: 50%;
+    }
+    input:checked + .slider {
+      background-color: $octopus-primary-color;
+    }
+    input:focus + .slider {
+      box-shadow: 0 0 1px $octopus-primary-color;
+    }
+    input:checked + .slider:before {
+      transform: translateX(1rem);
+    }
+
+  }
+}
+</style>

package/src/components/form/ClassicRadio.vue

@@ -6,20 +6,19 @@
     <div
       v-for="option in options"
       :key="option.title"
-      class="form-check"
+      class="octopus-form-item"
       :class="isColumn? '':'me-2'"
     >
       <input
         :id="idRadio + option.value"
         v-model="textValue"
-        class="form-check-input"
         type="radio"
         :name="idRadio"
         :value="option.value"
         :disabled="isDisabled"
       >
       <label
-        class="form-check-label"
+        class="c-hand"
         :for="idRadio + option.value"
       >{{
         option.title
@@ -64,3 +63,13 @@ export default defineComponent({
   }
 });
 </script>
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app{
+  input[type="radio"] {
+    accent-color: $octopus-primary-color;
+    cursor: pointer;
+    margin-right: 5px;
+  }
+}
+</style>

package/src/components/form/ClassicSelect.vue

@@ -9,7 +9,7 @@
       :id="idSelect"
       v-model="textValue"
       :disabled="isDisabled"
-      class="c-hand"
+      class="c-hand w-100"
       :style="getFontFamily"
     >
       <option
@@ -68,11 +68,4 @@ export default defineComponent({
     },
   },
 });
-</script>
-<style lang="scss">
-.octopus-app{
-  .classic-select select{
-    width: inherit;
-  }
-}
-</style>
+</script>

package/src/components/misc/Accordion.vue

@@ -1,13 +1,26 @@
 <template>
   <div
-    class="octopus-accordion"
+    class="octopus-accordion my-2"
   >
     <button
-      class="btn-transparent w-100 p-2 text-start d-flex align-items-center"
+      :id="'accordion-'+idComposer"
+      class="btn-transparent bg-white w-100 p-2 text-start d-flex align-items-center"
+      :class="isOpen?'really-light-primary-bg':''"
       @click="isOpen=!isOpen"
     >
+      <span
+        v-if="icon"
+        class="img-accordion text-primary"
+        :class="icon"
+      />
+      <img
+        v-if="imageUrl"
+        class="img-accordion"
+        :src="imageUrl"
+        :alt="title"
+      >
       <span class="flex-grow-1">{{ title }}</span>
-      <span class="saooti-down" />
+      <span :class="isOpen?'saooti-up': 'saooti-down'" />
     </button>
     <div
       v-show="isOpen"
@@ -24,6 +37,9 @@ export default defineComponent({
   name: "Accordion",
 	props: {
     title: { default: '', type: String },
+    idComposer: { default: '', type: String },
+    icon:{default: undefined, type: String },
+    imageUrl:{default: undefined, type: String },
   },
 	emits:['open'],
   data () {
@@ -41,6 +57,18 @@ export default defineComponent({
 <style lang="scss">
 .octopus-accordion{
 	border: 1px solid #ccc;
+  >button{
+    height: 50px;
+  }
+  .img-accordion {
+    width: 30px;
+    height: 30px;
+    margin-right: 1rem;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   .body{
     border-top: 1px solid #ccc;
   }

package/src/components/misc/Nav.vue

@@ -2,21 +2,23 @@
   <ul class="octopus-nav">
     <li
       v-for="index in tabNumber"
+      v-show="hasSlot(index-1)"
       :key="index-1"
       class="octopus-nav-item"
     >
       <div
         class="octopus-nav-link"
         :class="activeTab === (index-1)? 'active':''"
-        @click="activeTab = (index-1)"
+        @click="$emit('update:activeTab',(index-1))"
       >
         <slot :name="(index-1)" />
       </div>
     </li>
   </ul>
-  <div class="octopus-tab-content">
+  <div :class="transparent? 'd-flex flex-grow-1':'octopus-tab-content'">
     <div
       v-for="index in tabNumber"
+      v-show="hasSlot('tab'+(index-1))"
       :key="index-1"
       class="octopus-tab-pane"
       :class="activeTab === (index-1)? 'active':''"
@@ -32,12 +34,15 @@ export default defineComponent({
   name: 'Nav',
   props: {
     tabNumber: { default: 0, type: Number},
+    activeTab: { default: 0, type: Number},
+    transparent:{ default: false, type: Boolean},
   },
-  data() {
-    return {
-      activeTab: 0 as number,
-    };
-  },
+  emits:['update:activeTab'],
+  methods:{
+    hasSlot(name = 'default') {
+      return !!this.$slots[ name ];
+    }
+  }
 })
 </script>
 
@@ -49,6 +54,7 @@ export default defineComponent({
     flex-wrap: wrap;
     padding-left: 0;
     margin-bottom: 0;
+    margin-top: 0;
     list-style: none;
     border-bottom: 0.05rem solid #ddd;
   }
@@ -86,6 +92,7 @@ export default defineComponent({
       display: flex;
       justify-content: space-between;
       padding: 0.5rem;
+      flex-grow: 1;
     }
   }
 }

package/src/components/misc/Popover.vue

@@ -80,6 +80,9 @@ export default defineComponent({
 			}
     },
     setPopoverData (e: MouseEvent|PointerEvent) {
+			if(this.disable){
+				return;
+			}
 			if(e && e.target){
 				if("click"===e.type){
 					if(this.show && this.isClick){
@@ -141,7 +144,6 @@ export default defineComponent({
 			width: 100%;
 			padding: 0.25rem 1rem;
 			font-weight: 400;
-			text-align: inherit;
 			text-decoration: none;
 			white-space: nowrap;
 			background-color: transparent;

package/src/components/misc/ProgressBar.vue

@@ -12,7 +12,7 @@
       :style="'width: ' + secondaryProgress + '%'"
     />
     <div
-      class="octopus-progress-bar primary-bg"
+      class="octopus-progress-bar bg-primary"
       role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"

package/src/components/misc/Spinner.vue

@@ -1,11 +1,17 @@
 <template>
-  <div class="octopus-spinner" />
+  <div
+    class="octopus-spinner"
+    :class="small?'small':''"
+  />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: "Spinner",
+  props: {
+    small: { default: false, type: Boolean },
+  },
 })
 </script>
 <style lang="scss">
@@ -15,10 +21,15 @@ export default defineComponent({
   height:2rem;
   border-radius: 50%;
   animation: 0.75s linear infinite spinner-border;
-  border: 0.25rem solid currentcolor;
+  border: 2px solid currentcolor;
   border-right-color: transparent;
   flex-shrink: 0;
 
+  &.small{
+    width:1rem;
+    height:1rem;
+  }
+
   @keyframes spinner-border {
     to { transform: rotate(360deg); }
   }

package/src/components/misc/TopBar.vue

@@ -53,7 +53,7 @@
     />
     <div class="d-flex flex-column">
       <div class="hosted-by">
-        {{ $t('Hosted by') }}<span class="ms-1 me-1 primary-darker">Saooti</span>
+        {{ $t('Hosted by') }}<span class="ms-1 me-1 text-primary">Saooti</span>
       </div>
       <div class="d-flex justify-content-end flex-nowrap">
         <HomeDropdown :is-education="isEducation" />

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

@@ -91,6 +91,11 @@ export default defineComponent({
 		position: relative;
 		flex: 1 1 auto;
 		padding: 1rem;
+		overflow-x: auto;
+		.scroller-vertical {
+			min-height: 200px;
+			height: 200px;
+		}
 	}
 	.octopus-modal-header { 
 		display: flex;
@@ -103,13 +108,7 @@ export default defineComponent({
 		color: white;
 		padding: 1rem;
     }
-	.octopus-modal-body{
-		overflow-x: auto;
-		.scroller-vertical {
-			min-height: 200px;
-			height: 200px;
-		}
-	}
+	
 	.octopus-modal-dialog, .octopus-modal-content {
 		min-height: 300px;
 	}
@@ -136,6 +135,10 @@ export default defineComponent({
 		align-items: center;
 		justify-content: flex-end;
 		padding: 1rem;
+		flex-wrap
+		button{
+			margin: 0.1rem;
+		}
 	}
 }
 </style>

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

@@ -275,8 +275,7 @@ export default defineComponent({
     this.initData();
   },
   methods: {
-    closePopup(event: { preventDefault: () => void }): void {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
     getName(person: Participant): string {

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

@@ -5,7 +5,10 @@
     @close="closePopup"
   >
     <template #body>
-      <Nav :tab-number="tabs.length">
+      <Nav
+        v-model:activeTab="activeTab"
+        :tab-number="tabs.length"
+      >
         <template
           v-for="(tab, index) in tabs"
           #[index]

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

@@ -20,7 +20,7 @@
         'saooti-pause': isPlaying,
         '':!isPaused&&!isPlaying
       }"
-      class="btn play-button-box text-light primary-bg"
+      class="btn play-button-box text-light bg-primary"
       @click="switchPausePlay"
     >
       <Spinner

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

@@ -68,7 +68,7 @@
           'saooti-pause': isPlaying,
           '':!isPaused&&!isPlaying
         }"
-        class="btn play-big-button-box text-light primary-bg"
+        class="btn play-big-button-box text-light bg-primary"
         @click="switchPausePlay"
       >
         <Spinner

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

@@ -110,8 +110,8 @@ export const playerLogic = defineComponent({
       this.$store.commit('player/transcript',{actual: 0,actualText:actualText, value : arrayTranscript});
     },
     parseSrt(transcript: string){
-      var pattern = /(\d+)\n([\d:,]+)\s+-{2}\>\s+([\d:,]+)\n([\s\S]*?(?=\n{2}|$))/gm;
-      var result = [];
+      const pattern = /(\d+)\n([\d:,]+)\s+-{2}\>\s+([\d:,]+)\n([\s\S]*?(?=\n{2}|$))/gm;
+      const result = [];
       if (typeof(transcript) != 'string'){
         return;
       }
@@ -130,7 +130,7 @@ export const playerLogic = defineComponent({
       return result;
     },
     srtTimeToSeconds(time:string): number{
-      var a = time.split(':'); 
+      const a = time.split(':'); 
       return (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+parseFloat(a[2])); 
     },
     getDomain(): string{

package/src/assets/modal.scss

@@ -1,90 +0,0 @@
-//Modal
-.octopus-app{
-	.octopus-modal{
-		position: fixed;
-		top: 0;
-		left: 0;
-		display: block;
-		z-index: 1055;
-		width: 100%;
-		height: 100%;
-		overflow-x: hidden;
-		overflow-y: auto;
-		outline: 0;
-	}
-	.octopus-modal-backdrop {
-		opacity: 0.5;
-		z-index: 0;
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		background-color: black;
-	}
-
-	.octopus-modal-dialog {
-		position: relative;
-		pointer-events: none;
-		margin: 1.75rem auto;
-		max-height: 75vh;
-		max-width: 640px;
-		width: 100%;
-		display: flex;
-		color: #353535 !important;
-		@media (max-width: 500px){
-			width: 95%;
-			margin: 2.5% !important;
-		}
-	}
-	.octopus-modal-body{
-		position: relative;
-		flex: 1 1 auto;
-		padding: 1rem;
-	}
-	.octopus-modal-header { 
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		justify-content: space-between;
-		border: 0;
-		border-radius: 0.8rem 0.8rem 0 0;
-		background: $octopus-primary-color;
-		color: white;
-		padding: 1rem;
-    }
-	.octopus-modal-body{
-		overflow-x: auto;
-		.scroller-vertical {
-			min-height: 200px;
-			height: 200px;
-		}
-	}
-	.octopus-modal-dialog, .octopus-modal-content {
-		min-height: 300px;
-	}
-	.octopus-modal-content{
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		pointer-events: auto;
-    	width: 100%;
-		background-color: white;
-		background-clip: padding-box;
-		border: 0;
-		outline: 0;
-		height: auto !important;
-		max-height: calc(100vh - 250px) !important;
-		border-radius: 0.8rem;
-		box-shadow: 0 0.2rem 0.5rem rgba(40,40,40,.3);
-	}
-	.octopus-modal-footer{
-		display: flex;
-		flex-shrink: 0;
-		border: 0;
-		flex-wrap: initial;
-		align-items: center;
-		justify-content: flex-end;
-		padding: 1rem;
-	}
-}