@saooti/octopus-sdk 37.0.5 → 37.0.7

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

@@ -2,7 +2,7 @@
   <div class="module-box">
     <div class="d-flex align-items-center mb-3">
       <h2 class="big-h2 mb-0">
-        {{ $t('Share') }}
+        {{ $t("Share") }}
       </h2>
       <span
         v-if="authenticated"
@@ -11,7 +11,7 @@
         tabindex="0"
         class="saooti-help ms-2"
       />
-      <Popover
+      <ClassicPopover
         v-if="authenticated"
         target="popover-share-help"
         :title="$t('Help')"
@@ -20,44 +20,42 @@
         :is-fixed="true"
       />
     </div>
-    <div class="d-flex align-items-center justify-content-between">
-      <ShareButtonsIntern
-        :podcast="podcast"
-        :emission="emission"
-        :playlist="playlist"
-        :participant-id="participantId"
-        :organisation-id="organisationId"
-      />
-    </div>
+    <ShareButtonsIntern
+      :podcast="podcast"
+      :emission="emission"
+      :playlist="playlist"
+      :participant-id="participantId"
+      :organisation-id="organisationId"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { Emission } from '@/stores/class/general/emission';
-import { Podcast } from '@/stores/class/general/podcast';
-import { state } from '../../../stores/ParamSdkStore';
-import displayMethods from '../../mixins/displayMethods';
-import Popover from '../../misc/Popover.vue';
-import ShareButtonsIntern from './ShareButtonsIntern.vue';
-import { defineComponent } from 'vue';
-import { Playlist } from '@/stores/class/general/playlist';
+import { Emission } from "@/stores/class/general/emission";
+import { Podcast } from "@/stores/class/general/podcast";
+import { state } from "../../../stores/ParamSdkStore";
+import displayMethods from "../../mixins/displayMethods";
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import ShareButtonsIntern from "./ShareButtonsIntern.vue";
+import { defineComponent } from "vue";
+import { Playlist } from "@/stores/class/general/playlist";
 export default defineComponent({
   components: {
     ShareButtonsIntern,
-    Popover,
+    ClassicPopover,
   },
   mixins: [displayMethods],
   props: {
-    podcast: { default: undefined, type: Object as ()=> Podcast},
-    emission: { default: undefined, type: Object as ()=> Emission},
-    playlist: { default: undefined, type: Object as ()=>Playlist},
-    participantId: { default: undefined, type: Number},
-    organisationId: { default: undefined, type: String},
+    podcast: { default: undefined, type: Object as () => Podcast },
+    emission: { default: undefined, type: Object as () => Emission },
+    playlist: { default: undefined, type: Object as () => Playlist },
+    participantId: { default: undefined, type: Number },
+    organisationId: { default: undefined, type: String },
   },
   computed: {
     authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
+      return state.generalParameters.authenticated as boolean;
     },
   },
-})
+});
 </script>

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

@@ -1,149 +1,146 @@
 <template>
-  <div class="d-flex flex-column me-2">
-    <div class="h4 mb-2">
-      {{ $t('Social networks') }}
+  <div class="d-flex align-items-center justify-content-between">
+    <div v-if="!isGarStudent" class="d-flex flex-column me-2">
+      <div class="h4 mb-2">
+        {{ $t("Social networks") }}
+      </div>
+      <div class="d-flex align-items-center">
+        <template v-for="button in arrayShareButtons" :key="button.title">
+          <a
+            v-if="button.condition"
+            rel="noopener"
+            target="_blank"
+            :href="button.url"
+            :class="getClass(button.className)"
+            class="me-2"
+            :title="button.title"
+          >
+            <div :class="button.icon" />
+          </a>
+        </template>
+      </div>
     </div>
