From c2e2944e205ea56187e3a846ad6d655c0877db68 Mon Sep 17 00:00:00 2001
From: tjiho <tom.darboux@laposte.net>
Date: Wed, 14 May 2025 12:12:48 +0200
Subject: [PATCH 1/6] Add watermark settings

---
 studio-frontend/.envTemplate                  |  2 +-
 studio-frontend/public/img/pin-angle-fill.svg |  3 +
 studio-frontend/public/img/pin.svg            |  3 +
 .../src/components/FormCheckbox.vue           |  2 +-
 .../src/components/ModalWatermarkSettings.vue | 82 ++++++++++++++++
 .../src/components/SessionChannel.vue         | 22 ++++-
 .../src/components/SessionLiveContent.vue     | 20 ++++
 .../src/components/SessionLiveToolbar.vue     | 95 ++++++++++++++++++-
 .../src/components/SessionSubtitle.vue        | 91 +++++++++++++++---
 studio-frontend/src/const/defaultEnv.js       |  2 +
 studio-frontend/src/locales/en-US.json        | 17 +++-
 studio-frontend/src/locales/fr-FR.json        | 17 +++-
 .../src/style/components/icons.scss           |  6 ++
 studio-frontend/src/views/SessionLive.vue     | 20 +++-
 14 files changed, 351 insertions(+), 31 deletions(-)
 create mode 100644 studio-frontend/public/img/pin-angle-fill.svg
 create mode 100644 studio-frontend/public/img/pin.svg
 create mode 100644 studio-frontend/src/components/ModalWatermarkSettings.vue

diff --git a/studio-frontend/.envTemplate b/studio-frontend/.envTemplate
index dd082648..b7e428e1 100644
--- a/studio-frontend/.envTemplate
+++ b/studio-frontend/.envTemplate
@@ -20,7 +20,7 @@ VUE_APP_NAME=linTO Studio
 VUE_APP_DEFAULT_METADATA=room,team
 VUE_APP_WATERMARK_FREQUENCY=60 # in seconds
 VUE_APP_WATERMARK_DURATION=10 # in seconds
-
+VUE_APP_WATERMARK_CONTENT="Transcription by LinTO.ai $linto Open Source AI by $linagora"
 VUE_APP_ENABLE_SESSION=false
 VUE_APP_EXPERIMENTAL_HIGHLIGHT=false
 VUE_APP_EXPERIMENTAL_DARK_THEME=true
diff --git a/studio-frontend/public/img/pin-angle-fill.svg b/studio-frontend/public/img/pin-angle-fill.svg
new file mode 100644
index 00000000..bc3078c4
--- /dev/null
+++ b/studio-frontend/public/img/pin-angle-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle-fill" viewBox="0 0 16 16">
+  <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146"/>
+</svg>
\ No newline at end of file
diff --git a/studio-frontend/public/img/pin.svg b/studio-frontend/public/img/pin.svg
new file mode 100644
index 00000000..4655620b
--- /dev/null
+++ b/studio-frontend/public/img/pin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin" viewBox="0 0 16 16">
+  <path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354m1.58 1.408-.002-.001zm-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a5 5 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a5 5 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.8 1.8 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14q.091.15.214.271a1.8 1.8 0 0 0 .37.282"/>
+</svg>
\ No newline at end of file
diff --git a/studio-frontend/src/components/FormCheckbox.vue b/studio-frontend/src/components/FormCheckbox.vue
index f951a3f8..05937fdd 100644
--- a/studio-frontend/src/components/FormCheckbox.vue
+++ b/studio-frontend/src/components/FormCheckbox.vue
@@ -22,7 +22,7 @@
     </div>
 
     <div
-      class="flex row"
+      class="flex row align-center"
       v-if="field.label"
       :title="p_disabled ? p_disabledReason : ''">
       <label class="form-label" :for="id">
diff --git a/studio-frontend/src/components/ModalWatermarkSettings.vue b/studio-frontend/src/components/ModalWatermarkSettings.vue
new file mode 100644
index 00000000..0a5fdc9a
--- /dev/null
+++ b/studio-frontend/src/components/ModalWatermarkSettings.vue
@@ -0,0 +1,82 @@
+<template>
+  <ModalNew
+    @on-cancel="($event) => this.$emit('on-cancel')"
+    @on-confirm="applyWatermarkSettings"
+    :title="$t('session.live_page.watermark_settings.title')"
+    :actionBtnLabel="$t('session.live_page.watermark_settings.apply_button')"
+    small>
+    <div class="modal-watermark-settings">
+      <FormInput
+        inputFullWidth
+        :field="watermarkTextField"
+        v-model="watermarkTextField.value" />
+      <FormInput
+        inputFullWidth
+        :field="watermarkFrequencyField"
+        v-model="watermarkFrequencyField.value" />
+      <FormInput
+        inputFullWidth
+        :field="watermarkDurationField"
+        v-model="watermarkDurationField.value" />
+    </div>
+  </ModalNew>
+</template>
+<script>
+import { bus } from "@/main.js"
+import ModalNew from "./ModalNew.vue"
+import EMPTY_FIELD from "@/const/emptyField"
+import FormInput from "@/components/FormInput.vue"
+
+export default {
+  props: {
+    watermarkFrequency: {
+      type: Number,
+      required: true,
+    },
+    watermarkDuration: {
+      type: Number,
+      required: true,
+    },
+    watermarkContent: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      watermarkTextField: {
+        ...EMPTY_FIELD,
+        value: this.watermarkContent,
+        label: this.$t("session.live_page.watermark_settings.text"),
+        type: "text",
+      },
+      watermarkFrequencyField: {
+        ...EMPTY_FIELD,
+        value: this.watermarkFrequency,
+        label: this.$t("session.live_page.watermark_settings.frequency"),
+        type: "number",
+      },
+      watermarkDurationField: {
+        ...EMPTY_FIELD,
+        value: this.watermarkDuration,
+        label: this.$t("session.live_page.watermark_settings.duration"),
+        type: "number",
+      },
+    }
+  },
+  mounted() {},
+  methods: {
+    applyWatermarkSettings() {
+      this.$emit("on-confirm", {
+        text: this.watermarkTextField.value,
+        frequency: Number(this.watermarkFrequencyField.value),
+        duration: Number(this.watermarkDurationField.value),
+      })
+    },
+  },
+  components: {
+    ModalNew,
+    FormInput,
+  },
+}
+</script>
diff --git a/studio-frontend/src/components/SessionChannel.vue b/studio-frontend/src/components/SessionChannel.vue
index c62d2f45..501d7dd0 100644
--- a/studio-frontend/src/components/SessionChannel.vue
+++ b/studio-frontend/src/components/SessionChannel.vue
@@ -133,7 +133,11 @@
       :finalText="finalText"
       :fontSize="fontSize"
       :key="fontSize"
-      :selectedTranslations="selectedTranslations" />
+      :selectedTranslations="selectedTranslations"
+      :watermarkFrequency="watermarkFrequency"
+      :watermarkDuration="watermarkDuration"
+      :watermarkContent="watermarkContent"
+      :watermarkPinned="watermarkPinned" />
     <SubtitleFullscreen
       v-if="showSubtitlesFullscreen"
       :partialText="partialText"
@@ -244,6 +248,22 @@ export default {
       required: false,
       default: false,
     },
+    watermarkFrequency: {
+      type: Number,
+      required: true,
+    },
+    watermarkDuration: {
+      type: Number,
+      required: true,
+    },
+    watermarkContent: {
+      type: String,
+      required: true,
+    },
+    watermarkPinned: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/studio-frontend/src/components/SessionLiveContent.vue b/studio-frontend/src/components/SessionLiveContent.vue
index 0b725c7a..ead9e0c1 100644
--- a/studio-frontend/src/components/SessionLiveContent.vue
+++ b/studio-frontend/src/components/SessionLiveContent.vue
@@ -20,6 +20,10 @@
       fromMicrophone
       @toggleMicrophone="$emit('toggleMicrophone')"
       @onSave="$emit('onSave')"
+      :watermarkFrequency="watermarkFrequency"
+      :watermarkDuration="watermarkDuration"
+      :watermarkContent="watermarkContent"
+      :watermarkPinned="watermarkPinned"
       :isRecording="isRecording"></SessionChannel>
     <Loading v-else></Loading>
   </div>
@@ -92,6 +96,22 @@ export default {
       required: false,
       default: false,
     },
+    watermarkFrequency: {
+      type: Number,
+      required: true,
+    },
+    watermarkDuration: {
+      type: Number,
+      required: true,
+    },
+    watermarkContent: {
+      type: String,
+      required: true,
+    },
+    watermarkPinned: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/studio-frontend/src/components/SessionLiveToolbar.vue b/studio-frontend/src/components/SessionLiveToolbar.vue
index 2b47a6bc..38802619 100644
--- a/studio-frontend/src/components/SessionLiveToolbar.vue
+++ b/studio-frontend/src/components/SessionLiveToolbar.vue
@@ -25,6 +25,48 @@
       :field="fontSizeField"
       v-model="fontSizeField.value"
       v-if="displaySubtitlesField.value" />
+
+    <FormCheckbox
+      v-if="displaySubtitlesField.value"
+      :field="displayWatermarkField"
+      switchDisplay
+      v-model="displayWatermarkField.value">
+      <template v-slot:content-after-label>
+        <button
+          class="only-icon transparent"
+          :aria-label="
+            $t('session.live_page.watermark_settings.settings_button')
+          "
+          :title="$t('session.live_page.watermark_settings.settings_button')"
+          @click="showWatermarkSettings = true">
+          <span class="icon settings" />
+        </button>
+        <button
+          class="only-icon transparent"
+          :aria-label="$t('session.live_page.watermark_settings.unpin_button')"
+          :title="$t('session.live_page.watermark_settings.unpin_button')"
+          @click="togglePin"
+          v-if="watermarkPinned">
+          <span class="icon pin-on" />
+        </button>
+        <button
+          class="only-icon transparent"
+          :aria-label="$t('session.live_page.watermark_settings.pin_button')"
+          :title="$t('session.live_page.watermark_settings.pin_button')"
+          @click="togglePin"
+          v-else>
+          <span class="icon pin" />
+        </button>
+      </template>
+    </FormCheckbox>
+
+    <ModalWatermarkSettings
+      v-if="showWatermarkSettings"
+      @on-cancel="closeWatermarkSettings"
+      @on-confirm="updateWatermarkSettings"
+      :watermarkFrequency="watermarkFrequency"
+      :watermarkDuration="watermarkDuration"
+      :watermarkContent="watermarkContent" />
   </div>
 </template>
 <script>
