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

Compare commits

base: andyburke:8deca841f682c9fcb1e861c880ec8fec5271cc3c
Branches Tags
andyburke:dev
...
compare: andyburke:9924abe542958e9e5d82e625acd7be005b88c363
Branches Tags
andyburke:dev

2 commits
8deca841f6 ... 9924abe542

Author SHA1 Message Date
Andy Burke
9924abe542 feature: improve embed container sizing 2025-07-25 20:57:58 -07:00
Andy Burke
7a906b4bce feature: improve youtube short embeds 2025-07-25 20:56:30 -07:00
2 changed files with 16 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -213,18 +213,24 @@
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 {
height: 0;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding-bottom: 50%; aspect-ratio: 1 / 1 !important;
} }
#talk .embed-container iframe { #talk .embed-container iframe {

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\");"/>