Make it possible to generate only video preview

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 */ `<div class="player">
+    <iframe
+      width="100%"
+      height="112"
+      frameborder="0"
+      scrolling="no"
+      style="width: 100%; height: 112px;  overflow: hidden;"
+      src="${castopod_url}/embed/light"
+    ></iframe>
+  </div>`;
+}
+
+function makePeertubePlayer(peertube_id) {
+  return /* HTML */ ` <div class="player">
+    <iframe
+      sandbox="allow-same-origin allow-scripts"
+      src="https://video.internet-czas-dzialac.pl/videos/embed/${peertube_id}"
+      allowfullscreen=""
+      width="100%"
+      height="394"
+      frameborder="0"
+    ></iframe>
+  </div>`;
+}
+
+function makeAudioLinks(castopod_url) {
+  return /* HTML */ ` <div class="podcast-logos audio-logos">
+    <a
+      title="Link do naszego podcastowego RSSa"
+      alt="Logo RSS"
+      href="https://podcast.internet-czas-dzialac.pl/@icd/feed.xml"
+    >
+      <img
+        class="logo"
+        height="32"
+        width="32"
+        src="https://assets.midline.pl/logos/light/rss.svg"
+      />
+    </a>
+    <a
+      title="${document.querySelector("#episode_name")
+        .value} na naszej instancji Castopod."
+      alt="Logo Castopod"
+      href="${castopod_url}"
+    >
+      <img
+        class="logo"
+        style="--dark-image: url('https://assets.midline.pl/logos/dark/castopod.svg')"
+        src="https://assets.midline.pl/logos/light/castopod.svg?v=2"
+        height="32"
+      />
+    </a>
+    <a
+      title="Podcast 'Internet. Czas działać!' w aplikacji AntennaPod."
+      alt="Logo AntennaPod"
+      href="https://antennapod.org/deeplink/subscribe/?url=https://podcast.internet-czas-dzialac.pl/@icd/feed.xml"
+    >
+      <img
+        class="logo"
+        height="32"
+        width="32"
+        src="https://assets.midline.pl/logos/light/antennapod.svg"
+      />
+    </a>
+    <a
+      title="Podcast 'Internet. Czas działać!' w aplikacji Patronite Audio."
+      alt="Logo Patronite Audio"
+      href="https://patronite.pl/patrocast/podcasts/f2eaf21a-8c3e-4e7f-93e1-c11868afa5f0/details"
+    >
+      <img
+        class="logo"
+        src="https://assets.midline.pl/logos/light/patronite-audio.svg"
+        height="32"
+        width="32"
+      />
+    </a>
+    <a
+      title="Podcast 'Internet. Czas działać!' w serwisie Spotify."
+      alt="Logo Spotify"
+      href="https://open.spotify.com/show/2BSREI0uQcADS8W0RHrkxB"
+    >
+      <img
+        class="logo"
+        style="--dark-image: url('https://assets.midline.pl/logos/dark/spotify.svg')"
+        src="https://assets.midline.pl/logos/light/spotify.svg"
+        height="48"
+      />
+    </a>
+    <a
+      title="Podcast 'Internet. Czas działać!' w serwisie Apple Podcasts."
+      alt="Logo Apple Podcasts"
+      href="https://podcasts.apple.com/pl/podcast/internet-czas-dzia%C5%82a%C4%87/id1536929719"
+    >
+      <img
+        class="logo"
+        src="https://assets.midline.pl/logos/light/apple-podcasts.svg"
+        height="48"
+      />
+    </a>
+    <a
+      title="Podcast 'Internet. Czas działać!' w serwisie Google Podcasts."
+      alt="Logo Podcasty Google"
+      href="https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0Lm1pZGxpbmUucGwvZmVlZC54bWw?sa=X&ved=0CAUQrrcFahcKEwiYtdDr7__sAhUAAAAAHQAAAAAQAQ"
+    >
+      <img
+        class="logo"
+        src="https://assets.midline.pl/logos/light/google-podcasts.svg"
+        height="48"
+      />
+    </a>
+  </div>`;
+}
+
+function makeVideoLinks(peertube_id) {
+  return /* HTML */ ` <div class="podcast-logos video-logos">
+    <a
+      title="${document.querySelector("#episode_name")
+        .value} na naszej instancji PeerTube."
+      alt="Logo PeerTube"
+      href="https://video.internet-czas-dzialac.pl/videos/watch/${peertube_id}"
+    >
+      <img
+        class="logo"
+        style="--dark-image: url('https://assets.midline.pl/logos/dark/peertube.svg')"
+        src="https://assets.midline.pl/logos/light/peertube.svg"
+        height="48"
+      />
+    </a>
+    <a
+      title="${document.querySelector("#odysee").value
+        ? `${document.querySelector("#episode_name").value} w serwisie Odysee`
+        : `Kanał 'Internet. Czas działać!' w serwisie Odysee.`}"
+      alt="Logo Odysee"
+      href="${document.querySelector("#odysee").value
+        ? document.querySelector("#odysee").value
+        : "https://odysee.com/@internetczasdzialac"}"
+    >
+      <img
+        class="logo"
+        src="https://assets.midline.pl/logos/light/odysee.svg"
+        style="--dark-image: url('https://assets.midline.pl/logos/dark/odysee.svg')"
+        height="48"
+      />
+    </a>
+    <a
+      title="${document.querySelector("#episode_name")
+        .value} w serwisie YouTube."
+      alt="Logo YouTube"
+      href="${document.querySelector("#youtube").value}"
+    >
+      <img
+        class="logo"
+        src="https://assets.midline.pl/logos/light/youtube.svg"
+        style="--dark-image: url('https://assets.midline.pl/logos/dark/youtube.svg')"
+        height="48"
+      />
+    </a>
+  </div>`;
+}
+
 function generateHtml() {
-	if (
+  const castopod_url = getCastopodURL();
-		document.querySelector("#episode_name").value &&
+  const peertube_id = getPeertubeID();
-		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);
-		}
 
