@saooti/octopus-sdk 39.3.10 → 39.3.12

package/index.ts

@@ -98,6 +98,8 @@ import tagOfMixins from "./src/components/mixins/tagOfMixins.ts";
 import resizePhone from "./src/components/mixins/resizePhone.ts";
 import debounce from "./src/components/mixins/debounce.ts";
 import downloadMixins from "./src/components/mixins/download.ts";
+import metaTitle from "./src/components/mixins/metaTitle.ts";
+import metaTitleWatch from "./src/components/mixins/metaTitleWatch.ts";
 
 
 //helper
@@ -159,5 +161,7 @@ export {
     getApiUrl,
     ModuleApi,
     classicApi,
-    downloadMixins
+    downloadMixins,
+    metaTitle,
+    metaTitleWatch
 };

package/package.json

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

package/src/App.vue

@@ -17,6 +17,7 @@ import TopBar from "@/components/misc/TopBar.vue";
 import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
 import ClassicLazy from "@/components/misc/ClassicLazy.vue";
 import initSDK from "./components/mixins/init";
+import metaTitle from "./components/mixins/metaTitle";
 import { useAuthStore } from "./stores/AuthStore";
 import { useFilterStore } from "./stores/FilterStore";
 import { useGeneralStore } from "./stores/GeneralStore";
@@ -39,7 +40,7 @@ export default defineComponent({
     ClassicLazy,
   },
 
-  mixins: [initSDK],
+  mixins: [initSDK, metaTitle],
 
   data() {
     return {
@@ -57,9 +58,9 @@ export default defineComponent({
 
   watch: {
     $route: {
-      deep: true,
       immediate: true,
       async handler() {
+        this.updateMetaTitle();
         if (this.firstDisplayCategoryFilter) {
           return;
         }

package/src/assets/general.scss

@@ -201,8 +201,8 @@ body{
     }
   }
   .img-box-podcast{
-    height: octopusVariables.$octopus-item-podcast-size;
-    width: octopusVariables.$octopus-item-podcast-size;
+    height: calc(octopusVariables.$octopus-item-podcast-size - 4px);
+    width: calc(octopusVariables.$octopus-item-podcast-size - 4px);
   }
 
   .comma {

package/src/assets/share.scss

@@ -241,33 +241,4 @@
       }
     }
   }
-  .image-play-button{
-    position: absolute;
-    display: flex;
-    justify-content: flex-end;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    cursor: pointer;
-    flex-direction: column;
-    background: transparent;
-    border-width: 0;
-    width: 100%;  
-    padding: 0;
-    &:focus{
-      background: rgba(0, 0, 0, 0.308);
-    }
-    .multiple-play-buttons-container{
-      background-color:octopusVariables.$primaryColorLessTransparent;
-      border-radius: octopusVariables.$octopus-borderradius;
-      color: white;
-      padding: 0.3rem;
-      width: fit-content;
-      font-size: 1rem;
-      margin: 0.2rem;
-      display: flex;
-      align-items: center;
-    }
-  }
 }

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

@@ -14,23 +14,11 @@
       class="img-box img-box-podcast"
       :title="$t('Canal name image', { name: radio.name })"
     />
-    <button class="image-play-button" @click="playRadio">
-      <div class="multiple-play-buttons-container">
-        <PlayIcon v-if="!playingRadio" :title="$t('Play')" :size="40" />
-        <div
-          v-else
-          class="bloc-paddle"
-          :class="
-            playingRadio && 'PLAYING' === playerStatus ? 'play-animation' : ''
-          "
-        >
-          <span class="paddle1" />
-          <span class="paddle2" />
-          <span class="paddle3" />
-        </div>
-        <div class="ms-2">
-          {{ playText }}
-        </div>
+    <button class="radio-play-button" @click="playRadio">
+      <PlayIcon v-if="!playingRadio" :title="$t('Play')" :size="40" />
+      <PodcastIsPlaying v-else/>
+      <div class="ms-2">
+        {{ playText }}
       </div>
     </button>
   </div>
@@ -42,13 +30,15 @@ import { usePlayerStore } from "../../../stores/PlayerStore";
 import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState, mapActions } from "pinia";
 import imageProxy from "../../mixins/imageProxy";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
+const PodcastIsPlaying = defineAsyncComponent(() => import("../podcasts/PodcastIsPlaying.vue"));
 export default defineComponent({
   name: "RadioImage",
 
   components: {
     PlayIcon,
+    PodcastIsPlaying
   },
 
   mixins: [imageProxy],
@@ -89,3 +79,20 @@ export default defineComponent({
   },
 });
 </script>
+<style lang="scss">
+@use '@scss/variables' as octopusVariables;
+.octopus-app {
+  .radio-play-button{
+    display: flex;
+    align-items: center;
+    position: absolute;
+    bottom: 0;
+    font-size: 1rem;
+    color: white;
+    background-color: octopusVariables.$primaryColorLessTransparent;
+    border-radius: octopusVariables.$octopus-borderradius;
+    padding:  0.2rem;
+    border: 0;
+  }
+}
+</style>

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

@@ -16,7 +16,7 @@
           <span>{{ day.title }}</span>
         </button>
       </div>
-      <button class="btn btn-primary mb-3 mx-0" v-if="isPhone" @click="showAllDays = !showAllDays">
+      <button v-if="isPhone" class="btn btn-primary mb-3 mx-0" @click="showAllDays = !showAllDays">
         <template v-if="!showAllDays">{{ $t('Show more days') }}</template>
         <template v-else>{{ $t('Show fewer days') }}</template>
       </button>

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

@@ -0,0 +1,24 @@
+<template>
+  <div
+    :class="'PLAYING' === playerStatus ? 'play-animation' : ''"
+    class="bloc-paddle mx-1"
+  >
+    <span class="paddle1" />
+    <span class="paddle2" />
+    <span class="paddle3" />
+  </div>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from "../../../stores/PlayerStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "PodcastIsPlaying",
+  computed: {
+    ...mapState(usePlayerStore, [
+      "playerStatus",
+    ])
+  },
+});
+</script>

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

@@ -1,61 +1,43 @@
 <template>
-  <button
-    v-if="!hidePlay || recordingLive"
-    class="image-play-button"
-    :class="[
-      classicPodcastPlay ? '' : 'transparent-background',
-      justButtons ? 'not-image' : '',
-    ]"
-    @mouseenter="hoverType = 'audio'"
-    @mouseleave="hoverType = ''"
-    @click="play(false)"
-  >
-    <div
-      class="multiple-play-buttons-container"
-      :class="[
-        hoverType ? 'hover-type-' + hoverType : '',
-        isVideoPodcast ? 'has-video' : '',
-      ]"
-    >
+  <div v-if="!hidePlay || recordingLive" :class="classicPodcastPlay ? '' : 'img-blur-background'">
+    <div v-if="!classicPodcastPlay" class="live-image-status bg-dark">
+      {{ textVisible }}
+    </div>
+    <div class="multi-buttons-play" :class="justButtons ? 'play-button-relative' : ''">
       <template v-if="!isLiveToBeRecorded">
