Feature: watermark settings

studio-frontend/.envTemplate

@@ -18,9 +18,10 @@ 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_WATERMARK_FREQUENCY=60 # in seconds
+VUE_APP_ENABLE_WATERMARK=false
+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
 VUE_APP_EXPERIMENTAL_HIGHLIGHT=false
 VUE_APP_EXPERIMENTAL_DARK_THEME=true

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">

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,
   },

studio-frontend/src/components/ModalWatermarkSettings.vue

@@ -0,0 +1,74 @@
+<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="watermarkContentField"
+        v-model="watermarkContentField.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: {
+    field: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      watermarkContentField: {
+        ...EMPTY_FIELD,
+        value: this.field.value.content,
+        label: this.$t("session.live_page.watermark_settings.text"),
+        type: "text",
+      },
+      watermarkFrequencyField: {
+        ...EMPTY_FIELD,
+        value: this.field.value.frequency,
+        label: this.$t("session.live_page.watermark_settings.frequency"),
+        type: "number",
+      },
+      watermarkDurationField: {
+        ...EMPTY_FIELD,
+        value: this.field.value.duration,
+        label: this.$t("session.live_page.watermark_settings.duration"),
+        type: "number",
+      },
+    }
+  },
+  mounted() {},
+  methods: {
+    applyWatermarkSettings() {
+      this.$emit("input", {
+        content: this.watermarkContentField.value,
+        frequency: Number(this.watermarkFrequencyField.value),
+        duration: Number(this.watermarkDurationField.value),
+      })
+      this.$emit("on-confirm")
+    },
+  },
+  components: {
+    ModalNew,
+    FormInput,
+  },
+}
+</script>

studio-frontend/src/components/SessionChannel.vue

@@ -133,7 +133,12 @@
       :finalText="finalText"
       :fontSize="fontSize"
       :key="fontSize"
-      :selectedTranslations="selectedTranslations" />
+      :selectedTranslations="selectedTranslations"
+      :watermarkFrequency="watermarkFrequency"
+      :watermarkDuration="watermarkDuration"
+      :watermarkContent="watermarkContent"
+      :watermarkPinned="watermarkPinned"
+      :displayWatermark="displayWatermark" />
     <SubtitleFullscreen
       v-if="showSubtitlesFullscreen"
       :partialText="partialText"
@@ -244,6 +249,26 @@ 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,
+    },
+    displayWatermark: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {

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,

studio-frontend/src/components/SessionLiveContent.vue

@@ -20,6 +20,11 @@
       fromMicrophone
       @toggleMicrophone="$emit('toggleMicrophone')"
       @onSave="$emit('onSave')"
+      :watermarkFrequency="watermarkFrequency"
+      :watermarkDuration="watermarkDuration"
+      :watermarkContent="watermarkContent"
+      :watermarkPinned="watermarkPinned"
+      :displayWatermark="displayWatermark"
       :isRecording="isRecording"></SessionChannel>
     <Loading v-else></Loading>
   </div>
@@ -29,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"

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>