@@ -35,6 +77,7 @@ import FormInput from "@/components/FormInput.vue"
 import FormCheckbox from "@/components/FormCheckbox.vue"
 import SessionTranslationSelection from "@/components/SessionTranslationSelection.vue"
 import SessionChannelsSelector from "@/components/SessionChannelsSelector.vue"
+import ModalWatermarkSettings from "./ModalWatermarkSettings.vue"
 
 export default {
   props: {
@@ -54,6 +97,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    displayWatermark: {
+      type: Boolean,
+      default: true,
+    },
     fontSize: {
       type: String,
       default: "40",
@@ -66,6 +113,26 @@ export default {
       type: Boolean,
       default: false,
     },
+    watermarkFrequency: {
+      type: Number,
+      required: true,
+    },
+    watermarkDuration: {
+      type: Number,
+      required: true,
+    },
+    watermarkContent: {
+      type: String,
+      required: true,
+    },
+    displayWatermark: {
+      type: Boolean,
+      required: true,
+    },
+    watermarkPinned: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -89,12 +156,31 @@ export default {
         value: this.displayLiveTranscription,
         label: this.$t("session.detail_page.display_live_transcription_label"),
       },
+      displayWatermarkField: {
+        ...EMPTY_FIELD,
+        value: this.displayWatermark,
+        label: this.$t("session.detail_page.display_watermark_label"),
+      },
       p_selectedTranslation: this.selectedTranslation,
       p_selectedChannel: this.selectedChannel,
+      showWatermarkSettings: false,
     }
   },
   mounted() {},
-  methods: {},
+  methods: {
+    updateWatermarkSettings({ frequency, duration, text }) {
+      this.$emit("update:watermarkFrequency", frequency)
+      this.$emit("update:watermarkDuration", duration)
+      this.$emit("update:watermarkContent", text)
+      this.closeWatermarkSettings()
+    },
+    closeWatermarkSettings() {
+      this.showWatermarkSettings = false
+    },
+    togglePin() {
+      this.$emit("update:watermarkPinned", !this.watermarkPinned)
+    },
+  },
   computed: {
     hasTranslations() {
       return this.selectedChannel?.translations?.length > 0
@@ -113,6 +199,9 @@ export default {
     displaySubtitles(value) {
       this.displaySubtitlesField.value = value
     },
+    displayWatermark(value) {
+      this.displayWatermarkField.value = value
+    },
     fontSize(value) {
       this.fontSizeField.value = value
     },
@@ -131,12 +220,16 @@ export default {
     "fontSizeField.value"(value) {
       this.$emit("update:fontSize", value)
     },
+    "displayWatermarkField.value"(value) {
+      this.$emit("update:displayWatermark", value)
+    },
   },
   components: {
     FormInput,
     FormCheckbox,
     SessionTranslationSelection,
     SessionChannelsSelector,
+    ModalWatermarkSettings,
   },
 }
 </script>
diff --git a/studio-frontend/src/components/SessionSubtitle.vue b/studio-frontend/src/components/SessionSubtitle.vue
index 985098ee..944c09f8 100644
--- a/studio-frontend/src/components/SessionSubtitle.vue
+++ b/studio-frontend/src/components/SessionSubtitle.vue
@@ -3,12 +3,10 @@
     <div :style="style" id="scroller-container">
       <canvas id="scroller" width="100%" :height="canvaHeight"></canvas>
     </div>
-    <div id="session-content__subtitle__watermark" class="hidden-watermark">
-      {{ $t("session.detail_page.subtitle.watermark_1") }}
-      <img id="logo-linto-inline" src="/img/linto.svg" />,
-      {{ $t("session.detail_page.subtitle.watermark_2") }}
-      <img src="/img/linagora.png" id="logo-linagora-inline" />
-    </div>
+    <div
+      id="session-content__subtitle__watermark"
+      class="hidden-watermark"
+      v-html="watermarkWithImages"></div>
   </div>
 </template>
 <script>
@@ -35,6 +33,22 @@ export default {
       type: Array,
       default: () => [],
     },
+    watermarkFrequency: {
+      type: Number,
+      required: true,
+    },
+    watermarkDuration: {
+      type: Number,
+      required: true,
+    },
+    watermarkContent: {
+      type: String,
+      required: true,
+    },
+    watermarkPinned: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -44,6 +58,8 @@ export default {
       canvaHeight: 2.4 * this.fontSize,
       watermarkInterval: null,
       isUnmounted: false,
+      watermarkShowTimeout: null,
+      watermarkHideTimeout: null,
     }
   },
   async mounted() {
@@ -52,9 +68,9 @@ export default {
       fontSize: Number(this.fontSize),
       lineHeight: this.lineHeight,
     })
-    setTimeout(
+    this.watermarkShowTimeout = setTimeout(
       this.drawWatermark.bind(this),
-      getEnv("VUE_APP_WATERMARK_FREQUENCY") * 1000,
+      this.watermarkFrequency * 1000,
     )
   },
   watch: {
@@ -64,6 +80,29 @@ export default {
     finalText: function (newVal, oldVal) {
       this.subtitleDrawer.newFinal(newVal)
     },
+    watermarkFrequency: function (newVal, oldVal) {
+      clearTimeout(this.watermarkShowTimeout)
+      clearTimeout(this.watermarkHideTimeout)
+      if (!this.watermarkPinned) {
+        this.hideWatermark()
+      }
+    },
+    watermarkDuration: function (newVal, oldVal) {
+      clearTimeout(this.watermarkShowTimeout)
+      clearTimeout(this.watermarkHideTimeout)
+      if (!this.watermarkPinned) {
+        this.hideWatermark()
+      }
+    },
+    watermarkPinned: function (newVal, oldVal) {
+      clearTimeout(this.watermarkShowTimeout)
+      clearTimeout(this.watermarkHideTimeout)
+      if (newVal) {
+        this.drawWatermark(true)
+      } else {
+        this.hideWatermark()
+      }
+    },
   },
   computed: {
     style() {
@@ -72,10 +111,29 @@ export default {
         //lineHeight: this.lineHeight,
       }
     },
+    watermarkWithImages() {
+      // <img id="logo-linto-inline" src="/img/linto.svg" />
+      // <img src="/img/linagora.png" id="logo-linagora-inline" />
+      // replace $linto and $linagora with the images and sanitize the string
+      return this.watermarkContent
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;")
+        .replace(
+          "$linto",
+          '<img id="logo-linto-inline" src="/img/linto.svg" />',
+        )
+        .replace(
+          "$linagora",
+          '<img src="/img/linagora.png" id="logo-linagora-inline" />',
+        )
+    },
   },
 
   methods: {
-    drawWatermark() {
+    drawWatermark(pinned = false) {
       if (this.isUnmounted) return
 
       const watermark = document.getElementById(
@@ -89,10 +147,13 @@ export default {
       watermark.classList.remove("hidden-watermark")
       scrollerContainer.classList.add("scroller-smaller")
       scrollerContainer.classList.remove("scroller-bigger")
-      setTimeout(
-        this.hideWatermark.bind(this),
-        getEnv("VUE_APP_WATERMARK_DURATION") * 1000,
-      )
+
+      if (!pinned) {
+        this.watermarkHideTimeout = setTimeout(
+          this.hideWatermark.bind(this),
+          this.watermarkDuration * 1000,
+        )
+      }
     },
     hideWatermark() {
       if (this.isUnmounted) return
@@ -108,9 +169,9 @@ export default {
       watermark.classList.remove("displayed-watermark")
       scrollerContainer.classList.add("scroller-bigger")
       scrollerContainer.classList.remove("scroller-smaller")
-      setTimeout(
+      this.watermarkShowTimeout = setTimeout(
         this.drawWatermark.bind(this),
-        getEnv("VUE_APP_WATERMARK_FREQUENCY") * 1000,
+        this.watermarkFrequency * 1000,
       )
     },
   },
diff --git a/studio-frontend/src/const/defaultEnv.js b/studio-frontend/src/const/defaultEnv.js
index ec322ff7..9a3550d7 100644
--- a/studio-frontend/src/const/defaultEnv.js
+++ b/studio-frontend/src/const/defaultEnv.js
@@ -11,4 +11,6 @@ export default {
   VUE_APP_WATERMARK_FREQUENCY: "60",
   VUE_APP_WATERMARK_DURATION: "10",
   VUE_APP_SHOW_BETA_LIVE_TRANSCRIPTION: "false",
+  VUE_APP_WATERMARK_CONTENT:
+    "Transcription by LinTO.ai $linto Open Source AI by $linagora",
 }
diff --git a/studio-frontend/src/locales/en-US.json b/studio-frontend/src/locales/en-US.json
index 5082aafd..b5858782 100644
--- a/studio-frontend/src/locales/en-US.json
+++ b/studio-frontend/src/locales/en-US.json
@@ -557,7 +557,7 @@
       "description": "Open source innovations powered by LINAGORA on EXAION infrastructures"
     },
     "sso": {
-      "linagora": "Sign in with Linagora",
+      "linagora": "Sign in with LINAGORA",
       "default": "Single Sign-On (SSO)"
     },
     "teaser": {
@@ -894,6 +894,7 @@
       "delete_button": "Delete session",
       "delete_session_error_message": "The session could not be deleted",
       "display_live_transcription_label": "Display live transcription",
+      "display_watermark_label": "Display watermark",
       "display_subtitles_label": "Display subtitles",
       "end_time_not_defined": "Not defined",
       "font_size_label": "Font size",
@@ -916,10 +917,6 @@
       "stop_force_button": "Force stop and save session to library",
       "stop_session_error_message": "The session could not be stopped",
       "stop_session_success": "The session has been stopped and saved",
-      "subtitle": {
-        "watermark_1": "Transcription by LinTO.ai",
-        "watermark_2": "Open Source AI by"
-      },
       "title_interface_settings": "Interface settings",
       "undefined_lang": "Unknown language",
       "undefined_speaker": "Unknown speaker",
@@ -953,6 +950,16 @@
         "label": "Choose a translation",
         "original_language": "Original language",
         "cross_translation": "Cross translation"
+      },
+      "watermark_settings": {
+        "title": "Watermark settings",
+        "text": "Text",
+        "frequency": "Frequency (seconds)",
+        "duration": "Duration (seconds)",
+        "apply_button": "Apply",
+        "pin_button": "Pin watermark",
+        "unpin_button": "Unpin watermark",
+        "settings_button": "Open watermark settings"
       }
     },
     "profile_selector": {
diff --git a/studio-frontend/src/locales/fr-FR.json b/studio-frontend/src/locales/fr-FR.json
index a3beddb5..5e85fb4f 100644
--- a/studio-frontend/src/locales/fr-FR.json
+++ b/studio-frontend/src/locales/fr-FR.json
@@ -557,7 +557,7 @@
       "description": "Innovations Open source propulsées par LINAGORA sur les infrastructures EXAION"
     },
     "sso": {
-      "linagora": "Se connecter avec Linagora",
+      "linagora": "Se connecter avec LINAGORA",
       "default": "Authentification externe (SSO)"
     },
     "teaser": {
@@ -897,6 +897,7 @@
       "delete_session_error_message": "La session n'a pas pu être supprimée",
       "display_live_transcription_label": "Afficher la transcription",
       "display_subtitles_label": "Afficher le sous-titre",
+      "display_watermark_label": "Afficher le filigrane",
       "end_time_not_defined": "Non défini",
       "font_size_label": "Taille de la police",
       "live_transcript_disabled": {
@@ -920,10 +921,6 @@
       "stop_force_button": "Forcer l'arrêt de la session",
       "stop_session_error_message": "La session n'a pas pu être arrêtée",
       "stop_session_success": "La session a été arrétée et sauvegardée",
-      "subtitle": {
-        "watermark_1": "Transcription par LinTO.ai",
-        "watermark_2": "IA Open Source par"
-      },
       "title_interface_settings": "Paramètre d'interface",
       "undefined_lang": "Langage inconnu",
       "undefined_speaker": "Locuteur inconnu",
@@ -957,6 +954,16 @@
         "label": "Choisir la langue de traduction",
         "original_language": "Langue originale",
         "cross_translation": "Traduction croisée"
+      },
+      "watermark_settings": {
+        "title": "Paramètres du filigrane",
+        "text": "Texte",
+        "frequency": "Fréquence (secondes)",
+        "duration": "Durée (secondes)",
+        "apply_button": "Appliquer",
+        "pin_button": "Épingler le filigrane",
+        "unpin_button": "Désépingler le filigrane",
+        "settings_button": "Ouvrir les paramètres du filigrane"
       }
     },
     "profile_selector": {
diff --git a/studio-frontend/src/style/components/icons.scss b/studio-frontend/src/style/components/icons.scss
index 66a6a116..5ff19199 100644
--- a/studio-frontend/src/style/components/icons.scss
+++ b/studio-frontend/src/style/components/icons.scss
@@ -277,6 +277,12 @@
   &.category {
     @include maskImage("../public/img/category.svg");
   }
+  &.pin {
+    @include maskImage("../public/img/pin.svg");
+  }
+  &.pin-on {
+    @include maskImage("../public/img/pin-angle-fill.svg");
+  }
 }
 
 .icon.small {
diff --git a/studio-frontend/src/views/SessionLive.vue b/studio-frontend/src/views/SessionLive.vue
index ac24c932..06bcdce8 100644
--- a/studio-frontend/src/views/SessionLive.vue
+++ b/studio-frontend/src/views/SessionLive.vue
@@ -63,7 +63,12 @@
         v-bind:displayLiveTranscription.sync="displayLiveTranscription"
         v-bind:displaySubtitles.sync="displaySubtitles"
         v-bind:fontSize.sync="fontSize"
-        v-bind:selectedChannel.sync="selectedChannel" />
+        v-bind:selectedChannel.sync="selectedChannel"
+        v-bind:watermarkContent.sync="watermarkContent"
+        v-bind:watermarkDuration.sync="watermarkDuration"
+        v-bind:watermarkFrequency.sync="watermarkFrequency"
+        v-bind:displayWatermark.sync="displayWatermark"
+        v-bind:watermarkPinned.sync="watermarkPinned" />
     </template>
 
     <div class="relative flex flex1 col">
@@ -86,7 +91,11 @@
         :displaySubtitles="displaySubtitles"
         :displayLiveTranscription="displayLiveTranscription"
         :session="session"
-        :selectedChannel="selectedChannel" />
+        :selectedChannel="selectedChannel"
+        :watermarkFrequency="watermarkFrequency"
+        :watermarkDuration="watermarkDuration"
+        :watermarkContent="watermarkContent"
+        :watermarkPinned="watermarkPinned" />
 
       <SessionDropdownChannelSelector
         class="mobile"
@@ -115,6 +124,8 @@ import { orgaRoleMixin } from "@/mixins/orgaRole"
 import { microphoneMixin } from "@/mixins/microphone.js"
 import { sessionMicrophoneMixin } from "@/mixins/sessionMicrophone.js"
 
+import { getEnv } from "@/tools/getEnv"
+
 import MainContent from "@/components/MainContent.vue"
 import SessionNotStarted from "@/components/SessionNotStarted.vue"
 import SessionChannelsSelector from "@/components/SessionChannelsSelector.vue"
@@ -158,6 +169,11 @@ export default {
       showMicrophoneSetup: false,
       showSubtitlesFullscreen: false,
       currentChannelMicrophone: null,
+      watermarkFrequency: Number(getEnv("VUE_APP_WATERMARK_FREQUENCY")),
+      watermarkDuration: Number(getEnv("VUE_APP_WATERMARK_DURATION")),
+      watermarkContent: getEnv("VUE_APP_WATERMARK_CONTENT"),
+      displayWatermark: true,
+      watermarkPinned: false,
     }
   },
   created() {

From 79e149d48dfd911b9e4b0b23d5f4485e8f96dc9e Mon Sep 17 00:00:00 2001
From: tjiho <tom.darboux@laposte.net>
Date: Wed, 14 May 2025 15:11:34 +0200
Subject: [PATCH 2/6] Add clear subtitle button

---
 .../src/components/SessionHeader.vue          |   3 +-
 .../src/components/SessionLiveToolbar.vue     | 107 ++++++++++--------
 .../src/components/SessionSubtitle.vue        |  11 +-
 studio-frontend/src/locales/en-US.json        |   5 +-
 studio-frontend/src/locales/fr-FR.json        |   5 +-
 .../src/style/components/forms.scss           |   2 +-
 6 files changed, 80 insertions(+), 53 deletions(-)

diff --git a/studio-frontend/src/components/SessionHeader.vue b/studio-frontend/src/components/SessionHeader.vue
index 75fc5f68..aba289ea 100644
--- a/studio-frontend/src/components/SessionHeader.vue
+++ b/studio-frontend/src/components/SessionHeader.vue
@@ -17,6 +17,7 @@
         :session="session"
         withText
         class="flex1" />
+      <div class="flex1" v-else></div>
 
       <slot name="right-button-desktop"></slot>
     </div>
@@ -58,7 +59,7 @@ export default {
     },
     session: {
       type: Object,
-      required: true,
+      required: false,
     },
     name: {
       type: String,
diff --git a/studio-frontend/src/components/SessionLiveToolbar.vue b/studio-frontend/src/components/SessionLiveToolbar.vue
index 38802619..35f01354 100644
--- a/studio-frontend/src/components/SessionLiveToolbar.vue
+++ b/studio-frontend/src/components/SessionLiveToolbar.vue
@@ -19,65 +19,77 @@
     <FormCheckbox
       :field="displaySubtitlesField"
       switchDisplay
-      v-model="displaySubtitlesField.value" />
-
-    <FormInput
-      :field="fontSizeField"
-      v-model="fontSizeField.value"
-      v-if="displaySubtitlesField.value" />
-
-    <FormCheckbox
-      v-if="displaySubtitlesField.value"
-      :field="displayWatermarkField"
-      switchDisplay
-      v-model="displayWatermarkField.value">
+      v-model="displaySubtitlesField.value">
       <template v-slot:content-after-label>
-        <button
-          class="only-icon transparent"
-          :aria-label="
-            $t('session.live_page.watermark_settings.settings_button')
-          "
-          :title="$t('session.live_page.watermark_settings.settings_button')"
-          @click="showWatermarkSettings = true">
-          <span class="icon settings" />
-        </button>
-        <button
-          class="only-icon transparent"
-          :aria-label="$t('session.live_page.watermark_settings.unpin_button')"
-          :title="$t('session.live_page.watermark_settings.unpin_button')"
-          @click="togglePin"
-          v-if="watermarkPinned">
-          <span class="icon pin-on" />
-        </button>
-        <button
-          class="only-icon transparent"
-          :aria-label="$t('session.live_page.watermark_settings.pin_button')"
-          :title="$t('session.live_page.watermark_settings.pin_button')"
-          @click="togglePin"
-          v-else>
-          <span class="icon pin" />
-        </button>
+        <!-- <button class="only-icon transparent">
+          <span class="icon clear-history" />
+        </button> -->
       </template>
     </FormCheckbox>
+    <div
+      class="subSection flex col gap-small"
+      v-if="displaySubtitlesField.value">
+      <FormInput :field="fontSizeField" v-model="fontSizeField.value" />
 
-    <ModalWatermarkSettings
-      v-if="showWatermarkSettings"
-      @on-cancel="closeWatermarkSettings"
-      @on-confirm="updateWatermarkSettings"
-      :watermarkFrequency="watermarkFrequency"
-      :watermarkDuration="watermarkDuration"
-      :watermarkContent="watermarkContent" />
+      <FormCheckbox
+        :field="displayWatermarkField"
+        switchDisplay
+        v-model="displayWatermarkField.value">
+        <template v-slot:content-after-label>
+          <button
+            class="only-icon transparent"
+            :aria-label="
+              $t('session.live_page.watermark_settings.settings_button')
+            "
+            :title="$t('session.live_page.watermark_settings.settings_button')"
+            @click="showWatermarkSettings = true">
+            <span class="icon settings" />
+          </button>
+          <button
+            class="only-icon transparent"
+            :aria-label="
+              $t('session.live_page.watermark_settings.unpin_button')
+            "
+            :title="$t('session.live_page.watermark_settings.unpin_button')"
+            @click="togglePin"
+            v-if="watermarkPinned">
+            <span class="icon pin-on" />
+          </button>
+          <button
+            class="only-icon transparent"
+            :aria-label="$t('session.live_page.watermark_settings.pin_button')"
+            :title="$t('session.live_page.watermark_settings.pin_button')"
+            @click="togglePin"
+            v-else>
+            <span class="icon pin" />
+          </button>
+        </template>
+      </FormCheckbox>
+
+      <button @click="clearSubtitles">
+        <span class="icon clear-history" />
+        <span class="label">{{ $t("session.live_page.clear_subtitle") }}</span>
+      </button>
+      <ModalWatermarkSettings
+        v-if="showWatermarkSettings"
+        @on-cancel="closeWatermarkSettings"
+        @on-confirm="updateWatermarkSettings"
+        :watermarkFrequency="watermarkFrequency"
+        :watermarkDuration="watermarkDuration"
+        :watermarkContent="watermarkContent" />
+    </div>
   </div>
 </template>
 <script>
-import { bus } from "../main.js"
+import { bus } from "@/main.js"
 
 import EMPTY_FIELD from "@/const/emptyField"
+
 import FormInput from "@/components/FormInput.vue"
 import FormCheckbox from "@/components/FormCheckbox.vue"
 import SessionTranslationSelection from "@/components/SessionTranslationSelection.vue"
 import SessionChannelsSelector from "@/components/SessionChannelsSelector.vue"
-import ModalWatermarkSettings from "./ModalWatermarkSettings.vue"
+import ModalWatermarkSettings from "@/components/ModalWatermarkSettings.vue"
 
 export default {
   props: {
@@ -180,6 +192,9 @@ export default {
     togglePin() {
       this.$emit("update:watermarkPinned", !this.watermarkPinned)
     },
+    clearSubtitles() {
+      bus.$emit("clear-session-subtitles")
+    },
   },
   computed: {
     hasTranslations() {
diff --git a/studio-frontend/src/components/SessionSubtitle.vue b/studio-frontend/src/components/SessionSubtitle.vue
index 944c09f8..7db3b359 100644
--- a/studio-frontend/src/components/SessionSubtitle.vue
+++ b/studio-frontend/src/components/SessionSubtitle.vue
@@ -11,7 +11,7 @@
 </template>
 <script>
 import { Fragment } from "vue-fragment"
-import { bus } from "../main.js"
+import { bus } from "@/main.js"
 import { SubtitleScroller } from "@/models/SubtitleDrawer.js"
 import { getEnv } from "@/tools/getEnv"
 
@@ -72,6 +72,11 @@ export default {
       this.drawWatermark.bind(this),
       this.watermarkFrequency * 1000,
     )
+
+    bus.$on("clear-session-subtitles", this.reset)
+  },
+  beforeDestroy() {
+    bus.$off("clear-session-subtitles", this.reset)
   },
   watch: {
     partialText: function (newVal, oldVal) {
@@ -133,6 +138,10 @@ export default {
   },
 
   methods: {
+    reset() {
+      this.subtitleDrawer.resetDrawing()
+      this.subtitleDrawer.resetAll()
+    },
     drawWatermark(pinned = false) {
       if (this.isUnmounted) return
 
diff --git a/studio-frontend/src/locales/en-US.json b/studio-frontend/src/locales/en-US.json
index b5858782..22e76bc8 100644
--- a/studio-frontend/src/locales/en-US.json
+++ b/studio-frontend/src/locales/en-US.json
@@ -894,7 +894,7 @@
       "delete_button": "Delete session",
       "delete_session_error_message": "The session could not be deleted",
       "display_live_transcription_label": "Display live transcription",
-      "display_watermark_label": "Display watermark",
+      "display_watermark_label": "Watermark",
       "display_subtitles_label": "Display subtitles",
       "end_time_not_defined": "Not defined",
       "font_size_label": "Font size",
@@ -959,7 +959,8 @@
         "apply_button": "Apply",
         "pin_button": "Pin watermark",
         "unpin_button": "Unpin watermark",
-        "settings_button": "Open watermark settings"
+        "settings_button": "Open watermark settings",
+        "clear_subtitle": "Clear subtitles"
       }
     },
     "profile_selector": {
diff --git a/studio-frontend/src/locales/fr-FR.json b/studio-frontend/src/locales/fr-FR.json
index 5e85fb4f..db811cdc 100644
--- a/studio-frontend/src/locales/fr-FR.json
+++ b/studio-frontend/src/locales/fr-FR.json
@@ -897,7 +897,7 @@
       "delete_session_error_message": "La session n'a pas pu être supprimée",
       "display_live_transcription_label": "Afficher la transcription",
       "display_subtitles_label": "Afficher le sous-titre",
-      "display_watermark_label": "Afficher le filigrane",
+      "display_watermark_label": "Filigrane",
       "end_time_not_defined": "Non défini",
       "font_size_label": "Taille de la police",
       "live_transcript_disabled": {
@@ -964,7 +964,8 @@
         "pin_button": "Épingler le filigrane",
         "unpin_button": "Désépingler le filigrane",
         "settings_button": "Ouvrir les paramètres du filigrane"
-      }
+      },
+      "clear_subtitle": "Effacer les sous-titres"
     },
     "profile_selector": {
       "labels": {
diff --git a/studio-frontend/src/style/components/forms.scss b/studio-frontend/src/style/components/forms.scss
index 85668931..b8a385c5 100644
--- a/studio-frontend/src/style/components/forms.scss
+++ b/studio-frontend/src/style/components/forms.scss
@@ -135,7 +135,7 @@ label,
   & > div {
     position: relative;
   }
-  word-break: break-word;
+  //word-break: break-word;
 }
 .form-field:first-child {
   margin-top: 0;

From 93fe098f413d6d8b1f43c308c491473439b65ce0 Mon Sep 17 00:00:00 2001
From: tjiho <tom.darboux@laposte.net>
Date: Wed, 14 May 2025 15:19:19 +0200
Subject: [PATCH 3/6] Add env var to enable watermark

---
 studio-frontend/.envTemplate                          | 1 +
 studio-frontend/src/components/SessionLiveToolbar.vue | 5 +++++
 studio-frontend/src/const/defaultEnv.js               | 1 +
 studio-frontend/src/locales/en-US.json                | 6 +++---
 studio-frontend/src/views/SessionLive.vue             | 2 +-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/studio-frontend/.envTemplate b/studio-frontend/.envTemplate
index b7e428e1..25310768 100644
--- a/studio-frontend/.envTemplate
+++ b/studio-frontend/.envTemplate
@@ -18,6 +18,7 @@ VUE_APP_THEME=linTO-green
 VUE_APP_LOGO=linto-studio-logo-no-text.svg
 VUE_APP_NAME=linTO Studio
 VUE_APP_DEFAULT_METADATA=room,team
+VUE_APP_ENABLE_WATERMARK=false
 VUE_APP_WATERMARK_FREQUENCY=60 # in seconds
 VUE_APP_WATERMARK_DURATION=10 # in seconds
 VUE_APP_WATERMARK_CONTENT="Transcription by LinTO.ai $linto Open Source AI by $linagora"
diff --git a/studio-frontend/src/components/SessionLiveToolbar.vue b/studio-frontend/src/components/SessionLiveToolbar.vue
index 35f01354..26411e84 100644
--- a/studio-frontend/src/components/SessionLiveToolbar.vue
+++ b/studio-frontend/src/components/SessionLiveToolbar.vue
@@ -32,6 +32,7 @@
       <FormInput :field="fontSizeField" v-model="fontSizeField.value" />
 
       <FormCheckbox
+        v-if="enableWatermark"
         :field="displayWatermarkField"
         switchDisplay
         v-model="displayWatermarkField.value">
@@ -84,6 +85,7 @@
 import { bus } from "@/main.js"
 
 import EMPTY_FIELD from "@/const/emptyField"
+import { getEnv } from "@/tools/getEnv"
 
 import FormInput from "@/components/FormInput.vue"
 import FormCheckbox from "@/components/FormCheckbox.vue"
@@ -200,6 +202,9 @@ export default {
     hasTranslations() {
       return this.selectedChannel?.translations?.length > 0
     },
+    enableWatermark() {
+      return getEnv("VUE_APP_ENABLE_WATERMARK") === "true"
+    },
   },
   watch: {
     selectedTranslation(value) {
diff --git a/studio-frontend/src/const/defaultEnv.js b/studio-frontend/src/const/defaultEnv.js
index 9a3550d7..e4d89ee9 100644
--- a/studio-frontend/src/const/defaultEnv.js
+++ b/studio-frontend/src/const/defaultEnv.js
@@ -8,6 +8,7 @@ export default {
   VUE_APP_SHOW_LOGIN_FOOTER: "false",
   VUE_APP_WEBSOCKET_TRANSPORTS: "websocket",
   VUE_APP_DEFAULT_METADATA: "",
+  VUE_APP_ENABLE_WATERMARK: "false",
   VUE_APP_WATERMARK_FREQUENCY: "60",
   VUE_APP_WATERMARK_DURATION: "10",
   VUE_APP_SHOW_BETA_LIVE_TRANSCRIPTION: "false",
diff --git a/studio-frontend/src/locales/en-US.json b/studio-frontend/src/locales/en-US.json
index 22e76bc8..9f9187af 100644
--- a/studio-frontend/src/locales/en-US.json
+++ b/studio-frontend/src/locales/en-US.json
@@ -959,9 +959,9 @@
         "apply_button": "Apply",
         "pin_button": "Pin watermark",
         "unpin_button": "Unpin watermark",
-        "settings_button": "Open watermark settings",
-        "clear_subtitle": "Clear subtitles"
-      }
+        "settings_button": "Open watermark settings"
+      },
+      "clear_subtitle": "Clear subtitles"
     },
     "profile_selector": {
       "labels": {
diff --git a/studio-frontend/src/views/SessionLive.vue b/studio-frontend/src/views/SessionLive.vue
index 06bcdce8..589d46e4 100644
--- a/studio-frontend/src/views/SessionLive.vue
+++ b/studio-frontend/src/views/SessionLive.vue
@@ -172,7 +172,7 @@ export default {
       watermarkFrequency: Number(getEnv("VUE_APP_WATERMARK_FREQUENCY")),
       watermarkDuration: Number(getEnv("VUE_APP_WATERMARK_DURATION")),
       watermarkContent: getEnv("VUE_APP_WATERMARK_CONTENT"),
-      displayWatermark: true,
+      displayWatermark: getEnv("VUE_APP_ENABLE_WATERMARK") === "true",
       watermarkPinned: false,
     }
   },

From dcff9b55a54af362e96bb8e900e1e1dd11488f48 Mon Sep 17 00:00:00 2001
From: tjiho <tom.darboux@laposte.net>
Date: Wed, 14 May 2025 15:33:59 +0200
Subject: [PATCH 4/6] Hide watermark function, plus fix default values

---
 .../src/components/SessionChannel.vue         |  7 +++++-
 .../src/components/SessionLiveContent.vue     | 13 ++++++++++-
 .../src/components/SessionSubtitle.vue        | 23 +++++++++++++++----
 studio-frontend/src/views/SessionLive.vue     |  1 +
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/studio-frontend/src/components/SessionChannel.vue b/studio-frontend/src/components/SessionChannel.vue
index 501d7dd0..69a339ee 100644
--- a/studio-frontend/src/components/SessionChannel.vue
+++ b/studio-frontend/src/components/SessionChannel.vue
@@ -137,7 +137,8 @@
       :watermarkFrequency="watermarkFrequency"
       :watermarkDuration="watermarkDuration"
       :watermarkContent="watermarkContent"
-      :watermarkPinned="watermarkPinned" />
+      :watermarkPinned="watermarkPinned"
+      :displayWatermark="displayWatermark" />
     <SubtitleFullscreen
       v-if="showSubtitlesFullscreen"
       :partialText="partialText"
@@ -264,6 +265,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    displayWatermark: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/studio-frontend/src/components/SessionLiveContent.vue b/studio-frontend/src/components/SessionLiveContent.vue
index ead9e0c1..6ca90a8e 100644
--- a/studio-frontend/src/components/SessionLiveContent.vue
+++ b/studio-frontend/src/components/SessionLiveContent.vue
@@ -24,6 +24,7 @@
       :watermarkDuration="watermarkDuration"
       :watermarkContent="watermarkContent"
       :watermarkPinned="watermarkPinned"
+      :displayWatermark="displayWatermark"
       :isRecording="isRecording"></SessionChannel>
     <Loading v-else></Loading>
   </div>
@@ -33,6 +34,7 @@ import { Fragment } from "vue-fragment"
 import { bus } from "../main.js"
 
 import SessionWS from "@/models/SessionWS.js"
+import { getEnv } from "@/tools/getEnv"
 
 import { sessionModelMixin } from "@/mixins/sessionModel.js"
 import { sessionChannelModelMixin } from "../mixins/sessionChannelModel.js"
@@ -98,19 +100,28 @@ export default {
     },
     watermarkFrequency: {
       type: Number,
-      required: true,
+      required: false,
+      default: Number(getEnv("VUE_APP_WATERMARK_FREQUENCY")),
     },
     watermarkDuration: {
       type: Number,
       required: true,
+      default: Number(getEnv("VUE_APP_WATERMARK_DURATION")),
     },
     watermarkContent: {
       type: String,
       required: true,
+      default: getEnv("VUE_APP_WATERMARK_CONTENT"),
     },
     watermarkPinned: {
       type: Boolean,
       required: true,
+      default: false,
+    },
+    displayWatermark: {
+      type: Boolean,
+      required: true,
+      default: false,
     },
   },
   data() {
diff --git a/studio-frontend/src/components/SessionSubtitle.vue b/studio-frontend/src/components/SessionSubtitle.vue
index 7db3b359..beb3cd11 100644
--- a/studio-frontend/src/components/SessionSubtitle.vue
+++ b/studio-frontend/src/components/SessionSubtitle.vue
@@ -49,6 +49,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    displayWatermark: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -68,10 +72,13 @@ export default {
       fontSize: Number(this.fontSize),
       lineHeight: this.lineHeight,
     })
-    this.watermarkShowTimeout = setTimeout(
-      this.drawWatermark.bind(this),
-      this.watermarkFrequency * 1000,
-    )
+
+    if (this.displayWatermark) {
+      this.watermarkShowTimeout = setTimeout(
+        this.drawWatermark.bind(this),
+        this.watermarkFrequency * 1000,
+      )
+    }
 
     bus.$on("clear-session-subtitles", this.reset)
   },
@@ -85,6 +92,11 @@ export default {
     finalText: function (newVal, oldVal) {
       this.subtitleDrawer.newFinal(newVal)
     },
+    displayWatermark: function (newVal, oldVal) {
+      clearTimeout(this.watermarkShowTimeout)
+      clearTimeout(this.watermarkHideTimeout)
+      this.hideWatermark()
+    },
     watermarkFrequency: function (newVal, oldVal) {
       clearTimeout(this.watermarkShowTimeout)
       clearTimeout(this.watermarkHideTimeout)
@@ -150,7 +162,7 @@ export default {
       )
       const scrollerContainer = document.getElementById("scroller-container")
 
-      if (!watermark || !scrollerContainer) return
+      if (!watermark || !scrollerContainer || !this.displayWatermark) return
 
       watermark.classList.add("displayed-watermark")
       watermark.classList.remove("hidden-watermark")
@@ -178,6 +190,7 @@ export default {
       watermark.classList.remove("displayed-watermark")
       scrollerContainer.classList.add("scroller-bigger")
       scrollerContainer.classList.remove("scroller-smaller")
+
       this.watermarkShowTimeout = setTimeout(
         this.drawWatermark.bind(this),
         this.watermarkFrequency * 1000,
diff --git a/studio-frontend/src/views/SessionLive.vue b/studio-frontend/src/views/SessionLive.vue
index 589d46e4..b2a9374e 100644
--- a/studio-frontend/src/views/SessionLive.vue
+++ b/studio-frontend/src/views/SessionLive.vue
@@ -92,6 +92,7 @@
         :displayLiveTranscription="displayLiveTranscription"
         :session="session"
         :selectedChannel="selectedChannel"
+        :displayWatermark="displayWatermark"
         :watermarkFrequency="watermarkFrequency"
         :watermarkDuration="watermarkDuration"
         :watermarkContent="watermarkContent"

From 18dd45352e3de0efaa4670255b12765046d1ccd1 Mon Sep 17 00:00:00 2001
From: tjiho <tom.darboux@laposte.net>
Date: Fri, 16 May 2025 16:41:49 +0200
Subject: [PATCH 5/6] Save watermark settings to session metadata

---
 studio-frontend/.envTemplate                  |  2 +-
 .../src/components/MetadataList.vue           |  7 ++-
 .../src/components/SessionLiveContent.vue     | 25 -----------
 .../src/components/SessionLiveMicrophone.vue  |  3 +-
 .../src/components/SessionLiveToolbar.vue     | 44 ++++++++++++++-----
 .../src/components/SessionLiveVisio.vue       |  3 +-
 studio-frontend/src/const/defaultEnv.js       |  2 +-
 studio-frontend/src/locales/en-US.json        |  1 +
 studio-frontend/src/locales/fr-FR.json        | 18 ++++----
 studio-frontend/src/mixins/session.js         | 42 ++++++++++++++++++
 studio-frontend/src/mixins/sessionModel.js    | 31 ++++++++++++-
 studio-frontend/src/views/SessionLive.vue     | 20 ++++-----
 12 files changed, 135 insertions(+), 63 deletions(-)

diff --git a/studio-frontend/.envTemplate b/studio-frontend/.envTemplate
index 25310768..50e8bda2 100644
--- a/studio-frontend/.envTemplate
+++ b/studio-frontend/.envTemplate
@@ -19,7 +19,7 @@ VUE_APP_LOGO=linto-studio-logo-no-text.svg
 VUE_APP_NAME=linTO Studio
 VUE_APP_DEFAULT_METADATA=room,team
 VUE_APP_ENABLE_WATERMARK=false
-VUE_APP_WATERMARK_FREQUENCY=60 # in seconds
+VUE_APP_WATERMARK_FREQUENCY=600 # in seconds
 VUE_APP_WATERMARK_DURATION=10 # in seconds
 VUE_APP_WATERMARK_CONTENT="Transcription by LinTO.ai $linto Open Source AI by $linagora"
 VUE_APP_ENABLE_SESSION=false
diff --git a/studio-frontend/src/components/MetadataList.vue b/studio-frontend/src/components/MetadataList.vue
index 443c37d9..71338619 100644
--- a/studio-frontend/src/components/MetadataList.vue
+++ b/studio-frontend/src/components/MetadataList.vue
@@ -3,6 +3,7 @@
     <Tag
       :key="index"
       v-for="(pairs, index) in field.value"
+      v-if="!isPrivateMetadata(pairs[0])"
       :value="pairs[1]"
       :categoryName="pairs[0]" />
 
@@ -25,7 +26,11 @@ export default {
     return {}
   },
   mounted() {},
-  methods: {},
+  methods: {
+    isPrivateMetadata(key) {
+      return key.startsWith("@")
+    },
+  },
   components: {
     Tag,
   },
diff --git a/studio-frontend/src/components/SessionLiveContent.vue b/studio-frontend/src/components/SessionLiveContent.vue
index 6ca90a8e..e9c624e2 100644
--- a/studio-frontend/src/components/SessionLiveContent.vue
+++ b/studio-frontend/src/components/SessionLiveContent.vue
@@ -98,31 +98,6 @@ export default {
       required: false,
       default: false,
     },
-    watermarkFrequency: {
-      type: Number,
-      required: false,
-      default: Number(getEnv("VUE_APP_WATERMARK_FREQUENCY")),
-    },
-    watermarkDuration: {
-      type: Number,
-      required: true,
-      default: Number(getEnv("VUE_APP_WATERMARK_DURATION")),
-    },
-    watermarkContent: {
-      type: String,
-      required: true,
-      default: getEnv("VUE_APP_WATERMARK_CONTENT"),
-    },
-    watermarkPinned: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    displayWatermark: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
   },
   data() {
     return {
diff --git a/studio-frontend/src/components/SessionLiveMicrophone.vue b/studio-frontend/src/components/SessionLiveMicrophone.vue
index f4658651..31200bcd 100644
--- a/studio-frontend/src/components/SessionLiveMicrophone.vue
+++ b/studio-frontend/src/components/SessionLiveMicrophone.vue
@@ -13,7 +13,8 @@
         v-bind:displayLiveTranscription.sync="displayLiveTranscription"
         v-bind:displaySubtitles.sync="displaySubtitles"
         v-bind:fontSize.sync="fontSize"
-        v-bind:selectedChannel.sync="selectedChannel" />
+        v-bind:selectedChannel.sync="selectedChannel"
+        quickSession />
     </template>
     <template v-slot:breadcrumb-actions>
       <slot name="breadcrumb-actions"></slot>
diff --git a/studio-frontend/src/components/SessionLiveToolbar.vue b/studio-frontend/src/components/SessionLiveToolbar.vue
index 26411e84..b04c9955 100644
--- a/studio-frontend/src/components/SessionLiveToolbar.vue
+++ b/studio-frontend/src/components/SessionLiveToolbar.vue
@@ -32,7 +32,7 @@
       <FormInput :field="fontSizeField" v-model="fontSizeField.value" />
 
       <FormCheckbox
-        v-if="enableWatermark"
+        v-if="enableWatermark && isAtLeastMeetingManager && !quickSession"
         :field="displayWatermarkField"
         switchDisplay
         v-model="displayWatermarkField.value">
@@ -86,6 +86,7 @@ import { bus } from "@/main.js"
 
 import EMPTY_FIELD from "@/const/emptyField"
 import { getEnv } from "@/tools/getEnv"
+import { orgaRoleMixin } from "@/mixins/orgaRole"
 
 import FormInput from "@/components/FormInput.vue"
 import FormCheckbox from "@/components/FormCheckbox.vue"
@@ -94,6 +95,7 @@ import SessionChannelsSelector from "@/components/SessionChannelsSelector.vue"
 import ModalWatermarkSettings from "@/components/ModalWatermarkSettings.vue"
 
 export default {
+  mixins: [orgaRoleMixin],
   props: {
     selectedChannel: {
       type: Object,
@@ -129,23 +131,27 @@ export default {
     },
     watermarkFrequency: {
       type: Number,
-      required: true,
+      required: false,
     },
     watermarkDuration: {
       type: Number,
-      required: true,
+      required: false,
     },
     watermarkContent: {
       type: String,
-      required: true,
+      required: false,
     },
     displayWatermark: {
       type: Boolean,
-      required: true,
+      required: false,
     },
     watermarkPinned: {
       type: Boolean,
-      required: true,
+      required: false,
+    },
+    quickSession: {
+      type: Boolean,
+      default: false,
     },
   },
   data() {
@@ -183,16 +189,26 @@ export default {
   mounted() {},
   methods: {
     updateWatermarkSettings({ frequency, duration, text }) {
-      this.$emit("update:watermarkFrequency", frequency)
-      this.$emit("update:watermarkDuration", duration)
-      this.$emit("update:watermarkContent", text)
+      this.$emit("updateWatermarkSettings", {
+        frequency,
+        duration,
+        text,
+        pinned: this.watermarkPinned,
+        display: this.displayWatermarkField.value,
+      })
       this.closeWatermarkSettings()
     },
     closeWatermarkSettings() {
       this.showWatermarkSettings = false
     },
     togglePin() {
-      this.$emit("update:watermarkPinned", !this.watermarkPinned)
+      this.$emit("updateWatermarkSettings", {
+        frequency: this.watermarkFrequency,
+        duration: this.watermarkDuration,
+        text: this.watermarkContent,
+        pinned: !this.watermarkPinned,
+        display: this.displayWatermarkField.value,
+      })
     },
     clearSubtitles() {
       bus.$emit("clear-session-subtitles")
@@ -241,7 +257,13 @@ export default {
       this.$emit("update:fontSize", value)
     },
     "displayWatermarkField.value"(value) {
-      this.$emit("update:displayWatermark", value)
+      this.$emit("updateWatermarkSettings", {
+        frequency: this.watermarkFrequency,
+        duration: this.watermarkDuration,
+        text: this.watermarkContent,
+        pinned: !this.watermarkPinned,
+        display: value,
+      })
     },
   },
   components: {
diff --git a/studio-frontend/src/components/SessionLiveVisio.vue b/studio-frontend/src/components/SessionLiveVisio.vue
index e77ba9e9..f0def16a 100644
--- a/studio-frontend/src/components/SessionLiveVisio.vue
+++ b/studio-frontend/src/components/SessionLiveVisio.vue
@@ -8,7 +8,8 @@
         v-bind:displayLiveTranscription.sync="displayLiveTranscription"
         v-bind:displaySubtitles.sync="displaySubtitles"
         v-bind:fontSize.sync="fontSize"
-        v-bind:selectedChannel.sync="selectedChannel" />
+        v-bind:selectedChannel.sync="selectedChannel"
+        quickSession />
     </template>
     <template v-slot:breadcrumb-actions>
       <slot name="breadcrumb-actions"></slot>
diff --git a/studio-frontend/src/const/defaultEnv.js b/studio-frontend/src/const/defaultEnv.js
index e4d89ee9..f74adcd5 100644
--- a/studio-frontend/src/const/defaultEnv.js
+++ b/studio-frontend/src/const/defaultEnv.js
@@ -9,7 +9,7 @@ export default {
   VUE_APP_WEBSOCKET_TRANSPORTS: "websocket",
   VUE_APP_DEFAULT_METADATA: "",
   VUE_APP_ENABLE_WATERMARK: "false",
-  VUE_APP_WATERMARK_FREQUENCY: "60",
+  VUE_APP_WATERMARK_FREQUENCY: "600",
   VUE_APP_WATERMARK_DURATION: "10",
   VUE_APP_SHOW_BETA_LIVE_TRANSCRIPTION: "false",
   VUE_APP_WATERMARK_CONTENT:
diff --git a/studio-frontend/src/locales/en-US.json b/studio-frontend/src/locales/en-US.json
index 9f9187af..d6286b30 100644
--- a/studio-frontend/src/locales/en-US.json
+++ b/studio-frontend/src/locales/en-US.json
@@ -993,6 +993,7 @@
       "publicLink_label": "Session link",
       "start_time_label": "Start time",
       "success_message": "Session successfully updated",
+      "error_update_message": "Session has not been updated",
       "force_delete_modal": {
         "action": "Delete",
         "content": "An audio stream is connected. Are you sure you want to delete the session? The content will be saved in your media library.",
diff --git a/studio-frontend/src/locales/fr-FR.json b/studio-frontend/src/locales/fr-FR.json
index db811cdc..ac030194 100644
--- a/studio-frontend/src/locales/fr-FR.json
+++ b/studio-frontend/src/locales/fr-FR.json
@@ -38,7 +38,7 @@
       "home": "Accueil",
       "users": "Utilisateurs",
       "organisations": "Organisations",
-      "transcriberProfiles": "Profiles de transcription"
+      "transcriberProfiles": "Profils de transcription"
     },
     "user_list": {
       "title": "Utilisateurs",
@@ -64,22 +64,22 @@
       "quick_meeting_label": "Activé pour les quick meetings",
       "warning_global": {
         "line_1": "Ce profile sera visible dans toutes les organisations.",
-        "line_2": "Pour gérer les profiles de transcription d'une organisation, allez dans l'onglet \"Organisations\" de la barre de navigation."
+        "line_2": "Pour gérer les profils de transcription d'une organisation, allez dans l'onglet \"Organisations\" de la barre de navigation."
       }
     },
     "transcriber_profile_list": {
       "title": "Profiles de transcription",
       "add_transcriber_profile_button": "Ajouter un profile de transcription",
-      "remove_transcriber_profile_button": "Supprimer le profile | Supprimer les {count} profiles",
+      "remove_transcriber_profile_button": "Supprimer le profile | Supprimer les {count} profils",
       "bulk_remove_loading_notification": "Suppresion du profile {count} sur {total}.",
-      "bulk_remove_success_notification": "Les profiles ont été supprimés avec succès",
-      "bulk_remove_error_notification": "Une erreur est survenue lors de la suppression des profiles",
+      "bulk_remove_success_notification": "Les profils ont été supprimés avec succès",
+      "bulk_remove_error_notification": "Une erreur est survenue lors de la suppression des profils",
       "warning_global": {
         "line_1": "Ces profils sont visibles dans toutes les organisations.",
         "line_2": "Pour gérer les profils de transcription d'une organisation, allez dans l'onglet \"Organisations\" de la barre de navigation."
       },
-      "all_profiles_shown": "Tout les profiles sont affichés",
-      "global_profiles_shown": "Seulement les profiles globaux sont affichés"
+      "all_profiles_shown": "Tout les profils sont affichés",
+      "global_profiles_shown": "Seulement les profils globaux sont affichés"
     }
   },
   "breadcrumb": {
@@ -995,8 +995,8 @@
       "diarization_label": "Séparation des locuteurs",
       "publicLink_label": "Lien de la session",
       "start_time_label": "Heure de début",
-      "success_message": "Session successfully updated",
-      "error_update_message": "Session has not been updated",
+      "success_message": "Session mise à jour avec succès",
+      "error_update_message": "La session n'a pas été mise à jour",
       "force_delete_modal": {
         "action": "Supprimer",
         "content": "Un flux audio est connecté. Êtes-vous sûr de vouloir supprimer la session ? Le contenu sera sauvegardé dans votre bibliothèque de médias.",
diff --git a/studio-frontend/src/mixins/session.js b/studio-frontend/src/mixins/session.js
index 43c6d6b7..d6194d8f 100644
--- a/studio-frontend/src/mixins/session.js
+++ b/studio-frontend/src/mixins/session.js
@@ -6,6 +6,7 @@ import {
   apiDeleteSession,
   apiGetPublicSession,
   apiGetSessionAliasesBySessionId,
+  apiUpdateSession,
 } from "../api/session"
 
 import { sessionModelMixin } from "./sessionModel"
@@ -168,6 +169,47 @@ export const sessionMixin = {
         this.onSessionUpdatePostProcess(this.session)
       }
     },
+    async syncWatermarkSettings({
+      frequency,
+      duration,
+      text,
+      pinned,
+      display,
+    }) {
+      let req = await apiUpdateSession(
+        this.currentOrganizationScope,
+        this.sessionId,
+        {
+          ...this.session,
+          meta: {
+            ...this.session.meta,
+            "@watermark": { frequency, duration, text, pinned, display },
+          },
+        },
+      )
+
+      if (req.status === "error") {
+        console.error("Error updating session", req)
+        bus.$emit("app_notif", {
+          status: "error",
+          message: this.$i18n.t("session.settings_page.error_update_message"),
+          timeout: null,
+        })
+        return
+      }
+      bus.$emit("app_notif", {
+        status: "success",
+        message: this.$i18n.t("session.settings_page.success_message"),
+        timeout: 3000,
+      })
+      this.session.meta["@watermark"] = {
+        frequency,
+        duration,
+        text,
+        pinned,
+        display,
+      }
+    },
   },
   computed: {
     sessionListRoute() {
diff --git a/studio-frontend/src/mixins/sessionModel.js b/studio-frontend/src/mixins/sessionModel.js
index ecfb7f18..68b0671c 100644
--- a/studio-frontend/src/mixins/sessionModel.js
+++ b/studio-frontend/src/mixins/sessionModel.js
@@ -1,4 +1,5 @@
-import isSessionStarted from "../tools/isSessionStarted"
+import isSessionStarted from "@/tools/isSessionStarted"
+import { getEnv } from "@/tools/getEnv"
 
 export const sessionModelMixin = {
   data() {
@@ -98,5 +99,33 @@ export const sessionModelMixin = {
     metadata() {
       return this?.session?.meta ?? {}
     },
+    displayWatermark() {
+      return (
+        this?.session?.meta?.["@watermark"]?.display ??
+        getEnv("VUE_APP_ENABLE_WATERMARK") === "true"
+      )
+    },
+    watermarkContent() {
+      return (
+        this?.session?.meta?.["@watermark"]?.content ??
+        getEnv("VUE_APP_WATERMARK_CONTENT")
+      )
+    },
+    watermarkFrequency() {
+      return (
+        this?.session?.meta?.["@watermark"]?.frequency ??
+        Number(getEnv("VUE_APP_WATERMARK_FREQUENCY"))
+      )
+    },
+    watermarkDuration() {
+      return (
+        this?.session?.meta?.["@watermark"]?.duration ??
+        Number(getEnv("VUE_APP_WATERMARK_DURATION"))
+      )
+    },
+    watermarkPinned() {
+      return this?.session?.meta?.["@watermark"]?.pinned ?? false
+    },
   },
+  methods: {},
 }
diff --git a/studio-frontend/src/views/SessionLive.vue b/studio-frontend/src/views/SessionLive.vue
index b2a9374e..bc696ab1 100644
--- a/studio-frontend/src/views/SessionLive.vue
+++ b/studio-frontend/src/views/SessionLive.vue
@@ -10,7 +10,7 @@
           <router-link
             :to="settingsRoute"
             class="btn"
-            v-if="isAtLeastMaintainer">
+            v-if="isAtLeastMeetingManager">
             <span class="icon settings"></span>
             <span class="label">{{
               $t("session.detail_page.settings_button")
@@ -22,7 +22,7 @@
             <router-link
               :to="settingsRoute"
               class="btn secondary only-icon"
-              v-if="isAtLeastMaintainer"
+              v-if="isAtLeastMeetingManager"
               :aria-label="$t('session.detail_page.settings_button')">
               <span class="icon settings"></span>
             </router-link>
@@ -64,11 +64,12 @@
         v-bind:displaySubtitles.sync="displaySubtitles"
         v-bind:fontSize.sync="fontSize"
         v-bind:selectedChannel.sync="selectedChannel"
-        v-bind:watermarkContent.sync="watermarkContent"
-        v-bind:watermarkDuration.sync="watermarkDuration"
-        v-bind:watermarkFrequency.sync="watermarkFrequency"
-        v-bind:displayWatermark.sync="displayWatermark"
-        v-bind:watermarkPinned.sync="watermarkPinned" />
+        :watermarkContent="watermarkContent"
+        :watermarkDuration="watermarkDuration"
+        :watermarkFrequency="watermarkFrequency"
+        :displayWatermark="displayWatermark"
+        :watermarkPinned="watermarkPinned"
+        @updateWatermarkSettings="syncWatermarkSettings" />
     </template>
 
     <div class="relative flex flex1 col">
@@ -170,11 +171,6 @@ export default {
       showMicrophoneSetup: false,
       showSubtitlesFullscreen: false,
       currentChannelMicrophone: null,
-      watermarkFrequency: Number(getEnv("VUE_APP_WATERMARK_FREQUENCY")),
-      watermarkDuration: Number(getEnv("VUE_APP_WATERMARK_DURATION")),
-      watermarkContent: getEnv("VUE_APP_WATERMARK_CONTENT"),
-      displayWatermark: getEnv("VUE_APP_ENABLE_WATERMARK") === "true",
-      watermarkPinned: false,
     }
   },
   created() {

From 950b0061f32753ca64a111898487d2a37b94269a Mon Sep 17 00:00:00 2001
From: tjiho <tom.darboux@laposte.net>
Date: Fri, 16 May 2025 17:33:24 +0200
Subject: [PATCH 6/6] Add watermark settings to session settings page

---
 .../src/components/ModalWatermarkSettings.vue |  30 ++---
 .../src/components/SessionLiveToolbar.vue     |  55 ++++++---
 .../src/components/SessionSubtitle.vue        |   6 +-
 studio-frontend/src/locales/en-US.json        |   1 +
 studio-frontend/src/locales/fr-FR.json        |   1 +
 studio-frontend/src/mixins/session.js         |   6 +-
 studio-frontend/src/views/SessionSettings.vue | 106 ++++++++++++++----
 7 files changed, 144 insertions(+), 61 deletions(-)

diff --git a/studio-frontend/src/components/ModalWatermarkSettings.vue b/studio-frontend/src/components/ModalWatermarkSettings.vue
index 0a5fdc9a..f9b87475 100644
--- a/studio-frontend/src/components/ModalWatermarkSettings.vue
+++ b/studio-frontend/src/components/ModalWatermarkSettings.vue
@@ -8,8 +8,8 @@
     <div class="modal-watermark-settings">
       <FormInput
         inputFullWidth
-        :field="watermarkTextField"
-        v-model="watermarkTextField.value" />
+        :field="watermarkContentField"
+        v-model="watermarkContentField.value" />
       <FormInput
         inputFullWidth
         :field="watermarkFrequencyField"
@@ -29,36 +29,27 @@ import FormInput from "@/components/FormInput.vue"
 
 export default {
   props: {
-    watermarkFrequency: {
-      type: Number,
-      required: true,
-    },
-    watermarkDuration: {
-      type: Number,
-      required: true,
-    },
-    watermarkContent: {
-      type: String,
-      required: true,
+    field: {
+      type: Object,
     },
   },
   data() {
     return {
-      watermarkTextField: {
+      watermarkContentField: {
         ...EMPTY_FIELD,
-        value: this.watermarkContent,
+        value: this.field.value.content,
         label: this.$t("session.live_page.watermark_settings.text"),
         type: "text",
       },
       watermarkFrequencyField: {
         ...EMPTY_FIELD,
-        value: this.watermarkFrequency,
+        value: this.field.value.frequency,
         label: this.$t("session.live_page.watermark_settings.frequency"),
         type: "number",
       },
       watermarkDurationField: {
         ...EMPTY_FIELD,
-        value: this.watermarkDuration,
+        value: this.field.value.duration,
         label: this.$t("session.live_page.watermark_settings.duration"),
         type: "number",
       },
@@ -67,11 +58,12 @@ export default {
   mounted() {},
   methods: {
     applyWatermarkSettings() {
-      this.$emit("on-confirm", {
-        text: this.watermarkTextField.value,
+      this.$emit("input", {
+        content: this.watermarkContentField.value,
         frequency: Number(this.watermarkFrequencyField.value),
         duration: Number(this.watermarkDurationField.value),
       })
+      this.$emit("on-confirm")
     },
   },
   components: {
diff --git a/studio-frontend/src/components/SessionLiveToolbar.vue b/studio-frontend/src/components/SessionLiveToolbar.vue
index b04c9955..5c5a7f56 100644
--- a/studio-frontend/src/components/SessionLiveToolbar.vue
+++ b/studio-frontend/src/components/SessionLiveToolbar.vue
@@ -74,10 +74,9 @@
       <ModalWatermarkSettings
         v-if="showWatermarkSettings"
         @on-cancel="closeWatermarkSettings"
-        @on-confirm="updateWatermarkSettings"
-        :watermarkFrequency="watermarkFrequency"
-        :watermarkDuration="watermarkDuration"
-        :watermarkContent="watermarkContent" />
+        @on-confirm="closeWatermarkSettings"
+        :field="watermarkSettingsField"
+        v-model="watermarkSettingsField.value" />
     </div>
   </div>
 </template>
@@ -181,6 +180,14 @@ export default {
         value: this.displayWatermark,
         label: this.$t("session.detail_page.display_watermark_label"),
       },
+      watermarkSettingsField: {
+        ...EMPTY_FIELD,
+        value: {
+          frequency: this.watermarkFrequency,
+          duration: this.watermarkDuration,
+          content: this.watermarkContent,
+        },
+      },
       p_selectedTranslation: this.selectedTranslation,
       p_selectedChannel: this.selectedChannel,
       showWatermarkSettings: false,
@@ -188,16 +195,16 @@ export default {
   },
   mounted() {},
   methods: {
-    updateWatermarkSettings({ frequency, duration, text }) {
-      this.$emit("updateWatermarkSettings", {
-        frequency,
-        duration,
-        text,
-        pinned: this.watermarkPinned,
-        display: this.displayWatermarkField.value,
-      })
-      this.closeWatermarkSettings()
-    },
+    // updateWatermarkSettings({ frequency, duration, text }) {
+    //   this.$emit("updateWatermarkSettings", {
+    //     frequency,
+    //     duration,
+    //     text,
+    //     pinned: this.watermarkPinned,
+    //     display: this.displayWatermarkField.value,
+    //   })
+    //   this.closeWatermarkSettings()
+    // },
     closeWatermarkSettings() {
       this.showWatermarkSettings = false
     },
@@ -247,6 +254,15 @@ export default {
     p_selectedChannel(value) {
       this.$emit("update:selectedChannel", value)
     },
+    watermarkFrequency(value) {
+      this.watermarkSettingsField.value.frequency = value
+    },
+    watermarkDuration(value) {
+      this.watermarkSettingsField.value.duration = value
+    },
+    watermarkContent(value) {
+      this.watermarkSettingsField.value.content = value
+    },
     "displayLiveTranscriptionField.value"(value) {
       this.$emit("update:displayLiveTranscription", value)
     },
@@ -260,11 +276,20 @@ export default {
       this.$emit("updateWatermarkSettings", {
         frequency: this.watermarkFrequency,
         duration: this.watermarkDuration,
-        text: this.watermarkContent,
+        content: this.watermarkContent,
         pinned: !this.watermarkPinned,
         display: value,
       })
     },
+    "watermarkSettingsField.value"(value) {
+      this.$emit("updateWatermarkSettings", {
+        frequency: value.frequency,
+        duration: value.duration,
+        content: value.content,
+        pinned: this.watermarkPinned,
+        display: this.displayWatermarkField.value,
+      })
+    },
   },
   components: {
     FormInput,
diff --git a/studio-frontend/src/components/SessionSubtitle.vue b/studio-frontend/src/components/SessionSubtitle.vue
index beb3cd11..50532329 100644
--- a/studio-frontend/src/components/SessionSubtitle.vue
+++ b/studio-frontend/src/components/SessionSubtitle.vue
@@ -73,13 +73,17 @@ export default {
       lineHeight: this.lineHeight,
     })
 
-    if (this.displayWatermark) {
+    if (this.displayWatermark && !this.watermarkPinned) {
       this.watermarkShowTimeout = setTimeout(
         this.drawWatermark.bind(this),
         this.watermarkFrequency * 1000,
       )
     }
 
+    if (this.displayWatermark && this.watermarkPinned) {
+      this.drawWatermark()
+    }
+
     bus.$on("clear-session-subtitles", this.reset)
   },
   beforeDestroy() {
diff --git a/studio-frontend/src/locales/en-US.json b/studio-frontend/src/locales/en-US.json
index d6286b30..d1cf082d 100644
--- a/studio-frontend/src/locales/en-US.json
+++ b/studio-frontend/src/locales/en-US.json
@@ -984,6 +984,7 @@
       "channels_list_title": "Channels",
       "copy_link_button": "Copy link",
       "copy_link_button_done": "Link copied",
+      "displayWatermark_label": "Display watermark",
       "end_time_label": "End time",
       "edit_alias_button": "Manage the aliase",
       "global_informations_title": "General information",
diff --git a/studio-frontend/src/locales/fr-FR.json b/studio-frontend/src/locales/fr-FR.json
index ac030194..b86194ad 100644
--- a/studio-frontend/src/locales/fr-FR.json
+++ b/studio-frontend/src/locales/fr-FR.json
@@ -987,6 +987,7 @@
       "channels_list_title": "Canaux",
       "copy_link_button": "Copier le lien",
       "copy_link_button_done": "Lien copié",
+      "displayWatermark_label": "Afficher le filigrane",
       "end_time_label": "Heure de fin",
       "edit_alias_button": "Gérer l'alias",
       "global_informations_title": "Informations générales",
diff --git a/studio-frontend/src/mixins/session.js b/studio-frontend/src/mixins/session.js
index d6194d8f..d130926e 100644
--- a/studio-frontend/src/mixins/session.js
+++ b/studio-frontend/src/mixins/session.js
@@ -172,7 +172,7 @@ export const sessionMixin = {
     async syncWatermarkSettings({
       frequency,
       duration,
-      text,
+      content,
       pinned,
       display,
     }) {
@@ -183,7 +183,7 @@ export const sessionMixin = {
           ...this.session,
           meta: {
             ...this.session.meta,
-            "@watermark": { frequency, duration, text, pinned, display },
+            "@watermark": { frequency, duration, content, pinned, display },
           },
         },
       )
@@ -205,7 +205,7 @@ export const sessionMixin = {
       this.session.meta["@watermark"] = {
         frequency,
         duration,
-        text,
+        content,
         pinned,
         display,
       }
diff --git a/studio-frontend/src/views/SessionSettings.vue b/studio-frontend/src/views/SessionSettings.vue
index 30254074..0ea747db 100644
--- a/studio-frontend/src/views/SessionSettings.vue
+++ b/studio-frontend/src/views/SessionSettings.vue
@@ -78,6 +78,25 @@
               :field="fieldIsPublic"
               v-model="fieldIsPublic.value"
               :disabled="isActive"></FormCheckbox>
+
+            <FormCheckbox
+              v-if="enableWatermark"
+              :field="fieldDisplayWatermark"
+              v-model="fieldDisplayWatermark.value">
+              <template v-slot:content-after-label>
+                <button
+                  class="only-icon transparent"
+                  :aria-label="
+                    $t('session.live_page.watermark_settings.settings_button')
+                  "
+                  :title="
+                    $t('session.live_page.watermark_settings.settings_button')
+                  "
+                  @click="showWatermarkSettings = true">
+                  <span class="icon settings" />
+                </button>
+              </template>
+            </FormCheckbox>
           </section>
           <section>
             <h2 class="flex align-center gap-medium">
@@ -116,17 +135,6 @@
         </div>
         <div class="flex col gap-medium session-settings-right align-center">
           <div class="flex col gap-medium">
-            <!-- <button
-            class="btn flex1"
-            v-if="isPending"
-            @click="startSession"
-            :disabled="isStarting">
-            <span class="icon play"></span>
-            <span class="label">{{
-              $t("session.detail_page.start_button")
-            }}</span>
-          </button> -->
-
             <!-- Delete and save -->
             <button
               class="btn flex1 red-border flex"
@@ -151,17 +159,6 @@
                 $t("session.detail_page.stop_force_button")
               }}</span>
             </button>
-
-            <!-- <button
-            class="btn red-border flex1"
-            :disabled="isDeleting || isActive"
-            :title="titleButtonDelete"
-            @click="openModalDeleteSession">
-            <span class="icon trash"></span>
-            <span class="label">{{
-              $t("session.detail_page.delete_button")
-            }}</span>
-          </button> -->
           </div>
           <Qrcode :value="publicLink" class="session-settings-qr-code" />
         </div>
@@ -208,6 +205,13 @@
         v-if="showModalEditSessionAlias"
         @on-cancel="closeModalEditSessionAlias"
         @on-confirm="updateSessionAlias" />
+
+      <ModalWatermarkSettings
+        v-if="showWatermarkSettings"
+        @on-cancel="closeWatermarkSettings"
+        @on-confirm="closeWatermarkSettings"
+        :field="fieldWatermarkSettings"
+        v-model="fieldWatermarkSettings.value" />
     </div>
   </MainContent>
 </template>
@@ -222,6 +226,7 @@ import { formsMixin } from "@/mixins/forms.js"
 
 import isSameDateTimeWithoutSeconds from "@/tools/isSameDateTimeWithoutSeconds.js"
 import isAuthenticated from "@/tools/isAuthenticated.js"
+import { getEnv } from "@/tools/getEnv"
 
 import { apiUpdateSession } from "@/api/session.js"
 
@@ -238,7 +243,7 @@ import MetadataList from "@/components/MetadataList.vue"
 import SessionHeader from "@/components/SessionHeader.vue"
 import ModalEditSessionAlias from "@/components/ModalEditSessionAlias.vue"
 import Qrcode from "@/components/Qrcode.vue"
-
+import ModalWatermarkSettings from "@/components/ModalWatermarkSettings.vue"
 export default {
   mixins: [sessionMixin, formsMixin],
   props: {},
@@ -264,6 +269,22 @@ export default {
         valid: false,
         label: this.$t("session.settings_page.isPublic_label"),
       },
+      fieldDisplayWatermark: {
+        value: null,
+        error: null,
+        valid: false,
+        label: this.$t("session.settings_page.displayWatermark_label"),
+      },
+      fieldWatermarkSettings: {
+        value: {
+          content: null,
+          frequency: null,
+          duration: null,
+        },
+        error: null,
+        valid: false,
+        label: this.$t("session.settings_page.watermarkSettings_label"),
+      },
       fieldAppointment: {
         ...EMPTY_FIELD,
         value: [null, null], // startDateTime, endDateTime
@@ -292,12 +313,21 @@ export default {
       formState: "idle",
       localChannels: [],
       channelsHasChanged: false,
+      showWatermarkSettings: false,
     }
   },
   created() {},
   computed: {
     hasChanged() {
       const publicChanged = this.fieldIsPublic.value !== this.isPublic
+      const displayWatermarkChanged =
+        this.fieldDisplayWatermark.value !== this.displayWatermark
+      const watermarkContentChanged =
+        this.fieldWatermarkSettings.value.content !== this.watermarkContent
+      const watermarkFrequencyChanged =
+        this.fieldWatermarkSettings.value.frequency !== this.watermarkFrequency
+      const watermarkDurationChanged =
+        this.fieldWatermarkSettings.value.duration !== this.watermarkDuration
       const autoStartChanged = this.fieldAutoStart.value !== this.autoStart
       const autoStopChanged = this.fieldAutoStop.value !== this.autoStop
       const startDateChanged = !isSameDateTimeWithoutSeconds(
@@ -312,6 +342,10 @@ export default {
 
       return (
         publicChanged ||
+        displayWatermarkChanged ||
+        watermarkContentChanged ||
+        watermarkFrequencyChanged ||
+        watermarkDurationChanged ||
         autoStartChanged ||
         autoStopChanged ||
         startDateChanged ||
@@ -327,6 +361,9 @@ export default {
     isAuthenticated() {
       return isAuthenticated()
     },
+    enableWatermark() {
+      return getEnv("VUE_APP_ENABLE_WATERMARK") === "true"
+    },
   },
   mounted() {},
   watch: {
@@ -353,6 +390,12 @@ export default {
       this.sessionLoaded = true
     },
     initValues() {
+      this.fieldDisplayWatermark.value = this.displayWatermark
+      this.fieldWatermarkSettings.value = {
+        content: this.watermarkContent,
+        frequency: this.watermarkFrequency,
+        duration: this.watermarkDuration,
+      }
       this.fieldAutoStart.value = this.autoStart
       this.fieldAutoStop.value = this.autoStop
       this.fieldPublicLink.value = this.publicLink
@@ -400,6 +443,12 @@ export default {
         } catch (error) {}
       }, 2000)
     },
+    closeWatermarkSettings() {
+      this.showWatermarkSettings = false
+    },
+    openWatermarkSettings() {
+      this.showWatermarkSettings = true
+    },
     resetSession() {
       this.initValues()
     },
@@ -416,6 +465,16 @@ export default {
       if (this.testFields()) {
         let newValues = {
           ...this.session,
+          meta: {
+            ...this.session.meta,
+            "@watermark": {
+              ...this?.session?.meta?.["@watermark"],
+              display: this.fieldDisplayWatermark.value,
+              frequency: this.fieldWatermarkSettings.value.frequency,
+              duration: this.fieldWatermarkSettings.value.duration,
+              content: this.fieldWatermarkSettings.value.content,
+            },
+          },
           scheduleOn: startDateTime,
           endOn: endDateTime,
           autoStart: this.fieldAutoStart.value,
@@ -466,6 +525,7 @@ export default {
     SessionHeader,
     ModalEditSessionAlias,
     Qrcode,
+    ModalWatermarkSettings,
   },
 }
 </script>