-        <PlayIcon
-          v-if="!playingPodcast || (playingPodcast && playerVideo)"
-          :title="$t('Play')"
-          :size="isVideoPodcast && 'audio' === hoverType ? 50 : 40"
-        />
-
-        <div
-          v-if="playingPodcast"
-          :class="'PLAYING' === playerStatus ? 'play-animation' : ''"
-          class="bloc-paddle mx-1"
+        <button 
+          class="d-flex"
+          :title="playingPodcast? $t('Pause') : $t('Play')"
+          @mouseenter="hoverType = 'audio'"
+          @mouseleave="hoverType = ''" 
+          @click="play(false)"
         >
-          <span class="paddle1" />
-          <span class="paddle2" />
-          <span class="paddle3" />
-        </div>
-        <button
-          v-if="isVideoPodcast && !playerVideo"
-          :title="$t('Video')"
-          class="btn-transparent d-flex align-items-center text-light"
+          <PlayIcon
+            v-if="!playingPodcast || (playingPodcast && playerVideo)"
+            :size="'audio' === hoverType ? 50 : 40"
+          />
+          <PodcastIsPlaying v-if="playingPodcast && !playerVideo"/>
+          <span v-if="!isVideoPodcast" class="ms-1">{{ durationString }}</span>
+        </button>
+        <button 
+          v-if="isVideoPodcast"
+          :title="$t('Video')" 
+          :disabled="playerVideo"
+          @click="play(true)"
           @mouseenter="hoverType = 'video'"
-          @mouseleave="hoverType = 'audio'"
-          @click.stop="play(true)"
+          @mouseleave="hoverType = ''"
         >
