Migrate EmbedWizard

front/src/components/audio/EmbedWizard.vue

@@ -1,3 +1,48 @@
+<script setup lang="ts">
+import { get } from 'lodash-es'
+import { ref, computed } from 'vue'
+import { useStore } from '~/store'
+import { useClipboard } from '@vueuse/core'
+
+interface Props {
+  type: string
+  id: string
+}
+
+const props = defineProps<Props>()
+const width = ref(null)
+const height = ref(150)
+const minHeight = ref(100)
+
+if (props.type === 'album' || props.type === 'artist' || props.type === 'playlist') {
+  height.value = 330
+  minHeight.value = 250
+}
+
+const store = useStore()
+const nodeinfo = computed(() => store.state.instance.nodeinfo)
+const anonymousCanListen = computed(() => get(nodeinfo.value, 'metadata.library.anonymousCanListen', false))
+const iframeSrc = computed(() => {
+  const base = import.meta.env.BASE_URL.startsWith('/')
+    ? `${window.location.origin}${import.meta.env.BASE_URL}`
+    : import.meta.env.BASE_URL
+
+  const instanceUrl = store.state.instance.instanceUrl as string
+
+  const bParam = !window.location.href.startsWith(instanceUrl)
+    ? `&b=${instanceUrl}`
+    : ''
+  
+  return `${base}embed.html?&type=${props.type}&id=${props.id}${bParam}`
+})
+
+const frameWidth = computed(() => width.value ?? '100%')
+const embedCode = computed(() => `<iframe width="${frameWidth.value}" height="${height.value}" scrolling="no" frameborder="no" src="${iframeSrc.value.replace(/&/g, '&amp;')}"></iframe>`)
+
+const textarea = ref()
+const { copy, copied } = useClipboard({ source: textarea })
+</script>
+
 <template>
   <div>
     <div
@@ -52,7 +97,7 @@
         <div class="field">
           <button
             class="ui right accent labeled icon floated button"
-            @click="copy"
+            @click="copy()"
           >
             <i class="copy icon" /><translate translate-context="*/*/Button.Label/Short, Verb">
               Copy
@@ -102,73 +147,3 @@
     </div>
   </div>
 </template>
-
-<script>
-
-import { mapState } from 'vuex'
-import { get } from 'lodash-es'
-
-export default {
-  props: {
-    type: { type: String, required: true },
-    id: { type: Number, required: true }
-  },
-  data () {
-    const d = {
-      width: null,
-      height: 150,
-      minHeight: 100,
-      copied: false
-    }
-    if (this.type === 'album' || this.type === 'artist' || this.type === 'playlist') {
-      d.height = 330
-      d.minHeight = 250
-    }
-    return d
-  },
-  computed: {
-    ...mapState({
-      nodeinfo: state => state.instance.nodeinfo
-    }),
-    anonymousCanListen () {
-      return get(this.nodeinfo, 'metadata.library.anonymousCanListen', false)
-    },
-    iframeSrc () {
-      let base = import.meta.env.BASE_URL
-      if (base.startsWith('/')) {
-        // include hostname/protocol too so that the iframe link is absolute
-        base = `${window.location.protocol}//${window.location.host}${base}`
-      }
-      const instanceUrl = this.$store.state.instance.instanceUrl
-      let b = ''
-      if (!window.location.href.startsWith(instanceUrl)) {
-        // the frontend is running on a separate domain, so we need to provide
-        // the b= parameter in the iframe
-        b = `&b=${instanceUrl}`
-      }
-      return `${base}embed.html?&type=${this.type}&id=${this.id}${b}`
-    },
-    frameWidth () {
-      if (this.width) {
-        return this.width
-      }
-      return '100%'
-    },
-    embedCode () {
-      const src = this.iframeSrc.replace(/&/g, '&amp;')
-      return `<iframe width="${this.frameWidth}" height="${this.height}" scrolling="no" frameborder="no" src="${src}"></iframe>`
-    }
-  },
-  methods: {
-    copy () {
-      this.$refs.textarea.select()
-      document.execCommand('Copy')
-      const self = this
-      self.copied = true
-      this.timeout = setTimeout(() => {
-        self.copied = false
-      }, 5000)
-    }
-  }
-}
-</script>