Merge pull request #55 from omarroth/share-button

Add share button and markers
2018-07-31 21:34:00 -05:00 · 2018-07-31 21:34:00 -05:00 · cdd644ded7
commit cdd644ded7
--- a/src/invidious.cr
+++ b/src/invidious.cr
@ -287,7 +287,7 @@ get "/watch" do |env|
  subscriptions ||= [] of String

  autoplay = env.params.query["autoplay"]?.try &.to_i
-  video_loop = env.params.query["video_loop"]?.try &.to_i
+  video_loop = env.params.query["loop"]?.try &.to_i

  if preferences
    autoplay ||= preferences.autoplay.to_unsafe
@ -430,6 +430,16 @@ get "/watch" do |env|
    description = " "
  end

+  if Kemal.config.ssl || CONFIG.https_only
+    scheme = "https://"
+  else
+    scheme = "http://"
+  end
+  host = env.request.headers["Host"]
+  host_url = "#{scheme}#{host}"
+  host_params = env.request.query_params
+  host_params.delete_all("v")
+
  thumbnail = "https://i.ytimg.com/vi/#{id}/mqdefault.jpg"

  templated "watch"
@ -1287,6 +1297,10 @@ get "/embed/:id" do |env|
  video_loop = env.params.query["loop"]?.try &.to_i
  video_loop ||= 0

+  autoplay = autoplay == 1
+  video_loop = video_loop == 1
+  controls = controls == 1
+
  begin
    video = get_video(id, PG_DB)
  rescue ex
@ -1294,6 +1308,20 @@ get "/embed/:id" do |env|
    next templated "error"
  end

+  if video.info["hlsvp"]?
+    hlsvp = video.info["hlsvp"]
+
+    if Kemal.config.ssl || CONFIG.https_only
+      scheme = "https://"
+    else
+      scheme = "http://"
+    end
+    host = env.request.headers["Host"]
+    url = "#{scheme}#{host}"
+
+    hlsvp = hlsvp.gsub("https://manifest.googlevideo.com", url)
+  end
+
  fmt_stream = [] of HTTP::Params
  video.info["url_encoded_fmt_stream_map"].split(",") do |string|
    if !string.empty?
@ -1339,6 +1367,26 @@ get "/embed/:id" do |env|
    next env.redirect url
  end

+  video.description = fill_links(video.description, "https", "www.youtube.com")
+  video.description = add_alt_links(video.description)
+
+  description = video.description.gsub("<br>", " ")
+  description = description.gsub("<br/>", " ")
+  description = XML.parse_html(description).content[0..200].gsub('"', "&quot;").gsub("\n", " ").strip(" ")
+  if description.empty?
+    description = " "
+  end
+
+  if Kemal.config.ssl || CONFIG.https_only
+    scheme = "https://"
+  else
+    scheme = "http://"
+  end
+  host = env.request.headers["Host"]
+  host_url = "#{scheme}#{host}"
+  host_params = env.request.query_params
+  host_params.delete_all("v")
+
  thumbnail = "https://i.ytimg.com/vi/#{id}/mqdefault.jpg"

  rendered "embed"
@ -2792,7 +2840,7 @@ get "/:id" do |env|
    params = params.join("&")

    url = "/watch?v=#{id}"
-    if params
+    if !params.empty?
      url += "&#{params}"
    end

--- a/src/invidious/helpers.cr
+++ b/src/invidious/helpers.cr
@ -891,16 +891,16 @@ def decode_time(string)
  time = string.try &.to_f?

  if !time
-    hours = /(?<hours>\d+)h/.match(string).try &.["hours"].try &.to_i
+    hours = /(?<hours>\d+)h/.match(string).try &.["hours"].try &.to_f
    hours ||= 0

-    minutes = /(?<minutes>\d+)m(?!s)/.match(string).try &.["minutes"].try &.to_i
+    minutes = /(?<minutes>\d+)m(?!s)/.match(string).try &.["minutes"].try &.to_f
    minutes ||= 0

-    seconds = /(?<seconds>\d+)s/.match(string).try &.["seconds"].try &.to_i
+    seconds = /(?<seconds>\d+)s/.match(string).try &.["seconds"].try &.to_f
    seconds ||= 0

-    millis = /(?<millis>\d+)ms/.match(string).try &.["millis"].try &.to_i
+    millis = /(?<millis>\d+)ms/.match(string).try &.["millis"].try &.to_f
    millis ||= 0

    time = hours * 3600 + minutes * 60 + seconds + millis / 1000
@ -909,10 +909,12 @@ def decode_time(string)
  return time
 end

-def decode_date(date : String)
+def decode_date(string : String)
  # Time matches format "20 hours ago", "40 minutes ago"...
-  delta = date.split(" ")[0].to_i
-  case date
+  date = string.split(" ")[-3, 3]
+  delta = date[0].to_i
+
+  case date[1]
  when .includes? "minute"
    delta = delta.minutes
  when .includes? "hour"
@ -926,7 +928,7 @@ def decode_date(date : String)
  when .includes? "year"
    delta = delta.years
  else
-    raise "Could not parse #{date}"
+    raise "Could not parse #{string}"
  end

  return Time.now - delta
--- a/src/invidious/views/embed.ecr
+++ b/src/invidious/views/embed.ecr
@ -7,10 +7,13 @@
 <meta name="thumbnail" content="<%= thumbnail %>">
 <link rel="stylesheet" href="https://unpkg.com/video.js@6.10.3/dist/video-js.min.css">
 <link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
