invidious-experimenting/src/views/watch.ecr

<% content_for "header" do %>
<meta name="thumbnail" content="<%= thumbnail %>">
<link rel="stylesheet" href="https://vjs.zencdn.net/6.6.3/video-js.css">
<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector/dist/css/quality-selector.css">
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
<script src="https://unpkg.com/silvermine-videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-offset/dist/videojs-offset.min.js"></script>
<title><%= video.title %> - Invidious</title>
<% end %>

<div class="h-box">
    <% if listen %>
    <%= render "src/views/player/audio.ecr" %>
    <% else %>
    <%= render "src/views/player/video.ecr" %>
    <% end %>
</div>

<script>
var options = {
    aspectRatio: "16:9",
    preload: "auto",
    playbackRates: [0.5, 1, 1.5, 2],
    fluid: true,
    controlBar: {
      children: [
         'playToggle',
         'volumePanel',
         'progressControl',
         'remainingTimeDisplay',
         'qualitySelector',
         'playbackRateMenuButton',
         'fullscreenToggle',
      ],
   },
};
var player = videojs('player', options, function() {
    this.hotkeys({
    volumeStep: 0.1,
    seekStep: 5,
    enableModifiersForNumbers: false,
    enableVolumeScroll: 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.offset({
  start: <%= video_start %>,
  end: <%= video_end %>,
  restart_beginning: true
});

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 = '';
    }
};
</script>

<div class="h-box">
<h1>
    <%= video.info["title"] %> 
    <% if listen %>
    <a href="/watch?<%= env.params.query %>">
        <i class="fa fa-video" aria-hidden="true"></i>
    </a>
    <% else %>
    <a href="/watch?<%= env.params.query %>&listen=true">
        <i class="fa fa-volume-up" aria-hidden="true"></i>
    </a>
    <% end %>
</h1>
</div>

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-5">
        <div style="overflow-wrap:break-word; word-wrap:break-word;" class="h-box">
            <p><i class="fa fa-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p>
            <p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p>
            <p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></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 style="overflow-wrap:break-word; word-wrap:break-word;" class="h-box">
            <p>
                <a href="https://youtube.com/channel/<%= video.info["ucid"] %>">
                    <h3><%= video.info["author"] %></h3>
                </a>
            </p>
        <% if authorized %>
            <% if subscriptions.includes? video.info["ucid"] %>
            <p>
                <a href="/subscription_ajax?action_remove_subscriptions=1&c=<%= video.info["ucid"] %>">
                    <b>Unsubscribe from <%= video.info["author"] %></b>
                </a>
            </p>
            <% else %>
            <p>
                <a href="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= video.info["ucid"] %>">
                    <b>Subscribe to <%= video.info["author"] %></b>
                </a>
            </p>
            <% end %>
        <% end %>
            <p>
                <b>Shared <%= video.published.to_s("%B %-d, %Y") %></b>
            </p>
            <div style="overflow-wrap:break-word; word-wrap:break-word;">
                <%= video.description %>
            </div>
            <hr style="margin-left:1em; margin-right:1em;">
        <% if reddit_thread  && !reddit_html.empty? %>
            <div id="Comments">
                <div>
                    <h3>
                        <a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> 
                        <%= reddit_thread.data.title %>
                    </h3>
                    <b>
                        <a target="_blank" href="https://reddit.com<%= reddit_thread.data.permalink %>">View more comments on Reddit</a>
                    </b>
                </div>
                <div>
                    <%= reddit_html %>
                </div>
            </div>
            <hr style="margin-left:1em; margin-right:1em;">
        <% end %>
        </div>
    </div>

    <div class="pure-u-1 pure-u-md-1-5">
        <div style="overflow-wrap:break-word; word-wrap:break-word;" class="h-box">
        <% rvs.each do |rv| %>
            <% if rv.has_key?("id") %>
            <a href="/watch?v=<%= rv["id"] %>">
                <img style="width:100%;" alt="thumbnail" src="<%= rv["iurlmq"] %>">
                <p style="width:100%"><%= rv["title"] %></p>
                <p>
                    <b style="width: 100%"><%= rv["author"] %></b>
                </p>
            </a>
            <% end %>
        <% end %>
        </div>
    </div>
</div>