yt.js (2936B)
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" + // no auto play
46 "&cc_load_policy=0" + // no subtitles
47 "&color=white" // white status bar
48
49 // inject player into video container
50 section.querySelector(".player_container").prepend(player);
51
52 // Focus player
53 document.getElementById("player_" + index).focus();
54
55 // Scroll to player
56 document.location = "#video_" + index;
57
58 }
59
60 }
61
62 function yt2html_update_channels_list() {
63
64 // Initilise channels array
65 var channels = [];
66
67 // Fetch channel input fields
68 var channels_obj = document.querySelectorAll(".channels_input");
69 channels_obj.forEach(function(x) {
70 if (x.value != "") {
71 channels.push(x.value);
72 }
73 });
74
75 // If last input field has a value, add a new (empty) one to the list, so the
76 // user can continue with input
77 if (channels_obj[channels_obj.length - 1].value != "") {
78 yt2html_add_channels_input(channels_obj.length);
79 }
80
81 // join channels array
82 channels = channels.join(",");
83
84 // insert array into hidden "channels" field
85 document.querySelector("input[name=channels]").value = channels;
86 }
87
88 function yt2html_add_channels_input(index) {
89
90 // Create label object
91 var label = document.createElement("label");
92 label.for = "channel_" + index;
93 label.innerHTML = "<mark>Add a new channel here</mark>";
94
95 // Create input object
96 var input = document.createElement("input");
97 input.name = "channel_" + index;
98 input.classList.add("channels_input");
99 input.type = "text";
100 input.addEventListener("input", yt2html_update_channels_list);
101
102 // Append label and input objects
103 document.getElementById("channels_list").append(label);
104 document.getElementById("channels_list").append(input);
105 }
