diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..cf1e72c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+/brotlicffi
+/emsdk
+/node_modules
+/pycryptodome
+index.pyodidetest.html
+/static/js/pyodide.js
+/static/js/custom.pyodide.js
+/static/pyodide
\ No newline at end of file
diff --git a/README.md b/README.md
index 893d3fa..58845ef 100644
--- a/README.md
+++ b/README.md
@@ -1,92 +1,13 @@
-# yt-dlp-web-ui
+#yt-dlp-web-ui
+Requirements:
+node/npm
-## Getting started
+How to:
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+`npm install`
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+That's all!
-## Add your files
-
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
-
-```
-cd existing_repo
-git remote add origin http://gitlab.local/rabbithutch/yt-dlp-web-ui.git
-git branch -M main
-git push -uf origin main
-```
-
-## Integrate with your tools
-
-- [ ] [Set up project integrations](http://gitlab.local/rabbithutch/yt-dlp-web-ui/-/settings/integrations)
-
-## Collaborate with your team
-
-- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
-- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
-- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
-- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
-
-## Test and Deploy
-
-Use the built-in continuous integration in GitLab.
-
-- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
-- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
-- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
-- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
-- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
-
-***
-
-# Editing this README
-
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
-
-## Suggestions for a good README
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-
-## Name
-Choose a self-explaining name for your project.
-
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
-
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
-
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
-
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+Once this code is hosted, add the host url to allowedorigins in conf.json in yt-dlp-web and reload the server
\ No newline at end of file
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
new file mode 100644
index 0000000..763bd9f
Binary files /dev/null and b/android-chrome-192x192.png differ
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
new file mode 100644
index 0000000..ddd04c8
Binary files /dev/null and b/android-chrome-512x512.png differ
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644
index 0000000..1bc8eac
Binary files /dev/null and b/apple-touch-icon.png differ
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..2f17d24
Binary files /dev/null and b/favicon-16x16.png differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..cab9198
Binary files /dev/null and b/favicon-32x32.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..ae1fe35
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3b8a35a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,251 @@
+
+
+
+
+ yt-dlp web ui
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Server limits (in seconds)
+
+
+
Maximum video length
+
Maximum number of videos in playlist
+
Maximum length of individual video in playlist
+
Maximum gif length
+
Maximum gif resolution
+
+
+
+
+
+
+
+
+
+
+
User Guides:
+
➕ Show
+
+
+ Convert to MP3s:
+
+
➕ Show
+
+ First make sure your video is under the maximum length for videos
+
+ Next choose Convert to MP3 from the method dropdown
+
+ Next, determine whether you want to add ID3 metadata to your file, this metadata makes it so that your chosen media player will show the correct title and other information.
+
+ Next, enter the video url in the Video/Playlist URL field
+
+ If you have determined you want to add ID3 data click the Show ID3 form button, fill out your desired field and click Submit
+
+ Otherwise click Process.
+
+ A spinning wheel will show up and when the conversion is done, or if there's an error you will see your results in the table at the bottom of the page. You can right click/hold and release the link to get the option to download your file.
+
+
+
+
+ Get all download links for video:
+
+
➕ Show
+
+ First choose Get all download links for video from the method dropdown
+
+ Second, enter the video url in the Video/Playlist URL field and click Process
+
+ A select will appear in the table at the bottom of the page, select your desired video and click Download selected. You will be sent to the link for the file, you can right click/hold and release on the media to get the option to download it
+
+
+
+
+ Download playlist as MP3s
+
+
➕ Show
+
+ First make sure your playlist and all videos on the playlist fall within the limits defined for them.
+
+ Next, enter the playlist url in the Video/Playlist URL field and click Process
+
+ Your results will appear when done in the table at the bottom of the page
+
+
+
+
+ Download subtitles:
+
+
➕ Show
+
+ First enter the video url in the Video/Playlist URL and click Process
+
+ Next, choose the subtitle language you'd like to download in the details row of the results from the previous step in the table at the bottom of the page, choose whether or not to download auto subtitles, and click Get subtitles
+
+ Your results will appear when done in the table at the bottom of the page
+
+
+
+
+ Clip video:
+
+
➕ Show
+
+ First enter the video url in the Video/Playlist URL and click Process
+
+ Next, using the sliders select the beginning and end of your clip. Also choose whether to make the clip into a gif.
+
+ Once you're done click Clip.
+
+ Your results will appear when done in the table at the bottom of the page
+
+
+
+
+ Themes:
+
+
➕ Show
+
+ To configure your theme (page colors) click the ➕ Show text, the themes configuration tools will display below
+
+ To choose a theme click on the Theme select and pick any theme
+
+ To configure a custom theme choose Custom from the Theme select and choose the background and text colors
+
+ If you want a gradient background configure both Gradient color options
+
';
+ // All emissions return here
+ socket.on("done", (data) => {
+ // If necessary add a notification to the tab of the site
+ notify();
+ // If there's an error in the result just make the row with the given data, logic for what to actually show is in makeRow
+ if (data["error"]) {
+ var tr = makeRow(data);
+ document.querySelector("#results").prepend(tr);
+ } else if (data["method"] == "limits") {
+ // For the limits method we don't want to show snything in the results table, but the limits table at the top of the page
+ var limits = data["limits"];
+ glimits = limits;
+ // Populate the limits table
+ for (it in limits) {
+ document.querySelector("#" + limits[it]["limitid"]).innerHTML = limits[it]["limitvalue"];
+ }
+ } else {
+ // Get method
+ var method = data["method"];
+ // If done with step 1 of subtitles increment to step 2, otherwise reset to step 1
+ if (method == "subtitles") {
+ if ("step" in data) {
+ document.querySelector("#step").value = 2;
+ } else {
+ document.querySelector("#step").value = 1;
+ }
+ }
+ // When done with clipping reset to step 1
+ if (method == "clip") {
+ document.querySelector("#step").value = 1;
+ }
+ // When done wih getting streams set global video info
+ if (method == "streams") {
+ ginfo = data["info"];
+ }
+ // When done with step 1 of clipping (getting the tracks), populate the sources for the videojs player and reload it
+ if (method == "getClipperTracks") {
+ var sources = [];
+ for (i in data["info"]["formats"]) {
+ var cob = data["info"]["formats"][i];
+ if (cob["vcodec"] != "none") {
+ var codec = cob["video_ext"];
+ sources.push({
+ "type": "video/" + codec,
+ "src": cob["url"],
+ "resolution": cob["resolution"],
+ "format_id": cob["format_id"]
+ });
+ }
+ }
+ loadVideo(sources);
+ } else {
+ // For any other case just make a row with the given data
+ var tr = makeRow(data);
+ document.querySelector("#results").prepend(tr);
+ }
+ }
+ // Remove the loading spinner if it exists
+ if (data["method"] != "limits") {
+ document.querySelector("[id='" + data["spinnerid"] + "']").remove();
+ }
+ });
+ // When the tab is viewed the notifications are reset to 0 and the notifications are removed from the tab title
+ document.addEventListener("visibilitychange", () => {
+ if (!document.hidden) {
+ document.title = title;
+ notifications = 0;
+ }
+ });
+});
+
+// When downloading a stream from the select the Get all download links for video method provides just open the link in a new tab
+function dlStream(selectID) {
+ var index = document.getElementById(selectID).value;
+ window.open(ginfo["formats"][Number(index)]["url"], "_blank");
+}
+
+// Method for showing notifications in title
+function notify() {
+ notifications += 1;
+ document.title = "(" + notifications.toString() + ") " + title;
+}
+
+// Very important, the logic here decides what is returned to the user via the results tables
+function makeRow(data) {
+ // Create a table row element
+ var tr = document.createElement("tr");
+ // Create variable to store generated html for later adding to the tr element
+ var lhtml = "";
+ // Columns of the table
+ const cols = ["status", "title", "link", "details"];
+ // Iterate through each column of the table and construct and add the html for each column
+ for (col in cols) {
+ col = cols[col];
+ // If the column is in the data or it's status then...
+ if ((col in data) || (col == "status")) {
+ // Starts the column html
+ lhtml += "
";
+ // If the column is status, display either an error indicator or a success indicator
+ if (col == "status") {
+ if (data["error"]) {
+ lhtml += "";
+ } else {
+ lhtml += "
";
+ }
+ } else if (col == "link") {
+ // If the column is link then wrap the link in the requisite html to be clickable
+ lhtml += "" + data[col] + "";
+ } else if (col == "details") {
+ // If the column is details first display whatever data has been set for this column
+ lhtml += "
" + data[col] + "
";
+ // If select is in our data keys...
+ if ("select" in data) {
+ // Generate specially formatted selects based on whether this is for streams or another method (subtitles)
+ if (data["method"] == "streams") {
+ // Used to differentiate selects when there are multiple
+ var iid = crypto.randomUUID();
+ lhtml += " ";
+ lhtml += " "
+ } else {
+ var iid = crypto.randomUUID();
+ lhtml += "";
+ lhtml += '';
+ lhtml += '';
+ lhtml += ' ';
+ }
+ }
+ } else {
+ // Anything else just display the data directly
+ lhtml += "
" + data[col] + "
";
+ }
+ // Close out the column
+ lhtml += "";
+ } else {
+ // Otherwise write the row with nothing in it so all the other rows display properly
+ lhtml += "
"
+ }
+ }
+ // Add html to tr element and return it for display
+ tr.innerHTML = lhtml;
+ return tr;
+}
+
+// Generate a turretcss spinner with a random id (so it can be removed later) and append it to the spinners div (just above the results table)
+function genSpinner() {
+ var spinnerid = crypto.randomUUID();
+ var sp = document.createElement("button");
+ sp.setAttribute("id", spinnerid);
+ sp.setAttribute("class", "spinner");
+ sp.setAttribute("title", "Loading");
+ document.querySelector("#spinners").append(sp);
+ return spinnerid;
+}
+
+// When an ID3 submission is made we use a submit button, this way we run the code we need and return false, meaning that the form won't actually post
+// Constructs an object with all the id3 form values to use with toMP3, which will in turn set these values to be added to the metadata of the MP3
+function id3submit() {
+ var form = document.getElementById('id3');
+ var values = {};
+ for (var it in form.elements) {
+ values[form.elements[it].id] = form.elements[it].value;
+ }
+ var url = document.querySelector('#url').value;
+ toMP3(url, values);
+ return false;
+}
+
+// Hide/show the ID3 form
+function toggleID3Form() {
+ var form = document.querySelector("#id3");
+ var button = document.querySelector("#id3toggle");
+ if (form.style.display == "none") {
+ form.style.display = "block";
+ button.textContent = "Hide ID3 form";
+ } else {
+ form.style.display = "none";
+ button.textContent = "Show ID3 form";
+ }
+}
+
+// Generate spinner and emit toMP3 with the spinnerid (to remove the spinner later) to download mp3 and optionally add metadata to the file
+function toMP3(url, id3data = null) {
+ var spinnerid = genSpinner();
+ socket.emit("toMP3", { "url": url, "spinnerid": spinnerid, "id3": id3data });
+}
+
+// Emit playlist to download a playlist as MP3s and zip them for download
+function playlist(url) {
+ var spinnerid = genSpinner();
+ socket.emit("playlist", { "url": url, "spinnerid": spinnerid });
+}
+
+// Emit either step of subtitles
+// Step 1 will give us a list of the subtitle languages
+// Step 2 will give us a download of the selected subtitle
+function subtitles(url, iid = null) {
+ var spinnerid = genSpinner();
+ var step = Number(document.querySelector("#step").value);
+ var data = { "url": url, "spinnerid": spinnerid, "step": step }
+ if (step == 2) {
+ data["languageCode"] = document.querySelector('[data-iid="' + iid + '"]#langSelect').value;
+ data["autoSub"] = document.querySelector('[data-iid="' + iid + '"]#autoSubs').checked;
+ }
+ socket.emit("subtitles", data);
+}
+
+// Generic getInfo method to get all the info for a given link
+function getInfo(url, method) {
+ var spinnerid = genSpinner()
+ var data = { "url": url, "spinnerid": spinnerid, "method": method };
+ socket.emit("getInfoEvent", data);
+}
+
+// Clip method, ultimately produces a clip of a video or a gif of that clip
+function clip(url, directURL = null, gif = null, format_id = null, resolution = null) {
+ // Get the start and end times for the clip
+ var timeA = document.querySelector("#timeA").value;
+ var timeB = document.querySelector("#timeB").value;
+ // If there is a set resolution, check to make sure that resolution is not larger then the servers limit
+ // Otherwise display an error message
+ if (resolution != null) {
+ if (resolution > glimits[4]["limitvalue"]) {
+ document.querySelector("#clipperWarning4").style.display = "block";
+ }
+ } else if (gif && ((timeB - timeA) > glimits[3]["limitvalue"])) {
+ // If this is a gif check if the length of the clip is longer than the servers limit
+ // If so, display an error message
+ document.querySelector("#clipperWarning3").style.display = "block";
+ } else {
+ // If the start of the clip is after the end of the clip display an error message
+ if (Number(timeA) > Number(timeB)) {
+ document.querySelector("#clipperWarning2").style.display = "block";
+ } else {
+ var spinnerid = genSpinner();
+ // Set up the required values for the clip method and then set up additional values if they are not null
+ var data = { "url": url, "spinnerid": spinnerid, "timeA": timeA, "timeB": timeB };
+ if (format_id != null) {
+ data["format_id"] = format_id
+ }
+ if (directURL != null) {
+ data["directURL"] = directURL
+ }
+ if (gif != null) {
+ data["gif"] = true;
+ }
+ socket.emit("clip", data);
+ }
+ }
+}
+
+// This loads a video into videojs with multiple sources and generates a list of options in a select for the user to choose a stream
+// setSource handles actually setting the stream
+function loadVideo(sources) {
+ // Clear the video container, to be populated later
+ document.querySelector("#videoContainer").innerHTML = "";
+ // Create video element to be used to create videojs player
+ var video = document.createElement("video");
+ // Sources object for videojs initialization
+ var sdata = {
+ "sources": sources
+ };
+ // Set global sources for the video
+ vsources = sources;
+ // Set some basic attributes for the videojs player
+ video.setAttribute("id", "clipPlayer");
+ video.setAttribute("class", "video-js vjs-default-skin");
+ video.setAttribute("controls", "");
+ video.setAttribute("width", "720");
+ // Add the video to the DOM
+ document.querySelector("#videoContainer").append(video);
+ // Clear the source selector
+ document.querySelector("#srcSelect").innerHTML = "";
+ // Populate source selector
+ for (it in sources) {
+ document.querySelector("#srcSelect").innerHTML += "";
+ }
+ // If the videojs player object isn't empty then dispose it
+ if (player != "") {
+ player.dispose();
+ }
+ // Test if this is doing anything
+ //document.querySelector("#clipPlayer").innerHTML = "";
+ // Initialize the videojs player
+ player = videojs('clipPlayer', sdata, function onPlayerReady() {
+ this.on("loadedmetadata", function () {
+ // If the video is too long display a warning
+ if (this.duration() < glimits[0]["limitvalue"]) {
+ document.querySelector("#timeA").max = this.duration();
+ document.querySelector("#timeB").max = this.duration();
+ document.querySelector("#clipper").style.display = "block";
+ } else {
+ document.querySelector("#clipper").innerHTML = "";
+ document.querySelector("#clipperWarning").style.display = "block";
+ }
+ });
+ });
+}
+
+// Set the current source of the videojs player based on the selected source
+function setSource(srcIndex) {
+ player.src(vsources[Number(srcIndex)]);
+}
+
+// Set the current time of the video player when the time sliders change, format the time display to minutes and seconds
+function updatePlayerTime(range) {
+ player.currentTime(range.value);
+ if (range.id == "timeA") {
+ document.querySelector("#timeStart").value = (Math.floor(range.value / 60)).toString().padStart(2, "0") + ":" + (range.value % 60).toString().padStart(2, "0");
+ } else if (range.id == "timeB") {
+ document.querySelector("#timeEnd").value = (Math.floor(range.value / 60)).toString().padStart(2, "0") + ":" + (range.value % 60).toString().padStart(2, "0");
+ }
+}
+
+// Submit the clip to be cut
+function clipSecond() {
+ document.querySelector("#step").value = 2;
+ process();
+}
+
+// Semi generic method tying buttons to emissions
+// This should be reworked and the extraSteps stuff should be removed completely
+// Recommendation: just a set of if elses for the exact method that was passed
+function process(button = null, extraSteps = null) {
+ // Get method from method select
+ var method = document.querySelector('#method').value;
+ // Get the url from the Video/Playlist URL field
+ var url = document.querySelector('#url').value;
+ // Check if the url is valid
+ if (isValidUrl(url)) {
+ // Hide warnings until needed
+ document.querySelector('#urlWarning').style.display = 'none';
+ document.querySelector("#clipperWarning").style.display = "none";
+ // Run toMP3 function
+ if (method == "toMP3") {
+ toMP3(url);
+ } else if (method == "playlist") {
+ // Run playlist function
+ playlist(url);
+ } else if (method == "subtitles") {
+ // Run subtitles function
+ // If a button has been passed (in order to identify the select) pass the iid to subtitles for selected subtitles retrieval
+ if (button == null) {
+ subtitles(url);
+ } else {
+ subtitles(url, iid = button.getAttribute('data-iid'));
+ }
+ } else if (method == "streams") {
+ // Run getInfo function with the streams method
+ getInfo(url, "streams");
+ } else if (method == "clip") {
+ // Get the step of clipping we're at
+ var step = Number(document.querySelector("#step").value);
+ // Add extraSteps if specified
+ if (extraSteps != null) {
+ extraSteps = Number(extraSteps);
+ step += extraSteps;
+ }
+ // If we're at step 1 get a list of tracks for the video
+ if (step == 1) {
+ getInfo(url, "getClipperTracks");
+ } else if (step == 2) {
+ // If we're at step 2 get some info and clip the video
+ var format = vsources[Number(document.querySelector("#srcSelect").value)]["format_id"]
+ var format_id = format["format_id"];
+ var resolution = format["width"]
+ if (document.querySelector("#toGif").checked) {
+ clip(url, null, true, format_id = format_id, resolution = resolution);
+ } else {
+ clip(url, null, null, format_id = format_id, resolution = resolution);
+ }
+ }
+ }
+ } else {
+ // If the url isn't valid display a warning
+ document.querySelector('#urlWarning').style.display = 'block';
+ }
+}
+
+// Checks if an entered url is valid
+// https://www.freecodecamp.org/news/check-if-a-javascript-string-is-a-url/
+const isValidUrl = urlString => {
+ try {
+ return Boolean(new URL(urlString));
+ }
+ catch (e) {
+ return false;
+ }
+}
+
+// Get a random integer in an inclusive range
+function randomInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+// Set theme based on the selected theme or custom values
+function setTheme(customgradient=false) {
+ var r = document.querySelector(':root');
+ var theme = document.querySelector("#theme").value;
+ if (theme == "custom") {
+ theme = {
+ "bgcolor": document.querySelector("#bgcolor").value,
+ "textcolor": document.querySelector("#textcolor").value
+ }
+ if (customgradient){
+ // Set the gradient with the custom values from Top/Bottom color of gradient
+ theme["gradienttop"] = document.querySelector("#gradienttop").value;
+ theme["gradientbottom"] = document.querySelector("#gradientbottom").value;
+ } else {
+ // Set the gradient to a solid color
+ theme["gradienttop"] = theme["bgcolor"];
+ theme["gradientbottom"] = theme["bgcolor"];
+ }
+ } else {
+ var themename = theme;
+ theme = themes[theme];
+ if (themename != "sky") {
+ theme["gradienttop"] = theme["bgcolor"];
+ theme["gradientbottom"] = theme["bgcolor"];
+ } else {
+ // Generate two light blues colors in hex format and set the top and bottom of the gradient to these
+ var top0 = randomInt(50, 99).toString().padStart(2, "0");
+ top0 = "#" + top0 + top0 + "ff";
+ var bottom0 = randomInt(50, 99).toString().padStart(2, "0");
+ bottom0 = "#" + bottom0 + bottom0 + "ff";
+ theme["gradienttop"] = top0;
+ theme["gradientbottom"] = bottom0;
+ }
+ }
+ for (it in theme) {
+ r.style.setProperty('--' + it, theme[it]);
+ }
+ var rs = getComputedStyle(r);
+}
+
+
+// Generic toggle method, requires an element with an id and a element that will be used for toggling the visibility of the main element with an id of the main element + _toggle
+function toggle(id) {
+ if (document.querySelector(id).style.display == "none") {
+ document.querySelector(id).style.display = "block";
+ document.querySelector(id + "_toggle").innerHTML = "➖ Hide";
+ } else {
+ document.querySelector(id).style.display = "none";
+ document.querySelector(id + "_toggle").innerHTML = "➕ Show";
+ }
+}
+