diff --git a/script.js b/script.js index f99177a..6706b78 100644 --- a/script.js +++ b/script.js @@ -1,207 +1,232 @@ +function getCastopodURL() { + let castopod_url; + try { + castopod_url = document.querySelector("#castopod").value; + const regex = + /^https:\/\/podcast\.internet-czas-dzialac\.pl\/@icd\/episodes\//; + if (!regex.test(castopod_url)) { + throw new Error( + "Incorrect Castopod URL format! Please paste the correct URL. Example: https://podcast.internet-czas-dzialac.pl/@icd/episodes/icd-weekend-6-stara-myszka-mickey-nowy-prezes-uodo-i-sony-psujace-sylwestra" + ); + } + } catch (error) { + alert(error); + } + return castopod_url; +} + +function getPeertubeID() { + let peertube_id; + + try { + const regex = + /^https:\/\/video\.internet-czas-dzialac\.pl\/w\/[a-zA-Z0-9]{22,}$/; + peertube_id = document.querySelector("#peertube").value.split("/w/")[1]; + + if ( + !regex.test(document.querySelector("#peertube").value) || + !peertube_id + ) { + throw new Error( + "Incorrect PeerTube URL format! Please paste the correct URL. Example: https://video.internet-czas-dzialac.pl/w/nTgqnY7FJLQzNYfD9xtcSy" + ); + } + } catch (error) { + alert(error); + } + return peertube_id; +} + +function makeCastopodPlayer(castopod_url) { + return /* HTML */ `
+ +
`; +} + +function makePeertubePlayer(peertube_id) { + return /* HTML */ `
+ +
`; +} + +function makeAudioLinks(castopod_url) { + return /* HTML */ `
+ + + + + + + + + + + + + + + + + + + + + +
`; +} + +function makeVideoLinks(peertube_id) { + return /* HTML */ `
+ + + + + + + + + +
`; +} + function generateHtml() { - if ( - document.querySelector("#episode_name").value && - document.querySelector("#castopod").value && - document.querySelector("#peertube").value && - document.querySelector("#youtube").value - ) { - let castopod_url; - let peertube_id; - try { - castopod_url = document - .querySelector("#castopod").value; - const regex = /^https:\/\/podcast\.internet-czas-dzialac\.pl\/@icd\/episodes\//; - if (!regex.test(castopod_url)) { - throw new Error("Incorrect Castopod URL format! Please paste the correct URL. Example: https://podcast.internet-czas-dzialac.pl/@icd/episodes/icd-weekend-6-stara-myszka-mickey-nowy-prezes-uodo-i-sony-psujace-sylwestra"); - } - } catch (error) { - alert(error); - } + const castopod_url = getCastopodURL(); + const peertube_id = getPeertubeID(); - try { - const regex = /^https:\/\/video\.internet-czas-dzialac\.pl\/w\/[a-zA-Z0-9]{22,}$/; - peertube_id = document - .querySelector("#peertube") - .value.split("/w/")[1]; + let html = ""; - if (!regex.test(document.querySelector("#peertube").value) || !peertube_id) { - throw new Error("Incorrect PeerTube URL format! Please paste the correct URL. Example: https://video.internet-czas-dzialac.pl/w/nTgqnY7FJLQzNYfD9xtcSy"); - } - } catch (error) { - alert(error); - } + if (document.querySelector("#castopod-player-visible").checked) { + html += makeCastopodPlayer(castopod_url); + } - let html = ""; + if (document.querySelector("#peertube-player-visible").checked) { + html += makePeertubePlayer(peertube_id); + } - if (document.querySelector("#castopod-player-visible").checked) { - html += `
- -
` - } + if (document.querySelector("#audio-links-visible").checked) { + html += makeAudioLinks(castopod_url); + } - if (document.querySelector("#peertube-player-visible").checked) { - html += ` -
- -
` - } + if (document.querySelector("#video-links-visible").checked) { + html += makeVideoLinks(peertube_id); + } - if (document.querySelector("#audio-links-visible").checked) { - html += ` -
- - - - - - - - - - - - - - - - - - - - - -
` - } - if (document.querySelector("#video-links-visible").checked) { - html += ` -
- - - - - - - - - -
` - } - - console.log('Copied to clipboard'); - document.querySelector("textarea").value = html; - document.querySelector(".preview").innerHTML = html; - } + console.log("Copied to clipboard"); + document.querySelector("textarea").value = html; + document.querySelector(".preview").innerHTML = html; } function copyHtml() { - if (navigator) { - navigator.clipboard.writeText(document.querySelector("textarea").value); - } + if (navigator) { + navigator.clipboard.writeText(document.querySelector("textarea").value); + } } - diff --git a/style.css b/style.css index bac636c..2d34ed1 100644 --- a/style.css +++ b/style.css @@ -1,142 +1,142 @@ * { - margin: 0px; - padding: 0px; - box-sizing: border-box; - text-rendering: optimizelegibility; - font-smooth: auto; - -webkit-font-smoothing: auto; + margin: 0px; + padding: 0px; + box-sizing: border-box; + text-rendering: optimizelegibility; + font-smooth: auto; + -webkit-font-smoothing: auto; } body { - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - color: hsl(258.8, 17.4%, 3%); + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", + "Lucida Sans Unicode", Geneva, Verdana, sans-serif; + color: hsl(258.8, 17.4%, 3%); } section { - display: flex; - flex-flow: row; - flex-wrap: nowrap; + display: flex; + flex-flow: row; + flex-wrap: nowrap; } label { - margin-top: 1rem; - margin-bottom: .5rem; + margin-top: 1rem; + margin-bottom: 0.5rem; } label:nth-child(1) { - margin-top: 0; + margin-top: 0; } fieldset { - padding: .5rem; - margin-bottom: 2rem; + padding: 0.5rem; + margin-bottom: 2rem; } h1 { - margin-bottom: 1rem; + margin-bottom: 1rem; } .inputs { - display: flex; - flex-flow: column; - width: 24rem; - margin-right: 2rem; + display: flex; + flex-flow: column; + width: 24rem; + margin-right: 2rem; } .input { - display: flex; - flex-flow: column; - margin-bottom: 2rem; + display: flex; + flex-flow: column; + margin-bottom: 2rem; } .output { - display: flex; - flex-flow: column; - height: 20vh; + display: flex; + flex-flow: column; } .input-checkbox { - padding: .5rem; - user-select: none; + padding: 0.5rem; + user-select: none; } -input[type="checkbox"]+label { - cursor: pointer; +input[type="checkbox"] + label { + cursor: pointer; } input[type="text"] { - font-family: 'Courier New', Courier, monospace; + font-family: "Courier New", Courier, monospace; } textarea { - border: 1px solid #5e636e; - padding: .5rem; - overflow-y: scroll; - font-size: .5rem; - font-family: 'Courier New', Courier, monospace; - width: 100%; - height: 100%; - margin-bottom: 1rem; + border: 1px solid #5e636e; + padding: 0.5rem; + overflow-y: scroll; + font-size: 0.5rem; + font-family: "Courier New", Courier, monospace; + width: 100%; + min-height: 20vh; + margin-bottom: 1rem; } button { - padding: 0.25rem .5rem; - margin-bottom: 2rem; + padding: 0.25rem 0.5rem; + margin-bottom: 2rem; } .preview { - width: 700px; - padding: 1rem; - border: 1px solid #5e636e; + width: 700px; + padding: 1rem; + border: 1px solid #5e636e; } section { - padding: 1rem; + padding: 1rem; } .player { - width: 100%; - margin-bottom: 2rem; + width: 100%; + margin-bottom: 2rem; } .podcast-logos { - display: flex; - flex-flow: row wrap; - justify-content: center; - align-items: center; + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; } .audio-logos { - margin-top: 2rem; + margin-top: 2rem; } .video-logos { - margin-bottom: 2rem; + margin-bottom: 2rem; } -.podcast-logos>a { - margin: 0.75rem 0; +.podcast-logos > a { + margin: 0.75rem 0; } -.podcast-logos>a, -.podcast-logos>a:hover { - text-decoration: none !important; - box-shadow: none !important; +.podcast-logos > a, +.podcast-logos > a:hover { + text-decoration: none !important; + box-shadow: none !important; } -.podcast-logos>a>img { - width: auto !important; - margin: 0 0.75rem; - max-width: 120px; - height: 3rem; +.podcast-logos > a > img { + width: auto !important; + margin: 0 0.75rem; + max-width: 120px; + height: 3rem; } @media (prefers-color-scheme: dark) { - .logo { - content: var(--dark-image); - background-color: #191b1f; - display: block; - -moz-box-sizing: border-box; - box-sizing: border-box; - } -} \ No newline at end of file + .logo { + content: var(--dark-image); + background-color: #191b1f; + display: block; + -moz-box-sizing: border-box; + box-sizing: border-box; + } +}