invidious-experimenting/src/invidious/views/watch.ecr

<% content_for "header" do %>
<meta name="thumbnail" content="<%= thumbnail %>">
<meta name="description" content="<%= description %>">
<meta name="keywords" content="<%= video.info["keywords"] %>">
<meta property="og:site_name" content="Invidious">
<meta property="og:url" content="<%= host_url %>/watch?v=<%= video.id %>">
<meta property="og:title" content="<%= HTML.escape(video.title) %>">
<meta property="og:image" content="https://i.ytimg.com/vi/<%= video.id %>/hqdefault.jpg">
<meta property="og:description" content="<%= description %>">
<meta property="og:type" content="video.other">
<meta property="og:video:url" content="<%= host_url %>/embed/<%= video.id %>">
<meta property="og:video:secure_url" content="<%= host_url %>/embed/<%= video.id %>">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@omarroth">
<meta name="twitter:url" content="<%= host_url %>/watch?v=<%= video.id %>">
<meta name="twitter:title" content="<%= HTML.escape(video.title) %>">
<meta name="twitter:description" content="<%= description %>">
<meta name="twitter:image" content="<%= thumbnail %>">
<meta name="twitter:player" content="<%= host_url %>/embed/<%= video.id %>">
<meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720">
<link rel="stylesheet" href="https://unpkg.com/video.js@6.12.0/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.12.0/dist/video.min.js"></script>
<script src="https://unpkg.com/videojs-hotkeys@0.2.22/build/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-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><%= HTML.escape(video.title) %> - Invidious</title>
<% end %>

<% if hlsvp %>
<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
<% end %>

<div class="h-box">
    <video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" 
        id="player" class="video-js"
        <% if autoplay %>autoplay<% end %>
        <% if video_loop %>loop<% end %>
        controls>
        <% 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 %>">
                <% end %>
            <% else %>
                <% fmt_stream.each_with_index do |fmt, i| %>
                    <% if preferences %>
                    <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
                    <% else %>
                    <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
                    <% end %>
                <% end %>
            <% end %>

            <% preferred_captions.each_with_index do |caption, i| %>
            <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
                label="<%= caption.name.simpleText %>" <% if i == 0 %>default<% end %>>
            <% end %>

            <% captions.each do |caption| %>
            <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
                label="<%= caption.name.simpleText %>">
            <% end %>
        <% end %>
    </video>
</div>

<script>
var options = {
  aspectRatio: "16:9",
  preload: "auto",
  playbackRates: [0.5, 1, 1.5, 2],
  controlBar: {
    children: [
      "playToggle",
      "volumePanel",
      "currentTimeDisplay",
      "timeDivider",
      "durationDisplay",
      "progressControl",
      "remainingTimeDisplay",
      "captionsButton",
      "qualitySelector",
      "playbackRateMenuButton",
      "fullscreenToggle"
    ]
  }
};

var shareOptions = {
  socials: ["fb", "tw", "reddit", "mail"],

  url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
  title: "<%= video.title.dump_unquoted %>",
  description: "<%= description %>",
  image: "<%= thumbnail %>",
  embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
      src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
};

var player = videojs("player", options, function() {
  this.hotkeys({
    volumeStep: 0.1,
    seekStep: 5,
    enableModifiersForNumbers: false,
    customKeys: {
      play: {
        key: function(e) {
          // Toggle play with K Key
          return e.which === 75;
        },
        handler: function(player, options, e) {
          if (player.paused()) {
            player.play();
          } else {
            player.pause();
          }
        }
      },
      backward: {
        key: function(e) {
          // Go backward 5 seconds
          return e.which === 74;
        },
        handler: function(player, options, e) {
          player.currentTime(player.currentTime() - 5);
        }
      },
      forward: {
        key: function(e) {
          // Go forward 5 seconds
          return e.which === 76;
        },
        handler: function(player, options, e) {
          player.currentTime(player.currentTime() + 5);
        }
      }
    }
  });
});

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++) {
  if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
    currentSources.splice(i);
    i--;
  }
}

player.src(currentSources);
<% end %>

<% if preferences %>
player.volume(<%= preferences.volume.to_f / 100 %>);
player.playbackRate(<%= preferences.speed %>);
<% end %>

function toggle(target) {
  body = target.parentNode.parentNode.children[1];
  if (body.style.display === null || body.style.display === "") {
    target.innerHTML = "[ + ]";
    body.style.display = "none";
  } else {
    target.innerHTML = "[ - ]";
    body.style.display = "";
  }
}

function toggle_comments(target) {
  body = target.parentNode.parentNode.parentNode.children[1];
  if (body.style.display === null || body.style.display === "") {
    target.innerHTML = "[ + ]";
    body.style.display = "none";
  } else {
    target.innerHTML = "[ - ]";
    body.style.display = "";
  }
}

function load_comments(target) {
  var continuation = target.getAttribute("data-continuation");

  var body = target.parentNode.parentNode;
  var fallback = body.innerHTML;
  body.innerHTML =
    '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';

  var url =
    "/api/v1/comments/<%= video.id %>?format=html&continuation=" + continuation;
  var xhr = new XMLHttpRequest();
  xhr.responseType = "json";
  xhr.timeout = 10000;
  xhr.open("GET", url, true);
  xhr.send();

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        body.innerHTML = xhr.response.content_html;
      } else {
        body.innerHTML = fallback;
      }
    }
  };

  xhr.ontimeout = function() {
    body.innerHTML = fallback;
  };
}

