fix(modal)

package-lock.json

@@ -6435,11 +6435,6 @@
         "to-regex": "^3.0.2"
       }
     },
-    "micromodal": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.4.2.tgz",
-      "integrity": "sha512-tL8Z6Vi72haNUNlkhLjJJv1Q16eqUWMPAGT4RF7mwDM5DNyJXC67Yj8jw/yVgGYdhnCEBBf3X5JM3d/MpXSEKg=="
-    },
     "miller-rabin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",

package.json

@@ -30,7 +30,6 @@
     "date-fns": "^2.9.0",
     "get-urls": "^9.2.0",
     "iter-tools": "^7.0.0-rc.0",
-    "micromodal": "^0.4.2",
     "route-parser": "0.0.5",
     "svelte-pipeable-store": "^1.0.3",
     "svelte-portal": "^0.1.0",

src/components/ContextMenu.svelte

@@ -1,61 +1,54 @@
-<button class="contextMenu__item" on:click={() => openShare()}>Share this song</button>
+<button class="contextMenu__item" on:click={() => showModal()}>Share this song</button>
-<a class="contextMenu__item" href="" target="_blank">Link to toot</a>
+<a class="contextMenu__item" href={track.referer.url} target="_blank">Link to toot</a>
-<a class="contextMenu__item" href="" target="_blank">Link to media</a>
+<a class="contextMenu__item" href={track.media.url} target="_blank">Link to media</a>
 
 <!-- Sharemodal -->
 <Portal target="{document.body}">
-    <div class="modal" id="share-modal" aria-hidden="true">
+    {#if open}
-        <div class="modal__overlay" tabindex="-1" on:click={() => closeModal()}></div>
+        <div class="modal">
+            <div class="modal__overlay" tabindex="-1" on:click={() => hideModal()}></div>
 
-        <div class="modal__container" role="dialog" aria-modal="true">
+            <div class="modal__container" role="dialog" aria-modal="true">
-            <button class="modal__close" aria-label="close" on:click={() => closeModal()}></button>
+                <button class="modal__close" aria-label="close" on:click={() => hideModal()}></button>
-            <div class="modal__title">Share this song</div>
+                <div class="modal__title">Share this song</div>
-            <div class="modal__content">
+                <div class="modal__content">
-                <input class="modalShare__input f-size-full w100" readonly type="text" value={shareUrlInput}>
+                    <input class="modalShare__input f-size-full w100" readonly type="text" value={shareUrlInput}>
-                <div class="modalShare__controls">
+                    <div class="modalShare__controls">
-                    <div class="modalShare__bigplayer">
+                        <div class="modalShare__bigplayer">
-                        <input type="checkbox" id="bigplayer_active" bind:checked={isBigPlayer}>
+                            <input type="checkbox" id="bigplayer_active" bind:checked={isBigPlayer}>
-                        <label for="bigplayer_active">active big player {isBigPlayer}</label>
+                            <label for="bigplayer_active">active big player</label>
+                        </div>
+                        <button class="modalShare__copy" on:click={() => copyUrl()}>copy</button>
                     </div>
-                    <button class="modalShare__copy" on:click={() => copyUrl()}>copy</button>
                 </div>
             </div>
         </div>
-    </div>
+    {/if}
 </Portal>
 
 <script>
-import copy from 'copy-to-clipboard';
+    import { getContext } from 'svelte'
-import { onMount, getContext } from 'svelte';
+    import Portal from 'svelte-portal'
-import Portal from 'svelte-portal';
+    import copy from 'copy-to-clipboard'
-import MicroModal from 'micromodal';
 
-export let shareUrl
+    export let track
 
-let isBigPlayer = false
+    let open = false
+    let isBigPlayer = false
+    $: shareUrlInput = track.shareUrl + (isBigPlayer ? '?large' : '')
 
-$: shareUrlInput = shareUrl + (isBigPlayer ? '?large' : '')
+    const closeMenu = getContext('closeMenu')
-$: console.log(shareUrl)
-$: console.log(shareUrlInput)
-const closeMenu = getContext('closeMenu')
-
-function openShare () {
-    MicroModal.show('share-modal')
-    closeMenu()
-}
-
-function closeModal () {
-    MicroModal.close('share-modal');
-}
-
-function copyUrl () {
-    copy(shareUrl)
-}
-
-onMount(() => {
-    MicroModal.init();
-})
 
+    function showModal () {
+        open = true
+        closeMenu()
+    }
 
+    function hideModal () {
+        open = false
+    }
 
+    function copyUrl () {
+        copy(shareUrlInput)
+    }
 </script>

src/components/Controls.svelte

@@ -28,7 +28,7 @@
             <button slot="btn" class="controls__menuBtn" aria-label="track menu"><IconMenu></IconMenu></button>
             <div slot="content" class="contextMenu__list">
                 {#if $current}
-                    <ContextMenu shareUrl={$current.shareUrl}></ContextMenu>
+                    <ContextMenu track={$current}></ContextMenu>
                 {/if}
             </div>
         </Popper>

src/components/Queue.svelte

@@ -17,7 +17,7 @@
                 <Popper>
                     <button slot="btn" class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
                     <div slot="content" class="contextMenu__list">
-                        <ContextMenu shareUrl={$next.shareUrl}></ContextMenu>
+                        <ContextMenu track={$next}></ContextMenu>
                     </div>
                 </Popper>
             {/if}
@@ -39,7 +39,7 @@
                 <Popper>
                     <button slot="btn" class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
                     <div slot="content" class="contextMenu__list">
-                        <ContextMenu shareUrl={track.shareUrl}></ContextMenu>
+                        <ContextMenu track={track}></ContextMenu>
                     </div>
                 </Popper>
             </div>