keanu-weblite/src/components/CopyLink.vue

<template>
<div>
  <v-expand-transition>
    <v-card class="ma-3" v-show="locationLink" variant="flat">
      <v-container>
        <slot/>
        <v-row cols="12" class="qr-container mt-3 ml-3 mr-3">
          <v-col cols="auto">
            <canvas
              v-longTap:250="[
                ()=> {
                  showFullScreenQR = true;
                },
                (el) => { $emit('long-tap', el); }
              ]"
              ref="roomQr"
              class="qr"
              id="room-qr"
            ></canvas>
            <slot name="share"></slot>
          </v-col>
          <v-col align-self="center" class="public-link">
            <div class="link">{{ locationLink }}</div>
          </v-col>
        </v-row>
        <v-row v-if="mirrors.length > 0" justify="end" class="mt-3">
          <v-col cols="auto">
            <v-select
              :items="mirrors"
              v-model="currentMirror"
              :menu-props="{ auto: true }"
              hide-details
              single-line
              density="compact"
              bg-color="transparent"
              variant="solo"
              flat
            >
          <template v-slot:selection>
            <span style="font-size: 0.8rem">Use a mirror</span>
          </template>
        </v-select>
          </v-col>
        </v-row>
        <v-row align="center" class="mt-3 pt-0">
          <v-col align="center" class="mt-0 pt-0">
            <v-btn
              id="btn-copy-room-link"
              :color="locationLinkCopied ? '#DEE6FF' : 'black'"
              variant="flat"
              @click.stop="copyRoomLink"
              :class="{'filled-button' : true, 'link-copied-in-place' : locationLinkCopied}"
              >{{ $t(`room_info.${locationLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
            >
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-expand-transition>
  <QRCodePopup :show="showFullScreenQR" :message="locationLink" :title="popupTitle" @close="showFullScreenQR = false" />
</div>
</template>

<script>
import QRCode from "qrcode";
import QRCodePopup from './QRCodePopup.vue';

export default {
  components: {
    QRCodePopup
  },
  emits: ['mirror-change'],
  props: {
    locationLink: {
      type: String
    },
    i18nCopyLinkKey: {
      type: String,
      default: 'copy_link'
    },
    i18nQrPopupTitleKey: {
      type: String,
      default: 'room_info.scan_code'
    },
    allowMirrors: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      locationLinkCopied: false,
      showFullScreenQR: false,
      currentMirror: "",
    }
  },
  computed: {
    popupTitle() {
      return this.$t(this.i18nQrPopupTitleKey);
    },
    mirrors() {
      if (this.allowMirrors) {
        const m = this.$config.mirrors;
        if (m && Array.isArray(m) && m.length > 0) {
          return m;
        }
      }
      return [];
    }
  },
  methods: {
    copyRoomLink() {
      if(this.locationLinkCopied) return
      const self = this;
      this.$copyText(this.locationLink).then(
        function (ignored) {
          // Success!
          self.locationLinkCopied = true;
          setInterval(() => {
            // Hide again
            self.locationLinkCopied = false;
          }, 3000);
        },
        function (e) {
          console.log(e);
        }
      );
    },
    updateQRCode() {
      var fullUrl = this.locationLink;
      var canvas = this.$refs.roomQr;
      if (fullUrl && canvas) {
        QRCode.toCanvas(
          canvas,
          fullUrl,
          {
            type: "image/png",
            margin: 1,
            width: canvas.getBoundingClientRect().width,
          },
          function (error) {
            if (error) console.error(error);
            else console.log("success!");
          }
        );
      }
    },
  },
  watch: {
    locationLink: {
      handler() {
        this.updateQRCode();
      }
    },
    currentMirror: {
      handler(newVal) {
        this.$emit("mirror-change", newVal);
      }
    }
  },
  mounted() {
    this.updateQRCode();
  }
}
</script>

<style lang="scss">
  .qr-container {
    background-color: white;
    border-radius: 8px;
    margin-top: 20px !important;
    .qr {
      width: 60px;
      height: 60px;
      background-color: #e0e0e0;
    }
    .public-link {
      background-color: #D6D5FC33;
      border-radius: 11px;
      .link {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        text-decoration: underline;
        color: #3d6eff;
        overflow-wrap: anywhere;
      }
    }

  }

  .link-copied-in-place .v-btn__content {
    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    text-transform: none !important;
    color: #3d6eff;
  }
</style>