@saooti/octopus-sdk 39.3.16 → 39.4.0

package/.stylelintrc

@@ -0,0 +1,18 @@
+{
+  "plugins": [
+    "stylelint-gamut"
+  ],
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-standard-vue",
+    "stylelint-config-standard-vue/scss",
+    "stylelint-config-recommended-vue",
+    "stylelint-config-recommended-vue/scss"
+  ],
+  "rules": {
+    "gamut/color-no-out-gamut-range": true,
+    "function-disallowed-list": ["rgba", "hsla", "rgb", "hsl"],
+    "color-function-notation": "modern",
+    "color-no-hex": true
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.3.16",
+  "version": "39.4.0",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -11,6 +11,7 @@
     "proxy_authentifié": "node proxy.ts",
     "proxy_non_authentifié": "node proxy.ts false",
     "lint": "eslint --fix src",
+    "stylelint": "stylelint **/*.{scss,vue} --fix",
     "build_bundle": "vue-cli-service build --target lib --name octopus ./index.js",
     "sonar": "node sonarqube-scanner.js"
   },
@@ -37,10 +38,18 @@
     "hls.js": "^1.5.17",
     "humanize-duration": "^3.32.1",
     "pinia": "^2.3.0",
+    "postcss-html": "^1.7.0",
     "qrcode.vue": "^3.6.0",
     "sass": "^1.82.0",
     "sockjs-client": "^1.6.1",
     "sonarqube-scanner": "^3.3.0",
+    "stylelint": "^16.13.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint-config-standard-vue": "^1.0.0",
+    "stylelint-gamut": "^1.3.4",
     "swiper": "^11.1.14",
     "typescript-eslint": "^8.18.1",
     "video.js": "^8.21.0",

package/src/App.vue

@@ -116,4 +116,4 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" src="@/assets/octopus-library.scss"></style>
+<style lang="scss" src="@/style/octopus-library.scss"></style>

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

