video/script.js at main · nicsolutions/video · 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
// Ganti youtubeId di bawah dengan ID video YouTube milik warga/kampungmu sendiri.
// ID diambil dari URL video, contoh: youtube.com/watch?v=XXXXXXXXXXX -> "XXXXXXXXXXX"
const videos = [
    {
        title: "Panen Raya di Sawah Belakang Balai Desa",
        uploader: "Pak Slamet",
        category: "Pertanian",
        youtubeId: "dQw4w9WgXcQ"
    },
    {
        title: "Resep Rendang Warisan Nenek",
        uploader: "Bu Yanti",
        category: "Kuliner",
        youtubeId: "jNQXAC9IVRw"
    },
    {
        title: "Latihan Angklung Anak-anak RT 03",
        uploader: "Karang Taruna",
        category: "Budaya",
        youtubeId: "M7lc1UVf-VE"
    },
    {
        title: "Vlog Jalan Pagi Keliling Kampung",
        uploader: "Rian Saputra",
        category: "Vlog",
        youtubeId: "dQw4w9WgXcQ"
    },
    {
        title: "Cara Membuat Kompos dari Sampah Dapur",
        uploader: "Bank Sampah Melati",
        category: "Pertanian",
        youtubeId: "jNQXAC9IVRw"
    },
    {
        title: "Pentas Wayang Kulit Malam Purnama",
        uploader: "Sanggar Budaya",
        category: "Budaya",
        youtubeId: "M7lc1UVf-VE"
    }
];

const videoGrid = document.getElementById("videoGrid");
const emptyState = document.getElementById("emptyState");
const searchInput = document.getElementById("searchInput");
const searchCount = document.getElementById("searchCount");
const filterRow = document.getElementById("filterRow");

let activeCategory = "Semua";
let activeQuery = "";

function renderFilters() {
    const categories = ["Semua", ...new Set(videos.map(v => v.category))];
    filterRow.innerHTML = "";
    categories.forEach(cat => {
        const btn = document.createElement("button");
        btn.className = "filter-pill" + (cat === activeCategory ? " active" : "");
        btn.textContent = cat;
        btn.addEventListener("click", () => {
            activeCategory = cat;
            renderFilters();
            renderVideos();
        });
        filterRow.appendChild(btn);
    });
}

function renderVideos() {
    const query = activeQuery.trim().toLowerCase();

    const filtered = videos.filter(v => {
        const matchesCategory = activeCategory === "Semua" || v.category === activeCategory;
        const matchesQuery =
            query === "" ||
            v.title.toLowerCase().includes(query) ||
            v.uploader.toLowerCase().includes(query);
        return matchesCategory && matchesQuery;
    });

    videoGrid.innerHTML = "";

    filtered.forEach(v => {
        const card = document.createElement("div");
        card.className = "video-card";
        card.innerHTML = `
            <div class="video-thumb">
                <iframe
                    src="https://www.youtube-nocookie.com/embed/${v.youtubeId}"
                    title="${v.title}"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                    loading="lazy">
                </iframe>
            </div>
            <div class="video-body">
                <h3 class="video-title">${v.title}</h3>
                <div class="video-meta">
                    <span>${v.uploader}</span>
                    <span class="video-tag">${v.category}</span>
                </div>
            </div>
        `;
        videoGrid.appendChild(card);
    });

    emptyState.hidden = filtered.length !== 0;

    searchCount.textContent =
        query === "" ? "" : `${filtered.length} video ditemukan`;
}

searchInput.addEventListener("input", (e) => {
    activeQuery = e.target.value;
    renderVideos();
});

renderFilters();
renderVideos();