554 lines
18 KiB
HTML
Executable File
554 lines
18 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
|
|
<defs>
|
|
<g id="icon-comments">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 6C9 4.34315 7.65685 3 6 3H4C2.34315 3 1 4.34315 1 6V8C1 9.65685 2.34315 11 4 11H6C7.65685 11 9 9.65685 9 8V6ZM7 6C7 5.44772 6.55228 5 6 5H4C3.44772 5 3 5.44772 3 6V8C3 8.55228 3.44772 9 4 9H6C6.55228 9 7 8.55228 7 8V6Z" fill="#0F0F0F"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M9 16C9 14.3431 7.65685 13 6 13H4C2.34315 13 1 14.3431 1 16V18C1 19.6569 2.34315 21 4 21H6C7.65685 21 9 19.6569 9 18V16ZM7 16C7 15.4477 6.55228 15 6 15H4C3.44772 15 3 15.4477 3 16V18C3 18.5523 3.44772 19 4 19H6C6.55228 19 7 18.5523 7 18V16Z" fill="#0F0F0F"></path> <path d="M11 7C11 6.44772 11.4477 6 12 6H22C22.5523 6 23 6.44772 23 7C23 7.55228 22.5523 8 22 8H12C11.4477 8 11 7.55228 11 7Z" fill="#0F0F0F"></path> <path d="M11 17C11 16.4477 11.4477 16 12 16H22C22.5523 16 23 16.4477 23 17C23 17.5523 22.5523 18 22 18H12C11.4477 18 11 17.5523 11 17Z" fill="#0F0F0F"></path>
|
|
</g>
|
|
<g id="icon-save">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C4 2.34315 5.34315 1 7 1H17C18.6569 1 20 2.34315 20 4V20.9425C20 22.6114 18.0766 23.5462 16.7644 22.5152L12 18.7717L7.23564 22.5152C5.92338 23.5462 4 22.6114 4 20.9425V4ZM7 3C6.44772 3 6 3.44772 6 4V20.9425L12 16.2283L18 20.9425V4C18 3.44772 17.5523 3 17 3H7Z" fill="#0F0F0F"></path>
|
|
</g>
|
|
<g id="icon-hide">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.61399 4.21063C3.17804 3.87156 2.54976 3.9501 2.21069 4.38604C1.87162 4.82199 1.95016 5.45027 2.38611 5.78934L4.66386 7.56093C3.78436 8.54531 3.03065 9.68043 2.41854 10.896L2.39686 10.9389C2.30554 11.1189 2.18764 11.3514 2.1349 11.6381C2.09295 11.8661 2.09295 12.1339 2.1349 12.3618C2.18764 12.6485 2.30554 12.881 2.39686 13.0611L2.41854 13.104C4.35823 16.956 7.71985 20 12.0001 20C14.2313 20 16.2129 19.1728 17.8736 17.8352L20.3861 19.7893C20.8221 20.1284 21.4503 20.0499 21.7894 19.6139C22.1285 19.178 22.0499 18.5497 21.614 18.2106L3.61399 4.21063ZM16.2411 16.5654L14.4434 15.1672C13.7676 15.6894 12.9201 16 12.0001 16C9.79092 16 8.00006 14.2091 8.00006 12C8.00006 11.4353 8.11706 10.898 8.32814 10.4109L6.24467 8.79044C5.46659 9.63971 4.77931 10.6547 4.20485 11.7955C4.17614 11.8525 4.15487 11.8948 4.13694 11.9316C4.12114 11.964 4.11132 11.9853 4.10491 12C4.11132 12.0147 4.12114 12.036 4.13694 12.0684C4.15487 12.1052 4.17614 12.1474 4.20485 12.2045C5.9597 15.6894 8.76726 18 12.0001 18C13.5314 18 14.9673 17.4815 16.2411 16.5654ZM10.0187 11.7258C10.0064 11.8154 10.0001 11.907 10.0001 12C10.0001 13.1046 10.8955 14 12.0001 14C12.2667 14 12.5212 13.9478 12.7538 13.8531L10.0187 11.7258Z" fill="#0F1729"></path> <path d="M10.9506 8.13908L15.9995 12.0661C15.9999 12.0441 16.0001 12.022 16.0001 12C16.0001 9.79085 14.2092 7.99999 12.0001 7.99999C11.6369 7.99999 11.285 8.04838 10.9506 8.13908Z" fill="#0F1729"></path> <path d="M19.7953 12.2045C19.4494 12.8913 19.0626 13.5326 18.6397 14.1195L20.2175 15.3467C20.7288 14.6456 21.1849 13.8917 21.5816 13.104L21.6033 13.0611C21.6946 12.881 21.8125 12.6485 21.8652 12.3618C21.9072 12.1339 21.9072 11.8661 21.8652 11.6381C21.8125 11.3514 21.6946 11.1189 21.6033 10.9389L21.5816 10.896C19.6419 7.04402 16.2803 3.99998 12.0001 3.99998C10.2848 3.99998 8.71714 4.48881 7.32934 5.32257L9.05854 6.66751C9.98229 6.23476 10.9696 5.99998 12.0001 5.99998C15.2329 5.99998 18.0404 8.31058 19.7953 11.7955C19.824 11.8525 19.8453 11.8948 19.8632 11.9316C19.879 11.964 19.8888 11.9853 19.8952 12C19.8888 12.0147 19.879 12.036 19.8632 12.0684C19.8453 12.1052 19.824 12.1474 19.7953 12.2045Z" fill="#0F1729"></path>
|
|
</g>
|
|
<g id="icon-play">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46484 3.92349C4.79896 3.5739 4 4.05683 4 4.80888V19.1911C4 19.9432 4.79896 20.4261 5.46483 20.0765L19.1622 12.8854C19.8758 12.5108 19.8758 11.4892 19.1622 11.1146L5.46484 3.92349ZM2 4.80888C2 2.55271 4.3969 1.10395 6.39451 2.15269L20.0919 9.34382C22.2326 10.4677 22.2325 13.5324 20.0919 14.6562L6.3945 21.8473C4.39689 22.8961 2 21.4473 2 19.1911V4.80888Z" fill="#0F0F0F"></path>
|
|
</g>
|
|
<g id="icon-play">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10 3.34315 8.65686 2 7 2H5C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H7C8.65686 22 10 20.6569 10 19V5ZM8 5C8 4.44772 7.55229 4 7 4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H7C7.55229 20 8 19.5523 8 19V5Z" fill="#0F0F0F"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M22 5C22 3.34315 20.6569 2 19 2H17C15.3431 2 14 3.34315 14 5V19C14 20.6569 15.3431 22 17 22H19C20.6569 22 22 20.6569 22 19V5ZM20 5C20 4.44772 19.5523 4 19 4H17C16.4477 4 16 4.44772 16 5V19C16 19.5523 16.4477 20 17 20H19C19.5523 20 20 19.5523 20 19V5Z" fill="#0F0F0F"></path>
|
|
</g>
|
|
<g id="icon-audio">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.98423 12.9162C2.97585 12.8329 2.96625 12.7272 2.95688 12.6018C2.93272 12.2782 2.90995 11.8208 2.9141 11.2737C2.92233 10.1862 3.03699 8.71096 3.47849 7.21665C3.92001 5.72226 4.70463 4.15592 6.08896 2.96159C7.48926 1.75349 9.41802 1 12 1C14.582 1 16.5107 1.75349 17.911 2.96159C19.2954 4.15592 20.08 5.72226 20.5215 7.21665C20.963 8.71096 21.0777 10.1862 21.0859 11.2737C21.0901 11.8208 21.0673 12.2782 21.0431 12.6018C21.0338 12.7272 21.0242 12.8329 21.0158 12.9162L21.0208 12.9189C22.0321 13.466 23 14.435 23 16V19C23 20.565 22.0321 21.534 21.0208 22.0811C20.0373 22.6131 18.8886 22.8291 18.1158 22.9223C16.9041 23.0682 16 22.0814 16 21V14C16 12.9186 16.9041 11.9318 18.1158 12.0777C18.3918 12.111 18.7158 12.1599 19.0631 12.2334C19.0777 11.9785 19.0888 11.6575 19.086 11.2888C19.0786 10.3138 18.9745 9.03904 18.6035 7.78334C18.2325 6.52774 17.6109 5.34408 16.6046 4.47591C15.6143 3.62151 14.168 3 12 3C9.83199 3 8.38575 3.62151 7.39543 4.47591C6.38913 5.34408 5.7675 6.52774 5.39652 7.78334C5.02552 9.03904 4.92143 10.3138 4.91404 11.2888C4.91125 11.6575 4.92229 11.9785 4.93689 12.2334C5.28418 12.1599 5.60817 12.111 5.88422 12.0777C7.09594 11.9318 8 12.9186 8 14V21C8 22.0814 7.09594 23.0682 5.88422 22.9223C5.11136 22.8291 3.96273 22.6131 2.97917 22.0811C1.96791 21.534 1 20.565 1 19V16C1 14.435 1.96791 13.466 2.97917 12.9189L2.98423 12.9162ZM18 20.9209C18.6625 20.8323 19.4542 20.6546 20.0692 20.3219C20.6953 19.9833 21 19.5754 21 19V16C21 15.4246 20.6953 15.0167 20.0692 14.6781C19.4542 14.3454 18.6625 14.1677 18 14.0791V20.9209ZM6 14.0791C5.33746 14.1677 4.54579 14.3454 3.93076 14.6781C3.30474 15.0167 3 15.4246 3 16L3 19C3 19.5754 3.30474 19.9833 3.93076 20.3219C4.54579 20.6546 5.33746 20.8323 6 20.9209V14.0791Z" fill="#0F0F0F"></path>
|
|
</g>
|
|
</defs>
|
|
</svg>
|
|
<title>Reddit, but better</title>
|
|
<style>
|
|
:root {
|
|
--dark: #2c2c2c;
|
|
--darker: #171717;
|
|
--light: #bfbfbf;
|
|
--confirm: #970000;
|
|
--saved: #9f9400;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--darker);
|
|
color: var(--light);
|
|
min-height: 100%;
|
|
margin: 0;
|
|
/* Removes default browser margin */
|
|
}
|
|
|
|
img,
|
|
video {
|
|
max-width: 100%;
|
|
max-height: 70vh;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
svg {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
}
|
|
|
|
path {
|
|
fill: currentColor;
|
|
}
|
|
|
|
div.post {
|
|
background-color: var(--dark);
|
|
border: 2px solid var(--light);
|
|
border-radius: 15px;
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sidebar {
|
|
outline: 2px solid var(--light);
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: var(--dark);
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
/* Takes up remaining space */
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* desktop */
|
|
@media (min-aspect-ratio: 1) {
|
|
div.post {
|
|
width: 70vw;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sidebar {
|
|
width: fit-content;
|
|
height: 100vh;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
padding: 5px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
|
|
/* phone */
|
|
@media (max-aspect-ratio: 1) {
|
|
div.post {
|
|
width: calc(100vw - 50px);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 100vw;
|
|
height: 50px;
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
align-items: center;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.content {
|
|
align-items: center;
|
|
}
|
|
|
|
button span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.sidebar a {
|
|
display: block;
|
|
color: var(--light);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
margin: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.sidebar a:hover {
|
|
background-color: var(--darker);
|
|
color: var(--light);
|
|
}
|
|
|
|
a.no-style-link {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.invert {
|
|
filter: invert(1);
|
|
transition: filter 0.3s;
|
|
}
|
|
|
|
.button-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.button-wrapper.gallery {
|
|
gap: 5px;
|
|
}
|
|
|
|
button {
|
|
flex: 1;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
background-color: var(--darker);
|
|
color: var(--light);
|
|
border: 2px solid var(--light);
|
|
border-radius: 10px;
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.controls {
|
|
margin-top: -5.25em;
|
|
}
|
|
|
|
.controls button {
|
|
flex: 0 0 3em;
|
|
height: 3em;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
.controls input {
|
|
flex: 1;
|
|
min-width: 0px;
|
|
}
|
|
|
|
button.confirm {
|
|
background-color: var(--confirm)
|
|
}
|
|
|
|
button.saved {
|
|
background-color: var(--saved)
|
|
}
|
|
|
|
button.gallery {
|
|
padding: 5px;
|
|
background-color: var(--darker);
|
|
border-radius: 5px;
|
|
border: none;
|
|
cursor: none;
|
|
}
|
|
|
|
button.gallery.selected {
|
|
background-color: var(--light);
|
|
}
|
|
|
|
.text-content {
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
/* Smooth transition */
|
|
max-height: 20vh;
|
|
position: relative;
|
|
}
|
|
|
|
.text-content::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 30px;
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--dark));
|
|
}
|
|
|
|
.text-content.expanded {
|
|
max-height: 1000vh;
|
|
}
|
|
|
|
.text-content.expanded::after {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="sidebar">
|
|
{% for link in sidebar_links %}
|
|
<a href="{{ link }}">{{ link }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="content">
|
|
<h1>{{ title }}</h1>
|
|
{% for post in posts %}
|
|
<div class="post">
|
|
<h3>{{ post.title }}</h3>
|
|
<span>
|
|
{% if post.subreddit %}
|
|
<h5>
|
|
<a href="/r/{{ post.subreddit }}" class="no-style-link">/r/{{ post.subreddit }}</a>
|
|
{% if post.author %}
|
|
— {{ post.author }}
|
|
{% endif %}
|
|
{% if post.age %}
|
|
— {{ post.age }}
|
|
{% endif %}
|
|
</h5>
|
|
{% endif %}
|
|
</span>
|
|
{% if post.media_html|length > 0 %}
|
|
<div class="media-div">
|
|
{% for media in post.media_html %}
|
|
{{ media|safe }}
|
|
{% endfor %}
|
|
{% if post.media_html|length > 1 %}
|
|
<span class="button-wrapper gallery">
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% if post.body %}
|
|
<div class="text-content" onclick="expand(this)">
|
|
{{ post.body|safe }}
|
|
</div>
|
|
{% endif %}
|
|
<span class="button-wrapper">
|
|
<button type="button" name="comments" onpointerdown='commentsDown(this, "{{ post.permalink }}")'
|
|
onpointerup='commentsUp(this, "{{ post.permalink }}")'>
|
|
<svg viewBox="0 0 24 24">
|
|
<use xlink:href="#icon-comments"></use>
|
|
</svg>
|
|
<span>Comments</span>
|
|
</button>
|
|
<button type="button" name="save" onclick='save(this, "{{ post.permalink }}")' {% if saved %}class='saved' {% endif %}>
|
|
<svg viewBox="0 0 24 24">
|
|
<use xlink:href="#icon-save"></use>
|
|
</svg>
|
|
<span>Save</span>
|
|
</button>
|
|
{% if not saved %}
|
|
<button type="button" name="hide" onclick='hide(this, "{{ post.permalink }}")'>
|
|
<svg viewBox="0 0 24 24">
|
|
<use xlink:href="#icon-hide"></use>
|
|
</svg>
|
|
<span>Hide</span>
|
|
</button>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// setup galleries
|
|
mediaDivs = document.querySelectorAll('.media-div');
|
|
|
|
mediaDivs.forEach(div => {
|
|
images = Array.from(div.querySelectorAll('img'));
|
|
if (images.length > 1) {
|
|
buttonSpan = div.querySelector('.button-wrapper:first-of-type');
|
|
images.forEach(image => {
|
|
image.addEventListener('click', (e) => {
|
|
if (e.offsetX > image.offsetWidth * 2 / 3) {
|
|
// scroll right
|
|
div = e.target.closest('.media-div');
|
|
images = Array.from(div.querySelectorAll('img'));
|
|
currentIndex = images.indexOf(e.target)
|
|
if (currentIndex < (images.length - 1)) {
|
|
buttons = Array.from(div.querySelectorAll('button'));
|
|
images[currentIndex].style.display = "none";
|
|
images[currentIndex + 1].style.display = "block";
|
|
buttons[currentIndex].classList.remove('selected');
|
|
buttons[currentIndex + 1].classList.add('selected');
|
|
} else {
|
|
e.target.classList.toggle('invert');
|
|
}
|
|
} else if (e.offsetX < image.offsetWidth / 3) {
|
|
// scroll left
|
|
div = e.target.closest('.media-div');
|
|
images = Array.from(div.querySelectorAll('img'));
|
|
currentIndex = images.indexOf(e.target)
|
|
if (currentIndex > 0) {
|
|
buttons = Array.from(div.querySelectorAll('button'));
|
|
images[currentIndex].style.display = "none";
|
|
images[currentIndex - 1].style.display = "block";
|
|
buttons[currentIndex].classList.remove('selected');
|
|
buttons[currentIndex - 1].classList.add('selected');
|
|
} else {
|
|
e.target.classList.toggle('invert');
|
|
}
|
|
} else {
|
|
image.classList.toggle('invert');
|
|
}
|
|
});
|
|
});
|
|
firstImage = images.shift();
|
|
firstButton = document.createElement('button');
|
|
firstButton.classList.add('gallery');
|
|
firstButton.classList.add('selected');
|
|
buttonSpan.appendChild(firstButton);
|
|
images.forEach(image => {
|
|
image.style.display = "none";
|
|
button = document.createElement('button');
|
|
button.classList.add('gallery');
|
|
buttonSpan.appendChild(button);
|
|
});
|
|
} else {
|
|
images.forEach(image => {
|
|
image.addEventListener('click', () => {
|
|
image.classList.toggle('invert');
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
// main button code
|
|
|
|
function hide(button, permalink) {
|
|
div = button.closest('.post');
|
|
hideButton = div.querySelector('[name="save"]');
|
|
if (hideButton.classList.contains('saved')) {
|
|
return;
|
|
}
|
|
if (button.classList.contains('confirm')) {
|
|
div = button.closest('.post');
|
|
div.remove();
|
|
try {
|
|
fetch('/hide' + permalink)
|
|
.then(checkPostCount());
|
|
} catch (error) {
|
|
console.error('Could not hide', error);
|
|
}
|
|
} else {
|
|
button.classList.add('confirm');
|
|
}
|
|
}
|
|
|
|
commentTimer = null;
|
|
|
|
function commentsDown(button, permalink) {
|
|
commentTimer = setTimeout(() => {
|
|
navigator.clipboard.writeText("https://reddit.com" + permalink);
|
|
commentTimer = null;
|
|
}, 500);
|
|
}
|
|
|
|
function commentsUp(button, permalink) {
|
|
if (commentTimer != null) {
|
|
clearTimeout(commentTimer);
|
|
commentTimer = null;
|
|
pauseVideo(button);
|
|
window.open("https://reddit.com" + permalink, '_blank');
|
|
}
|
|
}
|
|
|
|
function save(button, permalink) {
|
|
div = button.closest('.post');
|
|
div.remove();
|
|
if (button.classList.contains("saved")) {
|
|
try {
|
|
fetch('/save' + permalink + '?action=unsave')
|
|
.then(checkPostCount());
|
|
} catch (error) {
|
|
console.error('Could not unsave', error);
|
|
}
|
|
} else {
|
|
try {
|
|
fetch('/save' + permalink + '?action=save')
|
|
.then(checkPostCount());
|
|
} catch (error) {
|
|
console.error('Could not save', error);
|
|
}
|
|
}
|
|
}
|
|
// text expand code
|
|
|
|
function checkHeight() {
|
|
const divs = document.querySelectorAll('.text-content');
|
|
divs.forEach(div => {
|
|
height = div.offsetHeight;
|
|
style = window.getComputedStyle(div);
|
|
maxHeight = parseInt(style.maxHeight);
|
|
if (height < maxHeight) {
|
|
div.classList.add('expanded');
|
|
}
|
|
});
|
|
}
|
|
|
|
function expand(div) {
|
|
div.classList.add('expanded');
|
|
}
|
|
|
|
window.addEventListener('load', (event) => {
|
|
checkHeight()
|
|
});
|
|
|
|
window.addEventListener('resize', (event) => {
|
|
checkHeight()
|
|
});
|
|
|
|
// audio/video code
|
|
|
|
function findSibling(element, filter) {
|
|
post = element.closest('.post');
|
|
return post.querySelector(filter);
|
|
}
|
|
|
|
function pauseVideo(element) {
|
|
video = findSibling(element, 'video');
|
|
if (video) {
|
|
video.pause();
|
|
pauseAudio(video);
|
|
}
|
|
}
|
|
|
|
function updateScrubBar(video, slider) {
|
|
slider.value = video.currentTime / video.duration * 100;
|
|
if (!video.paused){
|
|
setTimeout(() => {
|
|
updateScrubBar(video, slider);
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
function setControlsWidth(video) {
|
|
controls = findSibling(video, '.controls');
|
|
controls.style.width = video.offsetWidth + 'px';
|
|
scrub = findSibling(video, '[name="scrub"]');
|
|
scrub.value = 0;
|
|
audio = findSibling(video, 'audio');
|
|
audio.volume = 0;
|
|
}
|
|
|
|
function toggleContent(button) {
|
|
video = findSibling(button, 'video');
|
|
audio = findSibling(button, 'audio');
|
|
if (video.paused) {
|
|
video.play().then(() => {
|
|
if (audio) {
|
|
audio.currentTime = video.currentTime;
|
|
audio.play();
|
|
}
|
|
updateScrubBar(video, findSibling(video, '[name="scrub"]'));
|
|
});
|
|
} else {
|
|
video.pause();
|
|
if (audio) audio.pause();
|
|
}
|
|
}
|
|
|
|
function seekContent(slider) {
|
|
video = findSibling(slider, 'video');
|
|
audio = findSibling(slider, 'audio');
|
|
time = video.duration * slider.value / 100;
|
|
video.currentTime = time;
|
|
if (audio) audio.currentTime = time;
|
|
}
|
|
|
|
function toggleVolume(button) {
|
|
audio = findSibling(button, 'audio');
|
|
if (audio.volume > 0.95){
|
|
audio.volume = 0;
|
|
} else {
|
|
audio.volume = audio.volume + 0.25;
|
|
}
|
|
}
|
|
|
|
function checkPostCount() {
|
|
posts = document.querySelectorAll('.post').length;
|
|
if (posts == 0) {
|
|
setTimeout(() => {window.location.href = window.location.href;}, 1000);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |