From 8a76e4f00193e345910645a1f7e0edd0f427410d Mon Sep 17 00:00:00 2001 From: syeopite Date: Sun, 10 Nov 2024 01:48:18 -0800 Subject: [PATCH 1/4] Remove videojs-share Extension is abandoned and doesn't work well on videojs 8 --- assets/css/player.css | 12 +--------- assets/js/player.js | 24 +------------------ .../views/components/player_sources.ecr | 2 -- src/invidious/views/licenses.ecr | 14 ----------- videojs-dependencies.yml | 4 ---- 5 files changed, 2 insertions(+), 54 deletions(-) diff --git a/assets/css/player.css b/assets/css/player.css index 9cb400ad..6659db73 100644 --- a/assets/css/player.css +++ b/assets/css/player.css @@ -115,12 +115,8 @@ ul.vjs-menu-content::-webkit-scrollbar { order: 5; } -.vjs-share-control { - order: 6; -} - .vjs-fullscreen-control { - order: 7; + order: 6; } .vjs-playback-rate > .vjs-menu { @@ -252,12 +248,6 @@ video.video-js { top: 1.5em; } -@media screen and (max-width: 700px) { - .video-js .vjs-share { - justify-content: unset; - } -} - @media screen and (max-width: 650px) { .vjs-modal-dialog-content { overflow-x: hidden; diff --git a/assets/js/player.js b/assets/js/player.js index 353a5296..608415eb 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -157,22 +157,6 @@ player.on('timeupdate', function () { }); -var shareOptions = { - socials: ['fbFeed', 'tw', 'reddit', 'email'], - - get url() { - return addCurrentTimeToURL(short_url); - }, - title: player_data.title, - description: player_data.description, - image: player_data.thumbnail, - get embedCode() { - // Single quotes inside here required. HTML inserted as is into value attribute of input - return ""; - } -}; - if (location.pathname.startsWith('/embed/')) { var overlay_content = '

' + player_data.title + '

'; player.overlay({ @@ -219,11 +203,8 @@ if (isMobile()) { var playback_element = document.getElementsByClassName('vjs-playback-rate')[0]; operations_bar_element.append(playback_element); - // The share and http source selector element can't be fetched till the players ready. + // The http source selector element can't be fetched till the players ready. player.one('playing', function () { - var share_element = document.getElementsByClassName('vjs-share-control')[0]; - operations_bar_element.append(share_element); - if (!video_data.params.listen && video_data.params.quality === 'dash') { var http_source_selector = document.getElementsByClassName('vjs-http-source-selector vjs-menu-button')[0]; operations_bar_element.append(http_source_selector); @@ -725,9 +706,6 @@ addEventListener('keydown', function (e) { player.on('DOMMouseScroll', mouseScroll); }()); -// Since videojs-share can sometimes be blocked, we defer it until last -if (player.share) player.share(shareOptions); - // show the preferred caption by default if (player_data.preferred_caption_found) { player.ready(function () { diff --git a/src/invidious/views/components/player_sources.ecr b/src/invidious/views/components/player_sources.ecr index 9af3899c..9b38eaac 100644 --- a/src/invidious/views/components/player_sources.ecr +++ b/src/invidious/views/components/player_sources.ecr @@ -1,7 +1,6 @@ - @@ -11,7 +10,6 @@ - diff --git a/src/invidious/views/licenses.ecr b/src/invidious/views/licenses.ecr index 667cfa37..b7352dfa 100644 --- a/src/invidious/views/licenses.ecr +++ b/src/invidious/views/licenses.ecr @@ -219,20 +219,6 @@ - - - videojs-share.js - - - - Expat - - - - <%= translate(locale, "source") %> - - - videojs-vtt-thumbnails.js diff --git a/videojs-dependencies.yml b/videojs-dependencies.yml index e9ccc9dd..8bd3404c 100644 --- a/videojs-dependencies.yml +++ b/videojs-dependencies.yml @@ -23,10 +23,6 @@ videojs-overlay: version: 2.1.4 shasum: 5a103b25374dbb753eb87960d8360c2e8f39cc05 -videojs-share: - version: 3.2.1 - shasum: 0a3024b981387b9d21c058c829760a72c14b8ceb - videojs-vr: version: 1.8.0 shasum: 7f2f07f760d8a329c615acd316e49da6ee8edd34 From 6be800a584944c5e694b9fa2b9f34598dd7fc782 Mon Sep 17 00:00:00 2001 From: syeopite Date: Sun, 10 Nov 2024 18:35:26 -0800 Subject: [PATCH 2/4] 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 %>

+
+ <%=translate(locale, "video_share_widget_label")%> +
+
    + <% 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) %> +