invidious/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="/vi/<%= video.id %>/maxres.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="@omarroth1">
<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">
<%= rendered "components/player_sources" %>
<title><%= HTML.escape(video.title) %> - Invidious</title>
<% end %>

<div class="h-box">
  <%= rendered "components/player" %>
</div>

<div class="h-box">
<h1>
    <%= HTML.escape(video.title) %> 
    <% if params[: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>
<% if !reason.empty? %>
<h3><%= reason %></h3>
<% end %>
</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: <a href="<%= video.genre_url %>"><%= video.genre %></a></p>
            <% if !video.license.empty? %>
            <p id="License">License: <%= video.license %></p>
            <% end %>
            <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 video.allowed_regions.size != REGIONS.size %>
                <p id="AllowedRegions">
                <% if video.allowed_regions.size < REGIONS.size / 2 %>
                Whitelisted regions: <%= video.allowed_regions.join(", ") %>
                <% else %>
                Blacklisted regions: <%= (REGIONS.to_a - video.allowed_regions).join(", ") %>
                <% end %>
                </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 %>&referer=<%= env.get("current_page") %>">
                    <b>Unsubscribe from <%= video.author %></b>
                </a>
            </p>
            <% else %>
            <p>
                <a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.ucid %>&referer=<%= env.get("current_page") %>">
                    <b>Subscribe to <%= video.author %></b>
                </a>
            </p>
            <% end %>
        <% else %>
            <p>
                <a href="/login?referer=<%= env.get("current_page") %>">
                    <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">
        <% if !preferences || preferences && preferences.related_videos %>
        <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="/vi/<%= rv["id"] %>/mqdefault.jpg">
                <% end %>
                <p style="width:100%"><%= rv["title"] %></p>
                <p>
                    <b style="width: 100%"><%= rv["author"] %></b>
                </p>
            </a>
            <% end %>
        <% end %>
        </div>
        <% end %>
    </div>
</div>

<script>
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 get_youtube_replies(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 = 20000;
  xhr.open("GET", url, true);
  xhr.send();

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

  xhr.ontimeout = function() {
    console.log("Pulling comments timed out.");

    body.innerHTML = fallback;
  };
}

function get_reddit_comments() {
  var url = "/api/v1/comments/<%= video.id %>?source=reddit&format=html";
  var xhr = new XMLHttpRequest();
  xhr.responseType = "json";
  xhr.timeout = 20000;
  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>{contentHtml}</div> \
            <hr>'.supplant({
          title: xhr.response.title,
          permalink: xhr.response.permalink,
          contentHtml: xhr.response.contentHtml
        });
      } else {
        <% if preferences && preferences.comments[1] == "youtube" %> 
        get_youtube_comments();
        <% else %>
        comments = document.getElementById("comments");
        comments.innerHTML = "";
        <% end %>
      }
  };

  xhr.ontimeout = function() {
    console.log("Pulling comments timed out.");

    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 = 20000;
  xhr.open("GET", url, true);
  xhr.send();

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4)
      if (xhr.status == 200) {
        comments = document.getElementById("comments");
        if (xhr.response.commentCount > 0)  {
            comments.innerHTML = ' \
                <div> \
                    <h3> \
                        <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
                        View {commentCount} comments \
                    </h3> \
                </div> \
                <div>{contentHtml}</div> \
                <hr>'.supplant({
            contentHtml: xhr.response.contentHtml,
            commentCount: commaSeparateNumber(xhr.response.commentCount)
            });
        } else {
          comments.innerHTML = "";
        }
      } else {
        <% if preferences && preferences.comments[1] == "youtube" %> 
        get_youtube_comments();
        <% else %>
        comments = document.getElementById("comments");
        comments.innerHTML = "";
        <% end %>
      }
  };

  xhr.ontimeout = function() {
    console.log("Pulling comments timed out.");

    comments = document.getElementById("comments");
    comments.innerHTML =
      '<h3><center class="loading"><i class="icon ion-ios-refresh"></i></center></h3>';
    get_youtube_comments();
  };
}

function commaSeparateNumber(val){
  while (/(\d+)(\d{3})/.test(val.toString())){
    val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
  }
  return val;
}

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 %>
    <% if preferences.comments[0] == "youtube" %>
    get_youtube_comments();
    <% elsif preferences.comments[0] == "reddit" %>
    get_reddit_comments();
    <% else %>
        <% if preferences.comments[1] == "youtube" %>
        get_youtube_comments();
        <% elsif preferences.comments[1] == "reddit" %>
        get_reddit_comments();
        <% else %>
        comments = document.getElementById("comments");
        comments.innerHTML = "";
        <% end %>
    <% end %>
<% else %>
get_youtube_comments();
<% end %>

</script>