Share button added

index.php

@@ -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>