@saooti/octopus-sdk 38.2.1 → 38.2.3

package/package.json

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

package/src/assets/general.scss

@@ -138,12 +138,7 @@ body{
     }
   }
   .hide-small-screen{
-		@media (max-width: 450px) {
-			display: none !important;
-		}
-	}
-  .hide-smallest-screen{
-		@media (max-width: 380px) {
+		@media (max-width: 500px) {
 			display: none !important;
 		}
 	}

package/src/components/display/podcastmaker/PodcastmakerHeader.vue

@@ -28,26 +28,25 @@ export default defineComponent({
       )}');`;
     },
   },
-
 });
 </script>
 <style lang="scss">
 @import "@scss/_variables.scss";
 .octopus-app {
-  .page-box{
+  .page-box {
     position: relative;
   }
-  .page-element{
+  .page-element {
     margin-top: 12rem;
   }
-  .page-element-title-container{
+  .page-element-title-container {
     background: black;
     position: absolute;
     right: 0;
     left: 0;
     top: 0;
   }
-  .page-element-bg{
+  .page-element-bg {
     height: 15rem;
     opacity: 0.5;
     filter: blur(8px);
@@ -56,20 +55,20 @@ export default defineComponent({
     background-repeat: no-repeat;
     background-size: cover;
   }
-  .page-element-title{
+  .page-element-title {
     position: absolute;
-    top:0;
-    bottom:0;
-    right:0;
-    left:0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    h1{
+    h1 {
       color: white !important;
       font-size: 2rem;
     }
-  } 
+  }
 }
-</style>
+</style>

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

@@ -135,7 +135,7 @@
       :tag-list="podcast.tags"
       :podcast-annotations="podcast.annotations"
     />
-    <SubscribeButtons 
+    <SubscribeButtons
       v-if="isPodcastmaker"
       class="mt-4"
       :emission="podcast.emission"
@@ -173,9 +173,7 @@ const PodcastPlayBar = defineAsyncComponent(
 const SubscribeButtons = defineAsyncComponent(
   () => import("../sharing/SubscribeButtons.vue"),
 );
-const Countdown = defineAsyncComponent(
-  () => import("../live/CountDown.vue"),
-);
+const Countdown = defineAsyncComponent(() => import("../live/CountDown.vue"));
 const TagList = defineAsyncComponent(() => import("./TagList.vue"));
 export default defineComponent({
   name: "PodcastModuleBox",
@@ -188,7 +186,7 @@ export default defineComponent({
     EditBox,
     RecordingItemButton,
     SubscribeButtons,
-    Countdown
+    Countdown,
   },
 
   mixins: [displayMethods, orgaComputed],

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

@@ -2,8 +2,10 @@
   <button
     v-if="!hidePlay || recordingLive"
     class="image-play-button"
-    :class="[classicPodcastPlay ? '' : 'transparent-background',
-            justButtons?'not-image':'']"
+    :class="[
+      classicPodcastPlay ? '' : 'transparent-background',
+      justButtons ? 'not-image' : '',
+    ]"
     @mouseenter="hoverType = 'audio'"
     @mouseleave="hoverType = ''"
     @click="play(false)"
@@ -228,7 +230,7 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app {
-  .image-play-button.not-image{
+  .image-play-button.not-image {
     position: relative;
     width: auto;
   }

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

@@ -28,7 +28,10 @@
         </div>
       </div>
       <div class="d-flex align-items-center">
-        <div v-if="podcast || emission || playlist" class="d-flex flex-column ms-4">
+        <div
+          v-if="podcast || emission || playlist"
+          class="d-flex flex-column ms-4"
+        >
           <div class="h4 mb-2">
             {{ $t("Newsletter") }}
           </div>
@@ -83,8 +86,17 @@
                 params: { podcastId: podcast.podcastId },
               }"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-stars" viewBox="0 0 16 16">
-                <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="25"
+                height="25"
+                fill="currentColor"
+                class="bi bi-stars"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"
+                />
               </svg>
             </router-link>
           </div>
@@ -173,11 +185,16 @@ export default defineComponent({
     authenticated(): boolean {
       return state.generalParameters.authenticated as boolean;
     },
-    shareAiAuth(): boolean{
-      return !this.isPodcastmaker && this.authenticated && undefined!==this.podcast && this.isProduction && 
-      ((this.authOrganisation.attributes?.["openAi"] as
+    shareAiAuth(): boolean {
+      return (
+        !this.isPodcastmaker &&
+        this.authenticated &&
+        undefined !== this.podcast &&
+        this.isProduction &&
+        ((this.authOrganisation.attributes?.["openAi"] as
           | string
-          | undefined) === "true" ?? false
+          | undefined) === "true" ??
+          false)
       );
     },
     titleRssButton(): string {
@@ -232,7 +249,11 @@ export default defineComponent({
     },
     rssUrl(): string {
       let api = state.generalParameters.ApiUri + "rss/";
-      if((!this.isPodcastmaker && this.playlist) || this.podcast || this.emission){
+      if (
+        (!this.isPodcastmaker && this.playlist) ||
+        this.podcast ||
+        this.emission
+      ) {
         return "";
       }
       if (this.participantId) {

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

@@ -18,7 +18,7 @@
         <span :class="sub.icon" />
       </a>
     </div>
-     <button
+    <button
       v-show="hiddenLinks.length"
       id="subscribe-buttons-dropdown"
       class="btn share-btn mx-2 saooti-more"
@@ -44,7 +44,6 @@
       </ClassicPopover>
     </teleport>
   </div>
-
 </template>
 
 <script lang="ts">
@@ -52,11 +51,11 @@ import { state } from "../../../stores/ParamSdkStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Emission } from "@/stores/class/general/emission";
 import { defineComponent } from "vue";
-type Link ={
-  name: string,
-  icon: string,
-  title: string,
-  url: string|undefined,
+type Link = {
+  name: string;
+  icon: string;
+  title: string;
+  url: string | undefined;
 };
 export default defineComponent({
   name: "SubscribeButtons",
@@ -65,14 +64,14 @@ export default defineComponent({
   },
   props: {
     emission: { default: undefined, type: Object as () => Emission },
-    playlistId: { default: undefined, type:  Number},
-    windowWidth: { default: 0, type: Number},
-    justifyCenter: { default: true, type: Boolean},
+    playlistId: { default: undefined, type: Number },
+    windowWidth: { default: 0, type: Number },
+    justifyCenter: { default: true, type: Boolean },
   },
   data() {
     return {
       hiddenLinks: [] as Array<Link>,
-      lastWindowWidth: 420 as number
+      lastWindowWidth: 420 as number,
     };
   },
   computed: {
@@ -105,7 +104,7 @@ export default defineComponent({
         {
           name: "RSS",
           icon: "saooti-rss",
-          title: this.$t('Rss feed'),
+          title: this.$t("Rss feed"),
           url: this.rssUrl,
         },
         {
@@ -114,7 +113,7 @@ export default defineComponent({
           title: "Amazon Music | Podcasters",
           url: this.getUrl("amazon"),
         },
-      
+
         {
           name: "iHeart",
           icon: "saooti-iheart",
@@ -145,7 +144,7 @@ export default defineComponent({
           title: "Radioline",
           url: this.getUrl("radioline"),
         },
-        
+
         {
           name: "tunein",
           icon: "saooti-tunin",
@@ -155,12 +154,12 @@ export default defineComponent({
       ];
       return sub.filter((item) => item.url);
     },
-    rssUrl(): string|undefined {
+    rssUrl(): string | undefined {
       let api = state.generalParameters.ApiUri + "rss/";
-      if(this.emission){
+      if (this.emission) {
         return api + "emission/" + this.emission?.emissionId + ".rss";
       }
-      if(this.playlistId){
+      if (this.playlistId) {
         return api + "playlist/" + this.playlistId + ".rss";
       }
       return undefined;
@@ -171,7 +170,7 @@ export default defineComponent({
       this.resizeWindow();
     },
   },
-  mounted(){
+  mounted() {
     this.resizeWindow();
   },
   methods: {
@@ -187,16 +186,21 @@ export default defineComponent({
         ? "//" + link
         : link;
     },
-    resizeWindow(){
-      if(this.windowWidth > 420 && this.lastWindowWidth > 420){
+    resizeWindow() {
+      if (this.windowWidth > 420 && this.lastWindowWidth > 420) {
         this.lastWindowWidth = this.windowWidth;
         return;
       }
-      this.lastWindowWidth = this.windowWidth;
+
       const subscribeList = this.$refs.subscribeButtonsContainer as HTMLElement;
-      if (null === subscribeList || !subscribeList) {
+      if (
+        null === subscribeList ||
+        !subscribeList ||
+        "none" === subscribeList?.parentElement?.style.display
+      ) {
         return;
       }
+      this.lastWindowWidth = this.windowWidth;
       subscribeList.style.justifyContent = "flex-start";
       this.hiddenLinks.length = 0;
       this.subscriptionsDisplay.forEach((element: Link) => {
@@ -216,7 +220,8 @@ export default defineComponent({
         const parent = el.parentElement;
         if (
           parent &&
-          (el.offsetLeft + el.clientWidth + 20) < (parent.clientWidth + parent.offsetLeft)
+          el.offsetLeft + el.clientWidth + 20 <
+            parent.clientWidth + parent.offsetLeft
         ) {
           return;
         }
@@ -228,18 +233,18 @@ export default defineComponent({
       if (!this.hiddenLinks.length && this.justifyCenter) {
         subscribeList.style.justifyContent = "center";
       }
-    }
+    },
   },
 });
 </script>
 <style lang="scss">
 .octopus-app {
-  .subscribe-buttons-container{
+  .subscribe-buttons-container {
     max-width: 420px;
     align-self: center;
     display: inline-flex;
     width: 100%;
-    &>div {
+    & > div {
       display: inline-flex;
       justify-content: flex-start;
       overflow: hidden;

package/src/components/misc/FooterSection.vue

@@ -40,7 +40,7 @@
         :value="organisationId"
         :reset="reset"
         @selected="onOrganisationSelected"
-      /> 
+      />
     </div>
     <a
       v-if="isPodcastmaker && isContactLink"
@@ -95,7 +95,7 @@ export default defineComponent({
   components: {
     ClassicSelect,
     AcpmImage,
-    OrganisationChooserLight
+    OrganisationChooserLight,
   },
 
   mixins: [cookies, orgaComputed, orgaFilter],

package/src/components/misc/HomeDropdown.vue

@@ -3,18 +3,19 @@
     <button
       v-if="isAuthenticatedWithOrga"
       :title="$t('My space')"
-      class="btn admin-button hide-smallest-screen m-1 saooti-admin-menu text-blue-octopus"
+      class="btn admin-button hide-small-screen m-1 saooti-admin-menu text-blue-octopus"
       @click="goToAdministration"
     />
     <router-link
       v-if="isAuthenticatedWithOrga && isContribution"
       :title="$t('Upload')"
       to="/main/priv/upload"
-      class="btn admin-button hide-smallest-screen m-1 saooti-download text-blue-octopus"
+      class="btn admin-button hide-small-screen m-1 saooti-download text-blue-octopus"
     />
     <button
+      v-show="!mobileMenuDisplay  || isAuthenticatedWithOrga"
       id="home-dropdown"
-      class="btn m-1 admin-button saooti-user text-blue-octopus"
+      class="btn m-1 admin-button hide-small-screen saooti-user text-blue-octopus"
       :title="$t('User menu')"
     />
     <ClassicPopover
@@ -86,6 +87,7 @@ export default defineComponent({
   },
   props: {
     isEducation: { default: false, type: Boolean },
+    mobileMenuDisplay: { default: false, type: Boolean },
   },
   computed: {
     ...mapState(useAuthStore, ["authProfile", "isGarRole"]),

package/src/components/misc/MobileMenu.vue

@@ -7,54 +7,54 @@
       :title="$t('open left Menu')"
       @click="handleMenuClick"
     />
-    <ClassicPopover
-      v-if="firstLoaded"
-      target="mobile-menu-dropdown"
-      :only-click="true"
-      :is-fixed="true"
-      :left-pos="true"
-    >
-      <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'
-          "
-          :to="{
-            name: link.routeName,
-            query: getQueriesRouter(link.routeName),
-          }"
-        >
-          {{ link.title }}
-        </router-link>
-      </template>
-      <hr class="show-phone" />
-      <router-link
-        v-for="category in categories"
-        :key="category.id"
-        class="show-phone-flex octopus-dropdown-item"
-        :to="{
-          name: 'category',
-          params: { iabId: category.id },
-          query: { productor: filterOrgaId },
-        }"
+    <teleport to=".octopus-app" :disabled="scrolled">
+      <ClassicPopover
+        v-if="firstLoaded"
+        target="mobile-menu-dropdown"
+        :only-click="true"
+        :is-fixed="true"
+        :left-pos="true"
       >
-        {{ category.name }}
-      </router-link>
-    </ClassicPopover>
+        <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'
+            "
+            :to="{
+              name: link.routeName,
+              query: getQueriesRouter(link.routeName),
+            }"
+          >
+            {{ link.title }}
+          </router-link>
+        </template>
+        <template v-if="!isAuthenticatedWithOrga">
+          <a
+            class="octopus-dropdown-item"
+            href="/sso/login"
+            realLink="true"
+          >
+            {{ $t("Login") }}
+          </a>
+          <router-link class="octopus-dropdown-item" to="/main/pub/contact">
+            {{ $t("Contact") }}
+          </router-link>
+        </template>
+
+      </ClassicPopover>
+    </teleport>
   </div>
 </template>
 
 <script lang="ts">
 import { state } from "../../stores/ParamSdkStore";
 import orgaFilter from "../mixins/organisationFilter";
-import { Category } from "@/stores/class/general/category";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { useFilterStore } from "@/stores/FilterStore";
-import { useGeneralStore } from "@/stores/GeneralStore";
 import { mapState } from "pinia";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
@@ -69,6 +69,7 @@ export default defineComponent({
     isEducation: { default: false, type: Boolean },
     show: { default: false, type: Boolean },
     notPodcastAndEmission: { default: false, type: Boolean },
+    scrolled: { default: false, type: Boolean },
   },
   data() {
     return {
@@ -76,15 +77,22 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useGeneralStore, ["storedCategories"]),
     ...mapState(useFilterStore, [
       "filterLive",
       "filterOrgaId",
       "filterIab",
       "filterRubrique",
     ]),
+    isAuthenticatedWithOrga(): boolean {
+      return state.generalParameters.authenticated ?? false;
+    },
     routerLinkArray() {
       return [
+        {
+          title: this.$t("My space"),
+          routeName: "backoffice",
+          condition: this.isAuthenticatedWithOrga,
+        },
         { title: this.$t("Home"), routeName: "home", condition: true },
         {
           title: this.$t("Radio & Live"),
@@ -93,7 +101,11 @@ export default defineComponent({
             state.generalParameters.isLiveTab &&
             ((this.filterOrgaId && this.filterLive) || !this.filterOrgaId),
         },
-        { title: this.$t("Podcasts"), routeName: "podcasts", condition: !this.notPodcastAndEmission },
+        {
+          title: this.$t("Podcasts"),
+          routeName: "podcasts",
+          condition: !this.notPodcastAndEmission,
+        },
         {
           title: this.$t("Emissions"),
           routeName: "emissions",
@@ -115,14 +127,13 @@ export default defineComponent({
           routeName: "participants",
           condition: true,
         },
+        {
+          title: this.$t("Create an account"),
+          routeName: "createAccount",
+          condition: !this.isAuthenticatedWithOrga,
+        },
       ];
     },
-    categories(): Array<Category> {
-      return this.storedCategories.filter((c: Category) => {
-        if (this.isPodcastmaker) return c.podcastOrganisationCount;
-        return c.podcastCount;
-      });
-    },
     isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker as boolean;
     },

package/src/components/misc/TopBar.vue

@@ -1,20 +1,18 @@
 <template>
-  <div class="top-bar-container" 
-    :class="{ scrolled: scrolled, 'content-top-bar':isContentToDisplay }"
+  <div
+    class="top-bar-container"
+    :class="{ scrolled: scrolled, 'content-top-bar': isContentToDisplay }"
   >
-    <TopBarMainContent 
-      :is-education="isEducation" 
+    <TopBarMainContent
+      :is-education="isEducation"
       :is-phone="isPhone"
       :scrolled="scrolled"
       :title-display="titleToDisplay"
     />
     <template v-if="isContentToDisplay">
       <div class="page-element-bg" :style="backgroundDisplay" />
-      <h1 
-        v-show="!scrolled"
-        class="text-truncate"
-      >{{ titleToDisplay }}</h1>
-      <SubscribeButtons 
+      <h1 v-show="!scrolled" class="text-truncate">{{ titleToDisplay }}</h1>
+      <SubscribeButtons
         v-show="!scrolled"
         :emission="emissionObject"
         :playlist-id="contentToDisplay?.playlistId"
@@ -42,7 +40,7 @@ export default defineComponent({
   name: "TopBar",
   components: {
     TopBarMainContent,
-    SubscribeButtons
+    SubscribeButtons,
   },
 
   mixins: [imageProxy, resizePhone],
@@ -61,8 +59,8 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useGeneralStore, ["contentToDisplay"]),
-    isContentToDisplay(): boolean{
-      return null!==this.contentToDisplay;
+    isContentToDisplay(): boolean {
+      return null !== this.contentToDisplay;
     },
     backgroundDisplay(): string {
       if (!this.contentToDisplay) {
@@ -73,30 +71,30 @@ export default defineComponent({
         "270",
       )}');`;
     },
-    titleToDisplay(): string{
-      if((this.contentToDisplay as Podcast)?.podcastId){
+    titleToDisplay(): string {
+      if ((this.contentToDisplay as Podcast)?.podcastId) {
         return (this.contentToDisplay as Podcast).emission.name;
       }
-      if((this.contentToDisplay as Playlist)?.playlistId){
+      if ((this.contentToDisplay as Playlist)?.playlistId) {
         return (this.contentToDisplay as Playlist).title;
       }
-      if((this.contentToDisplay as Emission)?.emissionId){
+      if ((this.contentToDisplay as Emission)?.emissionId) {
         return (this.contentToDisplay as Emission).name;
       }
-      if((this.contentToDisplay as Canal)?.id){
+      if ((this.contentToDisplay as Canal)?.id) {
         return (this.contentToDisplay as Canal).name;
       }
       return "";
     },
-    emissionObject(): Emission|null{
-      if((this.contentToDisplay as Podcast)?.podcastId){
+    emissionObject(): Emission | null {
+      if ((this.contentToDisplay as Podcast)?.podcastId) {
         return (this.contentToDisplay as Podcast).emission;
       }
-      if((this.contentToDisplay as Emission)?.emissionId){
-        return (this.contentToDisplay as Emission);
+      if ((this.contentToDisplay as Emission)?.emissionId) {
+        return this.contentToDisplay as Emission;
       }
       return null;
-    }
+    },
   },
   mounted() {
     window.addEventListener("scroll", this.handleScroll);
@@ -137,55 +135,80 @@ export default defineComponent({
     position: sticky;
     top: 0;
     background: $octopus-primary-color;
-    background: linear-gradient(90deg, $octopus-primary-color 0%, $blue-octopus 100%);;
+    background: linear-gradient(
+      90deg,
+      $octopus-primary-color 0%,
+      $blue-octopus 100%
+    );
     width: 100%;
     height: 5rem;
     display: flex;
     flex-direction: column;
     transition: height 0.7s;
+    box-shadow: 0px 2px 15px 5px rgba(0, 0, 0, 0.4) !important;
 
-    &.content-top-bar{
+    &.content-top-bar {
       height: 22rem;
       background: black;
-      .page-element-bg{
+      .page-element-bg {
         height: 22rem;
       }
     }
-    &.content-top-bar.scrolled{
+    &.content-top-bar.scrolled {
       height: 5rem;
-      .page-element-bg{
+      .page-element-bg {
         height: 5rem;
       }
     }
 
     &.scrolled {
       z-index: 11;
-      box-shadow:0px 2px 15px 5px rgba(0, 0, 0, 0.4) !important;
     }
 
-    h1{
+    h1 {
       color: white !important;
       font-size: 2rem;
       margin: 2rem 5rem;
     }
+    @media (max-width: 650px) {
+      height: 3.5rem;
+      &.content-top-bar.scrolled {
+        height: 3.5rem;
+        .page-element-bg {
+          height: 3.5rem;
+        }
+      }
+    }
 
-    .page-element-bg{
+    @media (max-width: 550px) {
+      h1 {
+        font-size: 1rem;
+        margin: 1rem 0.5rem 0.5rem 0.5rem;
+      }
+      &.content-top-bar {
+        height: 13rem;
+        .page-element-bg {
+          height: 13rem;
+        }
+      }
+    }
+    .page-element-bg {
       opacity: 0.5;
       filter: blur(8px);
       -webkit-filter: blur(8px);
       background-position: center;
       background-repeat: no-repeat;
-      background-size: cover; 
+      background-size: cover;
       width: 100%;
       position: absolute;
       z-index: -1;
       transition: height 0.7s;
     }
 
-    .admin-button:hover, .share-btn:hover{
-			background: white;
-		}
-
+    .admin-button:hover,
+    .share-btn:hover {
+      background: white;
+    }
   }
 }
 </style>

package/src/components/misc/TopBarMainContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="top-bar-grid" :class="{scrolled: titleIsDisplayed}">
+  <div class="top-bar-grid" :class="{ scrolled: titleIsDisplayed }">
     <router-link
       class="top-bar-logo"
       :to="{
@@ -26,18 +26,21 @@
         :class="isEducation ? 'educationLogo' : ''"
       />
     </router-link>
-    <h1 
-      v-if="titleIsDisplayed"
-      class="text-truncate m-0 align-self-center"
-    >{{ titleDisplay}}</h1>
-    <div 
-      class="d-flex" 
-      :class="[scrolled || inContentDisplayPage?'flex-row-reverse align-items-center':'flex-column align-items-end']"
+    <h1 v-if="titleIsDisplayed" class="text-truncate m-0 align-self-center">
+      {{ titleDisplay }}
+    </h1>
+    <div
+      class="d-flex"
+      :class="[
+        scrolled || inContentDisplayPage || isPhone
+          ? 'flex-row-reverse align-items-center'
+          : 'flex-column align-items-end',
+      ]"
     >
-      <a 
-        v-if="filterOrgaId && '' ==! imgUrl"
+      <a
+        v-if="filterOrgaId && '' == !imgUrl"
         href="https://www.saooti.com/"
-        target="_blank" 
+        target="_blank"
         rel="noopener"
       >
         <img
@@ -81,7 +84,10 @@
           :left-pos="true"
         >
           <div class="d-flex flex-column">
-            <template v-for="link in routerLinkInsideArray" :key="link.routeName">
+            <template
+              v-for="link in routerLinkInsideArray"
+              :key="link.routeName"
+            >
               <router-link
                 v-if="link.condition"
                 :to="{
@@ -95,8 +101,13 @@
             </template>
           </div>
         </ClassicPopover>
-        <MobileMenu :is-education="isEducation" :show="scrolled || isPhone || inContentDisplayPage" :not-podcast-and-emission="inContentDisplayPage && !scrolled" />
-        <HomeDropdown :is-education="isEducation" />
+        <MobileMenu
+          :is-education="isEducation"
+          :show="mobileMenuDisplay"
+          :not-podcast-and-emission="inContentDisplayPage && !scrolled"
+          :scrolled="scrolled"
+        />
+        <HomeDropdown :is-education="isEducation" :mobile-menu-display="mobileMenuDisplay" />
         <router-link
           v-show="!scrolled && !isPhone && !inContentDisplayPage"
           :title="$t('Search')"
@@ -136,8 +147,7 @@ export default defineComponent({
     scrolled: { default: false, type: Boolean },
   },
   data() {
-    return {
-    };
+    return {};
   },
   computed: {
     ...mapState(useFilterStore, [
@@ -148,11 +158,14 @@ export default defineComponent({
       "filterRubrique",
       "filterName",
     ]),
-    titleIsDisplayed():boolean{
+    mobileMenuDisplay():boolean{
+      return this.scrolled || this.isPhone || this.inContentDisplayPage;
+    },
+    titleIsDisplayed(): boolean {
       return this.inContentDisplayPage && this.scrolled && !this.isPhone;
     },
-    inContentDisplayPage():boolean{
-      return 0!==this.titleDisplay.length;
+    inContentDisplayPage(): boolean {
+      return 0 !== this.titleDisplay.length;
     },
     routerLinkArray() {
       return [
@@ -235,23 +248,23 @@ export default defineComponent({
 <style lang="scss">
 @import "@scss/_variables.scss";
 .octopus-app {
-  .top-bar-grid{
+  .top-bar-grid {
     display: grid;
     grid-template-columns: 1fr 3fr;
     margin-top: 0.5rem;
     padding: 0 1rem;
-    &.scrolled{
+    &.scrolled {
       grid-template-columns: 1fr 2fr 1fr;
     }
     @media (max-width: 450px) {
       padding: 0 0.5rem;
     }
 
-
-    a.link-hover{
+    a.link-hover {
       color: white;
       font-weight: bold;
-      &.link-hover:hover, &.link-hover.router-link-exact-active.router-link-active{
+      &.link-hover:hover,
+      &.link-hover.router-link-exact-active.router-link-active {
         color: white;
         text-decoration: underline;
         text-underline-offset: 8px;
@@ -268,9 +281,6 @@ export default defineComponent({
         height: 2rem;
       }
     }
-
   }
 }
 </style>
-
-

package/src/components/pages/EmissionPage.vue

@@ -3,8 +3,8 @@
     <template v-if="loaded && !error">
       <PodcastmakerHeader
         v-if="isPodcastmaker"
-        :pageTitle="$t('Emission')"
-        :imageUrl="emission.imageUrl"
+        :page-title="$t('Emission')"
+        :image-url="emission.imageUrl"
       />
       <div class="d-flex flex-column page-element">
         <div class="module-box">
@@ -29,9 +29,11 @@
                   :podcast="lastPodcast"
                   :just-buttons="true"
                 />
-                <div class="ms-2 fw-bold">{{ $t('Listen to the latest episode') }}</div>
+                <div class="ms-2 fw-bold">
+                  {{ $t("Listen to the latest episode") }}
+                </div>
               </div>
-              <SubscribeButtons 
+              <SubscribeButtons
                 v-if="isPodcastmaker"
                 class="mt-4"
                 :emission="emission"
@@ -142,7 +144,7 @@ export default defineComponent({
     LiveHorizontalList,
     ClassicLoading,
     PodcastPlayButton,
-    PodcastmakerHeader
+    PodcastmakerHeader,
   },
   mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {
@@ -204,7 +206,7 @@ export default defineComponent({
       },
     },
   },
-  beforeUnmount(){
+  beforeUnmount() {
     this.contentToDisplayUpdate(null);
   },
 
@@ -251,11 +253,11 @@ export default defineComponent({
         this.initError();
       }
     },
-    podcastsFetched(podcasts: Array<Podcast>){
-      if(podcasts.length){
+    podcastsFetched(podcasts: Array<Podcast>) {
+      if (podcasts.length) {
         this.lastPodcast = podcasts[0];
       }
-    }
+    },
   },
 });
 </script>

package/src/components/pages/PlaylistPage.vue

@@ -3,8 +3,8 @@
     <template v-if="loaded && !error">
       <PodcastmakerHeader
         v-if="isPodcastmaker"
-        :pageTitle="pageTitle"
-        :imageUrl="playlist.imageUrl"
+        :page-title="pageTitle"
+        :image-url="playlist.imageUrl"
       />
       <div class="d-flex flex-column page-element">
         <div class="module-box">
@@ -80,7 +80,7 @@ export default defineComponent({
     PodcastList,
     SharePlayer,
     ClassicLoading,
-    PodcastmakerHeader
+    PodcastmakerHeader,
   },
   mixins: [displayMethods, handle403, orgaComputed, imageProxy],
 
@@ -141,7 +141,7 @@ export default defineComponent({
       },
     },
   },
-  beforeUnmount(){
+  beforeUnmount() {
     this.contentToDisplayUpdate(null);
   },
 

package/src/components/pages/PodcastPage.vue

@@ -3,8 +3,8 @@
     <template v-if="loaded && !error">
       <PodcastmakerHeader
         v-if="isPodcastmaker"
-        :pageTitle="titlePage"
-        :imageUrl="podcast.imageUrl"
+        :page-title="titlePage"
+        :image-url="podcast.imageUrl"
       />
       <div class="d-flex flex-column page-element">
         <PodcastModuleBox
@@ -22,7 +22,7 @@
           :organisation-id="myOrganisationId"
           :is-education="isEducation"
         />
-        
+
         <CommentSection
           v-if="!isPodcastmaker && isComments"
           ref="commentSection"
@@ -112,7 +112,7 @@ export default defineComponent({
     PodcastModuleBox,
     ClassicLoading,
     ClassicLazy,
-    PodcastmakerHeader
+    PodcastmakerHeader,
   },
 
   mixins: [handle403, orgaComputed, imageProxy],
@@ -239,7 +239,7 @@ export default defineComponent({
       },
     },
   },
-  beforeUnmount(){
+  beforeUnmount() {
     this.contentToDisplayUpdate(null);
   },
 

package/src/components/pages/RadioPage.vue

@@ -3,8 +3,8 @@
     <template v-if="loaded && !error">
       <PodcastmakerHeader
         v-if="isPodcastmaker"
-        :pageTitle="$t('Radio')"
-        :imageUrl="radio.imageUrl"
+        :page-title="$t('Radio')"
+        :image-url="radio.imageUrl"
       />
       <div v-if="radio" class="d-flex flex-column page-element">
         <div class="module-box">
@@ -77,7 +77,7 @@ export default defineComponent({
     RadioCurrently,
     RadioImage,
     RadioPlanning,
-    PodcastmakerHeader
+    PodcastmakerHeader,
   },
   mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {
@@ -114,7 +114,7 @@ export default defineComponent({
       },
     },
   },
-  beforeUnmount(){
+  beforeUnmount() {
     this.contentToDisplayUpdate(null);
   },
   methods: {

package/src/router/router.ts

@@ -35,6 +35,16 @@ const routes: Array<RouteRecordRaw> = [
     name: "",
     component: Home,
   },
+  {
+    path: "/",
+    name: "backoffice",
+    component: Home,
+  },
+  {
+    path: "/",
+    name: "createAccount",
+    component: Home,
+  },
   {
     path: "/main/pub/error",
     name: "error",