diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/views/layout.ecr | 5 | ||||
| -rw-r--r-- | src/views/watch.ecr | 95 |
2 files changed, 55 insertions, 45 deletions
diff --git a/src/views/layout.ecr b/src/views/layout.ecr index 8a2c26b3..e951ccc4 100644 --- a/src/views/layout.ecr +++ b/src/views/layout.ecr @@ -9,6 +9,11 @@ <link rel="stylesheet" href="/css/grids-responsive-min.css"> <link rel="stylesheet" href="/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/custom.css"> + <link rel="stylesheet" href="/css/video-js.css"> + + <script src="/js/video.js"></script> + <script src="/js/videojs.hotkeys.min.js"></script> + <title><%= yield_content "header" %>Invidious</title> </head> diff --git a/src/views/watch.ecr b/src/views/watch.ecr index f3763b56..8a16dbca 100644 --- a/src/views/watch.ecr +++ b/src/views/watch.ecr @@ -2,22 +2,7 @@ <%= video.info["title"] + " - " %> <% end %> -<script> -function setRate(rate) { - var video = document.getElementById("player") - video.playbackRate = rate; -}; -function toggle() { - var video = document.getElementById("player") - if (video.paused == true) { - video.play(); - } else { - video.pause(); - }; -}; -</script> - -<video id="player" onclick="toggle()" onplay="setRate(<%= speed %>)" style="width: 100%" poster="<%= player_response["videoDetails"]["thumbnail"]["thumbnails"][-1]["url"] %>" controls> +<video id="player" class="video-js" data-setup="{}" style="width:100%" controls> <% if listen == "true" %> <% adaptive_fmts.each do |fmt| %> <% url = fmt["url"] %> @@ -31,41 +16,61 @@ function toggle() { <source src="<%= fmt["url"] %>" type="<%= fmt["type"].split(";")[0] %>"> <% end %> <% end %> - </video> +</video> + +<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 + }); +}); +</script> - <h1> - <%= video.info["title"] %> - <% if listen == "true" %> +<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 %> + <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> + <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> <%= views %></p> - <p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= likes %></p> - <p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= dislikes %></p> - <p id="Wilson">Wilson Score : <%= ci_lower_bound(likes, likes + dislikes).round(4) %></p> - <p id="Rating">Rating : <%= rating.round(4) %> / 5</p> - <p id="Engagement">Engagement : <%= engagement.round(2) %>%</p> - </div> +<div class="pure-g"> + <div class="pure-u-1 pure-u-md-1-5"> + <p><i class="fa fa-eye" aria-hidden="true"></i> <%= views %></p> + <p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= likes %></p> + <p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= dislikes %></p> + <p id="Wilson">Wilson Score : <%= ci_lower_bound(likes, likes + dislikes).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"] %>"><%= video.info["author"] %></a></p> - <p id="Description"><%= description %></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> + <%= description %> + </div> - <div class="pure-u-1 pure-u-md-1-5"> - <% rvs.each do |rv| %> + <div class="pure-u-1 pure-u-md-1-5"> + <% rvs.each do |rv| %> <% if rv.has_key?("id") %> - <p><a class="link" href="/watch?v=<%= rv["id"] %>"><%= rv["title"] %></a></p> + <p><a class="link" href="/watch?v=<%= rv["id"] %>"><%= rv["title"] %></a></p> <% end %> - <% end %> - </div> + <% end %> </div> +</div> |