youtubedl and www update

README.md

@@ -37,6 +37,7 @@ sudo dd if=build/youtube2.iso of=/dev/sdX bs=4M status=progress oflag=sync
 1. Добавьте json файл `<video-id>.json` в папку `videos/`:
 ```json
 {
+  "id": "<video-id>",
   "name": "Название видео",
   "description": "Описание видео",
   "video-file": "<video-id>.mp4",

build.sh

@@ -1,9 +1,17 @@
 #!/bin/bash
 
+rm -rf build/iso
+rm -rf build
 mkdir build
 cp -r root build/iso
 cp -r www build/iso/www
 cp -r videos build/iso/www/videos
-find videos -type f -name "*.json" | sed 's|^videos/||; s|\.json$||' > build/iso/www/videos.txt
+rm build/iso/www/videos/video-example.json
-truncate -s -1 build/iso/www/videos.txt
+echo "const videos = [" > build/iso/www/videos.js
+for i in build/iso/www/videos/*.json; do
+  cat $i >> build/iso/www/videos.js
+  echo "," >> build/iso/www/videos.js
+done
+echo "]" >> build/iso/www/videos.js
+rm build/iso/www/videos/*.json
 mkisofs -o build/youtube2.iso -V "Youtube2" -J -r build/iso

dl-video.sh

@@ -13,9 +13,11 @@ VIDEO_ID=$(echo -n "$VIDEO_URL" | md5sum | awk '{print $1}')
 
 mkdir -p "videos"
 
-yt-dlp --write-info-json --write-thumbnail \
+yt-dlp --skip-download --write-info-json -o "videos/${VIDEO_ID}" "$VIDEO_URL" $ADDITIONAL_ARGS
-    -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best" \
+yt-dlp --skip-download --write-thumbnail -o "videos/${VIDEO_ID}_preview" "$VIDEO_URL" $ADDITIONAL_ARGS
-    -o "videos/${VIDEO_ID}" "$VIDEO_URL" $ADDITIONAL_ARGS
+PREVIEW_FILENAME=$(find videos -type f -iname "${VIDEO_ID}_preview*")
+yt-dlp -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best" -o "videos/${VIDEO_ID}_video" "$VIDEO_URL" $ADDITIONAL_ARGS
+VIDEO_FILENAME=$(find videos -type f -iname "${VIDEO_ID}_video*")
 
 NAME=$(jq -r '.fulltitle' "videos/${VIDEO_ID}.info.json")
 DESCRIPTION=$(jq -r '.description' "videos/${VIDEO_ID}.info.json")
@@ -23,20 +25,27 @@ CHANNEL_NAME=$(jq -r '.uploader' "videos/${VIDEO_ID}.info.json")
 CHANNEL_ID=$(jq -r '.channel_id' "videos/${VIDEO_ID}.info.json")
 CHANNEL_URL=$(jq -r '.uploader_url' "videos/${VIDEO_ID}.info.json")
 
-yt-dlp --write-thumbnail --skip-download --playlist-items 0 -o "videos/${CHANNEL_ID}" "$CHANNEL_URL" $ADDITIONAL_ARGS
+yt-dlp --write-thumbnail --skip-download \
+  --playlist-items 0 -o "videos/${CHANNEL_ID}_avatar" "$CHANNEL_URL" $ADDITIONAL_ARGS
+AVATAR_FILENAME=$(find videos -type f -iname "${CHANNEL_ID}_avatar*")
 
-jq --arg name "$NAME" --arg description "$DESCRIPTION" --arg video_file "${VIDEO_ID}.mp4" \
+jq --arg id "$VIDEO_ID" \
-   --arg image_file "${VIDEO_ID}.png" --arg channel_name "$CHANNEL_NAME" \
+  --arg name "$NAME" \
-   --arg channel_avatar_file "${CHANNEL_ID}.png" \
+  --arg description "$DESCRIPTION" \
-   '{
+  --arg video_file "${VIDEO_FILENAME}" \
-     name: $name,
+  --arg image_file "${PREVIEW_FILENAME}" \
-     description: $description,
+  --arg channel_name "$CHANNEL_NAME" \
-     "video-file": $video_file,
+  --arg channel_avatar_file "${AVATAR_FILENAME}" \
-     "image-file": $image_file,
+  '{
-     "channel-name": $channel_name,
+    id: $id,
-     "channel-avatar-file": $channel_avatar_file
+    name: $name,
-   }' \
+    description: $description,
-   "videos/${VIDEO_ID}.info.json" > "videos/${VIDEO_ID}.tmp.json" && mv "videos/${VIDEO_ID}.tmp.json" "videos/${VIDEO_ID}.json"
+    "video-file": $video_file,
+    "image-file": $image_file,
+    "channel-name": $channel_name,
+    "channel-avatar-file": $channel_avatar_file
+  }' \
+  "videos/${VIDEO_ID}.info.json" > "videos/${VIDEO_ID}.json"
 
 rm "videos/${VIDEO_ID}.info.json"
 

videos/video-example.json

@@ -1,8 +1,9 @@
 {
+  "id": "video-example",
   "name": "Название видео",
   "description": "Описание видео",
-  "video-file": "<video-id>.mp4",
+  "video-file": "video-example.mp4",
-  "image-file": "<video-id>.png",
+  "image-file": "video-example.png",
   "channel-name": "Название канала",
-  "channel-avatar-file": "<channel-id>.png"
+  "channel-avatar-file": "video-example.png"
 }

www/index.css

@@ -0,0 +1,105 @@
+body {
+  background-color: #181818;
+  color: #e1e1e1;
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.logo {
+  cursor: pointer;
+}
+
+/* Header */
+header {
+  background-color: #202020;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #3a3a3a;
+}
+
+header .logo {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+header .search-bar input {
+  background-color: #303030;
+  border: 1px solid #3a3a3a;
+  border-radius: 20px;
+  color: #fff;
+  padding: 5px 15px;
+  width: 400px;
+}
+
+/* Video Grid */
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  padding: 20px;
+}
+
+.video-card {
+  background-color: #121212;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.video-card:hover {
+  background-color: #303030;
+}
+
+.video-card img {
+  width: 100%;
+  height: auto;
+}
+
+.video-info {
+  padding: 10px;
+}
+
+.video-info h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #fff;
+}
+
+.video-info p {
+  color: #aaa;
+  font-size: 14px;
+}
+
+.channel-info {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.channel-info img {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.channel-info span {
+  color: #bbb;
+  font-size: 14px;
+}
+
+/* Footer */
+footer {
+  background-color: #202020;
+  padding: 15px;
+  color: #888;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #3a3a3a;
+}

www/index.html

@@ -3,9 +3,71 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="index.css">
   <title>Youtube 2</title>
 </head>
 <body>
-  
+  <header>
+      <div class="logo" onclick="document.location.assign('index.html')">YouTube 2</div>
+      <div class="search-bar">
+          <input type="text" placeholder="Поиск" id="search">
+      </div>
+  </header>
+
+  <div class="video-grid" id="video-grid"></div>
+
+  <footer>
+      <p>&copy; 2025 YouTube 2, Inc. Не для коммерческого использования.</p>
+  </footer> 
+
+  <script src="videos.js"></script>
+
+  <script>
+    const search = document.getElementById("search")
+
+    search.onkeydown = (e) => {
+      if (e.key == "Enter") {
+        document.location.assign("search.html?q="+search.value)
+      }
+    }
+
+    function shuffleArray(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+      }
+    }
+
+    function renderVideos() {
+      const videoGrid = document.getElementById('video-grid');
+      
+      let local_videos = videos
+      shuffleArray(local_videos)
+
+      local_videos.slice(0, 20).forEach(video => {
+        const videoCard = document.createElement('div');
+        videoCard.classList.add('video-card');
+        
+        videoCard.innerHTML = `
+          <img src="${video['image-file']}" alt="${video['name']}">
+          <div class="video-info">
+            <h3>${video['name']}</h3>
+            <div class="channel-info">
+              <img src="${video['channel-avatar-file']}" alt="${video['channel-name']}">
+              <span>${video['channel-name']}</span>
+            </div>
+          </div>
+        `;
+
+        videoCard.onclick = () => {
+          document.location.assign("watch.html?v="+video['id'])
+        }
+        
+        videoGrid.appendChild(videoCard);
+      });
+    }
+
+    renderVideos()
+  </script>
 </body>
 </html>

www/search.css

@@ -0,0 +1,113 @@
+body {
+  background-color: #181818;
+  color: #e1e1e1;
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  background-color: #202020;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #3a3a3a;
+}
+
+header .logo {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+header .search-bar input {
+  background-color: #303030;
+  border: 1px solid #3a3a3a;
+  border-radius: 20px;
+  color: #fff;
+  padding: 5px 15px;
+  width: 400px;
+}
+
+.results-container {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 20px;
+  max-width: 900px;
+  margin: auto;
+}
+
+.video-card {
+  display: flex;
+  gap: 15px;
+  background-color: #121212;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.video-card:hover {
+  background-color: #2a2a2a;
+}
+
+.thumbnail {
+  width: 320px;
+  height: 180px;
+  object-fit: cover;
+  background-color: #000;
+  flex-shrink: 0;
+}
+
+.video-meta {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 1;
+  padding: 10px;
+}
+
+.video-meta h3 {
+  font-size: 18px;
+  margin: 0;
+  color: #fff;
+}
+
+.channel-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0;
+}
+
+.channel-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.channel-name {
+  color: #aaa;
+  font-size: 14px;
+}
+
+.description {
+  font-size: 14px;
+  color: #999;
+}
+
+footer {
+  background-color: #202020;
+  padding: 15px;
+  color: #888;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #3a3a3a;
+  margin-top: 40px;
+}
+.logo {
+  cursor: pointer;
+}

www/search.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="search.css">
+  <title>Результаты поиска</title>
+</head>
+<body>
+  <header>
+      <div class="logo" onclick="document.location.assign('index.html')">YouTube 2</div>
+      <div class="search-bar">
+          <input type="text" placeholder="Поиск" id="search">
+      </div>
+  </header>
+
+  <div class="results-container" id="results">
+  </div>
+
+  <footer>
+      <p>&copy; 2025 YouTube 2, Inc. Не для коммерческого использования.</p>
+  </footer> 
+
+  <script src="videos.js"></script>
+
+  <script>
+    const search = document.getElementById("search")
+
+    search.onkeydown = (e) => {
+      if (e.key == "Enter") {
+        document.location.assign("search.html?q="+search.value)
+      }
+    }
+
+    function getSearchQuery() {
+      const params = new URLSearchParams(window.location.search);
+      return params.get("q")?.toLowerCase() || "";
+    }
+
+    function renderSearchResults(query) {
+      const container = document.getElementById('results');
+      container.innerHTML = "";
+
+      const results = videos.filter(video =>
+        video.name.toLowerCase().includes(query) ||
+        video.description.toLowerCase().includes(query)
+      );
+
+      if (results.length === 0) {
+        container.innerHTML = `<p style="color:#ccc; font-size:18px;">Ничего не найдено по запросу "<strong>${query}</strong>".</p>`;
+        document.title = `Поиск: ${query}`;
+        return;
+      }
+
+      document.title = `Поиск: ${query}`;
+
+      results.forEach(video => {
+        const card = document.createElement('div');
+        card.classList.add('video-card');
+
+        card.innerHTML = `
+          <img src="${video['image-file']}" class="thumbnail" alt="${video['name']}">
+          <div class="video-meta">
+            <h3>${video['name']}</h3>
+            <div class="channel-row">
+              <img src="${video['channel-avatar-file']}" alt="${video['channel-name']}" class="channel-avatar">
+              <span class="channel-name">${video['channel-name']}</span>
+            </div>
+            <div class="description">${video['description']}</div>
+          </div>
+        `;
+
+        card.onclick = () => {
+          window.location.href = `watch.html?v=${video.id}`;
+        };
+
+        container.appendChild(card);
+      });
+    }
+
+    const query = getSearchQuery();
+    renderSearchResults(query);
+  </script>
+</body>
+</html>

www/watch.css

@@ -0,0 +1,153 @@
+body {
+  background-color: #181818;
+  color: #e1e1e1;
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  background-color: #202020;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #3a3a3a;
+}
+
+header .logo {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+header .search-bar input {
+  background-color: #303030;
+  border: 1px solid #3a3a3a;
+  border-radius: 20px;
+  color: #fff;
+  padding: 5px 15px;
+  width: 400px;
+}
+
+.container {
+  display: flex;
+  padding: 20px;
+  gap: 30px;
+}
+
+.main-video {
+  flex: 3;
+}
+
+.main-video video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+}
+
+.video-details {
+  margin-top: 15px;
+}
+
+.video-details h1 {
+  font-size: 20px;
+  margin: 10px 0;
+  color: #fff;
+}
+
+.channel-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 5px;
+}
+
+.channel-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.channel-info {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.channel-info img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+.logo {
+  cursor: pointer;
+}
+
+.channel-info span {
+  color: #bbb;
+  font-size: 16px;
+}
+
+.description {
+  color: #aaa;
+  font-size: 14px;
+  white-space: pre-wrap;
+}
+
+.sidebar {
+  flex: 1.2;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.video-card {
+  background-color: #121212;
+  display: flex;
+  gap: 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.video-card img.thumbnail {
+  width: 168px;
+  height: 94px;
+  object-fit: cover;
+  background-color: #000;
+}
+
+.video-meta {
+  flex: 1;
+  padding: 5px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.video-meta h3 {
+  font-size: 14px;
+  color: #fff;
+  margin: 0 0 5px;
+}
+
+.video-meta span {
+  font-size: 13px;
+  color: #aaa;
+}
+
+footer {
+  background-color: #202020;
+  padding: 15px;
+  color: #888;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #3a3a3a;
+}
+
+.video-card:hover {
+  background-color: #303030;
+}

www/watch.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="watch.css">
+  <title>Просмотр видео</title>
+</head>
+<body>
+  <header>
+      <div class="logo" onclick="document.location.assign('index.html')">YouTube 2</div>
+      <div class="search-bar">
+          <input type="text" placeholder="Поиск" id="search">
+      </div>
+  </header>
+
+  <div class="container">
+    <div class="main-video">
+        <video controls src="<url>" poster="<image-url>"></video>
+        <div class="video-details">
+            <h1>Название видео</h1>
+            <div class="channel-info">
+                <img src="<channel-avatar-file>" alt="Канал">
+                <span>Название канала</span>
+            </div>
+            <div class="description">
+                Описание видео: Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                Donec placerat, metus in commodo varius, libero justo tristique sem.
+            </div>
+        </div>
+    </div>
+
+    <div class="sidebar" id="sidebar">
+    </div>
+  </div>
+
+  <footer>
+      <p>&copy; 2025 YouTube 2, Inc. Не для коммерческого использования.</p>
+  </footer> 
+
+  <script src="videos.js"></script>
+
+  <script>
+    const search = document.getElementById("search")
+
+    search.onkeydown = (e) => {
+      if (e.key == "Enter") {
+        document.location.assign("search.html?q="+search.value)
+      }
+    }
+
+    function shuffleArray(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [array[i], array[j]] = [array[j], array[i]];
+        }
+    }
+
+    function getVideoIdFromUrl() {
+        const params = new URLSearchParams(window.location.search);
+        return params.get("v");
+    }
+
+    function renderMainVideo(video) {
+        const videoElement = document.querySelector(".main-video video");
+        const titleElement = document.querySelector(".video-details h1");
+        const avatarElement = document.querySelector(".channel-info img");
+        const channelNameElement = document.querySelector(".channel-info span");
+        const descriptionElement = document.querySelector(".description");
+
+        videoElement.src = video["video-file"];
+        videoElement.poster = video["image-file"];
+        titleElement.textContent = video["name"];
+        avatarElement.src = video["channel-avatar-file"];
+        channelNameElement.textContent = video["channel-name"];
+        descriptionElement.textContent = video["description"];
+        document.title = video["name"];
+    }
+
+    function renderSidebar(videosList, currentId) {
+        const sidebar = document.getElementById('sidebar');
+        sidebar.innerHTML = "";
+        shuffleArray(videosList);
+
+        videosList
+            .filter(video => video.id !== currentId)
+            .slice(0, 20)
+            .forEach(video => {
+                const card = document.createElement('div');
+                card.classList.add('video-card');
+
+                card.innerHTML = `
+                    <img src="${video['image-file']}" alt="${video['name']}" class="thumbnail">
+                    <div class="video-meta">
+                        <h3>${video['name']}</h3>
+                        <div class="channel-row">
+                            <img src="${video['channel-avatar-file']}" alt="${video['channel-name']}" class="channel-avatar">
+                            <span>${video['channel-name']}</span>
+                        </div>
+                    </div>
+                `;
+
+                card.onclick = () => {
+                    window.location.href = `watch.html?v=${video.id}`;
+                };
+
+                sidebar.appendChild(card);
+            });
+    }
+
+    const currentVideoId = getVideoIdFromUrl();
+    const mainVideo = videos.find(v => v.id === currentVideoId);
+
+    if (mainVideo) {
+        renderMainVideo(mainVideo);
+        renderSidebar(videos, mainVideo.id);
+    } else {
+        document.querySelector(".main-video").innerHTML = `<p style="color: white;">Видео не найдено.</p>`;
+        document.title = "Видео не найдено";
+    }
+  </script>
+</body>
+</html>