@saooti/octopus-sdk 39.3.15 → 39.4.0-SNAPSHOT

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/index.ts

@@ -16,6 +16,7 @@ export const getError403Page = () => import("./src/components/pages/Error403Page
 export const getRadio = () => import("./src/components/pages/RadioPage.vue");
 export const getVideo = () => import("./src/components/pages/VideoPage.vue");
 export const getMapPage= () => import("./src/components/pages/MapPage.vue");
+export const getPageNotFound= () => import("./src/components/pages/PageNotFound.vue");
 
 //Misc
 export const getAccordion = () => import("./src/components/misc/ClassicAccordion.vue");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.3.15",
+  "version": "39.4.0-SNAPSHOT",
   "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

@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex flex-column h-100 octopus-app">
     <template v-if="pageFullyLoad">
-      <TopBar :is-education="false" />
+      <TopBar/>
       <main>
         <CategoryFilter v-if="firstDisplayCategoryFilter" />
         <div v-else class="category-filter-no-filter" />
@@ -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/categories/CategoryList.vue

@@ -25,14 +25,13 @@
     <ClassicPopover
       target="categories-dropdown"
       :only-click="true"
-      :is-fixed="true"
       :left-pos="true"
-      class="popover-z-index"
     >
       <button
         v-for="category in hidenCategories"
         :key="category.id"
         class="me-3 octopus-dropdown-item"
+        @keydown.enter="checkIfFilter(category)"
         @mousedown="checkIfFilter(category)"
       >
         {{ category.name }}

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

@@ -10,6 +10,7 @@
     />
     <div v-if="isTextareaActive" class="d-flex justify-content-between mt-1">
       <ClassicEmojiPicker
+        :id="uniqueId"
         popover-relative-class="page-element"
         @emoji-selected="addEmojiSelected"
       />
@@ -123,6 +124,9 @@ export default defineComponent({
         ? this.$t("Answer a comment")
         : this.$t("Write a comment");
     },
+    uniqueId(){
+      return "-comment"+(this.inAnswerComment?.commentId??"-parent");
+    }
   },
   watch: {
     focus(): void {
@@ -196,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/CommentList.vue

@@ -21,6 +21,7 @@
           class="me-3 octopus-dropdown-item"
           :disabled="sortOption.value === sortType"
           @mousedown="changeSort(sortOption.value)"
+          @keydown.enter="changeSort(sortOption.value)"
         >
           {{ sortOption.title }}
         </button>

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/item/CommentMoreActions.vue

@@ -35,7 +35,6 @@
     </button>
     <ClassicPopover
       :target="'comment-dropdown' + comment.commentId"
-      popover-class="popover-z-index"
       :only-click="true"
       :left-pos="true"
     >
@@ -44,6 +43,7 @@
           v-if="action.condition"
           class="octopus-dropdown-item c-hand"
           @mousedown="action.actionClick"
+          @keydown.enter="action.actionClick"
         >
           {{ action.title }}
         </button>

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/comments/modal/EditCommentModal.vue

@@ -10,13 +10,6 @@
         :error-text="errorUpdate ? $t(`An error occurred`) : undefined"
       />
       <template v-if="!inProcessing && !errorUpdate">
-        <ClassicInputText
-          v-model:text-init="name"
-          v-model:error-variable="errorName"
-          input-id="username-input"
-          :label="$t('Your name')"
-          :max-length="MAX_NAME"
-        />
         <ClassicInputText
           v-model:text-init="commentText"
           v-model:error-variable="errorCommentText"
@@ -26,7 +19,7 @@
           :error-text="$t('Please provide a comment')"
           :is-textarea="true"
           :is-emoji-picker="true"
-          emoji-relative-class="octopus-modal"
+          popover-relative-class="octopus-modal"
           :focus="true"
         />
         <ClassicSelect
@@ -49,7 +42,7 @@
       </button>
       <button
         class="btn btn-primary m-1"
-        :disabled="errorName || errorCommentText"
+        :disabled="errorCommentText"
         @click="onEditComment"
       >
         {{ $t("Yes") }}
@@ -97,10 +90,7 @@ export default defineComponent({
   data() {
     return {
       MAX_DESCRIPTION: Constants.MAX_COMMENT as number,
-      MAX_NAME: Constants.MAX_COMMENT_NAME as number,
-      name: undefined as string | undefined,
       commentText: undefined as string | undefined,
-      errorName: true as boolean,
       errorCommentText: true as boolean,
       commentState: "PENDING" as string,
       errorUpdate: false as boolean,
@@ -115,7 +105,6 @@ export default defineComponent({
       if (!this.comment) {
         return;
       }
-      this.name = this.comment.poster.userName;
       this.commentText = this.comment.content;
       this.commentState = this.comment.state;
     },
@@ -131,7 +120,6 @@ export default defineComponent({
           dataToSend: {
             commentId: this.comment.commentId,
             content: this.commentText,
-            name: this.name,
             state: this.commentState,
           },
           isNotAuth: !this.editRight,

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/AdvancedSearch.vue

@@ -17,7 +17,7 @@
           {{ $t("Filter") }}
         </div>
         <MonetizableFilter
-          v-if="!isPodcastmaker && !isEducation"
+          v-if="!isPodcastmaker && !platformEducation"
           :is-emission="isEmission"
           :monetisable="monetisable"
           @update:monetisable="updateMonetisable"
@@ -82,6 +82,7 @@ import { rubriquesFilterParam } from "../../mixins/routeParam/rubriquesFilterPar
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { mapState } from "pinia";
+import { useGeneralStore } from "../../../stores/GeneralStore";
 const MonetizableFilter = defineAsyncComponent(
   () => import("./MonetizableFilter.vue"),
 );
@@ -110,7 +111,6 @@ export default defineComponent({
   props: {
     organisationId: { default: undefined, type: String },
     isEmission: { default: false, type: Boolean },
-    isEducation: { default: false, type: Boolean },
     includeHidden: { default: false, type: Boolean },
     sort: { default: "DATE", type: String },
     onlyVideo: { default: false, type: Boolean },
@@ -145,6 +145,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(useGeneralStore, ["platformEducation"]),
     ...mapState(useFilterStore, ["filterIab", "filterRubrique"]),
     ...mapState(useAuthStore, [
       "isRoleProduction",

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;