whats-going-on/index.html at main · jacksongoode/whats-going-on · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>What's Going On?</title>
        <link rel="stylesheet" href="styles.css" />
        <link
            rel="icon"
            href="public/assets/img/garfield-bg.png"
            type="image/png"
        />
        <!-- Import Lucide icons globally -->
        <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
        <script>
            window.addEventListener("DOMContentLoaded", () => {
                lucide.createIcons();
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="title-container">
                <div class="title-row">
                    <h1 class="title">What's Going On?</h1>
                    <img
                        src="public/assets/img/garfield-bg.png"
                        alt="Garfield"
                        class="garfield-icon"
                    />
                </div>
                <div class="description">
                    Born from police violence targeting student protesters at
                    Berkeley, his brother's harrowing letters from Vietnam, and
                    Gaye's own grief in the wake of Tammi Terrell's death and
                    brought into a collective catharsis. Jazz-infused
                    arrangements and layered vocals - recorded in a single
                    midnight take - rejected Motown's apolitical formula,
                    bringing soul music's first protest concept album with a
                    single enduring question.
                </div>
            </div>

            <multitrack-player
                id="player"
                stylesheet="dist/multitrack-player.themed.css"
            ></multitrack-player>
        </div>

        <script type="module">
            import "./src/components/multitrack-player/multitrack-player.js";

            document.addEventListener("DOMContentLoaded", () => {
                const player = document.getElementById("player");
                const title = document.querySelector(".title");
                const garfieldIcon = document.querySelector(".garfield-icon");
                const description = document.querySelector(".description");

                document.addEventListener("keydown", (e) => {
                    if (e.code === "Space") {
                        e.preventDefault();
                        player.state.isPlaying ? player.pause() : player.play();
                    }
                });

                if (garfieldIcon) {
                    garfieldIcon.addEventListener("click", async () => {
                        garfieldIcon.classList.add("switching");
                        const newTrack = await player.swapTrackSet();
                        if (newTrack) {
                            // Update title via innerText to trigger the MutationObserver animation
                            if (title) title.innerText = newTrack.name;
                            if (description)
                                description.innerHTML = newTrack.description;
                            garfieldIcon.classList.toggle("flipped");
                        }
                        garfieldIcon.classList.remove("switching");
                    });
                }

                if (title) {
                    const setAnimatedTitle = (element, text) => {
                        element.innerHTML = "";
                        for (let i = 0; i < text.length; i++) {
                            const char = text[i];
                            const span = document.createElement("span");
                            span.textContent = char === " " ? "\u00A0" : char;
                            span.style.setProperty("--i", i);
                            element.appendChild(span);
                        }
                    };

                    // Set the initial title
                    setAnimatedTitle(title, title.textContent);

                    // Observe for changes and re-apply animation if necessary
                    const observer = new MutationObserver((mutationsList) => {
                        for (const mutation of mutationsList) {
                            // If the title was changed to plain text, re-animate it

                            if (
                                mutation.type === "childList" &&
                                mutation.addedNodes.length > 0 &&
                                mutation.addedNodes[0].nodeType ===
                                    Node.TEXT_NODE
                            ) {
                                setAnimatedTitle(title, title.textContent);
                            }
                        }
                    });

                    observer.observe(title, { childList: true });
                }

                if (title) {
                    const titleContainer =
                        document.querySelector(".title-container");
                    title.addEventListener("click", () => {
                        if (titleContainer) {
                            titleContainer.classList.toggle("active");
                        }
                    });
                }
            });
        </script>
    </body>
</html>