icd/audio-video-links-generator
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Arkadiusz Wieczorek 2022-01-09 14:19:32 +01:00
commit d91a1cc6e3
3 changed files with 406 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
index.html Normal file
View File

@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Audio/video links generator</title>
<link
rel="stylesheet"
href="style.css"
>
<script src="script.js"></script>
</head>
<body>
<section>
<div class="inputs">
<h1>Dane</h1>
<div class="input">
<label for="name">Nazwa odcinka</label>
<input
type="text"
name="episode-name"
id="episode_name"
value="Test - ICD #213"
placeholder="Test - ICD #213"
oninput="generateHtml();"
>
</div>
<div class="input">
<label for="funkwhale">Funkhwale episode url</label>
<input
type="text"
name="funkwhale-episode-id"
id="funkwhale"
value="https://podcast.midline.pl/library/tracks/32/"
placeholder="https://podcast.midline.pl/library/tracks/32/"
oninput="generateHtml();"
>
</div>
<div class="input">
<label for="peertube">Peertube video url</label>
<input
type="text"
name="peertube-video-id"
id="peertube"
value="https://video.internet-czas-dzialac.pl/w/1L2juuzDN6VH5fCXmuhgGY"
placeholder="https://video.internet-czas-dzialac.pl/w/1L2juuzDN6VH5fCXmuhgGY"
oninput="generateHtml();"
>
</div>
<!-- <div class="input">
<label for="odysee">Odysee video url</label>
<input
type="text"
name="odysee-video-id"
id="odysee"
placeholder="https://odysee.com/@internetczasdzialac:6/internet-of-things,-czy-internet-of-shit:1"
oninput="generateHtml();"
>
</div> -->
<div class="input">
<label for="youtube">Youtube video url</label>
<input
type="text"
name="youtube-video-id"
id="youtube"
value="https://www.youtube.com/watch?v=3MC-_83Zqik"
placeholder="https://www.youtube.com/watch?v=3MC-_83Zqik"
oninput="generateHtml();"
>
</div>
</div>
<div class="result">
<div class="output">
<h1>Output</h1>
<textarea
name="output"
id="output"
></textarea>
</div>
<button onclick="copyHtml()">Copy HTML</button>
<h1>Render jak w Ghost</h1>
<div class="preview">
</div>
</div>
</section>
<script>
window.addEventListener("DOMContentLoaded", function() {
generateHtml()
}, false);
</script>
</body>
</html>

179
script.js Normal file
View File

@ -0,0 +1,179 @@
function generateHtml() {
if (
document.querySelector("#episode_name").value &&
document.querySelector("#funkwhale").value &&
document.querySelector("#peertube").value &&
document.querySelector("#youtube").value
) {
let funkwhale_id;
let peertube_id;
try {
funkwhale_id = document
.querySelector("#funkwhale")
.value.split("/tracks/")[1];
} catch (error) {
alert("Podaj prawidłową wartością dla funkwhale");
}
try {
peertube_id = document
.querySelector("#peertube")
.value.split("/w/")[1];
} catch (error) {
alert("Podaj prawidłową wartością dla peertube");
}
const html = `<div class="player">
<iframe
scrolling="no"
src="https://podcast.midline.pl/front/embed.html?type=track&id=${funkwhale_id}"
width="100%"
height="160"
frameborder="no"
></iframe>
</div>
<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>
<div class="podcast-logos audio-logos">
<a
title="Link do naszego podcastowego RSSa"
alt="Logo RSS"
href="https://podcast.midline.pl/feed.xml"
>
<img
class="logo"
height="32"
width="32"
src="https://assets.midline.pl/logos/light/rss.svg"
/>
</a>
<a
title="${episode_name} w naszej instancji Funkwhale."
alt="Logo Funkwhale"
href="https://podcast.midline.pl/library/tracks/${funkwhale_id}"
>
<img
class="logo"
style="--dark-image: url('https://assets.midline.pl/logos/dark/funkwhale.svg')"
src="https://assets.midline.pl/logos/light/funkwhale.svg"
height="32"
width="32"
/>
</a>
<a
title="Podcast 'Internet. Czas działać!' w aplikacji AntennaPod."
alt="Logo AntennaPod"
href="https://antennapod.org/"
>
<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>
<div class="podcast-logos video-logos">
<a
title="${episode_name} w serwisie 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="Kanał 'Internet. Czas działać!' w serwisie Odysee."
alt="Logo Odysee"
href="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="${episode_name} w serwisie YouTube."
alt="Logo YouTube"
href="https://www.youtube.com/watch?v=3MC-_83Zqik"
>
<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(html);
document.querySelector("textarea").value = html;
document.querySelector(".preview").innerHTML = html;
}
}
function copyHtml() {
navigator.clipboard.writeText(document.querySelector("textarea").value);
}

113
style.css Normal file
View File

@ -0,0 +1,113 @@
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-rendering: optimizelegibility;
font-smooth: auto;
-webkit-font-smoothing: auto;
}
body {
font-family: "Open Sans";
color: hsl(258.8, 17.4%, 3%);
}
section {
display: flex;
flex-flow: row;
flex-wrap: nowrap;
}
h1 {
margin-bottom: 1rem;
}
.inputs {
display: flex;
flex-flow: column;
width: 24rem;
margin-right: 1rem;
}
.input {
display: flex;
flex-flow: column;
margin-bottom: 1rem;
}
.output {
display: flex;
flex-flow: column;
height: 20vh;
}
textarea {
border: 1px solid #5e636e;
padding: .5rem;
overflow-y: scroll;
font-size: .667rem;
font-family: 'Courier New', Courier, monospace;
width: 100%;
height: 100%;
margin-bottom: 1rem;
}
button {
padding: 0.25rem .5rem;
margin-bottom: 1rem;
}
.preview {
width: 700px;
border: 1px solid #5e636e;
}
section {
padding: 1rem;
}
.player {
width: 100%;
margin-bottom: 2rem;
}
.podcast-logos {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.audio-logos {
margin-top: 2rem;
}
.video-logos {
margin-bottom: 2rem;
}
.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 > 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;
}
}