music

sandwichfarm · Feb 13, 2024 · 1be5503 · 1be5503
1 parent 9623d3c
commit 1be5503
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "nostr-fetch": "^0.15.0",
     "nostr-tools": "2.1.5",
     "svelte": "^4.2.8",
-    "svelte-sound": "^0.6.0"
+    "tone": "^14.7.77"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",

diff --git a/src/App.svelte b/src/App.svelte
@@ -1,25 +1,21 @@
 <script>
   document.title = "nostrpul.se";
 
-  // import "websocket-polyfill";
-
   import { onMount, afterUpdate, tick } from "svelte";
   import { fade } from "svelte/transition";
   import { writable } from "svelte/store";
 
   import Modal from "./Modal.svelte";
 
-  import { NostrFetcher } from "nostr-fetch"
+  import * as Tone from "tone";
+  import ToneGenerator from "./tone";
+
+  import { NostrFetcher } from "nostr-fetch";
   import { Relay } from "nostr-tools";
-  // import { simplePoolAdapter } from "@nostr-fetch/adapter-nostr-tools";
 
   import Masonry from "masonry-layout";
 
-  import { Sound } from "svelte-sound";
-  import tone_file from "./assets/tone.mp3";
-
-  const tone = new Sound(tone_file);
-
+  let toneGenerator;
 
   import { generateBackground } from "./utils";
 
@@ -37,13 +33,17 @@
   const loading30166 = writable(false);
   const event30166 = writable(null);
   let activeTab = writable(0); // Currently selected tab index
-  let focusRelay = writable(null)
+  let focusRelay = writable(null);
 
   let loading = true;
   let masonry;
   let initialSyncComplete = false;
   let since = Math.round(Date.now() / 1000) - 60 * 60 * 1.1;
 
+  const newEvents = [];
+  
+  let eventRunner
+
   $: if ($activeTab) {
     event30166.set(null);
     const ev = get30166($focusRelay)
@@ -57,9 +57,9 @@
   // let currentRelayModal = null;
 
   function hideModals() {
-    activeTab.set(0)
-    focusRelay.set(null)
-    event30166.set(null)
+    activeTab.set(0);
+    focusRelay.set(null);
+    event30166.set(null);
     hideGenericModal();
     hideRelayModal();
   }
@@ -73,7 +73,7 @@
   }
 
   function showRelayModal(ev) {
-    focusRelay.set(getUrlFromEvent(ev))
+    focusRelay.set(getUrlFromEvent(ev));
     currentRelayModal = ev.id;
   }
 
@@ -93,25 +93,40 @@
     };
   }
 