+<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
+<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
 <script src="https://unpkg.com/video.js@6.10.3/dist/video.min.js"></script>
 <script src="https://unpkg.com/videojs-hotkeys@0.2.21/videojs.hotkeys.min.js"></script>
 <script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
-<script src="https://unpkg.com/videojs-offset@2.0.0-beta.2/dist/videojs-offset.min.js"></script>
+<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
+<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
 <title><%= video.title %> - Invidious</title>
 </head>

@ -29,11 +32,18 @@ video, #my_video, .video-js, .vjs-default-skin
 }
 </style>

+<% if hlsvp %>
+<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
+<% end %>
+
 <video playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" id="player" 
-    <% if autoplay == 1 %>autoplay<% end %>
-    <% if controls == 1 %>controls<% end %>
-    <% if video_loop == 1 %>loop<% end %>
+    <% if autoplay %>autoplay<% end %>
+    <% if controls %>controls<% end %>
+    <% if video_loop %>loop<% end %>
    class="video-js vjs-default-skin">
+    <% if hlsvp %>
+        <source src="<%= hlsvp %>" type="application/x-mpegURL">
+    <% else %>
        <% if listen %>
            <% audio_streams.each_with_index do |fmt, i| %>
                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
@ -47,6 +57,7 @@ video, #my_video, .video-js, .vjs-default-skin
                <% end %>
            <% end %>    
        <% end %>
+    <% end %>
 </video>

 <script>
@ -59,18 +70,28 @@ var options = {
         'volumePanel',
         'progressControl',
         'remainingTimeDisplay',
+         'captionsButton',
         'qualitySelector',
         'playbackRateMenuButton',
         'fullscreenToggle',
      ],
   },
 };
+
+var shareOptions = {
+  socials: ["fb", "tw", "reddit", "mail"],
+
+  url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
+  title: "<%= video.title %>",
+  description: "<%= description %>",
+  image: '<%= thumbnail %>'
+};
+
 var player = videojs('player', options, function() {
    this.hotkeys({
    volumeStep: 0.1,
    seekStep: 5,
    enableModifiersForNumbers: false,
-    enableVolumeScroll: false,
    customKeys: {
        play: {
            key: function(e) {
@ -107,11 +128,32 @@ var player = videojs('player', options, function() {
  });
 });

-player.offset({
-  start: <%= video_start %>,
-  end: <%= video_end %>
+player.share(shareOptions);
+
+<% if video_start > 0 || video_end > 0 %>
+player.markers({
+    onMarkerReached: function(marker) {
+        if (marker.text === 'End') {
+            if (player.loop()) {
+                player.markers.prev('Start');
+            } else {
+                player.pause();
+            }
+        }
+    },
+    markers: [
+        {time: <%= video_start %>, text: 'Start'},
+        <% if video_end < 0 %>
+        {time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: 'End'}
+        <% else %>
+        {time: <%= video_end %>, text: 'End'}
+        <% end %>
+    ]
 });

+player.currentTime(<%= video_start %>);
+<% end %>
+
 <% if !listen %>
 var currentSources = player.currentSources();
 for ( var i = 0; i < currentSources.length; i++ ) {
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@ -24,10 +24,13 @@
 <meta name="twitter:player:height" content="720">
 <link rel="stylesheet" href="https://unpkg.com/video.js@6.10.3/dist/video-js.min.css">
 <link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
+<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
+<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
 <script src="https://unpkg.com/video.js@6.10.3/dist/video.min.js"></script>
 <script src="https://unpkg.com/videojs-hotkeys@0.2.21/videojs.hotkeys.min.js"></script>
 <script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
-<script src="https://unpkg.com/videojs-offset@2.0.0-beta.2/dist/videojs-offset.min.js"></script>
+<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
+<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
 <title><%= video.title %> - Invidious</title>
 <% end %>

@ -85,6 +88,15 @@ var options = {
   },
 };

+var shareOptions = {
+  socials: ["fb", "tw", "reddit", "mail"],
+
+  url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
+  title: "<%= video.title %>",
+  description: "<%= description %>",
+  image: '<%= thumbnail %>'
+};
+
 var player = videojs('player', options, function() {
    this.hotkeys({
    volumeStep: 0.1,
@ -126,15 +138,37 @@ var player = videojs('player', options, function() {
  });
 });

+player.share(shareOptions);
+
 <% if preferences %>
 player.volume(<%= preferences.volume.to_f / 100 %>);
 player.playbackRate(<%= preferences.speed %>);
 <% end %>
-player.offset({
-  start: <%= video_start %>,
-  end: <%= video_end %>
+
+<% if video_start > 0 || video_end > 0 %>
+player.markers({
+    onMarkerReached: function(marker) {
+        if (marker.text === 'End') {
+            if (player.loop()) {
+                player.markers.prev('Start');
+            } else {
+                player.pause();
+            }
+        }
+    },
+    markers: [
+        {time: <%= video_start %>, text: 'Start'},
+        <% if video_end < 0 %>
+        {time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: 'End'}
+        <% else %>
+        {time: <%= video_end %>, text: 'End'}
+        <% end %>
+    ]
 });

+player.currentTime(<%= video_start %>);
+<% end %>
+
 <% if !listen %>
 var currentSources = player.currentSources();
 for ( var i = 0; i < currentSources.length; i++ ) {