@saooti/octopus-sdk 38.0.9 → 38.0.11

package/package.json

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

package/src/App.vue

@@ -24,9 +24,6 @@ import { useGeneralStore } from "@/stores/GeneralStore";
 import { mapState, mapActions } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { Category } from "./stores/class/general/category";
-const LeftMenu = defineAsyncComponent(
-  () => import("@/components/misc/LeftMenu.vue"),
-);
 const FooterOctopus = defineAsyncComponent(
   () => import("@/components/misc/FooterSection.vue"),
 );
@@ -38,7 +35,6 @@ export default defineComponent({
 
   components: {
     TopBar,
-    LeftMenu,
     CategoryFilter,
     FooterOctopus,
     PlayerComponent,

package/src/assets/form.scss

@@ -2,6 +2,9 @@
 	.octopus-form-item{
 		min-height: 1.44rem;
     padding: 0.4rem 0;
+		@media (max-width: 960px) {
+			padding: 0;
+		}
 	}
 	.form-label {
 		display: block;

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

@@ -5,7 +5,11 @@
     :style="backgroundDisplay"
   >
     <h1>{{ titleDisplay }}</h1>
-    <div v-show="isDisplay" class="d-flex flex-column justify-content-end">
+    <div
+      v-if="!isPhone"
+      v-show="isDisplay"
+      class="d-flex flex-column justify-content-end"
+    >
       <ol
         v-if="filterIab || filterRubrique.length"
         class="octopus-breadcrumb d-flex align-items-center justify-content-center flex-wrap"
@@ -67,6 +71,7 @@ import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { useFilterStore } from "@/stores/FilterStore";
 import { state } from "../../../stores/ParamSdkStore";
+import resizePhone from "../../mixins/resizePhone";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 const CategoryList = defineAsyncComponent(() => import("./CategoryList.vue"));
@@ -84,9 +89,12 @@ export default defineComponent({
     RubriqueList,
     RubriqueChooser,
   },
+  mixins: [resizePhone],
   data() {
     return {
       isCategories: false as boolean,
+      isPhone: false as boolean,
+      windowWidth: 0 as number,
     };
   },
   computed: {

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="categories.length"
-    class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone category-list"
+    class="d-inline-flex w-100 mb-3 ps-3 pe-3 category-list"
   >
     <div ref="categoryListContainer" class="category-list-container">
       <button

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

@@ -2,7 +2,7 @@
   <div class="d-flex flex-column justify-content-center align-items-center">
     <button
       class="d-flex justify-content-center align-items-center mb-3 text-secondary btn-transparent"
-      @click="showFilters = !showFilters"
+      @click="clickShowFilters"
     >
       <div>{{ $t("Advanced filters") }}</div>
       <div
@@ -10,7 +10,11 @@
         :class="{ 'arrow-transform': showFilters }"
       />
     </button>
-    <div v-show="showFilters" class="advanced-search-container">
+    <div
+      v-if="firstLoaded"
+      v-show="showFilters"
+      class="advanced-search-container"
+    >
       <div class="d-flex flex-column">
         <div class="text-primary mb-2">
           {{ $t("Filter") }}
@@ -77,16 +81,22 @@
 <script lang="ts">
 import { state } from "../../../stores/ParamSdkStore";
 import { orgaComputed } from "../../mixins/orgaComputed";
-import CategorySearchFilter from "./CategorySearchFilter.vue";
-import DateFilter from "./DateFilter.vue";
-import SearchOrder from "./SearchOrder.vue";
-import RubriqueFilter from "./RubriqueFilter.vue";
-import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { defineComponent, defineAsyncComponent } from "vue";
 const MonetizableFilter = defineAsyncComponent(
   () => import("./MonetizableFilter.vue"),
 );
+const CategorySearchFilter = defineAsyncComponent(
+  () => import("./CategorySearchFilter.vue"),
+);
+const RubriqueFilter = defineAsyncComponent(
+  () => import("./RubriqueFilter.vue"),
+);
+const ClassicCheckbox = defineAsyncComponent(
+  () => import("../../form/ClassicCheckbox.vue"),
+);
+const DateFilter = defineAsyncComponent(() => import("./DateFilter.vue"));
+const SearchOrder = defineAsyncComponent(() => import("./SearchOrder.vue"));
 export default defineComponent({
   components: {
     MonetizableFilter,
@@ -123,6 +133,7 @@ export default defineComponent({
       isNotVisible: this.includeHidden,
       isNotValidate: false as boolean,
       showFilters: false as boolean,
+      firstLoaded: false as boolean,
     };
   },
 
@@ -183,6 +194,12 @@ export default defineComponent({
     },
   },
   methods: {
+    clickShowFilters(): void {
+      if (!this.firstLoaded) {
+        this.firstLoaded = true;
+      }
+      this.showFilters = !this.showFilters;
+    },
     updateFromDate(value: string): void {
       this.$emit("updateFromDate", value);
     },

package/src/components/display/live/RadioPlanning.vue

@@ -28,11 +28,7 @@
           <div
             v-for="planningItem in planning[daySelected]"
             v-else
-            :key="
-              planningItem.occurrenceId +
-              '' +
-              planningItem.liveId
-            "
+            :key="planningItem.occurrenceId + '' + planningItem.liveId"
             class="d-flex align-items-center mb-3"
           >
             <div class="program-item-date fw-bold flex-shrink-0">
@@ -57,10 +53,14 @@
                 height="150"
                 class="m-2"
                 :title="
-                  $t('Episode name image', { name: planningItem.podcastData.title })
+                  $t('Episode name image', {
+                    name: planningItem.podcastData.title,
+                  })
                 "
                 :alt="
-                  $t('Episode name image', { name: planningItem.podcastData.title })
+                  $t('Episode name image', {
+                    name: planningItem.podcastData.title,
+                  })
                 "
               />
               <div class="d-flex flex-column">
@@ -185,7 +185,9 @@ export default defineComponent({
             return b.startDate > a.startDate ? -1 : 0;
           });
         }
-        this.planning[this.daySelected] = occurrences.filter((oc) => oc.podcastId);
+        this.planning[this.daySelected] = occurrences.filter(
+          (oc) => oc.podcastId,
+        );
       } catch {
         this.error = true;
       }
@@ -207,10 +209,10 @@ export default defineComponent({
     width: 100px;
     font-size: 1.1rem;
   }
-  .button-date{
+  .button-date {
     border: 1px solid #ddd;
     padding: 0.5rem 0;
-    &:hover{
+    &:hover {
       background: #ddd;
     }
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex w-100 mb-3 px-3 hide-phone">
+  <div class="d-inline-flex w-100 mb-3 px-3">
     <div ref="rubriqueListContainer" class="rubrique-list-container">
       <label for="rubrique-list-select" class="hid">{{ $t("By topic") }}</label>
       <select

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

@@ -24,7 +24,7 @@
           :title="$t('Advanced sharing')"
           :to="{
             name: 'advancedShare',
-            params: { podcastId: podcast.podcastId }
+            params: { podcastId: podcast.podcastId },
           }"
         />
       </div>
@@ -215,7 +215,7 @@ export default defineComponent({
     authenticated(): boolean {
       return state.generalParameters.authenticated as boolean;
     },
-    isProduction() : boolean{
+    isProduction(): boolean {
       return state.generalParameters.isProduction as boolean;
     },
     isPodcastmaker(): boolean {

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

@@ -161,7 +161,10 @@ export default defineComponent({
       return (
         undefined !== this.podcast &&
         undefined !== this.podcast.article &&
-        0 !== this.podcast.article.length
+        0 !== this.podcast.article.length &&
+        ("default" === this.iFrameModel ||
+          "large" === this.iFrameModel ||
+          "largeMore" === this.iFrameModel)
       );
     },
     displayTranscriptParam(): boolean {
@@ -355,7 +358,7 @@ export default defineComponent({
       if (!this.proceedReading) {
         url.push("&proceed=false");
       }
-      if (!this.displayArticle) {
+      if (!this.displayArticle && this.displayArticleParam) {
         url.push("&article=false");
       }
       if (!this.displayTranscript) {

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

@@ -52,18 +52,18 @@ export default defineComponent({
         undefined !== this.podcast && undefined !== this.podcast.video?.videoId
       );
     },
-    optionsSelectLive(){
+    optionsSelectLive() {
       return [
         { name: this.$t("Large version"), value: "large", condition: true },
         {
           name: this.$t("High version"),
           value: "videoLive",
           condition: this.podcast && this.podcast.podcastId,
-        }
+        },
       ];
     },
     optionsSelect() {
-      if(this.isLive){
+      if (this.isLive) {
         return this.optionsSelectLive;
       }
       return [
@@ -114,7 +114,7 @@ export default defineComponent({
     if (this.isVideoPodcast) {
       this.$emit("update:iFrameModel", "video");
     }
-    if(this.isLive){
+    if (this.isLive) {
       return;
     }
     await this.initCustomPlayers();

package/src/components/misc/HomeDropdown.vue

@@ -106,13 +106,13 @@ export default defineComponent({
     routerBackoffice() {
       return [
         {
-          title: this.$t('My space'),
+          title: this.$t("My space"),
           class: "octopus-dropdown-item show-small-phone-flex",
           path: "/main/priv/backoffice",
           condition: this.isAuthenticatedWithOrga,
         },
         {
-          title: this.$t('Upload'),
+          title: this.$t("Upload"),
           class: "octopus-dropdown-item show-small-phone-flex",
           path: "/main/priv/upload",
           condition: this.isAuthenticatedWithOrga && this.isContribution,

package/src/components/misc/MobileMenu.vue

@@ -4,8 +4,10 @@
       id="mobile-menu-dropdown"
       class="btn-transparent saooti-menu"
       :title="$t('open left Menu')"
+      @click="handleMenuClick"
     />
     <ClassicPopover
+      v-if="firstLoaded"
       target="mobile-menu-dropdown"
       :only-click="true"
       :is-fixed="true"
@@ -14,7 +16,11 @@
       <template v-for="link in routerLinkArray" :key="link.routeName">
         <router-link
           v-if="link.condition"
-          :class="'home' === link.routeName ? 'octopus-dropdown-item show-phone-flex' : 'octopus-dropdown-item'"
+          :class="
+            'home' === link.routeName
+              ? 'octopus-dropdown-item show-phone-flex'
+              : 'octopus-dropdown-item'
+          "
           :to="{
             name: link.routeName,
             query: getQueriesRouter(link.routeName),
@@ -63,12 +69,14 @@ import { Organisation } from "@/stores/class/general/organisation";
 const OrganisationChooserLight = defineAsyncComponent(
   () => import("../display/organisation/OrganisationChooserLight.vue"),
 );
-import ClassicPopover from "../misc/ClassicPopover.vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../misc/ClassicPopover.vue"),
+);
 export default defineComponent({
   name: "MobileMenu",
   components: {
     OrganisationChooserLight,
-    ClassicPopover
+    ClassicPopover,
   },
   mixins: [orgaFilter],
   props: {
@@ -78,9 +86,10 @@ export default defineComponent({
     return {
       organisationId: undefined as string | undefined,
       reset: false as boolean,
+      firstLoaded: false as boolean,
     };
   },
-  computed:{
+  computed: {
     ...mapState(useGeneralStore, ["storedCategories"]),
     ...mapState(useFilterStore, [
       "filterLive",
@@ -122,7 +131,7 @@ export default defineComponent({
         },
       ];
     },
-     categories(): Array<Category> {
+    categories(): Array<Category> {
       return this.storedCategories.filter((c: Category) => {
         if (this.isPodcastmaker) return c.podcastOrganisationCount;
         return c.podcastCount;
@@ -156,6 +165,15 @@ export default defineComponent({
     },
   },
   methods: {
+    handleMenuClick() {
+      if (this.firstLoaded) {
+        return;
+      }
+      this.firstLoaded = true;
+      setTimeout(() => {
+        document.getElementById("mobile-menu-dropdown")?.click();
+      }, 200);
+    },
     getQueriesRouter(routeName: string) {
       if (
         "podcasts" !== routeName &&
@@ -179,6 +197,5 @@ export default defineComponent({
       this.removeSelectedOrga();
     },
   },
-
 });
 </script>

package/src/components/misc/TopBar.vue

@@ -27,12 +27,12 @@
       />
     </router-link>
     <OrganisationChooserLight
-      v-if="!isPodcastmaker && organisationId"
+      v-if="!isPodcastmaker && organisationId && !isPhone"
       page="topBar"
       width="auto"
       :defaultanswer="$t('No organisation filter')"
       :value="organisationId"
-      class="ms-3 me-2 hide-phone"
+      class="ms-3 me-2"
       :reset="reset"
       @selected="onOrganisationSelected"
     />
@@ -50,9 +50,10 @@
         </router-link>
       </template>
       <button
+        v-if="!isPhone"
         id="more-dropdown"
         :title="$t('More')"
-        class="d-flex align-items-center hide-phone btn-transparent p-3"
+        class="d-flex align-items-center btn-transparent p-3"
       >
         <div class="link-hover">
           {{ $t("More") }}
@@ -81,7 +82,7 @@
         </div>
       </ClassicPopover>
     </div>
-    <MobileMenu :is-education="isEducation"/>
+    <MobileMenu :is-education="isEducation" />
 
     <div class="d-flex flex-column">
       <div class="d-flex justify-content-end flex-nowrap">
@@ -109,22 +110,21 @@ import { useFilterStore } from "@/stores/FilterStore";
 import { mapState } from "pinia";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import ClassicPopover from "../misc/ClassicPopover.vue";
+import resizePhone from "../mixins/resizePhone";
 import { defineComponent, defineAsyncComponent } from "vue";
 const OrganisationChooserLight = defineAsyncComponent(
   () => import("../display/organisation/OrganisationChooserLight.vue"),
 );
-const MobileMenu = defineAsyncComponent(
-  () => import("./MobileMenu.vue"),
-);
+const MobileMenu = defineAsyncComponent(() => import("./MobileMenu.vue"));
 export default defineComponent({
   name: "TopBar",
   components: {
     OrganisationChooserLight,
     HomeDropdown,
     ClassicPopover,
-    MobileMenu
+    MobileMenu,
   },
-  mixins: [orgaFilter, imageProxy],
+  mixins: [orgaFilter, imageProxy, resizePhone],
   props: {
     isEducation: { default: false, type: Boolean },
   },
@@ -135,6 +135,8 @@ export default defineComponent({
       minScroll: 0 as number,
       organisationId: undefined as string | undefined,
       reset: false as boolean,
+      isPhone: false as boolean,
+      windowWidth: 0 as number,
     };
   },
   computed: {

package/src/components/pages/EmissionPage.vue

@@ -20,7 +20,10 @@
               />
               <div class="text-uppercase h2 mb-3">{{ name }}</div>
               <!-- eslint-disable vue/no-v-html -->
-              <p class="html-wysiwyg-content descriptionText" v-html="urlify(description)" />
+              <p
+                class="html-wysiwyg-content descriptionText"
+                v-html="urlify(description)"
+              />
               <!-- eslint-enable -->
             </div>
           </div>