NodeStreaming/index.html at main · Taoshix/NodeStreaming · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Video Streaming With Node</title>
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body>
        <div class="top-bar">Localhost Streaming Site</div>
        <h1 class="content-selection" id="content-selection">Content Selection</h1>
        <div class="content-section" id="content-section">
            <div class="container" id="content-container">
                <!-- Content will be dynamically loaded here -->
            </div>
        </div>
        <script>
            async function loadContent() {
                const response = await fetch('/content');
                const content = await response.json();

                container = document.getElementById('content-container');

                content.forEach(item => {
                    const card = document.createElement('div');
                    card.className = 'card';

                    const img = document.createElement('img');
                    img.src = item.cover || 'default-cover.png';
                    img.alt = item.title;

                    const title = document.createElement('p');
                    title.textContent = item.title;

                    card.appendChild(img);
                    card.appendChild(title);

                    card.onclick = () => {
                        window.location.href = `/video.html?folder=${encodeURIComponent(item.title)}`;
                    };

                    container.appendChild(card);
                });

                const totalCards = content.length;
                const cardsPerRow = Math.floor(window.innerWidth / 220);
                const skeletonCount = cardsPerRow - (totalCards % cardsPerRow);
                if (skeletonCount < cardsPerRow) {
                    for (let i = 0; i < skeletonCount; i++) {
                        const skeletonCard = document.createElement('div');
                        skeletonCard.className = 'skeleton-card';

                        container.appendChild(skeletonCard);
                    }
                }

                contentSection = document.getElementById('content-section');
                contentSection.appendChild(container);
            }

            const pathParts = window.location.pathname.split('/');
            const folder = pathParts[pathParts.indexOf('content') + 1];

            loadContent();
        </script>
        <p class="footer">Made with NodeJS</p>
    </body>
</html>