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