@saooti/octopus-sdk 40.2.6 → 40.2.8

package/package.json

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

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

@@ -0,0 +1,105 @@
+<template>
+    <div class="format-switch">
+      <input 
+        id="format-switch-checkbox"
+        :checked="isSvg"
+        class="format-switch-checkbox" 
+        type="checkbox" 
+        @input="$emit('update:isSvg', !isSvg)"/>
+      <label class="format-switch-label" for="format-switch-checkbox">
+        <span class="format-switch-label-span">SVG</span>
+      </label>
+    </div>
+  </template>
+  
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    name: "FormatSwitch",
+    props:{
+      isSvg: { default: true, type: Boolean },
+    },
+    emits: ['update:isSvg'],
+  });
+  </script>
+  <style lang="scss">
+  .octopus-app {
+
+    --format-switch-size:140px;
+    --format-switch-half: calc(var(--format-switch-size) / 2 );
+  
+    .format-switch {
+      background: var(--octopus-secondary);
+      border-radius: 30px;
+      overflow: hidden;
+      width: var(--format-switch-size);
+      text-align: center;
+      color: black;
+      border: 2px solid var(--octopus-secondary);
+      padding-right: var(--format-switch-half);
+      position: relative;
+  
+      &::before {
+        content: "PNG";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        width: var(--format-switch-half);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 3;
+        pointer-events: none;
+      }
+  
+    
+      &-checkbox {
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        z-index: 2;
+        margin: 0;
+  
+        & + .format-switch-label {
+          position: relative;
+          padding: 0.5rem 0;
+          display: block;
+          user-select: none;
+          pointer-events: none;
+  
+          &::before {
+            content: "";
+            background: white;
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            border-radius: 30px;
+            transform: translateX(var(--format-switch-half));
+            transition: transform 300ms;
+          }
+  
+          .format-switch-label-span {
+            position: relative;
+          }
+        }
+  
+        &:checked + .format-switch-label::before {
+          transform: translateX(0px);
+          transition: transform 300ms linear;
+        }
+      }
+  
+      &:has(input:focus-visible){
+        box-shadow: 0 0 10px 1px  var(--octopus-primary) !important;
+      }
+    }
+  }
+  </style>

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

@@ -15,7 +15,8 @@
         :data-color="color"
       />
     </div>
-    <qrcode-svg
+    <qrcode-vue
+      :render-as="renderQrCode"
       :value="url"
       :size="size"
       level="H"
@@ -23,9 +24,12 @@
       class="myQrCode"
       :margin="2"
     />
-    <button class="btn btn-primary my-3" @click="download">
-      {{ $t("Download") }}
-    </button>
+    <div class="d-flex align-items-center my-3">
+      <FormatSwitch class="me-3" v-model:isSvg="isSvg"/>
+      <button class="btn btn-primary" @click="download">
+        {{ $t("Download") }}
+      </button>
+    </div>
     <SnackBar ref="snackbar" position="bottom-left" />
   </div>
 </template>
@@ -34,7 +38,8 @@
 import { VSwatches } from "vue3-swatches";
 import "vue3-swatches/dist/style.css";
 import SnackBar from "../../misc/SnackBar.vue";
-import { QrcodeSvg } from "qrcode.vue";
+import QrcodeVue from "qrcode.vue";
+import FormatSwitch from "./FormatSwitch.vue";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
 import { mapActions } from "pinia";
 import { defineComponent } from "vue";
@@ -43,8 +48,9 @@ export default defineComponent({
 
   components: {
     SnackBar,
-    QrcodeSvg,
     VSwatches,
+    QrcodeVue,
+    FormatSwitch
   },
   props: {
     url: { default: "", type: String },
@@ -52,10 +58,16 @@ export default defineComponent({
   },
   data() {
     return {
-      size: 200 as number,
+      size: 1000 as number,
       color: "#000000" as string,
+      isSvg: true as boolean
     };
   },
+  computed:{
+    renderQrCode(){
+      return this.isSvg ? 'svg' : 'canvas';
+    }
+  },
   created() {
     this.initDefaultColor();
   },
@@ -63,18 +75,28 @@ export default defineComponent({
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
     download(): void {
       const canvas = document.getElementsByClassName("myQrCode");
-      if (canvas && canvas.length > 0 && canvas[0]) {
+      if (!canvas || canvas.length <=0 || !canvas[0]) {
+        return;
+      }
+      var downloadLink = document.createElement("a");
+      if (this.isSvg) {
         var svgData = canvas[0].outerHTML;
         var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
         var svgUrl = URL.createObjectURL(svgBlob);
-        var downloadLink = document.createElement("a");
         downloadLink.href = svgUrl;
         downloadLink.download = "qrcode.svg";
         downloadLink.click();
         (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
           this.$t("Download started"),
         );
+      }else{
+        downloadLink.download = "qrcode.png";
+        downloadLink.href = (canvas[0] as HTMLCanvasElement).toDataURL();
       }
+      downloadLink.click();
+      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+        this.$t("Download started"),
+      );
     },
     async initDefaultColor(): Promise<void> {
       if (undefined === this.orgaForColor) return;
@@ -86,3 +108,11 @@ export default defineComponent({
   },
 });
 </script>
+<style lang="scss">
+.octopus-app {
+  .myQrCode{
+    height: 200px !important;
+    width: 200px !important;
+  }
+}
+</style>

package/src/components/pages/PodcastPage.vue

@@ -26,7 +26,7 @@
           :emission="podcast?.emission"
           :organisation-id="authOrgaId"
         />
-        <CommentSection v-if="!isPodcastmaker" :podcast="podcast" />
+        <CommentSection :podcast="podcast" />
         <PodcastInlineList
           :emission-id="podcast.emission.emissionId"
           :href="'/main/pub/emission/' + podcast.emission.emissionId"