-  const on_event_handler = (event) => {
-    if (initialSyncComplete && event.created_at < since) return;
-    const processedEvent = processEvent(event);
-    since = event.created_at;
+  const updateEvents = (processedEvent) => {
     if (processedEvent) {
       k30066.update((currentk30066) => {
         return [processedEvent, ...currentk30066].filter(
           (v, i, a) => a.findIndex((t) => t.dTag === v.dTag) === i,
         );
       });
     }
-    if (!initialSyncComplete) return;
+  };
+
+  const queueEvent = (event) => {
+    newEvents.push(event);
+  };
+
+  const populateNextEvent = () => {
+    if(!newEvents.length) return
+    const event = newEvents.shift()
+    updateEvents(event);
     processBatch();
-    if(!isMuted) tone.play()
-    // console.log(event.id)
+    if (!isMuted) toneGenerator.playNextNote();
+  };
+
+  const on_event_handler = (event) => {
+    if (initialSyncComplete && event.created_at < since) return;
+    const processedEvent = processEvent(event);
+    since = event.created_at;
+    if (!initialSyncComplete) 
+      updateEvents(processedEvent);
+    else 
+      queueEvent(processedEvent);
   };
 
   async function initialSync() {
-    const fetcher = NostrFetcher.init()
+    const fetcher = NostrFetcher.init();
     const iter = fetcher.allEventsIterator(
       ["wss://history.nostr.watch"],
       {
@@ -130,7 +145,9 @@
   }
 
   const continuousSync = async () => {
-    RelaySocket = await Relay.connect("wss://history.nostr.watch").catch(continuousSync);
+    RelaySocket = await Relay.connect("wss://history.nostr.watch").catch(
+      continuousSync,
+    );
     RelaySocket.subscribe(
       [
         {
@@ -159,15 +176,15 @@
   };
 
   async function get30166(relay) {
-    console.log(`getting 30166 for ${relay.url}`)
+    console.log(`getting 30166 for ${relay.url}`);
     return new Promise(async (resolve) => {
       RelaySocket = await Relay.connect("wss://history.nostr.watch").catch(
         console.error,
       );
       RelaySocket.subscribe(
         [
           {
-            "#d": [relay], 
+            "#d": [relay],
             limit: 1,
             kinds: [30166],
             authors: [MONITOR],
@@ -219,13 +236,13 @@
     return ev;
   }
 
-  function getUrlFromEvent(event){
+  function getUrlFromEvent(event) {
     return event.tags.filter((tag) => tag[0] == "d")?.[0]?.[1];
   }
 
   function parse30066(event) {
     const parsedTags = {};
-    const url = getUrlFromEvent(event)
+    const url = getUrlFromEvent(event);
     if (!url) return { error: "no d tag?" };
     const tags = event.tags.filter((tag) => tag.length >= 3);
     tags.forEach((tag) => {
@@ -288,17 +305,17 @@
 
   onMount(async () => {
     await initialSync();
+    eventRunner = setInterval( populateNextEvent, 500 )
     await continuousSync();
-
     return () => {
+      clearInterval(eventRunner)
       RelaySocket.close();
     };
   });
 
   function processBatch() {
     if (!initialSyncComplete) initialSyncComplete = true;
     k30066.update((currentk30066) => [...currentk30066]);
-    
   }
 
   function calculateDimensions(event) {
@@ -377,9 +394,12 @@
   let isMuted = true; // Initial state of the sound, assuming it starts muted
 
   // Function to toggle the muted state
-  function toggleMute() {
+  async function toggleMute() {
     isMuted = !isMuted;
-    // Here, you can also add logic to actually control the audio
+    if (isMuted) return;
+    if (Tone.context.state !== "running") await Tone.start();
+    else Tone.Transport.cancel();
+    if (!toneGenerator) toneGenerator = new ToneGenerator();
   }
 
   window.addEventListener("resize", () => {
@@ -390,8 +410,13 @@
 </script>
 
 {#if initialSyncComplete}
-  <button on:click={toggleMute} class="mute">
-    {isMuted ? '🔇' : '🔈'}
+  <button
+    on:click={() => {
+      toggleMute();
+    }}
+    class="mute"
+  >
+    {isMuted ? "🔇" : "🔈"}
   </button>
   <div id="header">
     <span class="sitetitle">nostrpul.se</span>
@@ -442,7 +467,9 @@
           on:click={() => showRelayModal(ev)}
           role="button"
           tabindex="0"
-          on:keydown={(event) => { event.key === "Enter" && showRelayModal(ev) } }
+          on:keydown={(event) => {
+            event.key === "Enter" && showRelayModal(ev);
+          }}
         >
           <span class="rtt">{rttDisplay("open", ev)}</span>
           <span class="rtt">{rttDisplay("read", ev)}</span>
@@ -685,15 +712,27 @@
   }
 
   .mute {
-    display:inline;
-    background:none;
-    border:none;
-    position:absolute;
-    top:10px;
-    left:50%;
+    display: inline;
+    background: none;
+    border: none;
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+    font-size: 3em;
+  }
+
+  .test {
+    display: inline;
+    background: none;
+    border: none;
+    position: absolute;
+    top: 50px;
+    left: 50%;
     transform: translateX(-50%);
     z-index: 100;
-    font-size:3em;
+    font-size: 3em;
   }
 
   @media (max-width: 600px) {
@@ -754,7 +793,7 @@
     }
 
     .mute {
-      display:none;
+      display: none;
     }
   }
 </style>
diff --git a/yarn.lock b/yarn.lock
@@ -10,6 +10,13 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@babel/runtime@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@esbuild/[email protected]":
   version "0.19.12"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
@@ -335,6 +342,14 @@ aria-query@^5.3.0:
   dependencies:
     dequal "^2.0.3"
 
+automation-events@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/automation-events/-/automation-events-7.0.0.tgz#241ecfb2eac48a8e2ca1421bd60912665565213c"
+  integrity sha512-z2aGVy+pPbg3E619qRucLx5ZZqVFbcHCIF1vjx/0B3uQih5mUtuCtWEET+aYbG8Au12ikA5LTAhgoQJvGi3aWg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    tslib "^2.6.2"
+
 axobject-query@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.0.0.tgz#04a4c90dce33cc5d606c76d6216e3b250ff70dab"
@@ -840,6 +855,11 @@ postcss@^8.4.32:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 robust-predicates@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
@@ -882,6 +902,15 @@ source-map-js@^1.0.1, source-map-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+standardized-audio-context@^25.1.8:
+  version "25.3.64"
+  resolved "https://registry.yarnpkg.com/standardized-audio-context/-/standardized-audio-context-25.3.64.tgz#bbbe9b31fef5537b0901c0f8a6ae4fd06bfc97c1"
+  integrity sha512-yo4SvErg1MWIYsAJ+nX18gLTacffBQ0DaJWBqFI63jao9Ue2EOriad4FKM3xQlWc85NPHMm4pJ2XnvdTAN05iw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    automation-events "^7.0.0"
+    tslib "^2.6.2"
+
 svelte-hmr@^0.15.3:
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.3.tgz#df54ccde9be3f091bf5f18fc4ef7b8eb6405fbe6"
@@ -914,6 +943,19 @@ svelte@^4.2.8:
     magic-string "^0.30.4"
     periscopic "^3.1.0"
 
+tone@^14.7.77:
+  version "14.7.77"
+  resolved "https://registry.yarnpkg.com/tone/-/tone-14.7.77.tgz#12a2a9f033952ccdb552275a6384ca5d36d4b5ed"
+  integrity sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==
+  dependencies:
+    standardized-audio-context "^25.1.8"
+    tslib "^2.0.1"
+
+tslib@^2.0.1, tslib@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 vite@^5.0.8:
   version "5.0.12"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.12.tgz#8a2ffd4da36c132aec4adafe05d7adde38333c47"