function get_reddit_comments() {
  var url = "/api/v1/comments/<%= video.id %>?source=reddit";
  var xhr = new XMLHttpRequest();
  xhr.responseType = "json";
  xhr.timeout = 10000;
  xhr.open("GET", url, true);
  xhr.send();

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4)
      if (xhr.status == 200) {
        comments = document.getElementById("comments");
        comments.innerHTML = `
            <div>
                <h3>
                    <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> 
                    {title}
                </h3>
                <b>
                    <a target="_blank" href="https://reddit.com{permalink}">View more comments on Reddit</a>
                </b>
            </div>
            <div>{content_html}</div>
        
            <hr>`.supplant({
          title: xhr.response.title,
          permalink: xhr.response.permalink,
          content_html: xhr.response.content_html
        });
      } else {
        get_youtube_comments();
      }
  };

  xhr.ontimeout = function() {
    get_reddit_comments();
  };
}

function get_youtube_comments() {
  var url = "/api/v1/comments/<%= video.id %>?format=html";
  var xhr = new XMLHttpRequest();
  xhr.responseType = "json";
  xhr.timeout = 10000;
  xhr.open("GET", url, true);
  xhr.send();

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4)
      if (xhr.status == 200) {
        comments = document.getElementById("comments");
        comments.innerHTML = `
            <div>
                <h3>
                    <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> 
                    <a target="_blank" href="https://www.youtube.com/watch?v=<%= video.id %>">View more comments on YouTube</a>
                </h3>
            </div>
            <div>{content_html}</div>
            <hr>`.supplant({
          content_html: xhr.response.content_html
        });
      } else {
        comments = document.getElementById("comments");
        comments.innerHTML = "";
      }
  };

  xhr.ontimeout = function() {
    get_youtube_comments();
  };
}

String.prototype.supplant = function(o) {
  return this.replace(/{([^{}]*)}/g, function(a, b) {
    var r = o[b];
    return typeof r === "string" || typeof r === "number" ? r : a;
  });
};

<% if preferences && preferences.comments == "reddit" %>
get_reddit_comments();
<% else %>
get_youtube_comments();
<% end %>

</script>

<div class="h-box">
<h1>
    <%= HTML.escape(video.title) %> 
    <% if listen %>
    <a href="/watch?<%= env.params.query %>">
        <i class="icon ion-ios-videocam"></i>
    </a>
    <% else %>
    <a href="/watch?<%= env.params.query %>&listen=1">
        <i class="icon ion-ios-volume-high"></i>
    </a>
    <% end %>
</h1>
</div>

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-5">
        <div class="h-box">
            <p><a href="https://www.youtube.com/watch?v=<%= video.id %>">Watch video on YouTube</a></p>
            <p><i class="icon ion-ios-eye"></i> <%= number_with_separator(video.views) %></p>
            <p><i class="icon ion-ios-thumbs-up"></i> <%= number_with_separator(video.likes) %></p>
            <p><i class="icon ion-ios-thumbs-down"></i> <%= number_with_separator(video.dislikes) %></p>
            <p id="Genre">Genre : <%= video.genre %></p>
            <p id="FamilyFriendly">Family Friendly? <%= video.is_family_friendly %></p>
            <p id="Wilson">Wilson Score : <%= video.wilson_score.round(4) %></p>
            <p id="Rating">Rating : <%= rating.round(4) %> / 5</p>
            <p id="Engagement">Engagement : <%= engagement.round(2) %>%</p>
            <% if ad_slots %>
            <p id="Slots">Ad Slots : <%= ad_slots %></p>
            <% end %>
            <% if engage_types %>
            <p id="Engage">Engage Types : <%= engage_types %></p>
            <% end %>
            <% if ad_tag %>
            <p id="Category">Ad Category : <%= ad_category %></p>
            <p id="Tags">Ad Tags(?) : <%= k2 %></p>
            <% end %>
        </div>
    </div>

    <div class="pure-u-1 pure-u-md-3-5">
        <div class="h-box">
            <p>
                <a href="/channel/<%= video.ucid %>">
                    <h3><%= video.author %></h3>
                </a>
            </p>
        <% if user %>
            <% if subscriptions.includes? video.ucid %>
            <p>
                <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.ucid %>">
                    <b>Unsubscribe from <%= video.author %></b>
                </a>
            </p>
            <% else %>
            <p>
                <a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>">
                    <b>Subscribe to <%= video.author %></b>
                </a>
            </p>
            <% end %>
        <% else %>
            <p>
                <a href="/login">
                    <b>Login to subscribe to <%= video.author %></b>
                </a>
            </p>
        <% end %>
            <p>
                <b>Shared <%= video.published.to_s("%B %-d, %Y") %></b>
            </p>
            <div>
                <%= video.description %>
            </div>
            <hr>
            <div id="comments">
                <h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>
            </div>
        </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-5">
        <div class="h-box">
        <% rvs.each do |rv| %>
            <% if rv.has_key?("id") %>
            <a href="/watch?v=<%= rv["id"] %>">
                <% if preferences && preferences.thin_mode %>
                <% else %>
                <img style="width:100%;" src="<%= rv["iurlmq"] %>">
                <% end %>
                <p style="width:100%"><%= rv["title"] %></p>
                <p>
                    <b style="width: 100%"><%= rv["author"] %></b>
                </p>
            </a>
            <% end %>
        <% end %>
        </div>
    </div>
</div>