From 6be800a584944c5e694b9fa2b9f34598dd7fc782 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Sun, 10 Nov 2024 18:35:26 -0800
Subject: [PATCH] Add HTML for share widget

---
 assets/css/default.css        | 95 ++++++++++++++++++++++++++++++++---
 locales/en-US.json            |  8 ++-
 src/invidious/views/watch.ecr | 29 +++++++++++
 3 files changed, 125 insertions(+), 7 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 2cedcf0c..0a04ea67 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -158,6 +158,8 @@ body a.pure-button {
 }
 
 button.pure-button-primary,
+summary.pure-button-primary,
+#share-widget > summary,
 body a.pure-button-primary,
 .channel-owner:hover,
 .channel-owner:focus {
@@ -534,13 +536,15 @@ span > select {
   background-color: #fff2;
 }
 
-.light-theme a {
+.light-theme a,
+.light-theme summary {
   color: #335d7a;
   text-decoration: none;
 }
 
 /* All links that do not fit with the default color goes here */
 .light-theme a:not([data-id]) > .icon,
+.light-theme summary > .icon,
 .light-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
 .light-theme .playlist-restricted > ol > li > a {
   color: #303030;
@@ -573,13 +577,15 @@ span > select {
     background-color: #fff2;
   }
 
-  .no-theme a {
+  .no-theme a,
+  .no-theme summary {
     color: #335d7a;
     text-decoration: none;
   }
 
   /* All links that do not fit with the default color goes here */
   .no-theme a:not([data-id]) > .icon,
+  .no-theme summary > .icon,
   .no-theme .pure-u-lg-1-5 > .h-box > a[href^="/watch?"],
   .no-theme .playlist-restricted > ol > li > a {
     color: #303030;
@@ -625,7 +631,8 @@ span > select {
   color: #ddd;
 }
 
-.dark-theme a {
+.dark-theme a,
+.dark-theme summary {
   color: #adadad;
   text-decoration: none;
 }
@@ -661,8 +668,10 @@ body.dark-theme {
 @media (prefers-color-scheme: dark) {
   .no-theme a:hover,
   .no-theme a:active,
-  .no-theme a:focus {
-    color: rgb(0, 182, 240);
+  .no-theme summary:hover,
+  .no-theme a:focus,
+  .no-theme summary:focus {
+      color: rgb(0, 182, 240);
   }
 
   .no-theme .pure-button-primary:hover,
@@ -679,7 +688,7 @@ body.dark-theme {
     color: #ddd;
   }
 
-  .no-theme a {
+  .no-theme a, .no-theme summary {
     color: #adadad;
     text-decoration: none;
   }
@@ -816,3 +825,77 @@ h1, h2, h3, h4, h5, p,
 #download_widget {
     width: 100%;
 }
+
+#share-widget > summary {
+  display: block;
+  font-weight: bold;
+  text-align: center;
+  border-radius: 5px;
+  border:0;
+  padding: 10px;
+}
+
+#share-widget > div {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 20px;
+}
+
+#share-to-sites {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  justify-content: space-between;
+}
+
+#add-time-to-share-link-container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding-left: 5px;
+  font-size: 16px;
+}
+
+#add-time-to-share-link-container input {
+  width: 20px;
+  height: 20px;
+}
+
+#add-time-to-share-link-container input:checked + label {
+  color: unset;
+}
+
+#add-time-to-share-link-container input + label {
+  color: #adadad;
+}
+
+#share-to-sites > li {
+  padding: 5px;
+}
+
+#share-to-sites > li:has(>details[open]) {
+  flex-basis: 100%;
+  width: 100%;
+}
+
+.share-site > a, .share-site > details > summary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#share-to-sites i {
+  font-size: 32px;
+}
+
+#share-widget-embed-section > div {
+  font-family: monospace;
+  padding: 5px;
+  border: 1px solid #adadad;
+  border-radius: 10px;
+  margin: 20px 0px;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/locales/en-US.json b/locales/en-US.json
index c23f6bc3..9861b9a5 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -498,5 +498,11 @@
     "toggle_theme": "Toggle Theme",
     "carousel_slide": "Slide {{current}} of {{total}}",
     "carousel_skip": "Skip the Carousel",
-    "carousel_go_to": "Go to slide `x`"
+    "carousel_go_to": "Go to slide `x`",
+    "video_share_widget_label": "Share",
+    "video_share_widget_embed": "Embed",
+    "video_share_widget_twitter": "Twitter",
+    "video_share_widget_reddit": "Reddit",
+    "video_share_widget_email": "Email",
+    "video_share_add_duration_checkbox_label": "Start at `x`"
 }
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 45c58a16..ab2c9303 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -155,6 +155,35 @@ we're going to need to do it here in order to allow for translations.
                 <% end %>
             </p>
 
+            <details id="share-widget">
+                <summary class="pure-button pure-button-primary"> <%=translate(locale, "video_share_widget_label")%> </summary>
+                <div>
+                    <ol id="share-to-sites">
+                        <% escaped_iv_watch_link = URI.encode_www_form(HOST_URL) + env.get?("current_page").as(String) %>
+                        <% escaped_iv_embed_link = URI.encode_www_form(HOST_URL) + URI.encode_www_form(link_iv_embed.to_s) %>
+                        <li class="share-site">
+                            <details id="share-widget-embed-section">
+                                <summary><i class="icon ion ion-md-code"></i><span><%=translate(locale, "video_share_widget_embed")%></span></summary>
+                                <div contenteditable readonly><%=HTML.escape("<iframe id='ivplayer' width='640' height='360' src='#{escaped_iv_embed_link}' style='border:none;'</iframe>")%></div>
+                            </details>
+                        </li>
+                        <li class="share-site">
+                            <a href="https://twitter.com/intent/post?url=<%=escaped_iv_watch_link%>&text=<%=title%>"><i class="icon ion ion-logo-twitter"></i><span><%=translate(locale, "video_share_widget_twitter")%></span></a>
+                        </li>
+                        <li class="share-site">
+                            <a href="https://www.reddit.com/submit?url=<%=escaped_iv_watch_link%>}&title=<%=title%>"><i class="icon ion ion-logo-reddit"></i><span><%=translate(locale, "video_share_widget_reddit")%></span></a>
+                        </li>
+                        <li class="share-site">
+                            <a href="mailto:?subject=<%=title%>&body=<%=escaped_iv_watch_link%>"><i class="icon ion ion-md-mail"></i><span><%=translate(locale, "video_share_widget_email")%></span></a>
+                        </li>
+                    </ol>
+                    <div id="add-time-to-share-link-container">
+                        <input type="checkbox" id="share-add-duration"/>
+                        <label for="share-add-duration"><%=translate(locale, "video_share_add_duration_checkbox_label", "0:00")%></label>
+                    </div>
+                </div>
+            </details>
+
             <% if user %>
                 <% playlists = Invidious::Database::Playlists.select_user_created_playlists(user.email) %>
                 <% if !playlists.empty? %>