Share url, removed hash
This commit is contained in:
parent
d871ed4e68
commit
7203bc1509
|
@ -3,17 +3,17 @@
|
|||
<section class="section">
|
||||
<div class="columns is-multiline is-vcentered">
|
||||
{foreach $feed->items as $item}
|
||||
<div class="column is-one-quarter">
|
||||
<a class="clickable-img" id="{$item->id}" href="#{$item->id}"
|
||||
data-video_url="{path('/stream?url=' . urlencode($item->video->playAddr))}"
|
||||
data-video_download_watermark="{path('/stream?url=' . urlencode($item->video->playAddr) . '&download=1&id=' . $item->id . '&user=' . $item->author->uniqueId) . '&watermark='}"
|
||||
data-video_download_nowatermark="{path('/stream?url=' . urlencode('https://tiktok.com/@' . $item->author->uniqueId . '/' . $item->id) . '&download=1&id=' . $item->id . '&user=' . $item->author->uniqueId)}"
|
||||
data-desc="{$item->desc}"
|
||||
data-music_title="{$item->music->title}"
|
||||
data-music_url="{path('/stream?url=' . urlencode($item->music->playUrl))}">
|
||||
<img loading="lazy" src="{path('/stream?url=' . urlencode($item->video->originCover))}" />
|
||||
<img class="hidden" loading="lazy" data-src="{path('/stream?url=' . urlencode($item->video->dynamicCover))}" />
|
||||
</a>
|
||||
{do $share_url = 'https://tiktok.com/@' . $item->author->uniqueId . '/' . $item->id}
|
||||
<div class="column is-one-quarter clickable-img" id="{$item->id}" onclick="openVideo(this.id)"
|
||||
data-video_url="{path('/stream?url=' . urlencode($item->video->playAddr))}"
|
||||
data-video_download_watermark="{path('/stream?url=' . urlencode($item->video->playAddr) . '&download=1&id=' . $item->id . '&user=' . $item->author->uniqueId) . '&watermark='}"
|
||||
data-video_download_nowatermark="{path('/stream?url=' . urlencode($share_url) . '&download=1&id=' . $item->id . '&user=' . $item->author->uniqueId)}"
|
||||
data-video_share_url="{$share_url}"
|
||||
data-desc="{$item->desc}"
|
||||
data-music_title="{$item->music->title}"
|
||||
data-music_url="{path('/stream?url=' . urlencode($item->music->playUrl))}">
|
||||
<img loading="lazy" src="{path('/stream?url=' . urlencode($item->video->originCover))}" />
|
||||
<img class="hidden" loading="lazy" data-src="{path('/stream?url=' . urlencode($item->video->dynamicCover))}" />
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
|
@ -35,10 +35,18 @@
|
|||
<p class="modal-card-title" id="item_title"></p>
|
||||
</header>
|
||||
<section class="modal-card-body has-text-centered" style="overflow: hidden;">
|
||||
<video id="video" controls preload="none"></video>
|
||||
<video id="video" autoplay controls></video>
|
||||
</section>
|
||||
<footer class="modal-card-foot has-text-centered">
|
||||
<div class="container">
|
||||
<div class="field has-addons has-addons-centered">
|
||||
<div class="control">
|
||||
<input id="share_input" class="input" readonly />
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-primary" onclick="copyShare()">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons is-centered">
|
||||
<a target="_blank" id="download_watermark" class="button is-info" download>Download with watermark</a>
|
||||
<a target="_blank" id="download_nowatermark" class="button is-info">Download without watermark</a>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
var opened_video_id = null
|
||||
|
||||
const video = document.getElementById('video')
|
||||
const item_title = document.getElementById('item_title')
|
||||
const audio = document.getElementById('audio')
|
||||
|
@ -5,13 +7,12 @@ const audio_title = document.getElementById('audio_title')
|
|||
const modal = document.getElementById('modal')
|
||||
const download_watermark = document.getElementById('download_watermark')
|
||||
const download_nowatermark = document.getElementById('download_nowatermark')
|
||||
const share_input = document.getElementById('share_input')
|
||||
|
||||
// -- HELPERS -- //
|
||||
const getHash = () => window.location.hash.substring(1)
|
||||
|
||||
const getVideoDataById = (id) => {
|
||||
const getVideoDataById = id => {
|
||||
const el = document.getElementById(id)
|
||||
if (el) {
|
||||
opened_video_id = id
|
||||
return el.dataset
|
||||
}
|
||||
return false
|
||||
|
@ -19,19 +20,20 @@ const getVideoDataById = (id) => {
|
|||
|
||||
const isModalActive = () => modal.classList.contains('is-active')
|
||||
|
||||
const toggleButton = (id, force) => document.getElementById(id) ? document.getElementById(id).toggleAttribute('disabled', force) : alert('That button does not exist')
|
||||
const toggleButton = (id, force) => document.getElementById(id).toggleAttribute('disabled', force)
|
||||
|
||||
// -- MODAL -- //
|
||||
const swapData = ({ video_url, desc, video_download_watermark, video_download_nowatermark, music_title, music_url }) => {
|
||||
const swapData = ({ video_url, desc, video_download_watermark, video_download_nowatermark, video_share_url, music_title, music_url }) => {
|
||||
video.src = video_url
|
||||
item_title.innerText = desc
|
||||
download_watermark.href = video_download_watermark
|
||||
download_nowatermark.href = video_download_nowatermark
|
||||
share_input.value = video_share_url
|
||||
audio_title.innerText = music_title
|
||||
audio.src = music_url
|
||||
}
|
||||
|
||||
const showModal = (id) => {
|
||||
const showModal = id => {
|
||||
const dataset = getVideoDataById(id)
|
||||
if (dataset) {
|
||||
swapData(dataset)
|
||||
|
@ -50,27 +52,27 @@ const hideModel = () => {
|
|||
history.pushState('', document.title, window.location.pathname + window.location.search)
|
||||
}
|
||||
|
||||
const getPrevOrNext = (forward) => {
|
||||
const hash = getHash()
|
||||
if (hash) {
|
||||
const el = document.getElementById(hash)
|
||||
const getPrevOrNext = forward => {
|
||||
if (opened_video_id) {
|
||||
const el = document.getElementById(opened_video_id)
|
||||
if (el) {
|
||||
if (forward) {
|
||||
return el.parentElement.nextElementSibling ? el.parentElement.nextElementSibling.children[0] : null
|
||||
return el.nextElementSibling
|
||||
}
|
||||
return el.parentElement.previousElementSibling ? el.parentElement.previousElementSibling.children[0] : null
|
||||
return el.previousElementSibling
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const moveVideo = (forward) => {
|
||||
const moveVideo = forward => {
|
||||
// Re-enable buttons
|
||||
toggleButton('back-button', false)
|
||||
toggleButton('next-button', false)
|
||||
const new_el = getPrevOrNext(forward)
|
||||
if (new_el) {
|
||||
window.location.hash = new_el.id
|
||||
opened_video_id = new_el.id
|
||||
swapData(new_el.dataset)
|
||||
} else {
|
||||
// Max reached, disable buttons depending on direction
|
||||
if (forward) {
|
||||
|
@ -82,58 +84,42 @@ const moveVideo = (forward) => {
|
|||
}
|
||||
|
||||
// EVENTS //
|
||||
const hashChange = () => {
|
||||
if (window.location.hash) {
|
||||
const hash = getHash()
|
||||
if (hash) {
|
||||
// Check first if the modal is already active
|
||||
if (isModalActive()) {
|
||||
// If it is, get hash video id and swap data
|
||||
const dataset = getVideoDataById(hash)
|
||||
if (dataset) {
|
||||
swapData(dataset)
|
||||
video.play()
|
||||
}
|
||||
} else {
|
||||
showModal(hash)
|
||||
}
|
||||
const openVideo = video_id => {
|
||||
if (isModalActive()) {
|
||||
const dataset = getVideoDataById(video_id)
|
||||
if (dataset) {
|
||||
swapData(dataset)
|
||||
}
|
||||
} else {
|
||||
showModal(video_id)
|
||||
}
|
||||
}
|
||||
|
||||
const swapImages = (e, mode) => {
|
||||
let img = null
|
||||
let gif = null
|
||||
if (mode === 'gif') {
|
||||
const a = e.target
|
||||
img = a.children[0]
|
||||
gif = a.children[1]
|
||||
} else if (mode === 'img') {
|
||||
gif = e.target
|
||||
img = e.target.parentElement.children[0]
|
||||
const swapImages = e => {
|
||||
const div = e.target
|
||||
const img = div.children[0]
|
||||
const gif = div.children[1]
|
||||
if (!gif.src) {
|
||||
gif.src = gif.dataset.src
|
||||
}
|
||||
img.classList.toggle('hidden')
|
||||
gif.classList.toggle('hidden')
|
||||
}
|
||||
|
||||
if (img && gif) {
|
||||
if (!gif.src) {
|
||||
gif.src = gif.dataset.src
|
||||
}
|
||||
img.classList.toggle('hidden')
|
||||
gif.classList.toggle('hidden')
|
||||
}
|
||||
const copyShare = () => {
|
||||
share_input.select();
|
||||
navigator.clipboard.writeText(share_input.value);
|
||||
alert('Copied!')
|
||||
}
|
||||
|
||||
document.getElementById('modal-background').addEventListener('click', hideModel)
|
||||
document.getElementById('modal-close').addEventListener('click', hideModel)
|
||||
document.getElementById('back-button').addEventListener('click', () => moveVideo(false))
|
||||
document.getElementById('next-button').addEventListener('click', () => moveVideo(true))
|
||||
window.addEventListener('hashchange', hashChange, false)
|
||||
|
||||
// Image hover
|
||||
const images = document.getElementsByClassName("clickable-img")
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
images[i].addEventListener('mouseenter', e => swapImages(e, 'gif'), false)
|
||||
images[i].addEventListener('mouseout', e => swapImages(e, 'img'), false)
|
||||
images[i].addEventListener('mouseenter', swapImages, false)
|
||||
images[i].addEventListener('mouseout', swapImages, false)
|
||||
}
|
||||
|
||||
|
||||
hashChange()
|
||||
|
|
|
@ -12,8 +12,12 @@ figure {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Make gifs take all available space */
|
||||
.clickable-img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clickable-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue