@saooti/octopus-sdk 41.0.14-SNAPSHOT → 41.0.15

package/src/router/utils.ts

@@ -0,0 +1,112 @@
+import { Router } from "vue-router";
+import { useFilterStore, FilterStore } from "../stores/FilterStore";
+import { useSaveFetchStore } from "../stores/SaveFetchStore";
+import { Rubriquage } from "../stores/class/rubrique/rubriquage";
+import classicApi from "../api/classicApi";
+import { useAuthStore, AuthStore } from "../stores/AuthStore";
+import { deepEqual } from "../helper/equals";
+
+async function changeOrgaFilter(orgaFilter: string, filterStore: FilterStore){
+  const saveStore = useSaveFetchStore();
+  const response = await saveStore.getOrgaData(orgaFilter);
+  const data = await classicApi.fetchData<Array<Rubriquage>>({
+    api: 0,
+    path: "rubriquage/find/" + orgaFilter,
+    parameters: {
+      sort: "HOMEPAGEORDER",
+      homePageOrder: true,
+    },
+    specialTreatement: true,
+  });
+  const isLive = await saveStore.getOrgaLiveEnabled(orgaFilter);
+  filterStore.filterUpdateOrga({
+    orgaId: orgaFilter,
+    imgUrl: response.imageUrl,
+    name: response.name,
+    rubriquageArray: data.filter((element: Rubriquage) => {
+      return element.rubriques.length;
+    }),
+    isLive: isLive,
+  });
+}
+
+let fetchMyOrgaActive = false;
+/** Variable used to apply beforeEach redirect only once */
+let resolved = false;
+
+/**
+ * Utility function seting up the router with a custom beforeEach
+ */
+export function setupRouter(router: Router, getMyOrgaActive: (authStore: AuthStore) => Promise<string>): void {
+  router.beforeResolve(async () =>{
+    fetchMyOrgaActive = false;
+    // Reinit variable to allow one redirect
+    resolved = false;
+  });
+
+  // Navigation guard that updates current organisation & may make redirects
+  router.beforeEach(async (to, from) => {
+
+    if ("/logout" === to.path && "/logout" !== from.path) {
+      setTimeout(() => {
+        window.location.reload(true);
+      }, 500);
+    }
+    const authStore = useAuthStore();
+    const filterStore = useFilterStore();
+    
+    const isSamePath = to.matched[0]?.path === from.matched[0]?.path && to.path.includes(from.path);
+    let orgaToFocus = isSamePath ? (to.query.productor?.toString() ?? undefined) : undefined;
+
+    if(authStore.authProfile){
+      if(!isSamePath && !fetchMyOrgaActive){
+        await getMyOrgaActive(authStore);
+        fetchMyOrgaActive = true;
+      }
+      if(undefined!==orgaToFocus){
+        orgaToFocus = authStore.authOrgaId;
+      }
+    }
+
+    // Update organisation
+    if (isSamePath && orgaToFocus !== from.query.productor) {
+      if (filterStore.filterOrgaId !== orgaToFocus && orgaToFocus !== undefined) {
+        await changeOrgaFilter(orgaToFocus, filterStore);
+      }
+    }
+
+    // Only change target if not going to logout and not already resolved
+    if ("/logout" !== to.path && resolved !== true) {
+      resolved = true;
+      const newQuery = {
+        ...to.query
+      };
+
+      // Set productor
+      if (to.query.productor) {
+        newQuery.productor = to.query.productor;
+      } else if (filterStore.filterOrgaId === undefined) {
+        delete newQuery.productor;
+      } else {
+        newQuery.productor = filterStore.filterOrgaId;
+      }
+
+      // Enable 'viewall' mode if already active
+      if ((from.query.viewall === "true" || to.query.viewall === "true") && to.query.viewall !== "false") {
+        newQuery.viewall = "true";
+      } else {
+        delete newQuery.viewall;
+      }
+
+      // If the queries are different, update path
+      if (!deepEqual(newQuery, to.query)) {
+        return {
+          path: to.path,
+          query: { ...newQuery },
+          params: to.params,
+          name: to.name,
+        };
+      }
+    }
+  });
+}

package/src/stores/AuthStore.ts

@@ -5,12 +5,14 @@ import { defineStore } from "pinia";
 import { KeycloakInfo } from "@/stores/class/user/person";
 import { VideoConfig } from "@/stores/class/config/videoConfig";
 import classicApi from "../api/classicApi";
