From dd95b6b5faa7992ee1067db1c724463dc4490842 Mon Sep 17 00:00:00 2001 From: MeexReay Date: Thu, 24 Apr 2025 21:22:41 +0300 Subject: [PATCH] youtubedl and www update --- README.md | 1 + build.sh | 12 ++- dl-video.sh | 41 ++++++---- videos/video-example.json | 7 +- www/index.css | 105 ++++++++++++++++++++++++++ www/index.html | 64 +++++++++++++++- www/search.css | 113 ++++++++++++++++++++++++++++ www/search.html | 85 +++++++++++++++++++++ www/watch.css | 153 ++++++++++++++++++++++++++++++++++++++ www/watch.html | 123 ++++++++++++++++++++++++++++++ 10 files changed, 682 insertions(+), 22 deletions(-) create mode 100644 www/index.css create mode 100644 www/search.css create mode 100644 www/search.html create mode 100644 www/watch.css create mode 100644 www/watch.html diff --git a/README.md b/README.md index 6dad3f3..8c0fdd2 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ sudo dd if=build/youtube2.iso of=/dev/sdX bs=4M status=progress oflag=sync 1. Добавьте json файл `.json` в папку `videos/`: ```json { + "id": "", "name": "Название видео", "description": "Описание видео", "video-file": ".mp4", diff --git a/build.sh b/build.sh index 50b8c3a..549f16f 100644 --- a/build.sh +++ b/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 -truncate -s -1 build/iso/www/videos.txt +rm build/iso/www/videos/video-example.json +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 \ No newline at end of file diff --git a/dl-video.sh b/dl-video.sh index 12b589e..407e103 100644 --- a/dl-video.sh +++ b/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 \ - -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best" \ - -o "videos/${VIDEO_ID}" "$VIDEO_URL" $ADDITIONAL_ARGS +yt-dlp --skip-download --write-info-json -o "videos/${VIDEO_ID}" "$VIDEO_URL" $ADDITIONAL_ARGS +yt-dlp --skip-download --write-thumbnail -o "videos/${VIDEO_ID}_preview" "$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" \ - --arg image_file "${VIDEO_ID}.png" --arg channel_name "$CHANNEL_NAME" \ - --arg channel_avatar_file "${CHANNEL_ID}.png" \ - '{ - name: $name, - description: $description, - "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}.tmp.json" && mv "videos/${VIDEO_ID}.tmp.json" "videos/${VIDEO_ID}.json" +jq --arg id "$VIDEO_ID" \ + --arg name "$NAME" \ + --arg description "$DESCRIPTION" \ + --arg video_file "${VIDEO_FILENAME}" \ + --arg image_file "${PREVIEW_FILENAME}" \ + --arg channel_name "$CHANNEL_NAME" \ + --arg channel_avatar_file "${AVATAR_FILENAME}" \ + '{ + id: $id, + name: $name, + description: $description, + "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" diff --git a/videos/video-example.json b/videos/video-example.json index 835a83c..8d56ace 100644 --- a/videos/video-example.json +++ b/videos/video-example.json @@ -1,8 +1,9 @@ { + "id": "video-example", "name": "Название видео", "description": "Описание видео", - "video-file": ".mp4", - "image-file": ".png", + "video-file": "video-example.mp4", + "image-file": "video-example.png", "channel-name": "Название канала", - "channel-avatar-file": ".png" + "channel-avatar-file": "video-example.png" } \ No newline at end of file diff --git a/www/index.css b/www/index.css new file mode 100644 index 0000000..79860bf --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/www/index.html b/www/index.html index d05f91e..e6f96ed 100644 --- a/www/index.html +++ b/www/index.html @@ -3,9 +3,71 @@ + Youtube 2 - +
+ +
+ +
+
+ +
+ +
+

© 2025 YouTube 2, Inc. Не для коммерческого использования.

+
+ + + + \ No newline at end of file diff --git a/www/search.css b/www/search.css new file mode 100644 index 0000000..ecce716 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/www/search.html b/www/search.html new file mode 100644 index 0000000..1b422b9 --- /dev/null +++ b/www/search.html @@ -0,0 +1,85 @@ + + + + + + + Результаты поиска + + +
+ +
+ +
+
+ +
+
+ +
+

© 2025 YouTube 2, Inc. Не для коммерческого использования.

+
+ + + + + + \ No newline at end of file diff --git a/www/watch.css b/www/watch.css new file mode 100644 index 0000000..535c8c6 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/www/watch.html b/www/watch.html new file mode 100644 index 0000000..3561d6a --- /dev/null +++ b/www/watch.html @@ -0,0 +1,123 @@ + + + + + + + Просмотр видео + + +
+ +
+ +
+
+ +
+
+ +
+

Название видео

+
+ Канал + Название канала +
+
+ Описание видео: Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec placerat, metus in commodo varius, libero justo tristique sem. +
+
+
+ + +
+ +
+

© 2025 YouTube 2, Inc. Не для коммерческого использования.

+
+ + + + + + \ No newline at end of file