invidious-experimenting/src/views/watch.ecr

122 lines
3.8 KiB
Plaintext
Raw Normal View History

2018-01-07 23:10:03 +05:30
<% content_for "header" do %>
2018-02-07 06:22:01 +05:30
<link rel="stylesheet" href="http://vjs.zencdn.net/6.6.3/video-js.css">
<script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
2018-01-28 07:40:08 +05:30
<title><%= video.title %> - Invidious</title>
2018-01-07 23:10:03 +05:30
<% end %>
2018-01-15 08:46:09 +05:30
2018-02-12 04:31:32 +05:30
<% if listen %>
2018-02-06 06:14:42 +05:30
<audio id="player" class="video-js" data-setup="{}" style="width:100%;" controls>
2018-01-17 01:32:35 +05:30
<% adaptive_fmts.each do |fmt| %>
2018-02-09 07:48:47 +05:30
<% url = fmt["url"]? %>
<% type = fmt["type"]? ? fmt["type"].to_s.split(";")[0] : "" %>
2018-01-17 01:32:35 +05:30
<% if type.starts_with?("audio") %>
2018-02-09 07:48:47 +05:30
<source src="<%= url %>" type="<%= type %>">
2018-01-04 07:36:16 +05:30
<% end %>
<% end %>
2018-01-17 01:32:35 +05:30
</audio>
<% else %>
2018-02-06 06:14:42 +05:30
<video id="player" class="video-js" data-setup="{}" style="width:100%;" controls>
2018-01-17 01:32:35 +05:30
<% fmt_stream.each do |fmt| %>
2018-02-09 07:48:47 +05:30
<source src="<%= fmt["url"]? %>" type="<%= fmt["type"]? ? fmt["type"].to_s.split(";")[0] : "" %>">
2018-01-17 01:32:35 +05:30
<% end %>
2018-01-17 01:28:08 +05:30
</video>
2018-01-17 01:32:35 +05:30
<% end %>
2018-01-17 01:28:08 +05:30
<script>
var options = {
poster: "<%= player_response["videoDetails"]["thumbnail"]["thumbnails"][-1]["url"]? %>",
2018-01-17 01:28:08 +05:30
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,
2018-02-06 06:06:16 +05:30
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);
}
}
}
2018-01-17 01:28:08 +05:30
});
});
</script>
2018-01-16 08:00:57 +05:30
2018-01-17 01:28:08 +05:30
<h1>
<%= video.info["title"] %>
2018-02-12 04:31:32 +05:30
<% if listen %>
2018-01-16 08:00:57 +05:30
<a class="link" href="/watch?<%= env.params.query %>">
2018-02-12 04:31:32 +05:30
<i class="fa fa-video" aria-hidden="true"></i>
2018-01-17 01:28:08 +05:30
</a>
<% else %>
2018-01-16 08:00:57 +05:30
<a class="link" href="/watch?<%= env.params.query %>&listen=true">
2018-01-17 01:28:08 +05:30
<i class="fa fa-volume-up" aria-hidden="true"></i>
</a>
<% end %>
</h1>
2018-01-16 08:00:57 +05:30
2018-01-17 01:28:08 +05:30
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-5">
2018-01-28 07:40:08 +05:30
<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>
2018-01-17 01:28:08 +05:30
<p id="Rating">Rating : <%= rating.round(4) %> / 5</p>
<p id="Engagement">Engagement : <%= engagement.round(2) %>%</p>
</div>
2018-01-16 08:00:57 +05:30
2018-01-17 01:28:08 +05:30
<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>
2018-02-06 06:38:20 +05:30
<div style="margin-right:1em;">
<%= description %>
</div>
2018-01-17 01:28:08 +05:30
</div>
2018-01-16 08:00:57 +05:30
2018-01-17 01:28:08 +05:30
<div class="pure-u-1 pure-u-md-1-5">
<% rvs.each do |rv| %>
2018-01-15 08:46:09 +05:30
<% if rv.has_key?("id") %>
2018-01-21 22:35:30 +05:30
<a class="link" href="/watch?v=<%= rv["id"] %>">
2018-02-06 06:14:42 +05:30
<img style="width:100%;" alt="thumbnail" src="<%= rv["iurlmq"] %>">
2018-02-06 06:41:57 +05:30
<%= rv["title"] %>
2018-01-17 01:55:59 +05:30
</a>
2018-01-15 08:46:09 +05:30
<% end %>
2018-01-17 01:28:08 +05:30
<% end %>
2018-01-07 23:20:04 +05:30
</div>
2018-01-17 01:28:08 +05:30
</div>