marijo/movmaker-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Share button added

Browse source
This commit is contained in:
hbrain 2026-06-07 08:08:47 +02:00
parent dbe0d86be1
commit aac52591c6
1 changed files with 45 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

47
index.php
View file

@ -425,10 +425,16 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
.filter-submit .icon{font-size:1.02rem;line-height:1;transform:translateY(.01em)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.filter-summary{color:#A0A4AB;font-size:.9rem;margin:0 0 .8rem}
.video-title-line{display:flex;align-items:flex-start;gap:.75rem;width:100%}
.video-title-line .video-row-title{flex:1 1 auto;min-width:0}
.video-row-title{font-size:1.35rem;line-height:1.2;color:#F3F4F6}
.video-row-title a{color:inherit;text-decoration:none;cursor:pointer}
.video-row-title a:visited{color:inherit}
.video-row-title a:hover,.video-row-title a:focus,.video-row-title a:active{text-decoration:none}
.article-share-button{box-sizing:border-box;appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:0 0 auto;width:1.45rem;height:1.45rem;margin:.02rem 0 0 auto;padding:0;border:1px solid #C46A3A;border-radius:.35rem;background:#C46A3A;color:#fff;line-height:1;text-decoration:none}
.article-share-button svg{width:.78rem;height:.78rem;fill:currentColor}
.article-share-button:hover,.article-share-button:focus-visible{background:#d97b48;border-color:#d97b48;color:#fff}
.article-share-button.copied{background:#3BA7A0;border-color:#3BA7A0;color:#111315}
.video-row-head-mobile{display:none}
.video-row-head-mobile .video-row-title{margin:0 0 .15rem}
.video-row-head-mobile .meta{margin:0 0 .25rem}
@ -451,6 +457,7 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
.video-row-head-mobile .description-teaser{margin:.25rem 0 .3rem}
#videos .video-wrapper{grid-column:1 / -1}
#videos .video-info{grid-column:1 / -1}
.video-info .video-title-line.video-title-line-desktop,
.video-info .video-row-title.video-row-title-desktop,
.video-info .meta.meta-desktop,
.video-info .description-teaser.description-teaser-desktop{display:none}
@ -485,6 +492,7 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
$articleIdForVideo = video_article_id($config, $name);
$permalinkEnabled = $articleIdForVideo !== '' && article_permalink_enabled($config, $articleIdForVideo);
$permalinkUrl = $permalinkEnabled ? query_url(['id' => $articleIdForVideo]) : '';
$shareUrl = $permalinkEnabled ? ('https://bubulescu.org/?id=' . rawurlencode($articleIdForVideo)) : '';
$url = $config['public_videos'].'/'.rawurlencode($name);
$m = $videoCache[$name]['metadata'] ?? video_metadata($v);
$posterUrl = video_thumb_public_url($config, $name);
@ -493,7 +501,7 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
?>
<article class="video-row">
<div class="video-row-head video-row-head-mobile">
<h2 class="video-row-title"><?php if($permalinkUrl !== ''): ?><a href="<?=h($permalinkUrl)?>"><?=h($m['title'])?></a><?php else: ?><?=h($m['title'])?><?php endif; ?></h2>
<div class="video-title-line"><h2 class="video-row-title"><?php if($permalinkUrl !== ''): ?><a href="<?=h($permalinkUrl)?>"><?=h($m['title'])?></a><?php else: ?><?=h($m['title'])?><?php endif; ?></h2><?php if($shareUrl !== ''): ?><button class="article-share-button" type="button" data-share-url="<?=h($shareUrl)?>" data-share-title="<?=h($m['title'])?>" aria-label="Share article" title="Share article"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 16.1c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A2.99 2.99 0 1 0 15 5c0 .24.04.47.09.7L8.04 9.81A3 3 0 1 0 8.04 14.2l7.12 4.18c-.05.2-.07.41-.07.62a2.91 2.91 0 1 0 2.91-2.9Z"/></svg></button><?php endif; ?></div>
<p class="meta">
<?php if(!empty($m['date'])): ?><a class="meta-filter" href="<?=h($dateFilterUrl)?>" title="Filter by date"><?=h($m['date'])?></a><?php endif; ?>
<?php if(!empty($m['location'])): ?><a class="meta-filter" href="<?=h($locFilterUrl)?>" title="Filter by location"><?=h($m['location'])?></a><?php endif; ?>
@ -511,7 +519,7 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
<?php endif; ?>
</div>
<div class="video-info">
<h2 class="video-row-title video-row-title-desktop"><?php if($permalinkUrl !== ''): ?><a href="<?=h($permalinkUrl)?>"><?=h($m['title'])?></a><?php else: ?><?=h($m['title'])?><?php endif; ?></h2>
<div class="video-title-line video-title-line-desktop"><h2 class="video-row-title video-row-title-desktop"><?php if($permalinkUrl !== ''): ?><a href="<?=h($permalinkUrl)?>"><?=h($m['title'])?></a><?php else: ?><?=h($m['title'])?><?php endif; ?></h2><?php if($shareUrl !== ''): ?><button class="article-share-button" type="button" data-share-url="<?=h($shareUrl)?>" data-share-title="<?=h($m['title'])?>" aria-label="Share article" title="Share article"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 16.1c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A2.99 2.99 0 1 0 15 5c0 .24.04.47.09.7L8.04 9.81A3 3 0 1 0 8.04 14.2l7.12 4.18c-.05.2-.07.41-.07.62a2.91 2.91 0 1 0 2.91-2.9Z"/></svg></button><?php endif; ?></div>
<p class="meta meta-desktop">
<?php if(!empty($m['date'])): ?><a class="meta-filter" href="<?=h($dateFilterUrl)?>" title="Filter by date"><?=h($m['date'])?></a><?php endif; ?>
<?php if(!empty($m['location'])): ?><a class="meta-filter" href="<?=h($locFilterUrl)?>" title="Filter by location"><?=h($m['location'])?></a><?php endif; ?>
@ -536,6 +544,41 @@ $siteHeaderTitle = $headerTitles[array_rand($headerTitles)];
<?php endif; ?>
</section>
</main>
<script>
(function(){
function absoluteUrl(url){ try { return new URL(url, window.location.href).href; } catch(e) { return url; } }
function markCopied(btn){
const oldTitle = btn.title;
btn.classList.add('copied');
btn.title = 'Link copied';
setTimeout(function(){ btn.classList.remove('copied'); btn.title = oldTitle || 'Share article'; }, 1300);
}
async function copyUrl(url){
if(navigator.clipboard && window.isSecureContext){ await navigator.clipboard.writeText(url); return true; }
window.prompt('Copy article link:', url);
return true;
}
document.addEventListener('click', async function(event){
const btn = event.target.closest('.article-share-button');
if(!btn) return;
event.preventDefault();
const url = absoluteUrl(btn.dataset.shareUrl || '');
const title = btn.dataset.shareTitle || document.title || 'MVLog';
if(!url) return;
try{
if(navigator.share){
await navigator.share({ title: title, url: url });
}else{
await copyUrl(url);
markCopied(btn);
}
}catch(e){
if(e && e.name === 'AbortError') return;
try{ await copyUrl(url); markCopied(btn); }catch(ignore){}
}
});
})();
</script>
<?php include __DIR__ . '/_footer.php'; ?>
</body>
</html>