@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,85 +1,129 @@
 <template>
-  <b-card no-body class="player-parameters mt-3" v-if="!playlist">
-    <b-card-header header-tag="header" role="tab">
-      <b-button block v-b-toggle.playerParameters variant="info">{{
-        $t('player parameters')
-      }}</b-button>
-    </b-card-header>
-    <b-collapse id="playerParameters" role="tabpanel">
-      <b-card-body>
-        <b-card-text>
+  <div
+    v-if="!playlist"
+    id="accordionParameters"
+    class="accordion player-parameters mt-3"
+  >
+    <div class="accordion-item">
+      <h2
+        id="labelPlayerParameter"
+        class="accordion-header"
+      >
+        <button
+          class="accordion-button collapsed"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#playerParameters"
+          aria-expanded="false"
+          aria-controls="playerParameters"
+        >
+          {{ $t('player parameters') }}
+        </button>
+      </h2>
+      <div
+        id="playerParameters"
+        class="accordion-collapse collapse"
+        aria-labelledby="labelPlayerParameter"
+        data-bs-parent="#accordionParameters"
+      >
+        <div class="accordion-body">
           <div
-            class="d-flex flex-column flex-grow"
             v-if="
               !podcast || isEmission || isLargeEmission || isLargeSuggestion
             "
+            class="d-flex flex-column flex-grow"
           >
             <div
-              class="d-flex align-items-center w-100 flex-wrap mt-1"
               v-if="!podcast || isEmission || isLargeEmission"
+              class="d-flex align-items-center w-100 flex-wrap mt-1"
             >
-              <b-form-radio
+              <input
                 v-model="episodeNumbers"
+                class="form-check-input"
+                type="radio"
                 name="episodeNumbers"
                 value="all"
-              ></b-form-radio>
+              >
               <span class="flex-shrink">{{ $t('Show every episode') }}</span>
             </div>
             <div
               class="d-flex align-items-center flex-wrap"
               :class="!podcast || isEmission || isLargeEmission ? '' : 'mt-3'"
             >
-              <b-form-radio
+              <input
+                v-if="!podcast || isEmission || isLargeEmission"
                 v-model="episodeNumbers"
+                class="form-check-input"
+                type="radio"
                 name="episodeNumbers"
                 value="number"
-                v-if="!podcast || isEmission || isLargeEmission"
-              ></b-form-radio>
+              >
               <span class="flex-shrink">{{ $t('Show') }}</span>
               <input
                 id="number-input"
-                type="number"
                 v-model="iFrameNumber"
+                type="number"
                 min="1"
                 max="50"
                 class="input-share-player input-no-outline text-center m-2"
-              />
+              >
               <label
                 for="number-input"
                 class="d-inline"
                 :aria-label="$t('Number of player podcasts')"
-              ></label>
+              />
               <span class="flex-shrink">{{ $t('Last podcasts') }}</span>
             </div>
-            <div class="checkbox-saooti">
+            <div>
               <input
-                type="checkbox"
-                class="custom-control-input"
                 id="proceedCheck"
                 v-model="proceedReading"
