@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,209 +1,167 @@
 <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
+    id="accordionParameters"
+    class="accordion mt-3"
+  >
+    <div class="accordion-item">
+      <h2
+        id="labelPlayerParameter"
+        class="accordion-header mb-0"
+      >
+        <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"
+        titleledby="labelPlayerParameter"
+        data-bs-parent="#accordionParameters"
+      >
+        <div class="accordion-body">
           <div
-            class="d-flex flex-column flex-grow"
-            v-if="
-              !podcast || isEmission || isLargeEmission || isLargeSuggestion
-            "
+            v-if="choseNumberEpisode"
+            class="d-flex flex-column flex-grow-1"
           >
             <div
-              class="d-flex align-items-center w-100 flex-wrap mt-1"
-              v-if="!podcast || isEmission || isLargeEmission"
+              v-if="displayChoiceAllEpisodes"
+              class="d-flex align-items-center 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>
+              >
+              <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
             </div>
             <div
               class="d-flex align-items-center flex-wrap"
-              :class="!podcast || isEmission || isLargeEmission ? '' : 'mt-3'"
+              :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
             >
-              <b-form-radio
+              <input
+                v-if="displayChoiceAllEpisodes"
                 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>
+              >
+              <span class="flex-shrink-0">{{ $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"
-              />
+                class="input-share-player  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">
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                id="proceedCheck"
-                v-model="proceedReading"
+                :title="$t('Number of player podcasts')"
               />
-              <label class="custom-control-label" for="proceedCheck">{{
-                $t('Proceed reading')
-              }}</label>
-            </div>
-            <div class="checkbox-saooti">
-              <input
-                type="checkbox"
-                class="custom-control-input"
-                id="isVisibleCheckbox"
-                v-model="isVisibleTemp"
-              />
-              <label
-                class="custom-control-label mr-2"
-                for="isVisibleCheckbox"
-                >{{ $t('Podcasts still available') }}</label
-              >
+              <span class="flex-shrink-0">{{ $t('Last podcasts') }}</span>
             </div>
+            <ClassicCheckbox
+              v-model:textInit="proceedReading"
+              id-checkbox="proceed-reading-checkbox"
+              :label="$t('Proceed reading')"
+            />
+            <ClassicCheckbox
+              v-model:textInit="isVisibleTemp"
+              id-checkbox="is-visible-checkbox"
+              :label="$t('Podcasts still available')"
+            />
           </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 
-                ref="minutesRef"
-                type="number"
-                :value="minutes" 
-                min="0"
-                class="input-share-player input-no-outline" 
-                @change="onDurationChange"/>
-                <div class="mr-1 ml-1">:</div>
-              <input 
-                ref="secondesRef"
-                type="number"
-                :value="secondes" 
-                min="0"
-                max="59"
-                class="input-share-player input-no-outline" 
-                @change="onDurationChange"/>
-            </div> -->
-        </b-card-text>
-      </b-card-body>
-    </b-collapse>
-  </b-card>
+          <div
+            v-else
+            class="d-flex flex-column flex-grow-1"
+          >
+            <ClassicCheckbox
+              v-model:textInit="displayArticle"
+              id-checkbox="display-article-checkbox"
+              :label="$t('Display associated article')"
+            />
+          </div>
+        </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 ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import { defineComponent } from 'vue'
 export default defineComponent({
-  props: ['podcast', 'playlist', 'iFrameModel', 'isVisible'],
+  components:{
+    ClassicCheckbox,
+  },
+  props: {
+    isVisible: { default: false, type: Boolean},
+    choseNumberEpisode: {default: false, type: Boolean},
+    displayChoiceAllEpisodes: {default: false, type: Boolean}
+  },
+  emits: ['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,
+      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 {
-      return 'emission' === this.iFrameModel;
-    },
-    isLargeEmission():boolean {
-      return 'largeEmission' === this.iFrameModel;
-    },
-    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);
+    }
   },
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+  .input-share-player {
+    border: 1px solid #ddd;
+    border-radius: 50px;
+    width: 60px;
+  }
+}
+</style>

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

@@ -0,0 +1,96 @@
+<template>
+  <div class="d-flex flex-column align-items-center">
+    <qrcode-vue
+      :value="url"
+      :size="size"
+      level="H"
+      :foreground="color"
+      class="myQrCode"
+      :margin="2" 
+    />
+    <ClassicCheckbox
+      v-if="'#000000'!==otherColor"
+      v-model:textInit="isNotBlack"
+      class="flex-shrink-0"
+      id-checkbox="is-black-qr-code"
+      :label="$t('Use organization color')"
+    />
+    <button
+      class="btn m-3"
+      @click="download"
+    >
+      {{ $t('Download') }}
+    </button>
+    <Snackbar
+      ref="snackbar"
+      position="bottom-left"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import { state } from '../../../store/paramStore';
+import octopusApi from '@saooti/octopus-api';
+import Snackbar from '../../misc/Snackbar.vue';
+import QrcodeVue from 'qrcode.vue'
+import { defineComponent } from 'vue'
+import SnackbarVue from '../../misc/Snackbar.vue';
+export default defineComponent({
+  name: 'QrCode',
+
+  components: {
+    Snackbar,
+    QrcodeVue,
+    ClassicCheckbox
+  },
+  props: {
+    url: { default: '', type: String},
+  },
+
+  data() {
+    return {
+      size: 200 as number,
+      color: "#000000" as string,
+      otherColor:"#000000" as string,
+      isNotBlack: false as boolean,
+    };
+  },
+  watch:{
+    isNotBlack(){
+      this.color = this.isNotBlack ? this.otherColor : "#000000";
+    }
+  },
+  created(){
+    this.initColor();
+  },
+  methods:{
+    download(): void{
+      const link = document.createElement('a');
+      link.download = 'qrcode.png';
+      const canvas = document.getElementsByClassName('myQrCode');
+      if(canvas && canvas.length > 0 && canvas[0]){
+        link.href = (canvas[0] as HTMLCanvasElement).toDataURL();
+        link.click();
+        (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Download started'));
+      }
+    },
+    async initColor(): Promise<void> {
+      if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
+        this.otherColor = state.generalParameters.podcastmakerColor;
+        return;
+      }
+      if (!state.generalParameters.authenticated) return;
+      let data;
+      if(this.$store.state.organisation?.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
+        data = this.$store.state.organisation.attributes;
+      }else{
+        data= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
+      }
+      if (Object.prototype.hasOwnProperty.call(data,'COLOR')) {
+        this.otherColor = data.COLOR;
+      }
+    },
+  }
+})
+</script>