A decentralized music tracking and discovery platform built on AT Protocol 馃幍
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
1import { useState } from "react";
2
3export function Embed() {
4 const [url, setUrl] = useState<string>(""); // Initialize with an empty string
5
6 const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
7 const value = (e.target as any).value;
8 console.log("Input changed:", value); // Debugging log
9 setUrl(value);
10
11 if (
12 value.match(
13 /^https?:\/\/rocksky\.app\/did:plc:[a-z2-7]{24}\/scrobble\/[a-z0-9]{13,}$/,
14 )
15 ) {
16 alert("ok");
17 }
18 alert("z");
19 };
20
21 return (
22 <div className="min-h-screen w-1/3 flex items-center justify-center m-auto">
23 <div className="w-full">
24 <h1 className="text-4xl font-bold text-gray-800 mb-4 text-center">
25 Embed a Rocksky Scrobble
26 </h1>
27 {/*<iframe
28 src="https://api.rocksky.app/embed/did:plc:7vdlgi2bflelz7mmuxoqjfcr/scrobble/3mdtacalsqs23"
29 height={500}
30 width={500}
31 className="mt-[20px] border-none rounded-[10px]"
32 />*/}
33 <iframe
34 src="https://api.rocksky.app/embed/u/tsiry-sandratraina.com/top/artists"
35 height={500}
36 width={600}
37 className="mt-[20px] border-none rounded-[10px]"
38 />
39 </div>
40 </div>
41 );
42}