From 62800befd467ea1475f99cdc37d7f08ef1131e59 Mon Sep 17 00:00:00 2001
From: Ealhad <charles@de-lacom.be>
Date: Sat, 11 Aug 2018 00:29:24 +0200
Subject: [PATCH] Display link in a bottom banner rather than in the page flow

---
 src/youtube.js | 68 +++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/youtube.js b/src/youtube.js
index ba33505..6a46654 100644
--- a/src/youtube.js
+++ b/src/youtube.js
@@ -27,7 +27,7 @@ function peertubeify(query) {
   }).then(video => {
     removeVideoLink();
     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);
 
   return htmlToElement(`
-<a id="${LINK_ID}" style="display: flex; align-items: center; margin: 2rem 0;" href=${url}>
-  <img src="${thumbnailURL(video.account.host, video.thumbnailPath)}">
-  <p style="font-size: 18px; margin-left: 1rem; color: var(--ytd-video-primary-info-renderer-title-color, var(--yt-primary-text-color));">
-    ${video.account.host}
-  </p>
-</a>
+<div id="${LINK_ID}"
+  style="
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    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);
   existingLink && existingLink.remove();
 }
-
-function ready(fn) {
-  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
-    fn();
-  } else {
-    document.addEventListener('DOMContentLoaded', fn);
-  }
-}