Peertube
/
peertubeify-estensione-firefox-chrome
mirror of https://gitlab.com/Cha_deL/peertubeify
1
0
Fork 0
Code Issues Releases Wiki Activity

Display link in a bottom banner rather than in the page flow

This commit is contained in:
Ealhad 2018-08-11 00:29:24 +02:00
parent d2e9d13634
commit 62800befd4
1 changed files with 53 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/youtube.js
View File

@ -27,7 +27,7 @@ function peertubeify(query) {
}).then(video => { }).then(video => {
removeVideoLink(); removeVideoLink();
const link = videoLink(video); const link = videoLink(video);
document.querySelector('.title').insertAdjacentElement('afterend', link); document.querySelector('ytd-app').appendChild(link);
}); });
} }
@ -59,12 +59,58 @@ function videoLink(video) {
const url = watchURL(video.account.host, video.uuid); const url = watchURL(video.account.host, video.uuid);
return htmlToElement(` return htmlToElement(`
<a id="${LINK_ID}" style="display: flex; align-items: center; margin: 2rem 0;" href=${url}> <div id="${LINK_ID}"
<img src="${thumbnailURL(video.account.host, video.thumbnailPath)}"> style="
<p style="font-size: 18px; margin-left: 1rem; color: var(--ytd-video-primary-info-renderer-title-color, var(--yt-primary-text-color));"> position: fixed;
${video.account.host} bottom: 0;
</p> left: 0;
</a> box-sizing: border-box;
width: 100%;
padding: 1rem;
z-index: 10;
box-shadow: inset 0px 4px 8px -3px rgba(17, 17, 17, .06);
background-color: var(--yt-swatch-primary);
">
<button
onclick="document.getElementById('${LINK_ID}').remove()"
style="
all: unset;
color: var(--yt-swatch-text);
cursor: pointer;
font-size: 24px;
position: absolute;
line-height: .8;
top: 1rem;
right: 1rem;">
⨯
</button>
<a
style="
display: flex;
align-items: center;
text-decoration: none;"
href=${url}>
<img src="${thumbnailURL(video.account.host, video.thumbnailPath)}">
<div style="
font-size: 18px;
margin-left: 1rem;
color: var(--yt-primary-text-color);
display: flex;
flex-direction: column;
justify-content: space-around;
">
<p style="margin: 0 0 1rem;">
${video.name}
</p>
<p style="font-size: 1.4rem; margin: 0;">
${video.account.host}
</p>
</div>
</a>
</div>
`); `);
} }
@ -72,11 +118,3 @@ function removeVideoLink() {
const existingLink = document.getElementById(LINK_ID); const existingLink = document.getElementById(LINK_ID);
existingLink && existingLink.remove(); existingLink && existingLink.remove();
} }
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}