@@ -276,31 +276,38 @@ export default defineComponent({
     min-height: 10rem;
     background-size: cover;
     background-position: center;
+
     h1 {
-      margin: auto 1rem auto;
+      margin: auto 1rem;
       font-size: 2rem;
       color: white;
     }
-    @media (max-width: 960px) {
+
+    @media (width <= 960px) {
       min-height: 6rem;
     }
   }
+
   .octopus-breadcrumb {
     padding: 1rem;
     align-items: center;
+
     .octopus-breadcrumb-li {
       list-style: none;
       color: white !important;
+
       a {
         color: white !important;
         font-weight: bold;
       }
-      &:after {
+
+      &::after {
         content: "-";
         margin: 0 0.5rem;
       }
+
       &:last-child {
-        &:after {
+        &::after {
           content: "";
         }
       }

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

@@ -200,7 +200,7 @@ export default defineComponent({
     border-top: 0;
     border-right: 0;
     border-left: 0;
-    border-bottom: 0.1rem solid #ddd !important;
+    border-bottom: 0.1rem solid var(--octopus-border-default) !important;
     overflow: hidden !important;
     box-shadow: unset !important;
     background: transparent !important;

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

@@ -86,22 +86,26 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@use "../../../assets/comments";
+@use "../../../style/comments";
+
 .octopus-app {
   .comment-player-container {
     position: relative;
     width: 100%;
     height: 60px;
     display: flex;
-    @media (max-width: 960px) {
+
+    @media (width <= 960px) {
       display: none;
     }
+
     .comment-border {
       width: auto;
       position: absolute;
-      border-left: solid 1px #ffffff;
+      border-left: solid 1px white;
       height: 10px;
     }
+
     .status-comment {
       margin-top: 10px;
       position: absolute;

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

@@ -106,5 +106,5 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-@use "../../../../assets/comments";
+@use "../../../../style/comments";
 </style>

package/src/components/display/comments/like/LikeButton.vue

@@ -81,11 +81,12 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-@use "@scss/variables" as octopusVariables;
+
 @use "sass:color";
+
 .octopus-app .btn-like-comment {
-  $neutral-color: #555555;
-  $background-color: octopusVariables.$octopus-primary-color;
+  $background-color: var(--octopus-primary);
+
   &.is-dislike {
     $background-color: black;
   }
@@ -95,7 +96,7 @@ export default defineComponent({
   border: none;
   outline: none;
   z-index: 1;
-  color: $neutral-color;
+  color: var(--octopus-color-text);
   font-size: 1.2rem;
   width: 2.2rem;
   height: 2.2rem;
@@ -107,8 +108,8 @@ export default defineComponent({
   justify-content: center;
 
   &:hover {
-    background: #dddddd;
-    color: color.scale($neutral-color, $lightness: -10%);
+    background: var(--octopus-secondary);
+    color: oklch(from var(--octopus-color-text) calc(l + 0.1) c h);
   }
 
   /* Animation */
@@ -118,8 +119,8 @@ export default defineComponent({
     background: $background-color;
     animation: 0.8s;
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       content: "";
       position: absolute;
       top: 50%;
@@ -130,7 +131,7 @@ export default defineComponent({
       height: 6px;
       border-radius: 100%;
       transform: scale(0);
-      color: $neutral-color;
+      color: var(--octopus-color-text);;
       border: 1px solid transparent;
       box-shadow:
         -0.8em 0 0 -2px,
@@ -143,37 +144,42 @@ export default defineComponent({
         0.6em 0.6em 0 -2px;
     }
 
-    &:before {
+    &::before {
       animation: effect-01-animation 0.8s
         cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
-    &:after {
+
+    &::after {
       animation: effect-02-animation 0.6s
         cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
   }
 
   @keyframes effect-01-animation {
-    from {
+    0% {
       transform: rotate(-15deg) scale(0);
     }
+
     40% {
       opacity: 1;
     }
-    to {
+
+    100% {
       transform: rotate(-30deg) scale(2.5);
       opacity: 0;
     }
   }
 
   @keyframes effect-02-animation {
-    from {
+    0% {
       transform: rotate(10deg) scale(0);
     }
+
     40% {
       opacity: 1;
     }
-    to {
+
+    100% {
       transform: rotate(30deg) scale(2);
       opacity: 0;
     }

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

@@ -151,10 +151,12 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app {
   .list-episode {
-    padding: 2rem 0rem 1rem !important;
-    @media (max-width: 450px) {
-      padding: 0.5rem 0rem 1rem !important;
+    padding: 2rem 0 1rem !important;
+
+    @media (width <= 450px) {
+      padding: 0.5rem 0 1rem !important;
     }
+
     h2 {
       margin-bottom: 1rem;
     }

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

@@ -68,19 +68,19 @@
             playerPodcast !== p ||
             (playerPodcast === p && 'PAUSED' === playerStatus)
           "
-          class="play-button-box bg-secondary"
+          class="play-button-box bg-secondary-light"
           @click="play(p)"
         >
           <PlayIcon class="text-light" :title="$t('Play')" />
         </button>
-        <button v-else class="play-button-box bg-secondary" @click="pause(p)">
+        <button v-else class="play-button-box bg-secondary-light" @click="pause(p)">
           <PauseIcon class="text-light" :title="$t('Pause')" />
         </button>
       </div>
     </div>
     <div
       v-if="buttonMore && podcasts.length === nbPodcasts"
-      class="border-top emission-item-border-color p-2 secondary-bg d-flex justify-content-center"
+      class="border-top emission-item-border-color p-2 octopus-bg d-flex justify-content-center"
     >
       <router-link
         :to="{
@@ -184,31 +184,36 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@use "@scss/variables" as octopusVariables;
+
+
 .emission-player-container {
   list-style: none;
-  background: #fff;
+  background: var(--octopus-background);
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: octopusVariables.$octopus-item-size;
+  max-width: var(--octopus-image-size);
   height: min-content;
-  border: 2px solid #eee;
-  border-radius: octopusVariables.$octopus-borderradius;
+  border: 2px solid var(--octopus-border-default);
+  border-radius: var(--octopus-border-radius);
   overflow: hidden;
+
   .emission-item-border-color {
-    border-color: #ddd;
+    border-color: var(--octopus-secondary);
   }
+
   .define-width {
     width: 9rem;
   }
-  @media (max-width: 960px) {
+
+  @media (width <= 960px) {
     .d-flex:not(.flex-column) {
       flex-wrap: nowrap;
     }
   }
-  @media (max-width: 450px) {
-    max-width: octopusVariables.$octopus-mobile-item-size;
+  
+  @media (width <= 450px) {
+    max-width: var(--octopus-image-size);
   }
 }
 </style>

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

@@ -96,21 +96,24 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app {
   .emission-presentation-container {
-    @media (max-width: 960px) {
+    @media (width <= 960px) {
       width: 250px !important;
       margin-right: 0.5rem;
     }
+
     .emission-description {
       height: 0;
       flex-grow: 1;
       max-height: unset;
     }
   }
+
   .emission-item-container.emission-vertical-item {
     flex-grow: 0;
     width: 400px;
     flex-shrink: 0;
   }
+
   .img-box-bigger {
     width: 400px;
     height: 400px;

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

@@ -129,33 +129,46 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app {
   .overflow-phone-auto {
-    @media (max-width: 960px) {
+    @media (width <= 960px) {
       overflow-y: auto;
+      scroll-snap-type: x mandatory;
+
+      .emission-item-container{
+        scroll-snap-align: center;
+      }
     }
   }
+
   .emission-column {
     flex-shrink: 0;
     width: calc((100% - 420px) / 2);
-    @media (max-width: 1550px) {
+
+    @media (width <= 1550px) {
       width: calc((100% - 420px));
     }
-    @media (max-width: 960px) {
+
+    @media (width <= 960px) {
       width: auto;
       flex-direction: row !important;
     }
   }
+
   .emission-column-margin {
     margin-right: 1rem;
-    @media (max-width: 960px) {
+
+    @media (width <= 960px) {
       margin-right: 0;
     }
   }
+
   .show-emission-column {
     display: flex;
-    @media (max-width: 1550px) {
+
+    @media (width <= 1550px) {
       display: none !important;
     }
-    @media (max-width: 960px) {
+
+    @media (width <= 960px) {
       display: flex !important;
     }
   }

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

@@ -144,22 +144,21 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@use "@scss/variables" as octopusVariables;
+
+
 .octopus-app {
   .filter-speech-bubble {
     position: absolute;
-    background: octopusVariables.$octopus-primary-color;
-    border-radius: octopusVariables.$octopus-borderradius;
+    background: var(--octopus-primary);
+    border-radius: var(--octopus-border-radius);
     width: 10rem;
     right: 4rem;
     padding: 5px;
-    -webkit-animation: fadein 1s;
-    -moz-animation: fadein 1s;
     animation: fadein 1s;
     color: white;
   }
 
-  .filter-speech-bubble:after {
+  .filter-speech-bubble::after {
     content: "";
     position: absolute;
     right: 0;
@@ -167,35 +166,39 @@ export default defineComponent({
     width: 0;
     height: 0;
     border: 18px solid transparent;
-    border-left-color: octopusVariables.$octopus-primary-color;
+    border-left-color: var(--octopus-primary);
     border-right: 0;
     border-bottom: 0;
     margin-top: -9px;
     margin-right: -18px;
-    -webkit-animation: fadein 1s;
-    -moz-animation: fadein 1s;
     animation: fadein 1s;
   }
+
   @keyframes fadein {
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
   }
-  @-moz-keyframes fadein {
+
+  @keyframes fadein {
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
   }
-  @-webkit-keyframes fadein {
+
+  @keyframes fadein {
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }

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

@@ -55,6 +55,7 @@ export default defineComponent({
 .octopus-app .paginate {
   display: flex;
   justify-content: flex-end;
+
   select {
     border-top: 0;
     border-right: 0;

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

@@ -187,28 +187,32 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-@use "@scss/variables" as octopusVariables;
+
 .octopus-app {
-  .module-box .paginate-fixed,
-  .octopus-modal .paginate-fixed,
-  .octopus-accordion .paginate-fixed {
-    bottom: 0 !important;
-  }
   .paginate-fixed {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 100%;
     position: sticky;
-    background: octopusVariables.$octopus-background;
+    background: var(--octopus-background);
     padding: 0.5rem 0;
     z-index: 10;
+
     .btn {
       border-radius: 0;
+
       &.active {
-        background: octopusVariables.$primaryColorMoreTransparent;
+        background: var(--octopus-primary-more-transparent);
       }
     }
   }
+  
+  .module-box .paginate-fixed,
+  .octopus-modal .paginate-fixed,
+  .octopus-accordion .paginate-fixed {
+    bottom: 0 !important;
+  }
+
 }
 </style>

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

@@ -19,7 +19,7 @@
       </swiper>
     </template>
     <div v-else class="element-list-inline">
-      <div v-for="(obj, index) in listObject" :key="obj">
+      <div v-for="(obj, index) in listObject" :key="obj" class="element-list-item">
         <slot name="octopusSlide" :option="obj" :index="index" />
       </div>
     </div>
@@ -137,10 +137,12 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-@use "@scss/variables" as octopusVariables;
+
+
 :root {
   --swiper-navigation-sides-offset: 0;
 }
+
 .swiper {
   width: 100%;
   height: 100%;
@@ -148,17 +150,19 @@ export default defineComponent({
 
 .swiper-button-next,
 .swiper-button-prev {
-  color: octopusVariables.$octopus-primary-color !important;
+  color: var(--octopus-primary) !important;
   height: 100%;
   top: 0;
   bottom: 0;
   margin: 0;
   width: 40px;
-  background: octopusVariables.$octopus-background;
+  background: var(--octopus-background);
 }
+
 .swiper-button-lock {
   display: flex;
 }
+
 .swiper-slide {
   display: flex !important;
   align-items: center;