andyburke/autonomous.contact
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: improve youtube short embeds

Browse source
This commit is contained in:
Andy Burke 2025-07-25 20:56:30 -07:00
parent 8deca841f6
commit 7a906b4bce
2 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
public/tabs/talk/talk.css
View file

@ -213,11 +213,18 @@
padding-bottom: 7.5%; padding-bottom: 7.5%;
} }
#talk .embed-container.vertical {
max-width: 320px;
overflow: hidden;
aspect-ratio: 9 / 16 !important;
}
#talk .embed-container.letterbox { #talk .embed-container.letterbox {
height: 0; /* height: 0; */
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding-bottom: 33%; /* padding-bottom: 33%; */
aspect-ratio: 16 / 9 !important;
} }
#talk .embed-container.square { #talk .embed-container.square {

8
public/tabs/talk/talk.js
View file

@ -5,7 +5,7 @@ const URL_MATCHING_REGEX =
/(?:(?<protocol>[a-zA-Z]+):\/\/)?(?:(?<auth>(?<username>\S.+)\:(?<password>.+))\@)?(?<host>(?:(?<hostname>[-a-zA-Z0-9\.]+)\.)?(?<domain>[-a-zA-Z0-9]+?\.(?<tld>[-a-zA-Z0-9]{2,64}))(?:\:(?<port>[0-9]{1,6}))?)\b(?<path>[-a-zA-Z0-9@:%_{}\[\]<>\(\)\+.~&\/="]*?(?<extension>\.[^\.?/#"]+)?)(?:\?(?<query>[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?<hash>[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?(?:$|\s)/gim; /(?:(?<protocol>[a-zA-Z]+):\/\/)?(?:(?<auth>(?<username>\S.+)\:(?<password>.+))\@)?(?<host>(?:(?<hostname>[-a-zA-Z0-9\.]+)\.)?(?<domain>[-a-zA-Z0-9]+?\.(?<tld>[-a-zA-Z0-9]{2,64}))(?:\:(?<port>[0-9]{1,6}))?)\b(?<path>[-a-zA-Z0-9@:%_{}\[\]<>\(\)\+.~&\/="]*?(?<extension>\.[^\.?/#"]+)?)(?:\?(?<query>[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?<hash>[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?(?:$|\s)/gim;
const VIDEO_ID_EXTRACTOR = const VIDEO_ID_EXTRACTOR =
/(?<video_domain>vimeo\.com|youtu(?:be\.com|\.be|be\.googleapis\.com))(?:\/(?<action>video|embed|watch|v))?.*(?:(?:\/|v=)(?<video_id>[A-Za-z0-9._%-]*))\S*/gi; /(?<video_domain>vimeo\.com|youtu(?:be\.com|\.be|be\.googleapis\.com))(?:\/(?<action>video|embed|watch|shorts|v))?.*(?:(?:\/|v=)(?<video_id>[A-Za-z0-9._%-]*))\S*/gi;
const SPOTIFY_EXTRACTOR = const SPOTIFY_EXTRACTOR =
/^\/(?<item_type>(?:album|artist|episode|playlist|tracks?))\/?(?<item_id>[a-zA-Z0-9]{22})/gi; /^\/(?<item_type>(?:album|artist|episode|playlist|tracks?))\/?(?<item_id>[a-zA-Z0-9]{22})/gi;
const TIDAL_EXTRACTOR = const TIDAL_EXTRACTOR =
@ -98,8 +98,12 @@ const URL_MATCH_HANDLERS = [
return; return;
} }
console.dir({
action,
video_id,
});
return ` return `
<div class="embed-container iframe letterbox youtube"> <div class="embed-container iframe ${action === "shorts" ? "vertical" : "letterbox"} youtube">
<div class="embed-actions-container"> <div class="embed-actions-container">
<button class="icon plus" onclick="console.log(\"close\");"/> <button class="icon plus" onclick="console.log(\"close\");"/>
<button class="icon talk" onclick="console.log(\"stop\");"/> <button class="icon talk" onclick="console.log(\"stop\");"/>