-              />
-              <label class="custom-control-label" for="proceedCheck">{{
+                type="checkbox"
+                class="form-check-input"
+              >
+              <label
+                class="form-check-label"
+                for="proceedCheck"
+              >{{
                 $t('Proceed reading')
               }}</label>
             </div>
-            <div class="checkbox-saooti">
+            <div>
               <input
-                type="checkbox"
-                class="custom-control-input"
                 id="isVisibleCheckbox"
                 v-model="isVisibleTemp"
-              />
+                type="checkbox"
+                class="form-check-input"
+              >
               <label
-                class="custom-control-label mr-2"
+                class="form-check-label me-2"
                 for="isVisibleCheckbox"
-                >{{ $t('Podcasts still available') }}</label
+              >{{ $t('Podcasts still available') }}</label>
+            </div>
+          </div>
+          <div
+            v-else
+            class="d-flex flex-column flex-grow"
+          >
+            <div>
+              <input
+                id="proceedCheck"
+                v-model="displayArticle"
+                type="checkbox"
+                class="form-check-input"
               >
+              <label
+                class="form-check-label"
+                for="proceedCheck"
+              >{{
+                $t('Display associated article')
+              }}</label>
             </div>
           </div>
           <!-- <div class="d-flex align-items-center flex-wrap" v-if="podcast && iFrameModel !== 'emission'">
-              <div class="checkbox-saooti">  
-                <input type="checkbox" class="custom-control-input" id="startTime" v-model="startTime">  
-                <label class="custom-control-label mr-2" for="startTime">{{$t('Start at')}}</label>  
+              <div>  
+                <input type="checkbox" class="form-check-input" id="startTime" v-model="startTime">  
+                <label class="form-check-label me-2" for="startTime">{{$t('Start at')}}</label>  
               </div>
                 <input 
                 ref="minutesRef"
@@ -88,7 +132,7 @@
                 min="0"
                 class="input-share-player input-no-outline" 
                 @change="onDurationChange"/>
-                <div class="mr-1 ml-1">:</div>
+                <div class="me-1 ms-1">:</div>
               <input 
                 ref="secondesRef"
                 type="number"
@@ -98,112 +142,116 @@
                 class="input-share-player input-no-outline" 
                 @change="onDurationChange"/>
             </div> -->
-        </b-card-text>
-      </b-card-body>
-    </b-collapse>
-  </b-card>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<style lang="scss">
-.player-parameters.card {
-  border: 0;
-  .btn {
-    border-radius: 0;
-  }
-  .card-header {
-    border: 0;
-    background-color: #fafafa;
-    padding: 0;
-  }
-  .card-body {
-    padding: 0.25rem;
-    border: 0.05rem solid #eee;
-    background-color: #fafafa;
-    .custom-control {
-      padding-left: 0;
-    }
-    input[type='number'] {
-      padding-left: 10px;
-      text-align: center;
-      width: 90px;
-    }
-  }
-}
-</style>
+
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { Playlist } from '@/store/class/playlist';
+import { Podcast } from '@/store/class/podcast';
+import { defineComponent } from 'vue'
 export default defineComponent({
-  props: ['podcast', 'playlist', 'iFrameModel', 'isVisible'],
+  props: {
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    playlist: { default: undefined, type: Object as ()=> Playlist},
+    iFrameModel: { default: undefined, type: String},
+    isVisible: { default: false, type: Boolean},
+  },
+  emits: ['startTime', 'episodeNumbers', 'proceedReading', 'isVisible', 'iFrameNumber', 'displayArticle'],
 
-  emits: ['startTime', 'episodeNumbers', 'proceedReading', 'isVisible', 'iFrameNumber'],
   data() {
     return {
-      proceedReading: true,
-      episodeNumbers: 'number',
-      iFrameNumberPriv: '3',
-      minutes: 0,
-      secondes: 0,
-      startTime: true,
-      isVisibleTemp: this.isVisible,
-    };
-  },
-  setup() {
-    const minutesRef:any =ref(null);
-    const secondesRef:any =ref(null);
-    return {
-      minutesRef,secondesRef
+      proceedReading: true as boolean,
+      episodeNumbers: 'number' as string,
+      iFrameNumberPriv: '3' as string,
+      minutes: 0 as number,
+      secondes: 0 as number,
+      startTime: true as boolean,
+      isVisibleTemp: this.isVisible as boolean,
+      displayArticle: true as boolean,
     };
   },
   computed: {
     iFrameNumber: {
-      get(): any {
+      get(): string {
         return this.iFrameNumberPriv;
       },
-      set(value:any) {
-        let val = parseInt(value, 10);
+      set(value: string) {
+        const val = parseInt(value, 10);
         if (!isNaN(val) && val >= 1 && val <= 50) {
           this.iFrameNumberPriv = value;
         }
       },
     },
-    isEmission():boolean {
+    isEmission(): boolean {
       return 'emission' === this.iFrameModel;
     },
-    isLargeEmission():boolean {
+    isLargeEmission(): boolean {
       return 'largeEmission' === this.iFrameModel;
     },
-    isLargeSuggestion():boolean {
+    isLargeSuggestion(): boolean {
       return 'largeSuggestion' === this.iFrameModel;
     },
   },
-
-  methods: {
-    onDurationChange() {
-      if (this.startTime) {
-        let minutes = parseInt(this.minutesRef.value, 10);
-        let secondes = parseInt(this.secondesRef.value, 10);
-        this.$emit('startTime', minutes * 60 + secondes);
-      } else {
-        this.$emit('startTime', 0);
-      }
-    },
-  },
-
   watch: {
-    episodeNumbers() {
+    episodeNumbers(): void {
       this.$emit('episodeNumbers', this.episodeNumbers);
     },
-    proceedReading() {
+    proceedReading(): void {
       this.$emit('proceedReading', this.proceedReading);
     },
-    isVisibleTemp() {
+    isVisibleTemp(): void {
       this.$emit('isVisible', this.isVisibleTemp);
     },
-    isVisible() {
+    isVisible(): void {
       this.isVisibleTemp = this.isVisible;
     },
-    iFrameNumberPriv() {
+    iFrameNumberPriv(): void {
       this.$emit('iFrameNumber', this.iFrameNumberPriv);
     },
+    displayArticle(): void{
+      this.$emit('displayArticle', this.displayArticle);
+    }
+  },
+  methods: {
+    onDurationChange(): void {
+      if (this.startTime) {
+        const minutes = parseInt((this.$refs.minutesRef as any).value, 10);
+        const secondes = parseInt((this.$refs.secondesRef as any).value, 10);
+        this.$emit('startTime', minutes * 60 + secondes);
+      } else {
+        this.$emit('startTime', 0);
+      }
+    },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.player-parameters.card {
+  border: 0;
+  .btn {
+    border-radius: 0;
+  }
+  .card-header {
+    border: 0;
+    background-color: #fafafa;
+    padding: 0;
+  }
+  .card-body {
+    padding: 0.25rem;
+    border: 0.05rem solid #eee;
+    background-color: #fafafa;
+    .custom-control {
+      padding-left: 0;
+    }
+    input[type='number'] {
+      padding-left: 10px;
+      text-align: center;
+      width: 90px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="d-flex flex-column align-items-center">
+    <qrcode-vue
+      :value="url"
+      :size="size"
+      level="H"
+      foreground="#40a372"
+      class="myQrCode"
+    />
+    <button
+      class="btn m-3"
+      @click="download"
+    >
+      {{ $t('Download') }}
+    </button>
+    <Snackbar
+      ref="snackbar"
+      position="bottom-left"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Snackbar from '../../misc/Snackbar.vue';
+import QrcodeVue from 'qrcode.vue'
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'QrCode',
+
+  components: {
+    Snackbar,
+    QrcodeVue
+  },
+  props: {
+    url: { default: '', type: String},
+  },
+
+  data() {
+    return {
+      size: 200 as number,
+    };
+  },
+  methods:{
+    download(): void{
+      const link = document.createElement('a');
+      link.download = 'qrcode.png';
+      const canvas = document.getElementsByClassName('myQrCode');
+      if(canvas && canvas.length > 0 && canvas[0] && canvas[0].firstChild){
+        link.href = (canvas[0].firstChild as any).toDataURL();
+        link.click();
+        (this.$refs.snackbar as any).open(this.$t('Download started'));
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss"></style>