-          <PlayVideoIcon :size="'video' === hoverType ? 50 : 40" />
+          <PlayVideoIcon v-if="!playerVideo" :size="'video' === hoverType ? 50 : 40" />
+          <PodcastIsPlaying v-if="playingPodcast && playerVideo"/>
+          <span class="ms-2">{{ durationString }}</span>
         </button>
         <div v-if="!classicPodcastPlay" class="special-icon-play-button">
           <component :is="iconName" :size="16" />
         </div>
-        <div>
-          {{ durationString }}
-        </div>
       </template>
       <component :is="iconName" v-else :size="50" :title="textVisible" />
     </div>
-    <div v-if="!classicPodcastPlay" class="live-image-status bg-dark">
-      {{ textVisible }}
-    </div>
-  </button>
+  </div>
 </template>
 
 <script lang="ts">
@@ -75,7 +57,8 @@ import imageProxy from "../../mixins/imageProxy";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const PodcastIsPlaying = defineAsyncComponent(() => import("./PodcastIsPlaying.vue"));
 export default defineComponent({
   name: "PodcastPlayButton",
   components: {
@@ -87,6 +70,7 @@ export default defineComponent({
     CancelIcon,
     PlayIcon,
     PlayVideoIcon,
+    PodcastIsPlaying
   },
   mixins: [imageProxy],
   props: {
@@ -242,10 +226,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@use '@scss/variables' as octopusVariables;
 .octopus-app {
-  .image-play-button.not-image {
-    position: relative;
-    width: auto;
+  .img-blur-background{
+    position: absolute;
+    inset: 0;
+    background-color: #ffffff80;
   }
   .live-image-status {
     text-align: center;
@@ -257,10 +243,6 @@ export default defineComponent({
     position: absolute;
     top: 0;
   }
-  .transparent-background {
-    background-color: #ffffff80;
-  }
-
   .special-icon-play-button {
     width: 30px;
     height: 30px;
@@ -268,16 +250,33 @@ export default defineComponent({
     color: black;
     border-radius: 50%;
     position: absolute;
-    left: 4.9rem;
-    bottom: 2.3rem;
+    right: -15px;
+    top: -20px;
     font-size: 0.9rem;
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  .has-video .special-icon-play-button {
-    left: 7.4rem;
+  .multi-buttons-play{
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    font-size: 1rem;
+    color: white;
+    background-color: octopusVariables.$primaryColorLessTransparent;
+    border-radius: octopusVariables.$octopus-borderradius;
+    button{
+      color: white;
+      background-color: transparent;
+      border: 0;
+      display: flex;
+      align-items: center;
+      padding:  0.2rem;
+    }
+  }
+  .play-button-relative.multi-buttons-play{
+    position: relative;
   }
 }
 </style>

package/src/components/mixins/metaTitle.ts

@@ -0,0 +1,15 @@
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+import { useGeneralStore } from "../../stores/GeneralStore";
+export default defineComponent({
+  computed: {
+    ...mapState(useGeneralStore, ["metaTitle"]),
+  },
+  methods: {
+    updateMetaTitle(){
+      if(""!==this.$route.meta.title){
+        document.title = this.$route.meta.title ? this.$t(this.$route.meta.title) +' - '+ this.metaTitle: this.metaTitle;
+      }
+    },
+  },
+});

package/src/components/mixins/metaTitleWatch.ts

@@ -0,0 +1,18 @@
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+import { useGeneralStore } from "../../stores/GeneralStore";
+export default defineComponent({
+  computed: {
+    ...mapState(useGeneralStore, ["metaTitle"]),
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      async handler() {
+        if(""!==this.$route.meta.title){
+          document.title = this.$route.meta.title ? this.$t(this.$route.meta.title) +' - '+ this.metaTitle: this.metaTitle;
+        }
+      }
+    },
+  },
+});

package/src/components/mixins/seoTitleUrl.ts

@@ -1,12 +1,17 @@
+import { mapState } from 'pinia';
+import { useGeneralStore } from '../../stores/GeneralStore';
 import { defineComponent } from 'vue';
 export const seoTitleUrl = defineComponent({
+  computed:{
+    ...mapState(useGeneralStore, ["metaTitle"]),
+  },
   methods: {
     updatePathParams(text: string) {
-      document.title = text;
       const seoText = this.stringUrlEncode(text);
       if(seoText !== this.$route.params.title){
         this.$router.replace({ params: { ...this.$route.params, ...{title:seoText}}, query: this.$route.query});
       }
+      document.title = text + " - "+ this.metaTitle;
     },
     stringUrlEncode(text: string): string {
       if(!text.length){

package/src/components/pages/CategoryPage.vue

@@ -26,7 +26,7 @@ export default defineComponent({
   },
 
   computed: {
-    ...mapState(useGeneralStore, ["storedCategories"]),
+    ...mapState(useGeneralStore, ["storedCategories", "metaTitle"]),
     ...mapState(useFilterStore, ["filterOrgaId"]),
     orgaArray(): Array<string> {
       return this.filterOrgaId ? [this.filterOrgaId] : [];
@@ -39,5 +39,13 @@ export default defineComponent({
       return matchCategories[0]["name"];
     },
   },
+  watch:{
+    title: {
+      immediate: true,
+      async handler() {
+        document.title = this.title + ' - ' + this.metaTitle;
+      },
+    },
+  }
 });
 </script>

package/src/components/pages/Error403Page.vue

@@ -28,22 +28,17 @@
 </template>
 
 <script lang="ts">
-import { useGeneralStore } from "../../stores/GeneralStore";
 import { useAuthStore } from "../../stores/AuthStore";
 import { mapState } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "Error403Page",
   computed: {
-    ...mapState(useGeneralStore, ["metaTitle"]),
     ...mapState(useAuthStore, ["authOrgaId"]),
     authText(): string {
       return this.authOrgaId ? this.$t("Logout") : this.$t("Login");
     },
   },
-  mounted() {
-    document.title = this.metaTitle;
-  },
 });
 </script>
 <style lang="scss">

package/src/components/pages/PageNotFound.vue

@@ -25,22 +25,17 @@
 <script lang="ts">
 import { rubriquesFilterComputed } from "../mixins/routeParam/rubriquesFilterComputed";
 import { useFilterStore } from "../../stores/FilterStore";
-import { useGeneralStore } from "../../stores/GeneralStore";
 import { mapState } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PageNotFound",
   mixins: [rubriquesFilterComputed],
   computed: {
-    ...mapState(useGeneralStore, ["metaTitle"]),
     ...mapState(useFilterStore, ["filterIab"]),
     backgroundStyle(): string {
       return "background-image: url('/img/404.svg');";
     },
   },
-  mounted() {
-    document.title = this.metaTitle;
-  },
 });
 </script>
 <style lang="scss">

package/src/components/pages/RubriquePage.vue

@@ -14,6 +14,8 @@ import classicApi from "../../api/classicApi";
 import PodcastList from "../display/podcasts/PodcastList.vue";
 import { defineComponent } from "vue";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
+import { useGeneralStore } from "../../stores/GeneralStore";
+import { mapState } from "pinia";
 export default defineComponent({
   name: "RubriquePage",
   components: {
@@ -29,6 +31,9 @@ export default defineComponent({
       title: "" as string,
     };
   },
+  computed:{
+    ...mapState(useGeneralStore, ["metaTitle"]),
+  },
   watch: {
     rubriqueId: {
       immediate: true,
@@ -38,6 +43,7 @@ export default defineComponent({
           path: "rubrique/" + this.rubriqueId,
         });
         this.title = data.name;
+        document.title = this.title + ' - ' + this.metaTitle;
       },
     },
   },

package/src/components/pages/VideoPage.vue

@@ -109,6 +109,7 @@ import {
   ConferencePublicInfo,
 } from "@/stores/class/conference/conference";
 import { usePlayerStore } from "../../stores/PlayerStore";
+import { useGeneralStore } from "../../stores/GeneralStore";
 const PlayerVideoDigiteka = defineAsyncComponent(
   () => import("../misc/player/video/PlayerVideoDigiteka.vue"),
 );
@@ -157,6 +158,7 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useGeneralStore, ["metaTitle"]),
     ...mapState(useFilterStore, ["filterOrgaId"]),
     ...mapState(useAuthStore, ["authOrgaId"]),
     ...mapState(useApiStore, ["hlsUrl"]),
@@ -229,7 +231,7 @@ export default defineComponent({
           api: 0,
           path: "podcast/" + this.podcastId,
         });
-        document.title = this.podcast.title;
+        document.title = this.podcast.title + " - "+this.metaTitle;
         const orga = this.podcast.organisation;
         const privateAccess =
           "PUBLIC" !== orga.privacy &&

package/src/router/router.ts

@@ -40,6 +40,9 @@ const routes: Array<RouteRecordRaw> = [
     path: "/",
     name: "",
     component: Home,
+    meta:{
+      title: "Home"
+    }
   },
   {
     path: "/main/pub/error",
@@ -50,11 +53,17 @@ const routes: Array<RouteRecordRaw> = [
     path: "/main/pub/home",
     name: "home",
     component: Home,
+    meta:{
+      title: "Home",
+    }
   },
   {
     path: "/main/pub/map",
     name: "map",
     component: MapPage,
+    meta:{
+      title: "Site map",
+    }
   },
   {
     path: "/main/pub/search/:query?",
@@ -63,6 +72,9 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       queryRoute: route.params.query,
     }),
+    meta:{
+      title: "Search",
+    }
   },
   {
     path: "/main/pub/podcasts/",
@@ -83,6 +95,9 @@ const routes: Array<RouteRecordRaw> = [
       routeOrga:route.query.o,
       routeRubriques :route.query.r,
     }),
+    meta:{
+      title: "Podcasts",
+    }
   },
   {
     path: "/main/pub/emissions/",
@@ -101,6 +116,9 @@ const routes: Array<RouteRecordRaw> = [
       routeOrga:route.query.o,
       routeRubriques :route.query.r,
     }),
+    meta:{
+      title: "Emissions",
+    }
   },
   {
     path: "/main/pub/participants",
@@ -110,6 +128,9 @@ const routes: Array<RouteRecordRaw> = [
       pr: route.query.pr ? parseInt(route.query.pr.toString(), 10) : undefined,
       ps: route.query.ps ? parseInt(route.query.ps.toString(), 10) : undefined,
     }),
+    meta:{
+      title: "Speakers",
+    }
   },
   {
     path: "/main/pub/emission/:emissionId(\\d+):title([^?]*)?:productor?",
@@ -118,6 +139,9 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       emissionId: parseInt(route.params.emissionId.toString(), 10),
     }),
+    meta:{
+      title: ""
+    }
   },
   {
     path: "/main/pub/podcast/:podcastId(\\d+):title([^?]*)?:productor?",
@@ -126,6 +150,9 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       podcastId: parseInt(route.params.podcastId.toString(), 10)
     }),
+    meta:{
+      title: ""
+    }
   },
   {
     path: "/main/pub/video/:podcastId(\\d+):title([^?]*)?:productor?",
@@ -134,6 +161,9 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       podcastId: parseInt(route.params.podcastId.toString(), 10),
     }),
+    meta:{
+      title: ""
+    }
   },
   {
     path: "/main/pub/participant/:participantId(\\d+):title([^?]*)?:productor?",
@@ -142,6 +172,9 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       participantId: parseInt(route.params.participantId.toString(), 10),
     }),
+    meta:{
+      title: ""
+    }
   },
   {
     path: "/main/pub/category/:iabId/:productor?",
@@ -151,6 +184,9 @@ const routes: Array<RouteRecordRaw> = [
       iabId: parseInt(route.params.iabId.toString(), 10),
       productor: route.params.productor,
     }),
+    meta:{
+      title: "",
+    }
   },
   {
     path: "/main/pub/rubrique/:rubriqueId/:productor?",
@@ -166,6 +202,9 @@ const routes: Array<RouteRecordRaw> = [
       rubriqueId: parseInt(route.params.rubriqueId.toString(), 10),
       productor: route.params.productor,
     }),
+    meta:{
+      title: "",
+    }
   },
   {
     path: "/main/pub/lives/:productor?",
@@ -174,6 +213,9 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       productor: route.params.productor,
     }),
+    meta:{
+      title: "Radio & Live",
+    }
   },
   {
     path: "/main/pub/radio/:canalId(\\d+):title([^?]*)?:productor?",
@@ -182,6 +224,9 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       canalId: parseInt(route.params.canalId.toString(), 10),
     }),
+    meta:{
+      title: ""
+    }
   },
   {
     path: "/main/pub/playlists/",
@@ -191,6 +236,9 @@ const routes: Array<RouteRecordRaw> = [
       pr: route.query.pr ? parseInt(route.query.pr.toString(), 10) : undefined,
       ps: route.query.ps ? parseInt(route.query.ps.toString(), 10) : undefined,
     }),
+    meta:{
+      title: "Playlists"
+    }
   },
   {
     path: "/main/pub/playlist/:playlistId(\\d+):title([^?]*)?:productor?",
@@ -199,6 +247,9 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       playlistId: parseInt(route.params.playlistId.toString(), 10),
     }),
+    meta:{
+      title: ""
+    }
   },
   //Fake route to avoid errors
   {