@saooti/octopus-sdk 40.1.1-SNAPSHOT → 40.1.2

package/index.ts

@@ -53,6 +53,7 @@ export const getEmissionInlineList = () => import("./src/components/display/emis
 export const getRubriqueChooser = () => import("./src/components/display/rubriques/RubriqueChooser.vue");
 export const getCommentList = () => import("./src/components/display/comments/CommentList.vue");
 export const getCommentInput = () => import("./src/components/display/comments/CommentInput.vue");
+export const getCommentSection = () => import("./src/components/display/comments/CommentSection.vue");
 export const getPodcastPlaylistInlineList = () => import("./src/components/display/playlist/PodcastPlaylistInlineList.vue");
 export const getLiveList = () => import("./src/components/display/live/LiveList.vue");
 export const getEmissionPresentationList = () => import("./src/components/display/emission/EmissionPresentationList.vue");
@@ -98,6 +99,7 @@ import {useMetaTitle} from "./src/components/composable/useMetaTitle.ts";
 import {useMetaTitleWatch} from "./src/components/composable/useMetaTitleWatch.ts";
 import {useOrganisationFilter} from "./src/components/composable/useOrganisationFilter.ts";
 import {useInit} from "./src/components/composable/useInit.ts";
+import {useErrorHandler} from "./src/components/composable/useErrorHandler.ts";
 
 
 
@@ -146,6 +148,7 @@ export {
     useMetaTitleWatch,
     useOrganisationFilter,
     useInit,
+    useErrorHandler,
     debounce,
     useVastStore,
     useSaveFetchStore,

package/package.json

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

package/src/components/display/accessibility/AccessibilityModal.vue

@@ -0,0 +1,136 @@
+<template>
+  <ClassicModalInBody
+    id-modal="accessibility-modal"
+    :title-modal="$t('Transcript Accessibility')"
+    @close="closePopup"
+  >
+    <template #body>
+      <div class="d-flex gap-3 flex-wrap mb-3">
+        <div class="d-flex flex-nowrap align-items-center flex-grow-1">
+          <div class="form-label me-3">{{ $t('Choose background color') }}</div>
+          <VSwatches
+            v-model:model-value="background"
+            class="c-hand"
+            show-fallback
+            fallback-input-type="color"
+            colors="text-advanced"
+            popover-x="left"
+            :data-color="color"
+          />
+        </div>
+        <div class="d-flex flex-nowrap align-items-center flex-grow-1">
+          <div class="form-label me-3">{{ $t('Choose text color') }}</div> 
+          <VSwatches
+            v-model:model-value="color"
+            class="c-hand"
+            show-fallback
+            fallback-input-type="color"
+            colors="text-advanced"
+            popover-x="left"
+            :data-color="color"
+          />
+        </div>
+      </div>
+
+      <div class="d-flex align-items-center flex-nowrap mb-3">
+        <label class="form-label me-3" for="accessibility-font-size">{{ $t('Font size') }}</label> 
+        <button class="btn me-3" :disabled="isMinSize" @click="decreaseFontSize"><FormatFontSizeDecreaseIcon :size="44"/></button>
+        <button class="btn" :disabled="isMaxSize" @click="increaseFontSize"><FormatFontSizeIncreaseIcon :size="44"/></button>
+      </div>
+    
+      <div class="form-label mt-3">{{ $t('Preview') }}</div>
+      <div class="border p-2 mb-3" :style="stylePreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+    </template>
+    <template #footer>
+      <button class="btn m-1" @click="closePopup">
+        {{ $t("No") }}
+      </button>
+      <button
+        class="btn btn-primary m-1"
+        @click="saveData"
+      >
+        {{ $t("Save") }}
+      </button>
+    </template>
+  </ClassicModalInBody>
+</template>
+
+<script lang="ts">
+import { VSwatches } from "vue3-swatches";
+import "vue3-swatches/dist/style.css";
+import FormatFontSizeIncreaseIcon from "vue-material-design-icons/FormatFontSizeIncrease.vue";
+import FormatFontSizeDecreaseIcon from "vue-material-design-icons/FormatFontSizeDecrease.vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const ClassicModalInBody = defineAsyncComponent(
+  () => import("../../misc/modal/ClassicModalInBody.vue"),
+);
+export default defineComponent({
+  name: "AccessibilityModal",
+
+  components: {
+    ClassicModalInBody,
+    FormatFontSizeIncreaseIcon,
+    FormatFontSizeDecreaseIcon,
+    VSwatches
+  },
+
+  emits: ["close", "save"],
+  computed:{
+    isMaxSize(){
+      return this.fontSize>=30;
+    },
+    isMinSize(){
+      return this.fontSize<=16;
+    },
+    stylePreview(){
+      return 'font-size:'+this.fontSize+'px; background:'+this.background+'; color:'+this.color;
+    }
+  },
+  data() {
+    return {
+      fontSize :16 as number,
+      background: "white" as string,
+      color: "black" as string,
+    };
+  },
+  created(){
+    this.initAccessibility();
+  },
+  methods: {
+    initAccessibility(){
+      const actualFontSize = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-font-size');
+      this.fontSize = isNaN(parseInt(actualFontSize.slice(0, -2), 10)) ? 16 :parseInt(actualFontSize.slice(0, -2), 10);
+      this.background = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-background');
+      this.color = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-color');
+    },
+    closePopup() {
+      this.$emit("close");
+    },
+    decreaseFontSize(){
+      if(!this.isMinSize){
+        this.fontSize -=2;
+      }
+    },
+    increaseFontSize(){
+      if(!this.isMaxSize){
+        this.fontSize +=2;
+      }
+    },
+    saveData(){
+      this.$emit('save', {
+        fontSize: this.fontSize,
+        background: this.background,
+        color: this.color,
+      });
+    }
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app #accessibility-modal .octopus-modal-body{
+  min-height: 400px;
+  .gap-3{
+    gap:1rem;
+  }
+}
+</style>

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

@@ -1,7 +1,9 @@
 <template>
   <section v-show="displayCommentSection" class="module-box">
     <div class="d-flex align-items-center">
-      <h3 class="mb-0 me-2">{{ $t("Podcast's comments") }}</h3>
+      <component 
+        :is="inStudio? 'div':'h3'" 
+        :class="inStudio? 'm-1 fw-bold':'mb-0 me-2'">{{ $t("Podcast's comments") }}</component>
       <button
         :title="$t('Refresh')"
         class="btn btn-transparent"
@@ -17,11 +19,12 @@
     />
     <CommentList
       v-model:nb-comments="nbComments"
-      class="mt-5"
+      :class="inStudio? 'mt-2':'mt-5'"
       :podcast="podcast"
       :reload="reload"
       :config="configPodcast"
       :event-to-handle="eventToHandle"
+      :state-filter="stateFilter"
     />
   </section>
 </template>
@@ -49,6 +52,8 @@ export default defineComponent({
   },
   props: {
     podcast: { default: undefined, type: Object as () => Podcast },
+    inStudio: { default: false, type: Boolean },
+    stateFilter: { default: "", type: String },
   },
   data() {
     return {

package/src/components/display/emission/EmissionPresentationList.vue

@@ -17,6 +17,7 @@
         <div
           v-if="allEmissions.length > 1"
           class="emission-column emission-column-margin d-flex-row flex-nowrap"
+          :class="allEmissions.length <= 3 ? 'flex-grow-1' : ''"
         >
           <EmissionItemPresentation
             v-if="allEmissions[1]"

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

@@ -1,12 +1,22 @@
 <template>
   <div>
-    <button
-      class="btn btn-transcript"
-      :class="{ open: isOpen }"
-      @click="isOpen = !isOpen"
-    >
-      {{ buttonText }}
-    </button>
+    <AccessibilityModal
+      v-if="isAccessibilityModal"
+      @save="saveAccessibility"
+      @close="isAccessibilityModal = false"
+    />
+    <div class="transcription-section-buttons">
+      <button v-if="isOpen" class="btn btn-primary m-0" @click="isAccessibilityModal = true">
+        <EyeOutlineIcon class="me-1"/> {{ $t('Transcript Accessibility') }}
+      </button>
+      <button
+        class="btn btn-transcript"
+        :class="{ open: isOpen }"
+        @click="isOpen = !isOpen"
+      >
+        {{ buttonText }}
+      </button>
+    </div>
     <div v-if="isOpen" class="transcription-body">
       <ClassicLoading
         :loading-text="!firstLoaded ? $t('Loading content ...') : undefined"
@@ -24,14 +34,21 @@
 </template>
 
 <script lang="ts">
+import cookiesHelper from "../../../helper/cookiesHelper";
+import EyeOutlineIcon from "vue-material-design-icons/EyeOutline.vue";
 import classicApi from "../../../api/classicApi";
 import ClassicLoading from "../../form/ClassicLoading.vue";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const AccessibilityModal = defineAsyncComponent(
+  () => import("../accessibility/AccessibilityModal.vue"),
+);
 export default defineComponent({
   name: "PodcastRawTranscript",
 
   components: {
     ClassicLoading,
+    EyeOutlineIcon,
+    AccessibilityModal
   },
 
   props: {
@@ -42,6 +59,7 @@ export default defineComponent({
       isOpen: false as boolean,
       firstLoaded: false as boolean,
       transcript: undefined as string | undefined,
+      isAccessibilityModal : false as boolean,
     };
   },
 
@@ -56,10 +74,37 @@ export default defineComponent({
     async isOpen() {
       if (this.isOpen && !this.firstLoaded) {
         this.fetchTranscript();
+        this.getAccessibility();
       }
     },
   },
   methods: {
+    getAccessibility(){
+      let fontSize = cookiesHelper.getCookie("octopus-font-size");
+      if (null !== fontSize) {
+        this.setCssProperty('--octopus-accessibility-font-size', fontSize);
+      }
+      let background = cookiesHelper.getCookie("octopus-background");
+      if (null !== background) {
+        this.setCssProperty('--octopus-accessibility-background', background);
+      }
+      let color = cookiesHelper.getCookie("octopus-color");
+      if (null !== color) {
+        this.setCssProperty('--octopus-accessibility-color', color);
+      }
+    },
+    setCssProperty(name: string, value: string){
+      document.documentElement.style.setProperty(name,value);
+    },
+    saveAccessibility(accessibility: {fontSize: number,background: string,color: string}){
+      this.setCssProperty('--octopus-accessibility-font-size', accessibility.fontSize+'px');
+      cookiesHelper.setCookie("octopus-font-size", accessibility.fontSize+'px');
+      this.setCssProperty('--octopus-accessibility-background', accessibility.background);
+      cookiesHelper.setCookie("octopus-background",accessibility.background);
+      this.setCssProperty('--octopus-accessibility-color', accessibility.color);
+      cookiesHelper.setCookie("octopus-color",accessibility.color);
+      this.isAccessibilityModal = false;
+    },
     async fetchTranscript() {
       if (!this.podcastId) {
         return;
@@ -78,15 +123,36 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-
-
+:root {
+  --octopus-accessibility-font-size: 16px;
+  --octopus-accessibility-background: var(--octopus-background);
+  --octopus-accessibility-color: var(--octopus-color-text);
+}
 .octopus-app {
+  .transcription-section-buttons{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    @media (width <= 625px) {
+      flex-direction: column;
+    }
+  }
   .btn-transcript {
     position: relative;
     border-radius: var(--octopus-border-radius);
     overflow: hidden;
     background: var(--octopus-secondary);
     transition: all 0.2s linear 0s;
+    
+    &.open{
+      margin-left:auto;
+      @media (width <= 625px) {
+        margin-top: 0.5rem;
+      }
+    }
+    &:not(.open){
+      margin-right: auto;
+    }
 
     &:not(.open)::before,
     &.open::after {
@@ -137,12 +203,15 @@ export default defineComponent({
   }
 
   .transcription-body {
+    font-size: var(--octopus-accessibility-font-size);
     position: relative;
     padding: 1rem;
     max-height: 250px;
     display: flex;
     justify-content: center;
     white-space: pre-wrap;
+    background: var(--octopus-accessibility-background);
+    color: var(--octopus-accessibility-color);
 
     .transcription-text {
       overflow: hidden auto;

package/src/components/form/ClassicWysiwyg.vue

@@ -203,7 +203,7 @@ export default defineComponent({
     updateHtml(): void {
       if (!this.editor) {return}
       const plainText= this.editor.getText();
-      const regexHtml = /<(a|b|h3|h4|em|i|li|ol|p|strong|ul|u|br).*?<\/\1>/i
+      const regexHtml = /<(a|b|h3|h4|em|i|li|ol|p|strong|ul|u|br|span).*?/i
       if(regexHtml.test(plainText)){
         this.editor.commands.setContent(plainText);
       }

package/src/components/misc/modal/ClassicModalInBody.vue

@@ -89,8 +89,8 @@ export default defineComponent({
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100dvh;
+    width: 100%;
+    height: 100%;
     background-color: black;
   }
 
@@ -110,7 +110,6 @@ export default defineComponent({
 
     @media (width <= 500px) {
       width: 95%;
-      margin: 2.5% !important;
     }
   }
 

package/src/helper/displayHelper.ts

@@ -12,4 +12,4 @@ export default {
     await navigator.clipboard.writeText(link);
     return callback();
   },
-};
+};

package/src/locale/de.ts

@@ -407,4 +407,8 @@ export default {
   Rubrics: "Rubriken",
   "New window":"{text} - Neues Fenster",
   "Mandatory input":"Pflichteingabe",
+  "Transcript Accessibility":"Barrierefreiheit von Transkripten",
+  "Font size":"Schriftgröße",
+  "Preview":"Vorschau",
+  "Save":"Speichern",
 }

package/src/locale/en.ts

@@ -410,4 +410,8 @@ export default {
   Rubrics: "Rubrics",
   "New window":"{text} - New window",
   "Mandatory input":"Mandatory input",
+  "Transcript Accessibility":"Transcript Accessibility",
+  "Font size":"Font size",
+  "Preview":"Preview",
+  "Save":"Save",
 };

package/src/locale/es.ts

@@ -408,4 +408,8 @@ export default {
   Rubrics: "Secciones",
   "New window":"{text} - Nueva ventana",
   "Mandatory input":"Entrada obligatoria",
+  "Transcript Accessibility":"Accesibilidad de transcripción",
+  "Font size":"Tamaño de fuente",
+  "Preview":"Avance",
+  "Save":"Ahorrar",
 }

package/src/locale/fr.ts

@@ -417,4 +417,8 @@ export default {
   Rubrics: "Rubriques",
   "New window":"{text} - Nouvelle fenêtre",
   "Mandatory input":"Saisie obligatoire",
+  "Transcript Accessibility":"Accessibilité de la transcription",
+  "Font size":"Taille de la police",
+  "Preview":"Aperçu",
+  "Save":"Sauvegarder",
 };

package/src/locale/it.ts

@@ -404,4 +404,8 @@ export default{
   Rubrics: "Rubriche",
   "New window":"{text} - Nuova finestra",
   "Mandatory input":"Ingresso obbligatorio",
+  "Transcript Accessibility":"Accessibilità della trascrizione",
+  "Font size":"Dimensione del carattere",
+  "Preview":"Anteprima",
+  "Save":"Salva",
 };

package/src/locale/sl.ts

@@ -399,4 +399,8 @@ export default {
   Rubrics: "Rubrike",
   "New window":"{text} - Novo okno",
   "Mandatory input":"Obvezen vnos",
+  "Transcript Accessibility":"Dostopnost prepisa",
+  "Font size":"Velikost pisave",
+  "Preview":"Predogled",
+  "Save":"Shrani",
 }

package/src/style/general.scss

@@ -4,6 +4,11 @@ html{
   font-size: 20px;
   height: 100%;
   scrollbar-gutter: stable;
+  /* scroll-snap-type: y proximity;
+  scroll-padding-top: 5rem;
+  @media (width <= 650px) {
+    scroll-padding-top: 3.5rem;
+  } */
 }
 
 body{
@@ -13,7 +18,7 @@ body{
   font-size: 0.8rem;
   overflow-x: hidden;
   background: var(--octopus-secondary-lighter);
-  min-height: 100%;
+  min-height: 100vh;
   overscroll-behavior-y: contain;
   display: flex;
   flex-direction: column;
@@ -25,6 +30,15 @@ main, #app{
   flex-grow: 1;
 }
 
+/* header, section:not(.page-box), .podcast-inline-container {
+  scroll-snap-align: start;
+}
+.page-element > section:first-child {
+  scroll-snap-align: none;
+}
+ */
+
+
 /** Octopus style */
 
 .octopus-app{