-		try {
+  let html = "";
-			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) {
+  if (document.querySelector("#castopod-player-visible").checked) {
-				throw new Error("Incorrect PeerTube URL format! Please paste the correct URL. Example: https://video.internet-czas-dzialac.pl/w/nTgqnY7FJLQzNYfD9xtcSy");
+    html += makeCastopodPlayer(castopod_url);
-			}
+  }
-		} catch (error) {
-			alert(error);
-		}
 
-		let html = "";
+  if (document.querySelector("#peertube-player-visible").checked) {
+    html += makePeertubePlayer(peertube_id);
+  }
 
-		if (document.querySelector("#castopod-player-visible").checked) {
+  if (document.querySelector("#audio-links-visible").checked) {
-			html += `<div class="player">
+    html += makeAudioLinks(castopod_url);
-	<iframe
+  }
-		width="100%"
-		height="112"
-		frameborder="0"
-		scrolling="no"
-		style="width: 100%; height: 112px;  overflow: hidden;"
-		src="${castopod_url}/embed/light"
-	></iframe>
-</div>`
-		}
 
-		if (document.querySelector("#peertube-player-visible").checked) {
+  if (document.querySelector("#video-links-visible").checked) {
-			html += `
+    html += makeVideoLinks(peertube_id);
-<div class="player">
+  }
-	<iframe
-		sandbox="allow-same-origin allow-scripts"
-		src="https://video.internet-czas-dzialac.pl/videos/embed/${peertube_id}"
-		allowfullscreen=""
-		width="100%"
-		height="394"
-		frameborder="0"
-	></iframe>
-</div>`
-		}
 
-		if (document.querySelector("#audio-links-visible").checked) {
+  console.log("Copied to clipboard");
-			html += `
+  document.querySelector("textarea").value = html;
-<div class="podcast-logos audio-logos">
+  document.querySelector(".preview").innerHTML = html;
-	<a
-		title="Link do naszego podcastowego RSSa"
-		alt="Logo RSS"
-		href="https://podcast.internet-czas-dzialac.pl/@icd/feed.xml"
-	>
-		<img
-			class="logo"
-			height="32"
-			width="32"
-			src="https://assets.midline.pl/logos/light/rss.svg"
-		/>
-	</a>
-	<a
-		title="${document.querySelector("#episode_name").value} na naszej instancji Castopod."
-		alt="Logo Castopod"
-		href="${castopod_url}"
-	>
-		<img
-			class="logo"
-			style="--dark-image: url('https://assets.midline.pl/logos/dark/castopod.svg')"
-			src="https://assets.midline.pl/logos/light/castopod.svg?v=2"
-			height="32"
-		/>
-	</a>
-	<a
-		title="Podcast 'Internet. Czas działać!' w aplikacji AntennaPod."
-		alt="Logo AntennaPod"
-		href="https://antennapod.org/deeplink/subscribe/?url=https://podcast.internet-czas-dzialac.pl/@icd/feed.xml"
-	>
-		<img
-			class="logo"
-			height="32"
-			width="32"
-			src="https://assets.midline.pl/logos/light/antennapod.svg"
-		/>
-	</a>
-	<a
-		title="Podcast 'Internet. Czas działać!' w aplikacji Patronite Audio."
-		alt="Logo Patronite Audio"
-		href="https://patronite.pl/patrocast/podcasts/f2eaf21a-8c3e-4e7f-93e1-c11868afa5f0/details"
-	>
-		<img
-			class="logo"
-			src="https://assets.midline.pl/logos/light/patronite-audio.svg"
-			height="32"
-			width="32"
-		/>
-	</a>
-	<a
-		title="Podcast 'Internet. Czas działać!' w serwisie Spotify."
-		alt="Logo Spotify"
-		href="https://open.spotify.com/show/2BSREI0uQcADS8W0RHrkxB"
-	>
-		<img
-			class="logo"
-			style="--dark-image: url('https://assets.midline.pl/logos/dark/spotify.svg')"
-			src="https://assets.midline.pl/logos/light/spotify.svg"
-			height="48"
-		/>
-	</a>
-	<a
-		title="Podcast 'Internet. Czas działać!' w serwisie Apple Podcasts."
-		alt="Logo Apple Podcasts"
-		href="https://podcasts.apple.com/pl/podcast/internet-czas-dzia%C5%82a%C4%87/id1536929719"
-	>
-		<img
-			class="logo"
-			src="https://assets.midline.pl/logos/light/apple-podcasts.svg"
-			height="48"
-		/>
-	</a>
-	<a
-		title="Podcast 'Internet. Czas działać!' w serwisie Google Podcasts."
-		alt="Logo Podcasty Google"
-		href="https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0Lm1pZGxpbmUucGwvZmVlZC54bWw?sa=X&ved=0CAUQrrcFahcKEwiYtdDr7__sAhUAAAAAHQAAAAAQAQ"
-	>
-		<img
-			class="logo"
-			src="https://assets.midline.pl/logos/light/google-podcasts.svg"
-			height="48"
-		/>
-	</a>
-</div>`
-		}
-		if (document.querySelector("#video-links-visible").checked) {
-			html += `
-<div class="podcast-logos video-logos">
-	<a
-		title="${document.querySelector("#episode_name").value} na naszej instancji PeerTube."
-		alt="Logo PeerTube"
-		href="https://video.internet-czas-dzialac.pl/videos/watch/${peertube_id}"
-	>
-		<img
-			class="logo"
-			style="--dark-image: url('https://assets.midline.pl/logos/dark/peertube.svg')"
-			src="https://assets.midline.pl/logos/light/peertube.svg"
-			height="48"
-		/>
-	</a>
-	<a
-		title="${document.querySelector("#odysee").value
-					? `${document.querySelector("#episode_name").value} w serwisie Odysee`
-					: `Kanał 'Internet. Czas działać!' w serwisie Odysee.`}"
-		alt="Logo Odysee"
-		href="${document.querySelector("#odysee").value
-					? document.querySelector("#odysee").value
-					: 'https://odysee.com/@internetczasdzialac'}"
-	>
-		<img
-			class="logo"
-			src="https://assets.midline.pl/logos/light/odysee.svg"
-			style="--dark-image: url('https://assets.midline.pl/logos/dark/odysee.svg')"
-			height="48"
-		/>
-	</a>
-	<a
-		title="${document.querySelector("#episode_name").value} w serwisie YouTube."
-		alt="Logo YouTube"
-		href="${document.querySelector("#youtube").value}"
-	>
-		<img
-			class="logo"
-			src="https://assets.midline.pl/logos/light/youtube.svg"
-			style="--dark-image: url('https://assets.midline.pl/logos/dark/youtube.svg')"
-			height="48"
-		/>
-	</a>
-</div>`
-		}
-
-		console.log('Copied to clipboard');
-		document.querySelector("textarea").value = html;
-		document.querySelector(".preview").innerHTML = html;
-	}
 }
 
 function copyHtml() {
-	if (navigator) {
+  if (navigator) {
-		navigator.clipboard.writeText(document.querySelector("textarea").value);
+    navigator.clipboard.writeText(document.querySelector("textarea").value);
-	}
+  }
 }