-interface AuthParam{
+
+interface AuthParam {
   accessToken?: string;
   refreshToken?: string;
   expiration?: Date|string;
   clientId?: string;
 }
+
 interface AuthState {
   authReload: number;
   authName: string;
@@ -43,7 +45,7 @@ export const useAuthStore = defineStore("AuthStore", {
       comments: undefined,
       attributes: {
         RSS_CONTACT: undefined,
-      },
+      }
     },
     authVideoConfig: { active: false },
   }),
@@ -231,3 +233,6 @@ export const useAuthStore = defineStore("AuthStore", {
     },
   },
 });
+
+/** Type for the AuthStore */
+export type AuthStore = ReturnType<typeof useAuthStore>;

package/src/stores/FilterStore.ts

@@ -1,73 +1,128 @@
-import { Category } from "@/stores/class/general/category";
-import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
-import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
-import { Rubrique } from "@/stores/class/rubrique/rubrique";
-import { defineStore } from "pinia";
+import { computed, ref } from 'vue';
 
-interface FilterState {
-  filterOrgaId?: string;
-  filterImgUrl?: string;
-  filterName?: string;
-  filterRubriquage: Array<Rubriquage>;
-  filterRubrique: Array<RubriquageFilter>;
-  filterRubriqueDisplay: Array<Rubrique>;
-  filterTypeMedia?: string;
-  filterSortOrder?: string;
-  filterSortField?: string;
-  filterLive?: boolean;
-  filterIab?: Category;
-}
-export const useFilterStore = defineStore("FilterStore", {
-  state: (): FilterState => ({
-    filterRubriquage: [],
-    filterRubrique: [],
-    filterRubriqueDisplay: [],
-    filterLive: false,
-  }),
-  actions: {
-    filterUpdateOrga(filter: {
-      orgaId?: string;
-      imgUrl?: string;
-      name?: string;
-      rubriquageArray?: Array<Rubriquage>;
-      isLive?: boolean;
-    }) {
-      if (filter.imgUrl || !filter.orgaId) {
-        this.filterImgUrl = filter.imgUrl;
-      }
-      if (filter.name || !filter.orgaId) {
-        this.filterName = filter.name;
-      }
-      if (filter.rubriquageArray) {
-        this.filterRubriquage = filter.rubriquageArray;
-      }
-      this.filterLive = filter.isLive;
-      this.filterIab = undefined;
-      this.filterOrgaId = filter.orgaId;
-    },
-    filterUpdateIab(iab?: Category) {
-      this.filterIab = iab;
-    },
-    filterUpdateRubrique(rubriqueFilter: Array<RubriquageFilter>) {
-      this.filterRubrique = rubriqueFilter;
-    },
-    filterUpdateRubriqueDisplay(rubriques: Array<Rubrique>) {
-      this.filterRubriqueDisplay = rubriques.filter(rubrique=> rubrique);
-    },
-    filterUpdateMedia(filter: {
-      type?: string;
-      order?: string;
-      field?: string;
-    }) {
-      if (filter.type) {
-        this.filterTypeMedia = filter.type;
-      }
-      if (filter.order) {
-        this.filterSortOrder = filter.order;
-      }
-      if (filter.field) {
-        this.filterSortField = filter.field;
-      }
-    },
-  },
+import { Category } from '@/stores/class/general/category';
+import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { defineStore } from 'pinia';
+import { useAuthStore } from './AuthStore';
+import { useRoute } from 'vue-router';
+
+/**
+ * Store managing data regarding the filters to apply to know which
+ * podcasts to show.
+ */
+export const useFilterStore = defineStore("FilterStore", () => {
+  const _filterOrgaId = ref<string|null>(null);
+  const filterImgUrl = ref<string>();
+  const filterName = ref<string>();
+  const filterRubriquage = ref<Array<Rubriquage>>([]);
+  const filterRubrique = ref<Array<RubriquageFilter>>([]);
+  const filterRubriqueDisplay = ref<Array<Rubrique>>([]);
+  const filterTypeMedia = ref<string>();
+  const filterSortOrder = ref<string>();
+  const filterSortField = ref<string>();
+  const filterLive = ref<boolean>(false);
+  const filterIab = ref<Category>();
+
+  const route = useRoute();
+  const authStore = useAuthStore();
+
+  /**
+   * ID of the current organisation.
+   */
+  const filterOrgaId = computed((): string|undefined => {
+    if (route?.query.viewall === "true") {
+      return undefined;
+    } else if (route?.query.productor) {
+      return route.query.productor as string;
+    } else if(_filterOrgaId.value === null) {
+      return authStore.authOrgaId;
+    } else {
+      return _filterOrgaId.value ?? undefined;
+    }
+  });
+
+  /**
+   * The ID of the current organisation, regardless of other options.
+   * Use this if you want to know the organisation of the user even in
+   * unfocused mode (ie viewall = true)
+   */
+  const realOrgaId = computed(() => {
+    return _filterOrgaId.value ?? undefined;
+  });
+
+  function filterUpdateOrga(filter: {
+    orgaId?: string;
+    imgUrl?: string;
+    name?: string;
+    rubriquageArray?: Array<Rubriquage>;
+    isLive?: boolean;
+  }) {
+    if (filter.imgUrl || !filter.orgaId) {
+      filterImgUrl.value = filter.imgUrl;
+    }
+    if (filter.name || !filter.orgaId) {
+      filterName.value = filter.name;
+    }
+    if (filter.rubriquageArray) {
+      filterRubriquage.value = filter.rubriquageArray;
+    }
+    filterLive.value = filter.isLive ?? false;
+    filterIab.value = undefined;
+    _filterOrgaId.value = filter.orgaId ?? null;
+  }
+
+  function filterUpdateIab(iab?: Category) {
+    filterIab.value = iab;
+  }
+
+  function filterUpdateRubrique(rubriqueFilter: Array<RubriquageFilter>) {
+    filterRubrique.value = rubriqueFilter;
+  }
+
+  function filterUpdateRubriqueDisplay(rubriques: Array<Rubrique>) {
+    filterRubriqueDisplay.value = rubriques.filter(rubrique=> rubrique);
+  }
+
+  function filterUpdateMedia(filter: {
+    type?: string;
+    order?: string;
+    field?: string;
+  }) {
+    if (filter.type) {
+      filterTypeMedia.value = filter.type;
+    }
+    if (filter.order) {
+      filterSortOrder.value = filter.order;
+    }
+    if (filter.field) {
+      filterSortField.value = filter.field;
+    }
+  }
+
+  return {
+    filterOrgaId,
+    realOrgaId,
+
+    filterUpdateOrga,
+    filterUpdateIab,
+    filterUpdateRubrique,
+    filterUpdateRubriqueDisplay,
+    filterUpdateMedia,
+
+    filterImgUrl,
+    filterName,
+    filterRubriquage,
+    filterRubrique,
+    filterRubriqueDisplay,
+    filterTypeMedia,
+    filterSortOrder,
+    filterSortField,
+    filterLive,
+    filterIab
+  };
 });
+
+/** Type for the FilterStore */
+export type FilterStore = ReturnType<typeof useFilterStore>;

package/src/stores/PlayerStore.ts

@@ -32,6 +32,7 @@ interface PlayerState {
   playerChaptering?: Chaptering;
   playerDelayStitching: number;
   playerHlsUrl?: string;
+  playerHlsIdentifier?:string;
 }
 export const usePlayerStore = defineStore("PlayerStore", {
   state: (): PlayerState => ({
@@ -49,6 +50,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerVideo: false,
     playerChaptering: undefined,
     playerDelayStitching: 0,
+    playerHlsIdentifier: undefined,
   }),
   getters: {
     playerChapteringPercent(): ChapteringPercent | undefined {
@@ -139,6 +141,11 @@ export const usePlayerStore = defineStore("PlayerStore", {
     },
   },
   actions: {
+    /**
+     * Start playing audio/video
+     * @param param The data
+     * @param isVideo If true, enable video mode
+     */
     async playerPlay(param?: any, isVideo = false) {
       if (!param) {
         this.playerCurrentChange = null;
@@ -146,6 +153,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         this.playerPodcast = undefined;
         this.playerMedia = undefined;
         this.playerLive = undefined;
+        this.playerHlsIdentifier = undefined;
         this.playerRadio = undefined;
         this.playerElapsed = 0;
         this.playerVideo = false;
@@ -168,6 +176,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
       this.playerPodcast = undefined;
       this.playerMedia = undefined;
       this.playerLive = undefined;
+      this.playerHlsIdentifier = undefined;
       this.playerRadio = undefined;
       this.playerVideo = isVideo;
       this.playerElapsed = 0;
@@ -177,6 +186,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         (!param.podcastId || param.processingStatus !== "READY")
       ) {
         this.playerLive = param;
+        this.playerHlsIdentifier = param.hlsIdentifier;
         this.playerCurrentChange = null;
         return;
       }
@@ -210,7 +220,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerUpdateSeekTime(seekTime: number) {
       this.playerSeekTime = seekTime;
     },
-    playerMetadata(metadata: MediaRadio, history: Array<MediaRadio>) {
+    playerMetadata(metadata: MediaRadio|undefined, history: Array<MediaRadio>) {
       if (!this.playerRadio) {
         return;
       }

package/src/stores/class/conference/conference.ts

@@ -8,6 +8,7 @@ export interface Conference {
   deletionAttempts?: number;
   directCode?: string;
   externalRtmpUrl?: ExternalRtmpUrl;
+  hlsIdentifier?: string;
   hostname?: string;
   jingleDuration?: number;
   jingleFilePath?: string;
@@ -57,6 +58,7 @@ export function getEmptyConference(): Conference {
 export interface ConferencePublicInfo {
   status: string;
   videoProfile: string;
+  hlsIdentifier: string;
 }
 
 export interface ExternalRtmpUrl {

package/src/stores/class/general/organisation.ts

@@ -22,13 +22,13 @@ export function emptyOrganisationData(): Organisation {
   return {
     imageUrl: "",
     id: "",
-    name: "",
+    name: ""
   };
 }
 export function emptyOrgaData(defaultName: string): Organisation {
   return {
     imageUrl: "/img/emptypodcast.webp",
     id: "",
-    name: defaultName,
+    name: defaultName
   };
 }

package/src/stores/class/general/player.ts

@@ -4,7 +4,7 @@ import { Podcast } from "./podcast";
 export interface Radio {
   canalId: number;
   url: string;
-  metadata: MediaRadio;
+  metadata?: MediaRadio;
   history: Array<MediaRadio>;
   nextAdvertising: NextAdvertising;
   isInit: boolean;
@@ -30,7 +30,7 @@ export interface NextAdvertising {
 
 export interface MetadataRadio {
   channelId: number;
-  currently: MediaRadio;
+  currently: MediaRadio|null;
   previously: Array<MediaRadio>;
   nextAdvertising: NextAdvertising;
 }

package/src/style/_variables.scss

@@ -27,10 +27,16 @@
     --octopus-background-transparent: oklch(from var(--octopus-background) l c h / 40%);
     --octopus-tertiary-really-transparent: oklch(from var(--octopus-tertiary) l c h / 30%);
 
+    //Gradient
+    --octopus-gradient : linear-gradient(90deg,var(--octopus-primary) 0%, var(--octopus-tertiary) 100%);
+
     // Size
     --octopus-image-size: 12.5rem;
     --octopus-podcast-size: 13.5rem;
     --octopus-border-radius: 0.2rem;
     --octopus-line-clamp:2;
     --octopus-max-height-description: 7rem;
+
+    //Font-family
+    --octopus-font-family: Montserrat,sans-serif,"Helvetica Neue";
 }

package/src/style/general.scss

@@ -1,5 +1,6 @@
 /** Document style */
 
+
 html{
   font-size: 20px;
   height: 100%;
@@ -9,7 +10,7 @@ html{
 body{
   margin: 0;
   color: var(--octopus-color-text);
-  font-family: Montserrat,sans-serif,"Helvetica Neue";
+  font-family: var(--octopus-font-family);
   font-size: 0.8rem;
   overflow-x: hidden;
   background: var(--octopus-secondary-lighter);
@@ -42,6 +43,10 @@ main, #app{
     align-items: center;
   }
 
+  input {
+    font-family: var(--octopus-font-family);
+  }
+
   /** Link style */
   a{
     word-break: break-word;
@@ -114,6 +119,11 @@ main, #app{
 		background: var(--octopus-complementary-color) !important;
 	}
 
+  .bg-gradient{
+    background: var(--octopus-primary);
+    background:var(--octopus-gradient);
+  }
+
   .text-blue-octopus{
     color: var(--octopus-tertiary) !important
   }
@@ -170,6 +180,13 @@ main, #app{
 		}
 	}
 
+  .show-small-screen{
+    display: none !important;
+		@media (width <= 500px) {
+			display: flex !important;
+		}
+	}
+
   .show-phone{
     display: none;
 

package/tsconfig.json

@@ -13,7 +13,11 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env"
+      "webpack-env", "sockjs-client"
+    ],
+    "typeRoots": [
+      "./typings",
+      "./node_modules/@types/"
     ],
     "paths": {
       "@/*": [
@@ -38,6 +42,6 @@
     "node_modules"
   ],
   "files": [
-    "src/shims-vue.d.ts",
+    "src/shims-vue.d.ts"
   ]
 }

package/typings/index.d.ts

@@ -0,0 +1 @@
+declare module 'sockjs-client/dist/sockjs';

package/src/helper/radio/radioHelper.ts

@@ -1,15 +0,0 @@
-import { MediaRadio } from "@/stores/class/general/player";
-
-export default {
-    displayTitle(metadata: MediaRadio): string {
-        let title = "";
-        if (metadata.title) {
-          title += metadata.title;
-        }
-        if (metadata.artist) {
-          title += " - " + metadata.artist;
-        }
-        return title;
-      }
-};
-