[grade=B] v1.9.1: YouTube links auto-render as video cards in beeps, replies, and quotes (click-to-play, nocookie embed)
This commit is contained in:
Krystie
@@ -736,6 +736,66 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* YouTube card (v1.9.1) */
|
||||
.beep-embed .beep-yt-card {
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--beep-border);
|
||||
cursor: pointer;
|
||||
background: #000;
|
||||
aspect-ratio: 16 / 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.beep-embed .beep-yt-thumb {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.beep-embed .beep-yt-play {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 68px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 0, 0, 0.85);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
|
||||
transition: transform 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.beep-embed .beep-yt-card:hover .beep-yt-play,
|
||||
.beep-embed .beep-yt-card:focus-visible .beep-yt-play {
|
||||
background: #f00;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.beep-embed .beep-yt-play svg {
|
||||
fill: #fff;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.beep-embed .beep-yt-card iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.beep-embed .beep-gif-embed img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
+27
-1
@@ -428,10 +428,30 @@
|
||||
return '<svg viewBox="0 0 24 24" width="64" height="64" fill="#4a90c4" aria-hidden="true"><path d="M17.2 1.4c-.8-.1-1.5.2-2 .6C14.3.9 13.2.7 12.1 1c-1.4.4-2.3 1.7-2.1 3.2-2.1-.2-4.2-.9-5.7-2.5-.3-.3-.8-.3-1 0-.6.8-.9 1.7-.9 2.6 0 1.2.5 2.2 1.3 2.9-.3-.1-.6-.1-.8-.3-.4-.2-.9 0-.8.5.3 1.6 1.3 2.8 2.7 3.4-.3 0-.5 0-.8-.1-.4-.1-.8.3-.5.7.8 1.4 2.2 2.3 3.8 2.5-1.3.8-2.8 1.2-4.4 1.2-.5 0-.8.5-.5.9 1.1 1.1 2.9 1.6 5.5 1.6 5.4 0 9.8-4.4 9.8-9.8v-.2c.9-.6 1.6-1.4 2.1-2.4.2-.4-.2-.8-.6-.6-.5.2-1 .3-1.5.4.5-.5.9-1.1 1-1.8.1-.4-.4-.7-.7-.5-.7.4-1.5.6-2.3.7-.8-.7-1.8-1.1-2.9-1.1zm-.8 1.6c.7-.1 1.4.2 1.9.7.2.2.5.3.8.2.3-.1.6-.1.9-.3-.2.3-.5.5-.8.6-.3.1-.4.5-.3.7.2.3.1.5 0 .8v.2c0 4.7-3.8 8.5-8.5 8.5-1.6 0-2.9-.2-3.8-.6 1.7-.3 3.2-1 4.3-2.2.3-.3.1-.8-.3-.8-1.4 0-2.7-.6-3.5-1.7.4 0 .9-.1 1.3-.2.4-.1.4-.7 0-.8-1.5-.3-2.6-1.3-3-2.6.5.1 1 .2 1.5.1.4 0 .5-.6.1-.8C5.2 5.5 4.5 4.5 4.5 3.4c0-.4.1-.9.3-1.3 1.8 1.5 4 2.4 6.4 2.5.3 0 .5-.2.5-.5-.2-1.1.4-2.1 1.4-2.4.7-.2 1.4 0 1.9.4.3.2.7.1.9-.1.3-.4.8-.7 1.3-.7.4.1.8.2 1.2.4-.3.3-.5.6-.5 1 0 .3.3.5.5.4z"/></svg>';
|
||||
}
|
||||
|
||||
/* ---------- YouTube cards (v1.9.1) ---------- */
|
||||
function loadYtPlayer(card) {
|
||||
if (!card || card.getAttribute('data-beep-yt-loaded') === '1') return;
|
||||
card.setAttribute('data-beep-yt-loaded', '1');
|
||||
var vid = card.getAttribute('data-beep-yt');
|
||||
if (!vid) return;
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.src = 'https://www.youtube-nocookie.com/embed/' + encodeURIComponent(vid) + '?autoplay=1&rel=0';
|
||||
iframe.title = 'YouTube video player';
|
||||
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
|
||||
iframe.allowFullscreen = true;
|
||||
iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
|
||||
card.innerHTML = '';
|
||||
card.appendChild(iframe);
|
||||
}
|
||||
|
||||
/* ---------- Click delegation ---------- */
|
||||
function onClick(e) {
|
||||
var t = e.target;
|
||||
|
||||
// YouTube card: click swaps the thumbnail for the inline player
|
||||
var ytCard = t.closest('.beep-yt-card');
|
||||
if (ytCard) { e.preventDefault(); loadYtPlayer(ytCard); return; }
|
||||
|
||||
var likePost = t.closest('[data-beep-like-post]');
|
||||
if (likePost) { e.preventDefault(); if (requireLogin()) handleLike(likePost, 'like/' + likePost.dataset.beepLikePost); return; }
|
||||
|
||||
@@ -602,7 +622,7 @@
|
||||
|
||||
// Click anywhere else on a feed post opens the conversation
|
||||
var openPost = t.closest('[data-beep-open-thread]');
|
||||
if (openPost && !t.closest('a, button, label, input, textarea, audio, video, .beep-media-grid-item, .beep-gif-embed, [data-beep-reply-form]')) {
|
||||
if (openPost && !t.closest('a, button, label, input, textarea, audio, video, .beep-media-grid-item, .beep-gif-embed, .beep-yt-card, [data-beep-reply-form]')) {
|
||||
// Don't hijack text selection
|
||||
var sel = window.getSelection && window.getSelection();
|
||||
if (sel && sel.toString()) return;
|
||||
@@ -636,6 +656,12 @@
|
||||
}
|
||||
|
||||
function onKeydown(e) {
|
||||
// Enter/Space on a focused YouTube card plays it (card has tabindex="0")
|
||||
if ((e.key === 'Enter' || e.key === ' ') && e.target.matches && e.target.matches('.beep-yt-card')) {
|
||||
e.preventDefault();
|
||||
loadYtPlayer(e.target);
|
||||
return;
|
||||
}
|
||||
// Enter in the GIF search box runs the search
|
||||
if (e.key === 'Enter' && e.target.matches && e.target.matches('[data-beep-gif-search]')) {
|
||||
e.preventDefault();
|
||||
|
||||
Reference in New Issue
Block a user