@saooti/octopus-sdk 40.2.1-SNAPSHOT → 40.2.2-SNAPSHOT

package/index.ts

@@ -95,6 +95,7 @@ export const getClassicInputText = () => import("./src/components/form/ClassicIn
 export const getClassicEmojiPicker = () => import("./src/components/form/ClassicEmojiPicker.vue");
 export const getClassicContentEditable = () => import("./src/components/form/ClassicContentEditable.vue");
 export const getSwiperList = () => import("./src/components/display/list/SwiperList.vue");
+export const getClassicCopyButton = () => import("./src/components/form/ClassicCopyButton.vue");
 
 
 //Composable

package/package.json

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

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

@@ -3,7 +3,7 @@
     <div
       class="d-flex justify-content-between flex-grow-1 mb-3 w-100 align-items-center"
     >
-      <h2 class="mb-0 big-h2">
+      <h2 class="mb-0">
         {{ $t("Live") }}
       </h2>
       <router-link

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

@@ -3,7 +3,7 @@
     v-if="(filterOrgaId || organisationId) && radio.length"
     class="d-flex flex-column align-items-start mt-3"
   >
-    <h2 class="mb-0 big-h2 mb-3">
+    <h2 class="mb-0 mb-3">
       {{ $t("Radio") }}
     </h2>
     <template v-if="radio.length">

package/src/components/display/sharing/ShareAnonymous.vue

@@ -58,7 +58,6 @@
       v-if="isRssModal"
       :link="rssUrl"
       @close="isRssModal = false"
-      @copy="afterCopy"
     />
     <SnackBar
       v-if="lazyLoadingSnackbar"

package/src/components/display/sharing/ShareDistribution.vue

@@ -8,9 +8,12 @@
       <div class="text-primary hide-small-screen text-break">
         {{ rss }}
       </div>
-      <button class="btn btn-primary" @click="onCopyCode(rss, afterCopy)">
-        {{ $t("Copy") }}
-      </button>
+      <ClassicCopyButton
+        :text="$t('Copy')"
+        :text-after-copy="$t('Copied!')"
+        :data-to-copy="rss"
+        :snackbar-text="$t('Link in clipboard')"
+      />
     </div>
     <RssSection v-if="emission" :emission="emission" />
     <div class="sharing-distribution-container">
@@ -27,15 +30,11 @@
         />{{ platform.title }}
       </router-link>
     </div>
-    <SnackBar
-      v-if="lazyLoadingSnackbar"
-      ref="snackbar"
-      position="bottom-left"
-    />
   </section>
 </template>
 
 <script lang="ts">
+import ClassicCopyButton from "../../form/ClassicCopyButton.vue";
 import RadiolineIcon from "../../icons/RadiolineIcon.vue";
 import TuninIcon from "../../icons/TuninIcon.vue";
 import PodcastAddictIcon from "../../icons/PodcastAddictIcon.vue";
@@ -49,8 +48,6 @@ import YoutubeIcon from "vue-material-design-icons/Youtube.vue";
 import SpotifyIcon from "vue-material-design-icons/Spotify.vue";
 import { useApiStore } from "../../../stores/ApiStore";
 import classicApi from "../../../api/classicApi";
-import SnackBar from "../../misc/SnackBar.vue";
-import displayHelper from "../../../helper/displayHelper";
 import { Emission } from "@/stores/class/general/emission";
 
 import { defineComponent, defineAsyncComponent } from "vue";
@@ -60,7 +57,6 @@ const RssSection = defineAsyncComponent(
 );
 export default defineComponent({
   components: {
-    SnackBar,
     RssSection,
     SpotifyIcon,
     YoutubeIcon,
@@ -73,6 +69,7 @@ export default defineComponent({
     PodcastAddictIcon,
     TuninIcon,
     RadiolineIcon,
+    ClassicCopyButton
   },
   props: {
     emissionId: { default: undefined, type: Number },
@@ -82,7 +79,6 @@ export default defineComponent({
     return {
       emission: undefined as Emission | undefined,
       rss: "" as string,
-      lazyLoadingSnackbar: false as boolean,
     };
   },
   computed: {
@@ -159,9 +155,6 @@ export default defineComponent({
   },
 
   methods: {
-    onCopyCode(link: string, callback: () => void){
-      displayHelper.onCopyCode(link, callback);
-    },
     getUrl(platform: string): string {
       return `/main/priv/distribution/${platform}/${this.emissionId}`;
     },
@@ -175,18 +168,6 @@ export default defineComponent({
       if (!this.$props.emissionId || this.$props.emissionId <= 0) return;
       this.rss = `${this.apiUrl}rss/emission/${this.emissionId}.rss`;
     },
-    afterCopy(): void {
-      if (!this.lazyLoadingSnackbar) {
-        this.lazyLoadingSnackbar = true;
-        setTimeout(() => {
-          this.afterCopy();
-        }, 500);
-      } else {
-        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-          this.$t("Link in clipboard"),
-        );
-      }
-    },
   },
 });
 </script>

package/src/components/display/sharing/ShareNewsletter.vue

@@ -31,22 +31,19 @@
       <div class="border p-3" v-html="newsletterHtml" />
       <!-- eslint-enable -->
     </div>
-    <button
-      class="btn btn-primary w-fit-content my-3"
-      @click="onCopyCode(newsletterHtml, afterCopy)"
-    >
-      {{ $t("Copy code") }}
-    </button>
+    <ClassicCopyButton
+      :text="$t('Copy code')"
+      :text-after-copy="$t('Code copied!')"
+      :data-to-copy="newsletterHtml"
+    />
     <div>{{ $t("And paste it in your newsletter") }}</div>
-    <SnackBar ref="snackbar" position="bottom-left" />
   </div>
 </template>
 
 <script lang="ts">
-import SnackBar from "../../misc/SnackBar.vue";
+import ClassicCopyButton from "../../form/ClassicCopyButton.vue";
 import { VSwatches } from "vue3-swatches";
 import "vue3-swatches/dist/style.css";
-import displayHelper from "../../../helper/displayHelper";
 import { Podcast } from "@/stores/class/general/podcast";
 import { defineComponent } from "vue";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
@@ -58,7 +55,7 @@ export default defineComponent({
   name: "SahreNewsletter",
 
   components: {
-    SnackBar,
+    ClassicCopyButton,
     VSwatches,
   },
 
@@ -98,10 +95,10 @@ export default defineComponent({
           shareText: this.$t("Listen this episode"),
           emissionHtml: `<tr><td style="padding:5px 0;">
           <div style="display:flex; margin-top:5px;">
-          <div style="font-size:20px; color:${
+          <div style="font-size:16px; color:${
             this.arrayColors[1].color
           }; margin-right:5px;text-wrap: nowrap;">${this.$t("Emission")} :</div>
-          <a href="${this.shareUrl}" style="font-size: 18px;color: ${
+          <a href="${this.shareUrl}" style="font-size: 16px;color: ${
             this.arrayColors[0].color
           };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${
             this.podcast.emission.name
@@ -154,7 +151,7 @@ export default defineComponent({
 <td valign="top" width="30%" rowspan="7" style="padding-right:5px;"><img width="100%" src="${
         this.newsletterInfo.imageUrl
       }" style="border-radius: 4px;"></td>
-<td valign="top" width="70%" style="padding:5px 0;"><div style="margin-top:5px;font-size: 24px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${
+<td valign="top" width="70%" style="padding:5px 0;"><div style="margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${
         this.newsletterInfo.colorTitle
       }">${this.newsletterInfo.title}</div></td>
 </tr>${this.newsletterInfo.emissionHtml}
@@ -184,14 +181,6 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
-    onCopyCode(link: string, callback: () => void){
-      displayHelper.onCopyCode(link, callback);
-    },
-    afterCopy(): void {
-      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-        this.$t("Data in clipboard"),
-      );
-    },
     async initData(): Promise<void> {
       const orgaId = this.authOrgaId;
       if (!orgaId?.length) {

package/src/components/form/ClassicCopyButton.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <button
+      :class="classBtn"
+      @click="onCopyCode(afterCopy)"
+    >
+      {{ textDisplayed }}
+    </button>
+    <SnackBar 
+      v-if="lazyLoadingSnackbar" 
+      ref="snackbar" 
+      position="bottom-left"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import SnackBar from "../misc/SnackBar.vue";
+import displayHelper from "../../helper/displayHelper";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ClassicCopyButton",
+
+  components: {
+    SnackBar,
+  },
+
+  props: {
+    text: { default: undefined, type: String },
+    textAfterCopy: { default: undefined, type: String },
+    dataToCopy: { default: undefined, type: String },
+    snackbarText: { default: undefined, type: String },
+    classBtn: { default: "btn btn-primary w-fit-content my-3", type: String },
+  },
+  data() {
+    return {
+      hasBeenCopied: false as boolean,
+      lazyLoadingSnackbar: false as boolean,
+    };
+  },
+  computed:{
+    textDisplayed(){
+      return this.hasBeenCopied ? this.textAfterCopy : this.text;
+    }
+  },
+  methods: {
+    onCopyCode(callback: () => void){
+      displayHelper.onCopyCode(this.dataToCopy??"", callback);
+    },
+    afterCopy(): void {
+      this.hasBeenCopied = true;
+      if (!this.lazyLoadingSnackbar) {
+        this.lazyLoadingSnackbar = true;
+        setTimeout(() => {
+          this.afterCopy();
+        }, 500);
+      } else {
+        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+          this.snackbarText ?? this.$t("Data in clipboard"),
+        );
+      }
+    },
+  },
+});
+</script>

package/src/components/misc/ClassicNav.vue

@@ -96,7 +96,6 @@ export default defineComponent({
 
   .octopus-nav.light .octopus-nav-item {
     border: 0;
-    flex-grow: 0;
   }
 
   .octopus-nav-link {

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

@@ -8,9 +8,12 @@
       <p class="d-flex justify-content-between align-items-center">
         {{ $t("Rss feed:") }}
         <span id="LINK">{{ link }}</span>
-        <button class="btn btn-primary" @click="onCopyCode(link, afterCopy)">
-          {{ $t("Copy") }}
-        </button>
+        <ClassicCopyButton
+          :text="$t('Copy')"
+          :text-after-copy="$t('Copied!')"
+          :data-to-copy="link"
+          :snackbar-text="$t('Link in clipboard')"
+        />
       </p>
       <RssSection
         v-if="emission && undefined !== authOrgaId"
@@ -21,9 +24,9 @@
 </template>
 
 <script lang="ts">
+import ClassicCopyButton from "../../form/ClassicCopyButton.vue";
 import ClassicModal from "../modal/ClassicModal.vue";
 import { Emission } from "@/stores/class/general/emission";
-import displayHelper from "../../../helper/displayHelper";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { mapState } from "pinia";
@@ -35,25 +38,20 @@ export default defineComponent({
   components: {
     RssSection,
     ClassicModal,
+    ClassicCopyButton
   },
   props: {
     link: { default: "", type: String },
     emission: { default: undefined, type: Object as () => Emission },
   },
-  emits: ["close", "copy"],
+  emits: ["close"],
   computed: {
     ...mapState(useAuthStore, ["authOrgaId"]),
   },
   methods: {
-    onCopyCode(link: string, callback: () => void){
-      displayHelper.onCopyCode(link, callback);
-    },
     closePopup(): void {
       this.$emit("close");
     },
-    afterCopy(): void {
-      this.$emit("copy");
-    },
   },
 });
 </script>

package/src/components/pages/VideoPage.vue

@@ -96,7 +96,6 @@ import ClassicLoading from "../form/ClassicLoading.vue";
 import classicApi from "../../api/classicApi";
 import { Podcast } from "@/stores/class/general/podcast";
 import ClassicNav from "../misc/ClassicNav.vue";
-import {useErrorHandler} from "../composable/useErrorHandler";
 import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
 import {usePodcastView} from "../composable/podcasts/usePodcastView";
 import { computed, defineAsyncComponent, onBeforeUnmount, Ref, ref, watch } from "vue";

package/src/locale/de.ts

@@ -412,4 +412,6 @@ export default {
   "Save":"Speichern",
   "Search for keyword": "Suche nach Schlüsselwort: {tag}",
   "And paste it in your newsletter":"Und fügen Sie es in Ihren Newsletter ein 😉",
+  "Code copied!":"Code kopiert!",
+  "Copied!":"Kopiert!",
 }

package/src/locale/en.ts

@@ -415,4 +415,6 @@ export default {
   "Save":"Save",
   "Search for keyword": "Search for keyword: {tag}",
   "And paste it in your newsletter":"And paste it in your newsletter 😉",
+  "Code copied!":"Code copied!",
+  "Copied!":"Copied!",
 };

package/src/locale/es.ts

@@ -413,4 +413,6 @@ export default {
   "Save":"Ahorrar",
   "Search for keyword": "Buscar palabra clave: {etiqueta}",
   "And paste it in your newsletter":"Y pégalo en tu boletín informativo 😉",
+  "Code copied!":"¡Código copiado!",
+  "Copied!":"¡Copiado!",
 }

package/src/locale/fr.ts

@@ -422,4 +422,6 @@ export default {
   "Save":"Sauvegarder",
   "Search for keyword": "Recherche pour le mot-clé: {tag}",
   "And paste it in your newsletter":"Et collez-le dans votre newsletter 😉",
+  "Code copied!":"Code copié !",
+  "Copied!":"Copié !",
 };

package/src/locale/it.ts

@@ -409,4 +409,6 @@ export default{
   "Save":"Salva",
   "Search for keyword": "Cerca parola chiave: {tag}",
   "And paste it in your newsletter":"E incollalo nella tua newsletter 😉",
+  "Code copied!":"Codice copiato!",
+  "Copied!":"Copiato!",
 };

package/src/locale/sl.ts

@@ -404,4 +404,6 @@ export default {
   "Save":"Shrani",
   "Search for keyword": "Iskanje ključne besede: {tag}",
   "And paste it in your newsletter":"In ga prilepite v svoje glasilo 😉",
+  "Code copied!":"Koda kopirana!",
+  "Copied!":"Kopirano!",
 }

package/src/style/bootstrap.scss

@@ -20,7 +20,7 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 	}
 
 	h1,.h1{
-		font-size: 1.8rem;
+		font-size: 1.5rem;
 		text-align: center;
 		color: var(--octopus-gray-text);
 		margin-bottom: 1rem;
@@ -32,35 +32,27 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 	}
 
 	h2,.h2{
-		font-size: 1.17rem;
+		font-size: 1.1rem;
 
 		@media (width <= 500px){
 			font-size: 1rem;
 		}
 	}
 
-	.big-h2{
-		font-size: 1.5rem;
-
-		@media (width <= 500px){
-			font-size: 1.1rem;
-		}
-	}
-
 	h3,.h3{
-		font-size: 1.125rem;
+		font-size: 1.05rem;
 	}
 
 	h4,.h4{
-		font-size: 0.99rem;
+		font-size: 1rem;
 	}
 
 	h5,.h5{
-		font-size: .81rem;
+		font-size: .80rem;
 	}
 
 	h6,.h6{
-		font-size: .63rem;
+		font-size: .60rem;
 		display: flex;
     	align-items: center;
 		font-weight: normal;