-

style.css

@@ -1,142 +1,142 @@
 * {
-	margin: 0px;
+  margin: 0px;
-	padding: 0px;
+  padding: 0px;
-	box-sizing: border-box;
+  box-sizing: border-box;
-	text-rendering: optimizelegibility;
+  text-rendering: optimizelegibility;
-	font-smooth: auto;
+  font-smooth: auto;
-	-webkit-font-smoothing: auto;
+  -webkit-font-smoothing: auto;
 }
 
 body {
-	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
-	color: hsl(258.8, 17.4%, 3%);
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+  color: hsl(258.8, 17.4%, 3%);
 }
 
 section {
-	display: flex;
+  display: flex;
-	flex-flow: row;
+  flex-flow: row;
-	flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
 label {
-	margin-top: 1rem;
+  margin-top: 1rem;
-	margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 label:nth-child(1) {
-	margin-top: 0;
+  margin-top: 0;
 }
 
 fieldset {
-	padding: .5rem;
+  padding: 0.5rem;
-	margin-bottom: 2rem;
+  margin-bottom: 2rem;
 }
 
 h1 {
-	margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 .inputs {
-	display: flex;
+  display: flex;
-	flex-flow: column;
+  flex-flow: column;
-	width: 24rem;
+  width: 24rem;
-	margin-right: 2rem;
+  margin-right: 2rem;
 }
 
 .input {
-	display: flex;
+  display: flex;
-	flex-flow: column;
+  flex-flow: column;
-	margin-bottom: 2rem;
+  margin-bottom: 2rem;
 }
 
 .output {
-	display: flex;
+  display: flex;
-	flex-flow: column;
+  flex-flow: column;
-	height: 20vh;
 }
 
 .input-checkbox {
-	padding: .5rem;
+  padding: 0.5rem;
-	user-select: none;
+  user-select: none;
 }
 
-input[type="checkbox"]+label {
+input[type="checkbox"] + label {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 input[type="text"] {
-	font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
 }
 
 textarea {
-	border: 1px solid #5e636e;
+  border: 1px solid #5e636e;
-	padding: .5rem;
+  padding: 0.5rem;
-	overflow-y: scroll;
+  overflow-y: scroll;
-	font-size: .5rem;
+  font-size: 0.5rem;
-	font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
-	width: 100%;
+  width: 100%;
-	height: 100%;
+  min-height: 20vh;
-	margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 button {
-	padding: 0.25rem .5rem;
+  padding: 0.25rem 0.5rem;
-	margin-bottom: 2rem;
+  margin-bottom: 2rem;
 }
 
 .preview {
-	width: 700px;
+  width: 700px;
-	padding: 1rem;
+  padding: 1rem;
-	border: 1px solid #5e636e;
+  border: 1px solid #5e636e;
 }
 
 section {
-	padding: 1rem;
+  padding: 1rem;
 }
 
 .player {
-	width: 100%;
+  width: 100%;
-	margin-bottom: 2rem;
+  margin-bottom: 2rem;
 }
 
 .podcast-logos {
-	display: flex;
+  display: flex;
-	flex-flow: row wrap;
+  flex-flow: row wrap;
-	justify-content: center;
+  justify-content: center;
-	align-items: center;
+  align-items: center;
 }
 
 .audio-logos {
-	margin-top: 2rem;
+  margin-top: 2rem;
 }
 
 .video-logos {
-	margin-bottom: 2rem;
+  margin-bottom: 2rem;
 }
 
-.podcast-logos>a {
+.podcast-logos > a {
-	margin: 0.75rem 0;
+  margin: 0.75rem 0;
 }
 
-.podcast-logos>a,
+.podcast-logos > a,
-.podcast-logos>a:hover {
+.podcast-logos > a:hover {
-	text-decoration: none !important;
+  text-decoration: none !important;
-	box-shadow: none !important;
+  box-shadow: none !important;
 }
 
-.podcast-logos>a>img {
+.podcast-logos > a > img {
-	width: auto !important;
+  width: auto !important;
-	margin: 0 0.75rem;
+  margin: 0 0.75rem;
-	max-width: 120px;
+  max-width: 120px;
-	height: 3rem;
+  height: 3rem;
 }
 
 @media (prefers-color-scheme: dark) {
-	.logo {
+  .logo {
-		content: var(--dark-image);
+    content: var(--dark-image);
-		background-color: #191b1f;
+    background-color: #191b1f;
-		display: block;
+    display: block;
-		-moz-box-sizing: border-box;
+    -moz-box-sizing: border-box;
-		box-sizing: border-box;
+    box-sizing: border-box;
-	}
+  }
 }