feature: embeds for Tidal
fix: iframe sizing
This commit is contained in:
parent
0764bf6155
commit
241ab51fa9
4 changed files with 76 additions and 11 deletions
10
README.md
10
README.md
|
|
@ -20,21 +20,27 @@ feature discussions.
|
|||
- [ ] chat message processing
|
||||
- [X] auto-link urls
|
||||
- [X] use this 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@:%_{}\[\]<>\(\)\+.~&\/="]*)(?:\?(?<query>[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?<hash>[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?`
|
||||
- [ ] :emoji: replacements
|
||||
- [ ] preview cards for links
|
||||
- [ ] embedded video for
|
||||
- [ ] youtube
|
||||
- [X] youtube
|
||||
- [ ] vimeo
|
||||
- [ ] tiktok
|
||||
- [ ] embedded audio or audio cards for:
|
||||
- [ ] tidal
|
||||
- [X] tidal
|
||||
- [ ] spotify
|
||||
- [ ] youtube (any way to differentiate for yt music?)
|
||||
- [ ] add action buttons to embeds
|
||||
- [ ] copy original link (hopefully just a button with some onclick we can slap next to the iframe and style?)
|
||||
- [ ] toggle embed (toggle between showing the embed and the original link)
|
||||
- [X] punycode urls before url extraction? (see: https://stackoverflow.com/a/26618995)
|
||||
- [ ] gif support
|
||||
- [ ] start/stop gif control
|
||||
- [ ] hide control
|
||||
- [ ] inline image support
|
||||
- [ ] hide control
|
||||
- [ ] custom emoji support
|
||||
- [ ] upload custom gif emoji
|
||||
- [X] try to select immediate sibling messages from the same user and hide mulitple avatars
|
||||
- [X] user profile page
|
||||
- [X] logout button
|
||||
|
|
|
|||
|
|
@ -180,3 +180,34 @@
|
|||
#talk .message-container .message-content-container {
|
||||
padding-left: 8rem;
|
||||
}
|
||||
|
||||
#talk .embed-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
height: 0;
|
||||
padding-bottom: 20%;
|
||||
}
|
||||
|
||||
#talk .embed-container.short {
|
||||
padding-bottom: 7.5%;
|
||||
}
|
||||
|
||||
#talk .embed-container.letterbox {
|
||||
padding-bottom: 33%;
|
||||
}
|
||||
|
||||
#talk .embed-container.square {
|
||||
padding-bottom: 50%;
|
||||
}
|
||||
|
||||
#talk .embed-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,8 @@
|
|||
<style>
|
||||
<!-- #include file="./talk.css" -->
|
||||
</style>
|
||||
<script src="./js/external/punycode.js" type="text/javascript"></script>
|
||||
<script>
|
||||
<!-- #include file="./talk.js" -->
|
||||
</script>
|
||||
<script src="/js/external/punycode.js" type="text/javascript"></script>
|
||||
<script src="/tabs/talk/talk.js" type="text/javascript"></script>
|
||||
<div class="sidebar resizable">
|
||||
<div id="room-creation-container" data-requires-permission="rooms.create">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -3,8 +3,28 @@ const URL_MATCHING_REGEX =
|
|||
|
||||
const URL_MATCH_HANDLERS = [
|
||||
(match) => {
|
||||
// console.dir(match);
|
||||
return;
|
||||
const original_url = match[0];
|
||||
const {
|
||||
groups: { item_type, item_id },
|
||||
} =
|
||||
/(?:https?:)?(?:\/\/)?(?:[0-9A-Z-]+\.)?(?:tidalhi.fi\/|tidal.com\/|tidal(?:-nocookie)?\.com\S*?[^\w\s-]).*?(?<item_type>(?:track|album)).*?(?<item_id>[\d]{9,})/gi.exec(
|
||||
original_url,
|
||||
) ?? { groups: {} };
|
||||
|
||||
if (!(item_type && item_id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="embed-container ${item_type === "album" ? "square" : "short"}">
|
||||
<iframe
|
||||
src="https://embed.tidal.com/${item_type.at(-1) === "s" ? item_type : `${item_type}s`}/${item_id}"
|
||||
allow="encrypted-media"
|
||||
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
|
||||
title="TIDAL Embed Player"
|
||||
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"
|
||||
/>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
(match) => {
|
||||
|
|
@ -12,15 +32,25 @@ const URL_MATCH_HANDLERS = [
|
|||
const {
|
||||
groups: { video_id },
|
||||
} =
|
||||
/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)(?<video_id>[^"&?\/\s]{11})/gi.exec(
|
||||
/(?:https?:)?(?:\/\/)?(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*?[^\w\s-])(?<video_id>[\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/gi.exec(
|
||||
original_url,
|
||||
);
|
||||
) ?? { groups: {} };
|
||||
|
||||
if (!video_id) {
|
||||
return;
|
||||
}
|
||||
|
||||
return `<iframe width="560" height="315" src="https://www.youtube.com/embed/${video_id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`;
|
||||
return `
|
||||
<div class="embed-container letterbox">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/${video_id}"
|
||||
title="YouTube video player"
|
||||
allow="clipboard-write; encrypted-media; picture-in-picture; web-share;"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen />
|
||||
<button class="icon plus" onclick="console.log('hi');" />
|
||||
<button class="icon talk" onclick="console.log('hello');" />
|
||||
</div>`;
|
||||
},
|
||||
|
||||
// url
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue