mirror of
https://github.com/iv-org/invidious.git
synced 2025-01-09 11:00:34 +05:30
Add HTML for share widget
This commit is contained in:
syeopite
parent
8a76e4f001
commit
6be800a584
@ -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%;
|
||||
}
|
||||
@ -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`"
|
||||
}
|
||||
|
||||
@ -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? %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user