-    <div class="d-flex align-items-center">
-      <template
-        v-for="button in arrayShareButtons"
-        :key="button.title"
-      >
-        <a
-          v-if="button.condition"
-          rel="noopener"
-          target="_blank"
-          :href="button.url"
-          :class="getClass(button.className)"
-          class="me-2"
-          :title="button.title"
-        >
-          <div :class="button.icon" />
-        </a>
-      </template>
-    </div>
-  </div>
-  <div
-    v-if="podcast || emission ||playlist"
-    class="d-flex flex-column me-2"
-  >
-    <div class="h4 mb-2">
-      {{ $t('Newsletter') }}
-    </div>
-    <div class="d-flex align-items-center justify-content-center">
-      <button
-        :class="getClass()"
-        class="saooti-newsletter"
-        :title="$t('Share newsletter')"
-        @click="newsletter = true"
-      />
+    <div v-if="podcast || emission || playlist" class="d-flex flex-column me-2">
+      <div class="h4 mb-2">
+        {{ $t("Newsletter") }}
+      </div>
+      <div class="d-flex align-items-center justify-content-center">
+        <button
+          :class="getClass()"
+          class="saooti-newsletter"
+          :title="$t('Share newsletter')"
+          @click="newsletter = true"
+        />
+      </div>
     </div>
-  </div>
 
-  <div class="d-flex flex-column me-2">
-    <div class="h4 mb-2">
-      {{ $t('QR Code') }}
-    </div>
-    <div class="d-flex align-items-center justify-content-center">
-      <button
-        :class="getClass()"
-        :title="$t('Share QR Code')"
-        class="saooti-qrcode"
-        @click="qrCode = true"
-      />
+    <div class="d-flex flex-column me-2">
+      <div class="h4 mb-2">
+        {{ $t("QR Code") }}
+      </div>
+      <div class="d-flex align-items-center justify-content-center">
+        <button
+          :class="getClass()"
+          :title="$t('Share QR Code')"
+          class="saooti-qrcode"
+          @click="qrCode = true"
+        />
+      </div>
     </div>
-  </div>
 
-  <div class="d-flex flex-column me-2">
-    <div class="h4 mb-2">
-      {{ $t('Copy this page URL') }}
-    </div>
-    <div class="d-flex align-items-center justify-content-center">
-      <button
-        :class="getClass()"
-        class="saooti-link"
-        :title="$t('Copy this page URL')"
-        @click="onCopyCode(urlPage,afterCopy)"
-      />
+    <div class="d-flex flex-column me-2">
+      <div class="h4 mb-2">
+        {{ $t("Copy this page URL") }}
+      </div>
+      <div class="d-flex align-items-center justify-content-center">
+        <button
+          :class="getClass()"
+          class="saooti-link"
+          :title="$t('Copy this page URL')"
+          @click="onCopyCode(urlPage, afterCopy)"
+        />
+      </div>
     </div>
-  </div>
 
-  <div
-    v-if="''!==rssUrl && displayRss"
-    class="d-flex flex-column me-2"
-  >
-    <div class="h4 mb-2">
-      {{ $t('Rss feed') }}
-    </div>
-    <div class="d-flex align-items-center justify-content-center">
-      <a
-        rel="noopener"
-        target="_blank"
-        class="saooti-rss"
-        :class="getClass()"
-        :href="rssUrl"
-        :title="titleRssButton"
-        @click.prevent="openPopup()"
-      />
+    <div v-if="'' !== rssUrl && displayRss" class="d-flex flex-column me-2">
+      <div class="h4 mb-2">
+        {{ $t("Rss feed") }}
+      </div>
+      <div class="d-flex align-items-center justify-content-center">
+        <a
+          rel="noopener"
+          target="_blank"
+          class="saooti-rss"
+          :class="getClass()"
+          :href="rssUrl"
+          :title="titleRssButton"
+          @click.prevent="openPopup()"
+        />
+      </div>
     </div>
