0:00/0:00
15 |
16 |
17 | volume_up
18 | skip_previous
19 | fast_rewind
20 | play_arrow
21 | fast_forward
22 | skip_next
23 | fullscreen
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/js/keyboard_shortcuts.js:
--------------------------------------------------------------------------------
1 | document.body.addEventListener("keydown", event => {
2 | if(document.activeElement.tagName.toLowerCase() === "input") return;
3 | switch(components.tabs.$active()){
4 | case "watch": {
5 | switch(event.code){
6 | case "KeyK":
7 | case "Space": {
8 | components.tabs.watch.video.$_play_pause();
9 | break;
10 | };
11 | case "KeyJ":
12 | case "ArrowLeft": {
13 | components.tabs.watch.video.$_seekby(-10);
14 | break;
15 | };
16 | case "KeyL":
17 | case "ArrowRight": {
18 | components.tabs.watch.video.$_seekby(10);
19 | break;
20 | };
21 | case "KeyP": {
22 | components.tabs.watch.video.$_previous();
23 | break;
24 | };
25 | case "KeyN": {
26 | components.tabs.watch.video.$_next();
27 | break;
28 | };
29 | case "KeyT": {
30 | components.tabs.watch.video.$_theatre();
31 | break;
32 | };
33 | case "KeyF": {
34 | components.tabs.watch.video.$_fullscreen();
35 | break;
36 | };
37 | case "ArrowUp": {
38 | components.tabs.watch.video.$_volume(Math.min(components.tabs.watch.video.$volume()+0.05,1));
39 | break;
40 | };
41 | case "ArrowDown": {
42 | components.tabs.watch.video.$_volume(Math.max(components.tabs.watch.video.$volume()-0.05,0));
43 | break;
44 | };
45 | default: {
46 | return;
47 | }
48 | }
49 | break;
50 | }
51 | default: {
52 | return;
53 | }
54 | };
55 | event.preventDefault();
56 | });
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const electron = require('electron');
2 |
3 | process.chdir(electron.app.getAppPath());
4 |
5 | const remote = require('@electron/remote/main');
6 | const path = require("node:path");
7 | const fs = require("node:fs");
8 |
9 | remote.initialize();
10 |
11 | electron.app.on("ready", async _ => {
12 | let window_config = {};
13 | try {
14 | window_config = JSON.parse(await fs.readFileSync("./window_config.json"));
15 | } catch {};
16 | window_config.material = {"mica":"mica","acrylic":"acrylic","noise":"noise"}[window_config.material] ?? "default";
17 | window_config.transparent = window_config.material != "default";
18 |
19 | window_config.args = [`--newflow-material=${window_config.material}`];
20 |
21 | if(!window_config.transparent) {
22 | window_config.titlebar_style = ["default", "hidden"][Number(window_config.system_titlebar)];
23 | window_config.titlebar_overlay = [false, {color: "#00000000", symbolColor: "#FFFFFF", height: 30}][Number(window_config.system_titlebar)];
24 | if(window_config.system_titlebar){
25 | window_config.args = [...window_config.args, "--newflow-system-titlebar"];
26 | };
27 | } else {
28 | window_config.titlebar_style = "default";
29 | window_config.titlebar_overlay = false;
30 | }
31 |
32 | newflow = new electron.BrowserWindow({
33 | width: 800,
34 | height: 600,
35 | frame: false,
36 | transparent: window_config.transparent,
37 | titleBarStyle: window_config.titlebar_style,
38 | titleBarOverlay: window_config.titlebar_overlay,
39 | webPreferences: {
40 | nodeIntegration: true,
41 | contextIsolation: false,
42 | nodeIntegrationInWorker: true,
43 | backgroundThrottling: false,
44 | preload: path.join(__dirname, 'preload.js'),
45 | additionalArguments: window_config.args
46 | }
47 | });
48 | newflow.loadFile("index.html");
49 | remote.enable(newflow.webContents);
50 |
51 | newflow.on("closed", _ => {
52 | electron.app.quit();
53 | });
54 | });
55 |
--------------------------------------------------------------------------------
/js/extensions/lyrics/index.js:
--------------------------------------------------------------------------------
1 | var lyrics = {
2 | components: {
3 | $: null,
4 | title: null,
5 | lyrics: null,
6 | get: null,
7 | info: null
8 | },
9 | parser: new DOMParser(),
10 | get_lyrics: async (title) => {
11 | try {
12 | title = title.replace(/[\[\(\{].*[\]\)\}]/g,"").replace(/\|.*/g,"").trim();
13 | let search_page = await fetch("https://genius.com/api/search/multi?per_page=5&q=" + encodeURIComponent(title));
14 | let search_data = await search_page.json()
15 | let lyric_page = await fetch(search_data?.response?.sections?.[0]?.hits?.[0]?.result?.relationships_index_url)
16 | let lyric_page_data = await lyric_page.text()
17 | let lyric_page_document = lyrics.parser.parseFromString(lyric_page_data, "text/html");
18 | return lyric_page_document.querySelector(`[data-lyrics-container="true"]`).innerHTML.replace(/\<[\\]*br\>/g,"\n").replace(/<[\\]*[^\>]+\>/g,"");
19 | } catch {
20 | return "Unable to extract lyrics";
21 | }
22 | },
23 | __load__: () => {
24 | lyrics.components.$ = document.createElement("div");
25 | lyrics.components.$.style = "display: flex; flex-direction: column; gap: 5px;";
26 | components.tabs.watch.panels.$.append(lyrics.components.$);
27 | lyrics.components.title = document.createElement("h1");
28 | lyrics.components.title.innerText = "Lyrics";
29 | lyrics.components.$.append(lyrics.components.title);
30 | lyrics.components.get = document.createElement("button");
31 | lyrics.components.get.innerText = "Get Lyrics";
32 | lyrics.components.get.addEventListener("click", async () => {
33 | let the_lyrics = await lyrics.get_lyrics(components.tabs.watch.$$response.title);
34 | lyrics.components.lyrics.innerText = the_lyrics;
35 | });
36 | lyrics.components.get.style = "width: 100%; padding: 5px; background: var(--seconder-background-color); border: none; border-radius: var(--border-radius-size);";
37 | lyrics.components.$.append(lyrics.components.get);
38 | lyrics.components.lyrics = document.createElement("div");
39 | lyrics.components.lyrics.style = "user-select:text;";
40 | lyrics.components.$.append(lyrics.components.lyrics);
41 | lyrics.components.info = document.createElement("div");
42 | lyrics.components.info.innerText = "Lyric data is taken from Genius.\nThis plugin is not supported by Genius.";
43 | lyrics.components.$.append(lyrics.components.info);
44 | },
45 | __unload__: () => {
46 | lyrics.components.$.remove();
47 | lyrics = undefined;
48 | }
49 | };
50 |
--------------------------------------------------------------------------------
/js/image_helper.js:
--------------------------------------------------------------------------------
1 | var image_helper = {
2 | crop: {
3 | as_square: (src, size, orig_width, orig_height) => {
4 | return new Promise(resolve => {
5 | let image = document.createElement("img");
6 | image.addEventListener("load", () => {
7 | let canvas = document.createElement("canvas");
8 | canvas.width = size;
9 | canvas.height = size;
10 | let ctx = canvas.getContext("2d");
11 |
12 | square_size = Math.min(orig_width,orig_height);
13 | multiplier = 256/square_size;
14 | max_size = Math.max(orig_width,orig_height);
15 | crop_size = (max_size-square_size)/2;
16 | is_from_left = square_size == orig_height;
17 | if(is_from_left) {
18 | ctx.drawImage(image, -crop_size*multiplier, 0, max_size*multiplier, 256);
19 | } else {
20 | ctx.drawImage(image, 0, -crop_size*multiplier, 256, max_size*multiplier);
21 | }
22 | resolve(canvas.toDataURL());
23 | });
24 | image.src = src;
25 | });
26 | }
27 | },
28 | data_uri: {
29 | from_image_uri: async (uri, type="jpg") => {
30 | let image_content = await fetch(uri);
31 | let image_content_as_array_buffer = await image_content.arrayBuffer();
32 | return "data:image/"+ type + ";base64," + Buffer.from(image_content_as_array_buffer).toString("base64")
33 | }
34 | },
35 | dominant_color: (uri) => {
36 | // Vibrant Library
37 | if(Vibrant != null) {
38 | return new Promise(async (res) => {
39 | try {
40 | let vib = new Vibrant(uri);
41 | let palette = await vib.getPalette();
42 | res((palette.Vibrant ??
43 | palette.Muted ??
44 | palette.DarkVibrant ??
45 | palette.LightVibrant ??
46 | palette.DarkMuted ??
47 | palette.LightMuted)?.getHex() ?? "#777777");
48 | } catch {
49 | res("#777777");
50 | }
51 | });
52 | };
53 | // Browser implementation
54 | return new Promise((res) => {
55 | let the_image = document.createElement("img");
56 | the_image.addEventListener("load", () => {
57 | let canvas = document.createElement("canvas");
58 | canvas.width = 1;
59 | canvas.height = 1;
60 | let ctx = canvas.getContext("2d");
61 | ctx.drawImage(the_image, 0,0,1,1);
62 | let dominant_pixel = ctx.getImageData(0,0,1,1);
63 | let dominant_color = "#"+Array.from(dominant_pixel.data).map(data=>data.toString(16).padStart(2, "0")).join("");
64 | res(dominant_color.slice(0,7)); // remove alpha from color
65 | });
66 | the_image.src = uri;
67 | });
68 | }
69 | };
70 |
--------------------------------------------------------------------------------
/languages.json:
--------------------------------------------------------------------------------
1 | {
2 | "trends": {
3 | "en": "Trends",
4 | "tr": "Popüler"
5 | },
6 | "feed": {
7 | "en": "Feed",
8 | "tr": "Akış"
9 | },
10 | "following": {
11 | "en": "Following",
12 | "tr": "Takip Edilenler"
13 | },
14 | "playlists": {
15 | "en": "Playlists",
16 | "tr": "Oynatma Listeleri"
17 | },
18 | "history": {
19 | "en": "History",
20 | "tr": "Geçmiş"
21 | },
22 | "downloads": {
23 | "en": "Downloads",
24 | "tr": "İndirilenler"
25 | },
26 | "settings": {
27 | "en": "Settings",
28 | "tr": "Ayarlar"
29 | },
30 | "about_n_faq": {
31 | "en": "About & FAQ",
32 | "tr": "Hakkında & SSS"
33 | },
34 | "devtools": {
35 | "en": "Devtools",
36 | "tr": "Geliştirici Araçları"
37 | },
38 | "playback_speed": {
39 | "en": "Playback Speed",
40 | "tr": "Oynatma Hızı"
41 | },
42 | "normal": {
43 | "en": "Normal",
44 | "tr": "Normal"
45 | },
46 | "loading": {
47 | "en": "Loading..",
48 | "tr": "Hazırlanıyor.."
49 | },
50 | "warning_not_family_safe_video": {
51 | "en": "It is not a family safe video. Do you want to watch it?",
52 | "tr": "Bu video aile ortamına uygun değil. İzlemek istediğinize emin misin?"
53 | },
54 | "followers": {
55 | "en": "Followers",
56 | "tr": "Takipçi"
57 | },
58 | "auto_add_to_queue": {
59 | "en": "Automatically add to queue",
60 | "tr": "Kendiliğinden sıraya ekle"
61 | },
62 | "video_quality": {
63 | "en": "Video Quality",
64 | "tr": "Video Kalitesi"
65 | },
66 | "audio_quality": {
67 | "en": "Audio Quality",
68 | "tr": "Ses Kalitesi"
69 | },
70 | "audio_pitch": {
71 | "en": "Audio Patch",
72 | "tr": "Ses Perdesi"
73 | },
74 | "captions": {
75 | "en": "Captions",
76 | "tr": "Alt Yazılar"
77 | },
78 | "filters": {
79 | "en": "Filters",
80 | "tr": "Filtreler"
81 | },
82 | "disable": {
83 | "en": "Disable",
84 | "tr": "Devre Dışı"
85 | },
86 | "disabled_while_debug_mode": {
87 | "en": "Disabled while debug mode",
88 | "tr": "Hata ayıklama modunda devre dışı bırakıldı"
89 | },
90 | "share": {
91 | "en": "Share",
92 | "tr": "Paylaş"
93 | },
94 | "timelines": {
95 | "en": "Timelines",
96 | "tr": "Zaman Damgaları"
97 | },
98 | "kaomoji_dog": {
99 | "en": "∪･ｪ･∪"
100 | },
101 | "kaomoji_bird": {
102 | "en": "(｡･ө･｡)"
103 | },
104 | "there_are_nothing_more_dog": {
105 | "en": "There're nothing more than a dog that wants play with you",
106 | "tr": "Seninle oyun oynamak isteyen bir köpek dışında bir şey yok"
107 | },
108 | "no_network_bird": {
109 | "en": "There're a bird who waits network to fly",
110 | "tr": "Burada uçabilmek için interneti bekleyen bir kuş var"
111 | },
112 | "brightness": {
113 | "en": "Brightness",
114 | "tr": "Parlaklık"
115 | },
116 | "contrast": {
117 | "en": "Contrast",
118 | "tr": "Karşıtlık"
119 | },
120 | "blur": {
121 | "en": "Blur",
122 | "tr": "Bulanıklaştırma"
123 | },
124 | "grayscale": {
125 | "en": "Grayscale",
126 | "tr": "Gri Tonlama"
127 | },
128 | "invert": {
129 | "en": "Invert",
130 | "tr": "Ters Çevirme"
131 | },
132 | "hue_rotate": {
133 | "en": "Hue Rotate",
134 | "tr": "Ton Değiştirme"
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/css/pip.css:
--------------------------------------------------------------------------------
1 | @import url(./background-material.css);
2 |
3 | body {
4 | background: #000000;
5 | }
6 |
7 | * {
8 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
9 | user-select: none;
10 | }
11 |
12 | .control {
13 | -webkit-app-region: none;
14 | opacity: 0.05;
15 | color: #222222;
16 | background: #DDDDDD;
17 | z-index: 1;
18 | --size: 24px;
19 | padding: 4px;
20 | border-radius: 8px;
21 | border: none;
22 | cursor: pointer;
23 | transition-duration: 200ms;
24 |
25 | &:hover {
26 | opacity: 1;
27 | }
28 |
29 | &.close {
30 | position: fixed;
31 | top: 20px;
32 | right: 20px;
33 | }
34 |
35 | &.sound {
36 | position: fixed;
37 | bottom: 20px;
38 | left: 20px;
39 | }
40 |
41 | &.fullscreen {
42 | position: fixed;
43 | bottom: 20px;
44 | right: 20px;
45 |
46 | @media (max-width: 110px) {
47 | display: none;
48 | }
49 | }
50 |
51 | @media (max-width: 350px) {
52 | &.backward {
53 | display: none;
54 | }
55 |
56 | &.forward {
57 | display: none;
58 | }
59 | }
60 |
61 | @media (max-width: 250px) {
62 | &.previous {
63 | display: none;
64 | }
65 |
66 | &.next {
67 | display: none;
68 | }
69 | }
70 |
71 | @media (max-width: 150px) {
72 | &.sound {
73 | display: none;
74 | }
75 | &.fullscreen {
76 | position: unset;
77 | }
78 | }
79 | }
80 |
81 | .main-controls {
82 | position: fixed;
83 | bottom: 20px;
84 | left: 20px;
85 | right: 20px;
86 | display: flex;
87 | align-items: center;
88 | justify-content: center;
89 | gap: 5px;
90 |
91 | &:hover .control:not(:hover) {
92 | opacity: 0.2;
93 | transition-duration: 50ms;
94 | }
95 |
96 | @media (max-height: 110px) {
97 | display: none;
98 | }
99 | }
100 |
101 | .time-slider {
102 | -webkit-app-region: none;
103 | box-sizing: border-box;
104 | accent-color: white;
105 | opacity: 0.05;
106 | position: fixed;
107 | bottom: 60px;
108 | right: 20px;
109 | left: 20px;
110 | transition-duration: 200ms;
111 |
112 | &:hover {
113 | opacity: 1;
114 | }
115 |
116 | @media (max-height: 170px) {
117 | display: none;
118 | }
119 | }
120 |
121 | .time-info {
122 | position: fixed;
123 | color: #ffffff;
124 | bottom: 90px;
125 | left: 40px;
126 | opacity: 0;
127 | -webkit-app-region: drag;
128 | transition-duration: 200ms;
129 |
130 | :is(body):has(.time-slider:hover) & {
131 | opacity: 1;
132 | }
133 |
134 | @media (max-height: 200px) {
135 | display: none;
136 | }
137 |
138 | @media (max-width: 300px) {
139 | display: none;
140 | }
141 |
142 | }
143 |
144 | .video-container {
145 | z-index: -1;
146 |
147 | & video {
148 | -webkit-app-region: drag;
149 | position: fixed;
150 | top: 0;
151 | left: 0;
152 | width: 100%;
153 | height: 100%;
154 |
155 | &::cue {
156 | background: color-mix(in srgb, #222222 75%, transparent);
157 | color: #DDDDDD;
158 | }
159 | }
160 | }
161 |
162 | input[type="range"] {
163 | height: 12px;
164 | appearance: none;
165 | background: transparent;
166 | border-radius: 5px;
167 | clip-path: inset(0 round 10px);
168 | }
169 |
170 | input[type="range"]::-webkit-slider-runnable-track {
171 | width: 100%;
172 | background: #222222;
173 | height: 12px;
174 | border-radius: 5px;
175 | }
176 |
177 | input[type="range"]::-webkit-slider-thumb {
178 | appearance: none;
179 | height: 12px;
180 | width: 12px;
181 | background: #cccccc;
182 | box-shadow: -100vw 0 0 calc(100vw - 8px) #888888;
183 | }
--------------------------------------------------------------------------------
/js/database.js:
--------------------------------------------------------------------------------
1 | var database = {
2 | following: new JsonDatabase("./dbs/following.json", {defaultStructure: []}),
3 | feed: new JsonDatabase("./dbs/feed.json"),
4 | playlists: new JsonDatabase("./dbs/playlists.json", {
5 | defaultStructure: {
6 | $liked_videos: {
7 | title: "Liked Videos",
8 | thumbnail: "./assets/inner/playlist_liked.png",
9 | list: []
10 | },
11 | $watch_later: {
12 | title: "Watch Later",
13 | thumbnail: "./assets/inner/playlist_watch_later.png",
14 | list: []
15 | }
16 | },
17 | fill_missing: true
18 | }),
19 | history: new JsonDatabase("./dbs/history.json", {defaultStructure: []}),
20 | settings: new JsonDatabase("./dbs/settings.json", {defaultStructureFrom: "./dbs/settings.template.json", fill_missing: true})
21 | };
22 |
23 | database.following.init();
24 | database.following.add = (owner) => {
25 | /*
26 | * owner.idDisclaimer
36 | >-
37 | >
- This project is intended to demonstrate technical concepts and is not designed or endorsed for production or commercial use. 38 | >
- This software is provided "as-is" without warranty of any kind, express or implied. The authors are not liable for any misuse, damage, or legal consequences resulting from the use of this software. 39 | >
63 | 
64 |
101 |
102 |
64 |
65 | local_fire_department
66 |
68 |
69 | rss_feed
70 |
72 |
73 | tv
74 |
76 |
77 | bookmarks
78 |
80 |
81 | history
82 |
84 |
85 | download
86 |
88 |
89 | settings
90 |
92 |
93 | info
94 |
96 |
100 |
103 |
104 |
105 |
282 |
106 |
223 |
224 |
225 |
226 |
107 |
212 |
108 | ![]()
109 |
110 |
111 | ![]()
189 |
191 |
112 |
126 |
127 | 0.25
114 | 0.50
115 | 0.75
116 | 1.25
118 | 1.50
119 | 1.75
120 | 2
121 | 2.50
122 | 3
123 | 3.50
124 | 4
125 |
128 | filter_retrolux video_settings tune edit_audio
133 |
134 |
145 |
146 |
147 |
148 |
135 |
144 |
149 |
162 | +5
151 | +4
152 | +3
153 | +2
154 | +1
155 | -1
157 | -2
158 | -3
159 | -4
160 | -5
161 |
163 |
164 |
165 |
166 |
187 |
188 |
167 | skip_previous
168 | fast_rewind
169 | play_arrow
170 | fast_forward
171 | skip_next
172 |
176 |
178 | 0:00/0:00
177 |
179 | movie
180 | menu_book
181 | slow_motion_video
182 | closed_caption
183 | settings
184 | fullscreen
185 |
186 | Stream will be started at
190 |
192 |
193 |
210 |
194 | ![]()
195 |
196 |
197 | notifications
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 | Comments is not implemented
211 |
213 |
222 |
214 |
220 |
221 |
215 |
216 |
218 |
219 | Playlist
227 |
228 |
229 |
230 |
231 |
248 |
232 | ![]()
233 |
246 |
247 |
234 | ![]()
235 |
245 |
236 | notifications
243 |
244 | Name
237 |
238 |
241 | Video Count
239 | Followers
240 | Description
242 |
249 |
271 |
250 |
251 |
262 | -
252 |
- 253 | Active Theme 254 | 255 | 256 |
- 257 | Background Material 258 | 259 | 260 |
263 |
264 | Settings about media
265 |
266 |
267 |
268 | Settings about plugins
269 |
270 |
272 | NewFlow
273 | Developed by malisipi 274 |
275 | 273 | Developed by malisipi 274 |
276 |
281 |
277 |
278 |
280 | 278 |
283 | ![]()
284 |
285 |
286 |
292 |
303 |
304 |
305 |
--------------------------------------------------------------------------------
/LICENSE_CC_BY_NC_ND_4.0:
--------------------------------------------------------------------------------
1 | Attribution-NonCommercial-NoDerivatives 4.0 International
2 |
3 | =======================================================================
4 |
5 | Creative Commons Corporation ("Creative Commons") is not a law firm and
6 | does not provide legal services or legal advice. Distribution of
7 | Creative Commons public licenses does not create a lawyer-client or
8 | other relationship. Creative Commons makes its licenses and related
9 | information available on an "as-is" basis. Creative Commons gives no
10 | warranties regarding its licenses, any material licensed under their
11 | terms and conditions, or any related information. Creative Commons
12 | disclaims all liability for damages resulting from their use to the
13 | fullest extent possible.
14 |
15 | Using Creative Commons Public Licenses
16 |
17 | Creative Commons public licenses provide a standard set of terms and
18 | conditions that creators and other rights holders may use to share
19 | original works of authorship and other material subject to copyright
20 | and certain other rights specified in the public license below. The
21 | following considerations are for informational purposes only, are not
22 | exhaustive, and do not form part of our licenses.
23 |
24 | Considerations for licensors: Our public licenses are
25 | intended for use by those authorized to give the public
26 | permission to use material in ways otherwise restricted by
27 | copyright and certain other rights. Our licenses are
28 | irrevocable. Licensors should read and understand the terms
29 | and conditions of the license they choose before applying it.
30 | Licensors should also secure all rights necessary before
31 | applying our licenses so that the public can reuse the
32 | material as expected. Licensors should clearly mark any
33 | material not subject to the license. This includes other CC-
34 | licensed material, or material used under an exception or
35 | limitation to copyright. More considerations for licensors:
36 | wiki.creativecommons.org/Considerations_for_licensors
37 |
38 | Considerations for the public: By using one of our public
39 | licenses, a licensor grants the public permission to use the
40 | licensed material under specified terms and conditions. If
41 | the licensor's permission is not necessary for any reason--for
42 | example, because of any applicable exception or limitation to
43 | copyright--then that use is not regulated by the license. Our
44 | licenses grant only permissions under copyright and certain
45 | other rights that a licensor has authority to grant. Use of
46 | the licensed material may still be restricted for other
47 | reasons, including because others have copyright or other
48 | rights in the material. A licensor may make special requests,
49 | such as asking that all changes be marked or described.
50 | Although not required by our licenses, you are encouraged to
51 | respect those requests where reasonable. More considerations
52 | for the public:
53 | wiki.creativecommons.org/Considerations_for_licensees
54 |
55 | =======================================================================
56 |
57 | Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
58 | International Public License
59 |
60 | By exercising the Licensed Rights (defined below), You accept and agree
61 | to be bound by the terms and conditions of this Creative Commons
62 | Attribution-NonCommercial-NoDerivatives 4.0 International Public
63 | License ("Public License"). To the extent this Public License may be
64 | interpreted as a contract, You are granted the Licensed Rights in
65 | consideration of Your acceptance of these terms and conditions, and the
66 | Licensor grants You such rights in consideration of benefits the
67 | Licensor receives from making the Licensed Material available under
68 | these terms and conditions.
69 |
70 |
71 | Section 1 -- Definitions.
72 |
73 | a. Adapted Material means material subject to Copyright and Similar
74 | Rights that is derived from or based upon the Licensed Material
75 | and in which the Licensed Material is translated, altered,
76 | arranged, transformed, or otherwise modified in a manner requiring
77 | permission under the Copyright and Similar Rights held by the
78 | Licensor. For purposes of this Public License, where the Licensed
79 | Material is a musical work, performance, or sound recording,
80 | Adapted Material is always produced where the Licensed Material is
81 | synched in timed relation with a moving image.
82 |
83 | b. Copyright and Similar Rights means copyright and/or similar rights
84 | closely related to copyright including, without limitation,
85 | performance, broadcast, sound recording, and Sui Generis Database
86 | Rights, without regard to how the rights are labeled or
87 | categorized. For purposes of this Public License, the rights
88 | specified in Section 2(b)(1)-(2) are not Copyright and Similar
89 | Rights.
90 |
91 | c. Effective Technological Measures means those measures that, in the
92 | absence of proper authority, may not be circumvented under laws
93 | fulfilling obligations under Article 11 of the WIPO Copyright
94 | Treaty adopted on December 20, 1996, and/or similar international
95 | agreements.
96 |
97 | d. Exceptions and Limitations means fair use, fair dealing, and/or
98 | any other exception or limitation to Copyright and Similar Rights
99 | that applies to Your use of the Licensed Material.
100 |
101 | e. Licensed Material means the artistic or literary work, database,
102 | or other material to which the Licensor applied this Public
103 | License.
104 |
105 | f. Licensed Rights means the rights granted to You subject to the
106 | terms and conditions of this Public License, which are limited to
107 | all Copyright and Similar Rights that apply to Your use of the
108 | Licensed Material and that the Licensor has authority to license.
109 |
110 | g. Licensor means the individual(s) or entity(ies) granting rights
111 | under this Public License.
112 |
113 | h. NonCommercial means not primarily intended for or directed towards
114 | commercial advantage or monetary compensation. For purposes of
115 | this Public License, the exchange of the Licensed Material for
116 | other material subject to Copyright and Similar Rights by digital
117 | file-sharing or similar means is NonCommercial provided there is
118 | no payment of monetary compensation in connection with the
119 | exchange.
120 |
121 | i. Share means to provide material to the public by any means or
122 | process that requires permission under the Licensed Rights, such
123 | as reproduction, public display, public performance, distribution,
124 | dissemination, communication, or importation, and to make material
125 | available to the public including in ways that members of the
126 | public may access the material from a place and at a time
127 | individually chosen by them.
128 |
129 | j. Sui Generis Database Rights means rights other than copyright
130 | resulting from Directive 96/9/EC of the European Parliament and of
131 | the Council of 11 March 1996 on the legal protection of databases,
132 | as amended and/or succeeded, as well as other essentially
133 | equivalent rights anywhere in the world.
134 |
135 | k. You means the individual or entity exercising the Licensed Rights
136 | under this Public License. Your has a corresponding meaning.
137 |
138 |
139 | Section 2 -- Scope.
140 |
141 | a. License grant.
142 |
143 | 1. Subject to the terms and conditions of this Public License,
144 | the Licensor hereby grants You a worldwide, royalty-free,
145 | non-sublicensable, non-exclusive, irrevocable license to
146 | exercise the Licensed Rights in the Licensed Material to:
147 |
148 | a. reproduce and Share the Licensed Material, in whole or
149 | in part, for NonCommercial purposes only; and
150 |
151 | b. produce and reproduce, but not Share, Adapted Material
152 | for NonCommercial purposes only.
153 |
154 | 2. Exceptions and Limitations. For the avoidance of doubt, where
155 | Exceptions and Limitations apply to Your use, this Public
156 | License does not apply, and You do not need to comply with
157 | its terms and conditions.
158 |
159 | 3. Term. The term of this Public License is specified in Section
160 | 6(a).
161 |
162 | 4. Media and formats; technical modifications allowed. The
163 | Licensor authorizes You to exercise the Licensed Rights in
164 | all media and formats whether now known or hereafter created,
165 | and to make technical modifications necessary to do so. The
166 | Licensor waives and/or agrees not to assert any right or
167 | authority to forbid You from making technical modifications
168 | necessary to exercise the Licensed Rights, including
169 | technical modifications necessary to circumvent Effective
170 | Technological Measures. For purposes of this Public License,
171 | simply making modifications authorized by this Section 2(a)
172 | (4) never produces Adapted Material.
173 |
174 | 5. Downstream recipients.
175 |
176 | a. Offer from the Licensor -- Licensed Material. Every
177 | recipient of the Licensed Material automatically
178 | receives an offer from the Licensor to exercise the
179 | Licensed Rights under the terms and conditions of this
180 | Public License.
181 |
182 | b. No downstream restrictions. You may not offer or impose
183 | any additional or different terms or conditions on, or
184 | apply any Effective Technological Measures to, the
185 | Licensed Material if doing so restricts exercise of the
186 | Licensed Rights by any recipient of the Licensed
187 | Material.
188 |
189 | 6. No endorsement. Nothing in this Public License constitutes or
190 | may be construed as permission to assert or imply that You
191 | are, or that Your use of the Licensed Material is, connected
192 | with, or sponsored, endorsed, or granted official status by,
193 | the Licensor or others designated to receive attribution as
194 | provided in Section 3(a)(1)(A)(i).
195 |
196 | b. Other rights.
197 |
198 | 1. Moral rights, such as the right of integrity, are not
199 | licensed under this Public License, nor are publicity,
200 | privacy, and/or other similar personality rights; however, to
201 | the extent possible, the Licensor waives and/or agrees not to
202 | assert any such rights held by the Licensor to the limited
203 | extent necessary to allow You to exercise the Licensed
204 | Rights, but not otherwise.
205 |
206 | 2. Patent and trademark rights are not licensed under this
207 | Public License.
208 |
209 | 3. To the extent possible, the Licensor waives any right to
210 | collect royalties from You for the exercise of the Licensed
211 | Rights, whether directly or through a collecting society
212 | under any voluntary or waivable statutory or compulsory
213 | licensing scheme. In all other cases the Licensor expressly
214 | reserves any right to collect such royalties, including when
215 | the Licensed Material is used other than for NonCommercial
216 | purposes.
217 |
218 |
219 | Section 3 -- License Conditions.
220 |
221 | Your exercise of the Licensed Rights is expressly made subject to the
222 | following conditions.
223 |
224 | a. Attribution.
225 |
226 | 1. If You Share the Licensed Material, You must:
227 |
228 | a. retain the following if it is supplied by the Licensor
229 | with the Licensed Material:
230 |
231 | i. identification of the creator(s) of the Licensed
232 | Material and any others designated to receive
233 | attribution, in any reasonable manner requested by
234 | the Licensor (including by pseudonym if
235 | designated);
236 |
237 | ii. a copyright notice;
238 |
239 | iii. a notice that refers to this Public License;
240 |
241 | iv. a notice that refers to the disclaimer of
242 | warranties;
243 |
244 | v. a URI or hyperlink to the Licensed Material to the
245 | extent reasonably practicable;
246 |
247 | b. indicate if You modified the Licensed Material and
248 | retain an indication of any previous modifications; and
249 |
250 | c. indicate the Licensed Material is licensed under this
251 | Public License, and include the text of, or the URI or
252 | hyperlink to, this Public License.
253 |
254 | For the avoidance of doubt, You do not have permission under
255 | this Public License to Share Adapted Material.
256 |
257 | 2. You may satisfy the conditions in Section 3(a)(1) in any
258 | reasonable manner based on the medium, means, and context in
259 | which You Share the Licensed Material. For example, it may be
260 | reasonable to satisfy the conditions by providing a URI or
261 | hyperlink to a resource that includes the required
262 | information.
263 |
264 | 3. If requested by the Licensor, You must remove any of the
265 | information required by Section 3(a)(1)(A) to the extent
266 | reasonably practicable.
267 |
268 |
269 | Section 4 -- Sui Generis Database Rights.
270 |
271 | Where the Licensed Rights include Sui Generis Database Rights that
272 | apply to Your use of the Licensed Material:
273 |
274 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right
275 | to extract, reuse, reproduce, and Share all or a substantial
276 | portion of the contents of the database for NonCommercial purposes
277 | only and provided You do not Share Adapted Material;
278 |
279 | b. if You include all or a substantial portion of the database
280 | contents in a database in which You have Sui Generis Database
281 | Rights, then the database in which You have Sui Generis Database
282 | Rights (but not its individual contents) is Adapted Material; and
283 |
284 | c. You must comply with the conditions in Section 3(a) if You Share
285 | all or a substantial portion of the contents of the database.
286 |
287 | For the avoidance of doubt, this Section 4 supplements and does not
288 | replace Your obligations under this Public License where the Licensed
289 | Rights include other Copyright and Similar Rights.
290 |
291 |
292 | Section 5 -- Disclaimer of Warranties and Limitation of Liability.
293 |
294 | a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
295 | EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
296 | AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
297 | ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
298 | IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
299 | WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
300 | PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
301 | ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
302 | KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
303 | ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
304 |
305 | b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
306 | TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
307 | NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
308 | INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
309 | COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
310 | USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
311 | ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
312 | DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
313 | IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
314 |
315 | c. The disclaimer of warranties and limitation of liability provided
316 | above shall be interpreted in a manner that, to the extent
317 | possible, most closely approximates an absolute disclaimer and
318 | waiver of all liability.
319 |
320 |
321 | Section 6 -- Term and Termination.
322 |
323 | a. This Public License applies for the term of the Copyright and
324 | Similar Rights licensed here. However, if You fail to comply with
325 | this Public License, then Your rights under this Public License
326 | terminate automatically.
327 |
328 | b. Where Your right to use the Licensed Material has terminated under
329 | Section 6(a), it reinstates:
330 |
331 | 1. automatically as of the date the violation is cured, provided
332 | it is cured within 30 days of Your discovery of the
333 | violation; or
334 |
335 | 2. upon express reinstatement by the Licensor.
336 |
337 | For the avoidance of doubt, this Section 6(b) does not affect any
338 | right the Licensor may have to seek remedies for Your violations
339 | of this Public License.
340 |
341 | c. For the avoidance of doubt, the Licensor may also offer the
342 | Licensed Material under separate terms or conditions or stop
343 | distributing the Licensed Material at any time; however, doing so
344 | will not terminate this Public License.
345 |
346 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
347 | License.
348 |
349 |
350 | Section 7 -- Other Terms and Conditions.
351 |
352 | a. The Licensor shall not be bound by any additional or different
353 | terms or conditions communicated by You unless expressly agreed.
354 |
355 | b. Any arrangements, understandings, or agreements regarding the
356 | Licensed Material not stated herein are separate from and
357 | independent of the terms and conditions of this Public License.
358 |
359 |
360 | Section 8 -- Interpretation.
361 |
362 | a. For the avoidance of doubt, this Public License does not, and
363 | shall not be interpreted to, reduce, limit, restrict, or impose
364 | conditions on any use of the Licensed Material that could lawfully
365 | be made without permission under this Public License.
366 |
367 | b. To the extent possible, if any provision of this Public License is
368 | deemed unenforceable, it shall be automatically reformed to the
369 | minimum extent necessary to make it enforceable. If the provision
370 | cannot be reformed, it shall be severed from this Public License
371 | without affecting the enforceability of the remaining terms and
372 | conditions.
373 |
374 | c. No term or condition of this Public License will be waived and no
375 | failure to comply consented to unless expressly agreed to by the
376 | Licensor.
377 |
378 | d. Nothing in this Public License constitutes or may be interpreted
379 | as a limitation upon, or waiver of, any privileges and immunities
380 | that apply to the Licensor or You, including from the legal
381 | processes of any jurisdiction or authority.
382 |
383 | =======================================================================
384 |
385 | Creative Commons is not a party to its public
386 | licenses. Notwithstanding, Creative Commons may elect to apply one of
387 | its public licenses to material it publishes and in those instances
388 | will be considered the “Licensor.” The text of the Creative Commons
389 | public licenses is dedicated to the public domain under the CC0 Public
390 | Domain Dedication. Except for the limited purpose of indicating that
391 | material is shared under a Creative Commons public license or as
392 | otherwise permitted by the Creative Commons policies published at
393 | creativecommons.org/policies, Creative Commons does not authorize the
394 | use of the trademark "Creative Commons" or any other trademark or logo
395 | of Creative Commons without its prior written consent including,
396 | without limitation, in connection with any unauthorized modifications
397 | to any of its public licenses or any other arrangements,
398 | understandings, or agreements concerning use of licensed material. For
399 | the avoidance of doubt, this paragraph does not form part of the
400 | public licenses.
401 |
402 | Creative Commons may be contacted at creativecommons.org.
403 |
404 |
--------------------------------------------------------------------------------
/js/render.js:
--------------------------------------------------------------------------------
1 | var render = {
2 | $: {
3 | video_preview: (mode="normal", video_info) => { /* mode=normal|compact */
4 | /* video_info
5 | * thumbnail
6 | * owner.name
7 | * owner.verified
8 | * length
9 | * title
10 | * id
11 | */
12 | let video = document.createElement("div");
13 | video.className = mode + " -video-preview";
14 | let thumbnail = document.createElement("img");
15 | thumbnail.draggable = false;
16 | thumbnail.loading = "lazy";
17 | thumbnail.src = video_info?.thumbnail ?? "";
18 | video.append(thumbnail);
19 | let owner = document.createElement("span");
20 | owner.className = "owner";
21 | owner.innerText = video_info?.owner?.name ?? "";
22 | owner.setAttribute("verified", video_info?.owner?.verified ?? false);
23 | video.append(owner);
24 | let length = document.createElement("span");
25 | length.className = "length";
26 | length.setAttribute("length", video_info?.length ?? 0);
27 | length.innerText = components.$_human_readable_time(video_info?.length ?? 0);
28 | video.append(length);
29 | let title = document.createElement("span");
30 | title.className = "title";
31 | title.innerText = video_info?.title;
32 | video.append(title);
33 | video.addEventListener("click", (_, _id=video_info?.id, keep_queue=video_info?.keep_queue) => {
34 | if(keep_queue != true){
35 | components.tabs.watch.video.$_clear_queue();
36 | }
37 | components.tabs.$_switch("watch");
38 | render.watch(_id);
39 | })
40 | return video;
41 | },
42 | playlist_preview: (mode="normal", playlist_info) => { /* mode=normal|compact */
43 | /* playlist_info
44 | * title
45 | * thumbnail
46 | * id
47 | */
48 | let playlist = document.createElement("div");
49 | playlist.className = mode + " -playlist-preview";
50 | let thumbnail = document.createElement("img");
51 | thumbnail.draggable = false;
52 | thumbnail.loading = "lazy";
53 | thumbnail.src = playlist_info?.thumbnail ?? "";
54 | playlist.append(thumbnail);
55 | let title = document.createElement("span");
56 | title.className = "title";
57 | title.innerText = playlist_info?.title;
58 | playlist.append(title);
59 | playlist.addEventListener("click", (_, _id=playlist_info?.id) => {
60 | alert(_id);
61 | })
62 | return playlist;
63 | },
64 | owner_preview: (mode="normal", owner_info) => { /* mode=normal|compact */
65 | let owner = document.createElement("div");
66 | owner.className = mode + " -owner-preview";
67 | owner.addEventListener("click", (event, _id=owner_info.id) => {
68 | if(event.target.className == "follow") return;
69 | render.owner(_id);
70 | });
71 | let thumbnail = document.createElement("img");
72 | thumbnail.draggable = false;
73 | thumbnail.loading = "lazy";
74 | thumbnail.className = "thumbnail";
75 | thumbnail.src = owner_info?.thumbnails?.[0]?.url;
76 | owner.append(thumbnail);
77 | let name = document.createElement("span");
78 | name.className = "name";
79 | name.innerText = owner_info?.name ?? "";
80 | name.setAttribute("verified", owner_info?.verified ?? false);
81 | owner.append(name);
82 | let followers = document.createElement("span");
83 | followers.className = "followers";
84 | followers.innerText = `${(owner_info?.followers ?? 0)} ${i18n.text("followers")}`;
85 | owner.append(followers);
86 | let follow = document.createElement("material-symbol");
87 | follow.className = "follow";
88 | follow.innerText = ["notifications", "notifications_active"][Number(database.following.is_following(owner_info.id))];
89 | follow.addEventListener("click", async () => {
90 | if(!database.following.is_following(owner_info.id)){ // If not following yet
91 | follow.innerText = "notifications_active";
92 | database.following.add({
93 | id: owner_info.id,
94 | name: owner_info.name,
95 | followers: owner_info.followers,
96 | verified: owner_info.verified,
97 | thumbnail: await image_helper.data_uri.from_image_uri(owner_info?.thumbnails?.[0]?.url),
98 | });
99 | } else {
100 | follow.innerText = "notifications";
101 | database.following.remove(owner_info.id);
102 | };
103 | });
104 | owner.append(follow);
105 | return owner;
106 | },
107 | chips: (parent, keywords, event_handler) => {
108 | parent.innerHTML = "";
109 | keywords.forEach(keyword => {
110 | let chip = document.createElement("div");
111 | chip.innerText = keyword;
112 | chip.addEventListener("click", (_, _event_handler=event_handler) => {
113 | _event_handler(keyword);
114 | });
115 | parent.append(chip);
116 | });
117 | },
118 | video_player_details: (parent, list, title) => {
119 | parent.innerHTML = "";
120 | if(title != null){
121 | let title_element = document.createElement("div");
122 | title_element.className = "title";
123 | title_element.innerText = title;
124 | parent.append(title_element);
125 | }
126 | list.forEach((text, index) => {
127 | let list_item = document.createElement("div");
128 | list_item.className = "list-item";
129 | if(typeof(text) == "string") {
130 | list_item.setAttribute("value", index);
131 | list_item.innerText = text;
132 | } else {
133 | list_item.setAttribute("value", text.value);
134 | list_item.innerText = text.text;
135 | }
136 | parent.append(list_item);
137 | });
138 | },
139 | info_with_kaomoji: (_info, _kaomoji) => {
140 | let container = document.createElement("div");
141 | container.className = "info_with_kaomoji";
142 | let kaomoji = document.createElement("span");
143 | kaomoji.className = "kaomoji";
144 | kaomoji.innerText = i18n.text(_kaomoji);
145 | container.append(kaomoji);
146 | container.append(document.createElement("br"));
147 | container.append(i18n.text(_info));
148 | return container;
149 | },
150 | queue: (element) => {
151 | element.innerHTML = "";
152 | let active_track = components.tabs.watch.video.$_queue_active();
153 | components.tabs.watch.video.$queue.forEach((video_preview, index) => {
154 | let preview = render.$.video_preview("list", {...video_preview, keep_queue:true});
155 | if(active_track == index){
156 | preview.className += " active";
157 | };
158 | element.append(preview);
159 | });
160 | },
161 | thumbar_buttons: (is_playing) => {
162 | components.$.$_window.setThumbarButtons([
163 | {
164 | tooltip: "Previous",
165 | icon: electron.nativeImage.createFromPath(path.join(__dirname, "assets/material-symbols/skip_previous.png")),
166 | click: () => {
167 | components.tabs.watch.video.$_previous();
168 | }
169 | }, {
170 | tooltip: (is_playing) ? "Pause" : "Play",
171 | icon: electron.nativeImage.createFromPath(path.join(__dirname, "assets/material-symbols/" + ((is_playing) ? "pause" : "play_arrow") + ".png")),
172 | click: () => {
173 | components.tabs.watch.video.$_play_pause();
174 | }
175 | }, {
176 | tooltip: "Next",
177 | icon: electron.nativeImage.createFromPath(path.join(__dirname, "assets/material-symbols/skip_next.png")),
178 | click: () => {
179 | components.tabs.watch.video.$_next();
180 | }
181 | }
182 | ]);
183 | },
184 | comment_preview: (info) => {
185 | let __channel_opener = (event, channel_id=info.owner.id) => {
186 | render.owner(channel_id);
187 | };
188 | let outer = document.createElement("div");
189 | outer.className = "-comment-preview";
190 | let thumbnail = document.createElement("img");
191 | thumbnail.draggable = false;
192 | thumbnail.src = info.owner.thumbnails?.[0]?.url;
193 | thumbnail.addEventListener("click", __channel_opener);
194 | outer.append(thumbnail);
195 | let details = document.createElement("div");
196 | outer.append(details);
197 | let name = document.createElement("div");
198 | name.className = "name";
199 | name.innerText = info.owner.name;
200 | name.setAttribute("verified", info.owner.isVerified);
201 | name.addEventListener("click", __channel_opener);
202 | details.append(name);
203 | let text = document.createElement("div");
204 | text.className = "text";
205 | text.innerText = info.text;
206 | details.append(text);
207 | return outer;
208 | }
209 | },
210 | trends: async () => {
211 | components.tabs.trends.$.innerHTML = "";
212 |
213 | let trends = await yt_extractor.trends.get_trends();
214 | trends.videos.forEach(video_preview => {
215 | components.tabs.trends.$.append(render.$.video_preview("compact", {
216 | id: video_preview.id,
217 | title: video_preview.title,
218 | thumbnail: video_preview.thumbnails[0].url,
219 | owner: {
220 | name: video_preview.owner.name,
221 | verified: video_preview.owner.verified
222 | },
223 | length: video_preview.length
224 | }));
225 | });
226 | },
227 | watch: async (id) => {
228 | components.tabs.watch.$.scrollBy(0, -99999);
229 | let previous_title = components.tabs.watch.info.title.innerText;
230 | components.tabs.watch.info.title.innerText = i18n.text("loading");
231 |
232 | if(!yt_extractor.video.is_extracted){
233 | await yt_extractor.video.extract_youtube_algorithm();
234 | }
235 |
236 | let response = await yt_extractor.video.get_video(id);
237 | response.id = id;
238 | components.tabs.watch.$$response = response;
239 |
240 | if(!response.isFamilySafe) {
241 | if(!confirm(i18n.text("warning_not_family_safe_video"))){
242 | components.tabs.watch.info.title.innerText = previous_title;
243 | return;
244 | };
245 | };
246 |
247 | if(components.tabs.watch.video.$hls != null){
248 | components.tabs.watch.video.$hls.destroy();
249 | components.tabs.watch.video.$hls = null;
250 | };
251 |
252 | components.tabs.watch.video.$_unload();
253 |
254 | components.tabs.watch.video.$video_tracks = [];
255 | components.tabs.watch.video.$audio_tracks = [];
256 | components.tabs.watch.video.$related_tracks = [];
257 | if(!components.tabs.watch.$$response.playability.isLiveNow){
258 | if(components.tabs.watch.$$response.playability.isLive && components.tabs.watch.$$response.playability.streamTime) {
259 | components.tabs.watch.video.video_player.stream_date.$.setAttribute("show", true);
260 | components.tabs.watch.video.video_player.stream_date.date.innerText = components.tabs.watch.$$response.playability.streamTime.toLocaleString();
261 | } else {
262 | components.tabs.watch.video.video_player.stream_date.$.setAttribute("show", false);
263 | ([
264 | [response.videoStreams, components.tabs.watch.video.$video_tracks],
265 | [response.audioStreams, components.tabs.watch.video.$audio_tracks],
266 | [response.relatedStreams, components.tabs.watch.video.$related_tracks]
267 | ]).map(target => {
268 | target[0].map(stream => {
269 | target[1].push(stream);
270 | });
271 | });
272 |
273 | components.tabs.watch.video.$_change_stream("video", -1);
274 | components.tabs.watch.video.$_change_stream("audio", -1);
275 | };
276 | } else {
277 | // Since Newflow pip is not compatible with live streams
278 | // Close Newflow pip until live stream ends.
279 | if(components.tabs.watch.video.$pip.$is_pip){
280 | components.tabs.watch.video.$pip.$toggle();
281 | }
282 | components.tabs.watch.video.$hls = new Hls();
283 | components.tabs.watch.video.$hls.loadSource(components.tabs.watch.$$response.hls);
284 | components.tabs.watch.video.$hls.attachMedia(components.tabs.watch.video.$video);
285 | components.tabs.watch.video.$hls.on(Hls.Events.MANIFEST_PARSED,function() {
286 | components.tabs.watch.video.$video_tracks = components.tabs.watch.video.$hls.levels.map(a=>a.height+"p");
287 | render.$.video_player_details(
288 | components.tabs.watch.video.video_player.controls.details.$$.video_quality,
289 | components.tabs.watch.video.$video_tracks,
290 | i18n.text("video_quality")
291 | );
292 | video.play();
293 | });
294 | }
295 |
296 | components.playbar.controls.play_pause.innerText = "play_arrow";
297 | components.tabs.watch.video.video_player.controls.play_pause.innerText = "play_arrow";
298 |
299 | components.tabs.watch.info.title.innerText = response.title;
300 | components.playbar.title.innerText = response.title;
301 | components.tabs.watch.info.description.innerText = response.description;
302 | components.tabs.watch.video.video_player.$.setAttribute("timelines", components.tabs.watch.video.$_times(response.description));
303 | components.tabs.watch.info.controls.like.setAttribute("count", response.likes);
304 | render.$.chips(components.tabs.watch.info.keywords, response.keywords, render.search);
305 | components.tabs.watch.info.owner.thumbnail.src = response.owner.thumbnails[0].url;
306 | components.playbar.thumbnail.src = response.thumbnails[0].url;
307 | components.tabs.watch.video.video_player.thumbnail.src = response.thumbnails[0].url;
308 | components.tabs.watch.video.$video.poster = response.thumbnails[0].url;
309 | components.tabs.watch.info.owner.name.innerText = response.owner.name;
310 | components.tabs.watch.info.owner.name.setAttribute("verified", response.owner.verified);
311 | components.playbar.owner.innerText = response.owner.name;
312 | components.tabs.watch.info.owner.followers.innerText = `${response.owner.followers} ${i18n.text("followers")}`;
313 |
314 | components.tabs.watch.video.$_add_track({
315 | id: id,
316 | title: response.title,
317 | thumbnail: response.thumbnails[0].url,
318 | length: response.length,
319 | owner: {
320 | name: response.owner.name,
321 | verified: response.owner.verified
322 | }
323 | }, true);
324 | if(components.tabs.watch.panels.autoplay.checked
325 | && components.tabs.watch.video.$queue[components.tabs.watch.video.$_queue_active()] == components.tabs.watch.video.$queue.at(-1)){ // if the playing track is last track
326 | for(let next_index = 0; next_index < response.nextVideos.length; next_index++) {
327 | let video_preview = response.nextVideos[next_index];
328 | if(video_preview.length > 15*60) { // TODO: @@@ some settings If video longer than 15min
329 | continue;
330 | }
331 | video_preview.thumbnail = video_preview.thumbnails?.[next_index]?.url ?? null;
332 | if(components.tabs.watch.video.$_add_track(video_preview, false)){
333 | break;
334 | }
335 | }
336 | };
337 |
338 | if(components.tabs.watch.video.$times != []){
339 | render.$.video_player_details(
340 | components.tabs.watch.video.video_player.controls.details.$$.timelines,
341 | components.tabs.watch.video.$times.map(timeline => ({
342 | text: timeline[1],
343 | value: timeline[0]
344 | })),
345 | i18n.text("timelines")
346 | );
347 | };
348 |
349 | components.tabs.watch.video.video_player.controls.previous.style.setProperty("display", ["none","unset"][Number(components.tabs.watch.video.$_can_previous())]);
350 | components.tabs.watch.video.video_player.controls.next.style.setProperty("display", ["none","unset"][Number(components.tabs.watch.video.$_can_next())]);
351 |
352 | render.$.video_player_details(
353 | components.tabs.watch.video.video_player.controls.details.$$.audio_quality,
354 | components.tabs.watch.video.$audio_tracks.map(track => {
355 | let codec = track.mimeType;
356 | if(track.mimeType.includes("mp4a")){
357 | codec = "m4a";
358 | } else if(track.mimeType.includes("opus")) {
359 | codec = "opus";
360 | };
361 | let language = "";
362 | if(track?.audioTrack){
363 | language = `${track?.audioTrack?.displayName} / `;
364 | }
365 | let bitrate = Math.round(track.bitrate / 1024);
366 | return `${language}${bitrate} kbps / ${codec}`;
367 | }),
368 | i18n.text("audio_quality")
369 | );
370 |
371 | render.$.video_player_details(
372 | components.tabs.watch.video.video_player.controls.details.$$.video_quality,
373 | components.tabs.watch.video.$video_tracks.map(track => {
374 | let codec = track.mimeType;
375 | if(track.mimeType.includes("mp4")){
376 | codec = "mpeg-4";
377 | } else if(track.mimeType.includes("webm")) {
378 | codec = "webm";
379 | };
380 | return `${track.qualityLabel} / ${codec}`;
381 | }),
382 | i18n.text("video_quality")
383 | );
384 |
385 | components.tabs.watch.video.$captions.$_remove();
386 | render.$.video_player_details(
387 | components.tabs.watch.video.video_player.controls.details.$$.captions,
388 | [
389 | {text:i18n.text("disable"), value:-1},
390 | ...response.captions.map( (track,index) => ({text:track?.name?.simpleText ?? track?.name?.runs?.[0]?.text, value:index}))
391 | ],
392 | i18n.text("captions")
393 | );
394 |
395 | components.tabs.watch.next_videos.innerHTML = "";
396 | response.nextVideos.forEach(video_preview => {
397 | components.tabs.watch.next_videos.append(render.$.video_preview("compact", {
398 | id: video_preview.id,
399 | title: video_preview.title,
400 | thumbnail: video_preview.thumbnails[0].url,
401 | owner: {
402 | name: video_preview.owner.name,
403 | verified: video_preview.owner.verified
404 | },
405 | length: video_preview.length
406 | }));
407 | });
408 |
409 | // TODO: Auto start playing video
410 | components.tabs.watch.video.$video.addEventListener("canplay", () => {
411 | components.tabs.watch.video.$_play();
412 | }, {once: true});
413 |
414 | (async () => {
415 | // TODO: @@@watch.mediaSession.square_artwork
287 |
288 |
289 |
290 |
291 |