yt.js (2895B)
1 function yt2html_toggle_player(video) {
2
3 console.log("video: " + video);
4
5 // get video section
6 var section = document.getElementById("video_" + video);
7
8 // Preview image
9 var preview = section.querySelector("#preview_" + video);
10
11 // if player-iframe exists, remove it and unhide preview image
12 var player = section.querySelectorAll("#player_" + video);
13
14 if (player.length > 0) {
15
16 // unhide preview image
17 preview.classList.remove("hidden");
18
19 // remove player
20 player.forEach(function(x) { x.remove(); });
21
22 // Hide player container
23 section.querySelector(".player_container").classList.add("hidden");
24
25 } else {
26
27 // hide preview image
28 preview.classList.add("hidden");
29
30 // unhide player container
31 section.querySelector(".player_container").classList.remove("hidden");
32
33 // Construct player iframe
34 var player = document.createElement("iframe");
35 player.id = "player_" + video;
36 player.classList.add("player");
37 player.allowFullscreen = "true";
38 player.sandbox = "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox";
39 player.width = "100%";
40 player.height = "100%";
41 player.frameborder = "0";
42 player.scrolling = "no";
43 player.src = "https://www.youtube-nocookie.com/embed/" + video +
44 "?autoplay=1" + // no auto play
45 "&cc_load_policy=0" + // no subtitles
46 "&color=white" // white status bar
47
48 // inject player into video container
49 section.querySelector(".player_container").prepend(player);
50
51 // Focus player
52 document.getElementById("player_" + video).focus();
53
54 // Scroll to player
55 document.location = "#video_" + video;
56
57 }
58
59 }
60
61 function yt2html_update_channels_list() {
62
63 // Initilise channels array
64 var channels = [];
65
66 // Fetch channel input fields
67 var channels_obj = document.querySelectorAll(".channels_input");
68 channels_obj.forEach(function(x) {
69 if (x.value != "") {
70 channels.push(x.value);
71 }
72 });
73
74 // If last input field has a value, add a new (empty) one to the list, so the
75 // user can continue with input
76 if (channels_obj[channels_obj.length - 1].value != "") {
77 yt2html_add_channels_input(channels_obj.length);
78 }
79
80 // join channels array
81 channels = channels.join(",");
82
83 // insert array into hidden "channels" field
84 document.querySelector("input[name=channels]").value = channels;
85 }
86
87 function yt2html_add_channels_input(index) {
88
89 // Create label object
90 var label = document.createElement("label");
91 label.for = "channel_" + index;
92 label.innerHTML = "<mark>Add a new channel here</mark>";
93
94 // Create input object
95 var input = document.createElement("input");
96 input.name = "channel_" + index;
97 input.classList.add("channels_input");
98 input.type = "text";
99 input.addEventListener("input", yt2html_update_channels_list);
100
101 // Append label and input objects
102 document.getElementById("channels_list").append(label);
103 document.getElementById("channels_list").append(input);
104 }
