invidious-experimenting/src/views/watch.ecr

<% content_for "header" do %>
<link rel="stylesheet" href="/css/video-js.css">
<script src="/js/video.js"></script>
<script src="/js/videojs.hotkeys.min.js"></script>
<title><%= video.title %> - Invidious</title>
<% end %>

<% if listen == "true" %>
<audio id="player" class="video-js" data-setup="{}" style="width:100%;" controls>
    <% adaptive_fmts.each do |fmt| %>
        <% url = fmt["url"] %>
        <% type = fmt["type"].to_s.split(";")[0] %>
        <% if type.starts_with?("audio") %>
    <source src="<%= url %>" type="<%= type %>">
        <% end %>
    <% end %>
</audio>
<% else %>
<video id="player" class="video-js" data-setup="{}" style="width:100%;" controls>
    <% fmt_stream.each do |fmt| %>
    <source src="<%= fmt["url"] %>" type="<%= fmt["type"].split(";")[0] %>">
    <% end %>
</video>
<% end %>

<script>
var options = {
    poster: "<%= player_response["videoDetails"]["thumbnail"]["thumbnails"][-1]["url"] %>",
    aspectRatio: "16:9",
    preload: "auto",
    playbackRates: [0.5, 1, 1.5, 2]
};
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) {
            // Example
            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);
            }
        }
    }
  });
});
</script>

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

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-5">
        <p><i class="fa fa-eye" aria-hidden="true"></i> <%= video.views %></p>
        <p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= video.likes %></p>
        <p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= 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>
    </div>

    <div class="pure-u-1 pure-u-md-3-5">
        <p>
            <a class="link" href="https://youtube.com/channel/<%= video.info["ucid"] %>">
                <h3><%= video.info["author"] %></h3>
            </a>
        </p>
        <div style="margin-right:1em;">
            <%= description %>
        </div>
    </div>

    <div class="pure-u-1 pure-u-md-1-5">
    <% rvs.each do |rv| %>
        <% if rv.has_key?("id") %>
        <a class="link" href="/watch?v=<%= rv["id"] %>">
            <img style="width:100%;" alt="thumbnail" src="<%= rv["iurlmq"] %>">
        </a>
        <p>
            <a style="display:block; width:100%; height:100%;" class="link" href="/watch?v=<%= rv["id"] %>"><%= rv["title"] %></a>
        </p>
        <% end %>
    <% end %>
    </div>
</div>