+
+    <ClipboardModal
+      v-if="dataRSSSave"
+      :link="rssUrl"
+      :emission="emission"
+      @close="dataRSSSave = false"
+      @copy="afterCopy"
+    />
+    <NewsletterModal
+      v-if="newsletter"
+      :closable="true"
+      :podcast="podcast"
+      :emission="emission"
+      :playlist="playlist"
+      @close="newsletter = false"
+    />
+    <QrCodeModal
+      v-if="qrCode"
+      :closable="true"
+      :url-page="urlPage"
+      @close="qrCode = false"
+    />
+    <SnackBar ref="snackbar" position="bottom-left" />
   </div>
- 
-  
-  <ClipboardModal
-    v-if="dataRSSSave"
-    :link="rssUrl"
-    :emission="emission"
-    @close="dataRSSSave = false"
-    @copy="afterCopy"
-  />
-  <NewsletterModal
-    v-if="newsletter"
-    :closable="true"
-    :podcast="podcast"
-    :emission="emission"
-    :playlist="playlist"
-    @close="newsletter = false"
-  />
-  <QrCodeModal
-    v-if="qrCode"
-    :closable="true"
-    :url-page="urlPage"
-    @close="qrCode = false"
-  />
-  <Snackbar
-    ref="snackbar"
-    position="bottom-left"
-  />
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import { Emission } from '@/stores/class/general/emission';
-import { Podcast } from '@/stores/class/general/podcast';
-import { state } from '../../../stores/ParamSdkStore';
-import Snackbar from '../../misc/Snackbar.vue';
-import displayMethods from '../../mixins/displayMethods';
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { Playlist } from '@/stores/class/general/playlist';
-const ClipboardModal = defineAsyncComponent(() => import('../../misc/modal/ClipboardModal.vue'));
-const NewsletterModal = defineAsyncComponent(() => import('../../misc/modal/NewsletterModal.vue'));
-const QrCodeModal = defineAsyncComponent(() => import('../../misc/modal/QrCodeModal.vue'));
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import octopusApi from "@saooti/octopus-api";
+import { Emission } from "@/stores/class/general/emission";
+import { Podcast } from "@/stores/class/general/podcast";
+import { state } from "../../../stores/ParamSdkStore";
+import SnackBar from "../../misc/SnackBar.vue";
+import displayMethods from "../../mixins/displayMethods";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { Playlist } from "@/stores/class/general/playlist";
+const ClipboardModal = defineAsyncComponent(
+  () => import("../../misc/modal/ClipboardModal.vue"),
+);
+const NewsletterModal = defineAsyncComponent(
+  () => import("../../misc/modal/NewsletterModal.vue"),
+);
+const QrCodeModal = defineAsyncComponent(
+  () => import("../../misc/modal/QrCodeModal.vue"),
+);
 export default defineComponent({
   components: {
     ClipboardModal,
     NewsletterModal,
     QrCodeModal,
-    Snackbar,
+    SnackBar,
   },
 
   mixins: [displayMethods],
 
   props: {
-    podcast: { default: undefined, type: Object as ()=> Podcast},
-    emission: { default: undefined, type: Object as ()=> Emission},
-    playlist: { default: undefined, type: Object as ()=>Playlist},
-    participantId: { default: undefined, type: Number},
-    organisationId: { default: undefined, type: String},
-    isVertical: { default: false, type: Boolean},
+    podcast: { default: undefined, type: Object as () => Podcast },
+    emission: { default: undefined, type: Object as () => Emission },
+    playlist: { default: undefined, type: Object as () => Playlist },
+    participantId: { default: undefined, type: Number },
+    organisationId: { default: undefined, type: String },
+    isVertical: { default: false, type: Boolean },
   },
 
   data() {
@@ -155,64 +152,94 @@ export default defineComponent({
     };
   },
   computed: {
-    titleRssButton(): string{
-      if(this.participantId){
-        return this.$t('Subscribe to this participant');
+    ...mapState(useAuthStore, ["isGarStudent"]),
+    titleRssButton(): string {
+      if (this.participantId) {
+        return this.$t("Subscribe to this participant");
       }
-      if(this.emission){
-        return this.$t('Subscribe to this emission');
+      if (this.emission) {
+        return this.$t("Subscribe to this emission");
       }
-      return this.$t('Subscribe to this RSS feed');
+      return this.$t("Subscribe to this RSS feed");
     },
-    arrayShareButtons(){
+    arrayShareButtons() {
       return [
-        { title: 'Facebook', icon:'saooti-facebook', className:'btn-facebook', url :`https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`, condition: true},
-        { title: 'Twitter', icon:'saooti-twitter', className:'btn-twitter', url :`https://twitter.com/intent/tweet?text=${this.urlPage}`, condition: true},
-        { title: 'Linkedin', icon:'saooti-linkedin', className:'btn-linkedin', url :`https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`, condition: true},
-        { title: 'Whatsapp', icon:'saooti-Whatsapp', className:'btn-whatsapp', url :`whatsapp://send?text=${this.urlPage}`, condition:  window.matchMedia('(hover: none)').matches}
-      ]
+        {
+          title: "Facebook",
+          icon: "saooti-facebook",
+          className: "btn-facebook",
+          url: `https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Twitter",
+          icon: "saooti-twitter",
+          className: "btn-twitter",
+          url: `https://twitter.com/intent/tweet?text=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Linkedin",
+          icon: "saooti-linkedin",
+          className: "btn-linkedin",
+          url: `https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Whatsapp",
+          icon: "saooti-Whatsapp",
+          className: "btn-whatsapp",
+          url: `whatsapp://send?text=${this.urlPage}`,
+          condition: window.matchMedia("(hover: none)").matches,
+        },
+      ];
     },
-    urlPage(): string{
+    urlPage(): string {
       return window.location.href;
     },
     authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
+      return state.generalParameters.authenticated as boolean;
     },
     rssUrl(): string {
-      let api = state.generalParameters.ApiUri+ 'rss/';
-      if (this.emission){
-        return api +'emission/' + this.emission.emissionId + '.rss';
+      let api = state.generalParameters.ApiUri + "rss/";
+      if (this.emission) {
+        return api + "emission/" + this.emission.emissionId + ".rss";
       }
-      if (this.participantId){
-        return api +'participant/' + this.participantId + '.rss';
+      if (this.participantId) {
+        return api + "participant/" + this.participantId + ".rss";
       }
-      if (this.organisationId){
-        return api +'productor/' + this.organisationId + '.rss';
+      if (this.organisationId) {
+        return api + "productor/" + this.organisationId + ".rss";
       }
-      if(this.playlist){
-        return api +'playlist/' + this.playlist.playlistId + '.rss';
+      if (this.playlist) {
+        return api + "playlist/" + this.playlist.playlistId + ".rss";
       }
-      return '';
+      return "";
     },
   },
-  async created(){
-    if(this.organisationId || this.participantId){
-      this.displayRss = await octopusApi.fetchDataPublic<boolean>(0,`rss/participants/allowed/${this.organisationId}`);
-    }else{
+  async created() {
+    if (this.organisationId || this.participantId) {
+      this.displayRss = await octopusApi.fetchDataPublic<boolean>(
+        0,
+        `rss/participants/allowed/${this.organisationId}`,
+      );
+    } else {
       this.displayRss = true;
     }
   },
 
   methods: {
-    getClass(className='btn-rss'): string{
+    getClass(className = "btn-rss"): string {
       return `btn ${className} share-btn mb-2 text-dark`;
     },
     openPopup(): void {
       this.dataRSSSave = !this.dataRSSSave;
     },
-    afterCopy(): void{
-      (this.$refs.snackbar as InstanceType<typeof Snackbar>).open(this.$t('Link in clipboard'));
+    afterCopy(): void {
+      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+        this.$t("Link in clipboard"),
+      );
     },
   },
-})
+});
 </script>