Add: panel to go to last, next or random video.

api_routes.py

@@ -14,6 +14,7 @@ from user import get_authorized_user
 
 from video import VideoError
 from video import serialize_video
+from video import find_video_by_id
 from video import get_random_video
 from video import get_likes, get_tags
 
@@ -40,6 +41,23 @@ async def api_random(request):
     'video_id': video.id
   })
 
[email protected]('/api/exists')
+async def api_exists(request):
+  data = await request.post()
+  video_id = data.get('video_id')
+  
+  is_exists = True
+
+  try:
+    video = await find_video_by_id(video_id)
+  except VideoError:
+    is_exists = False
+
+  return web.json_response({
+    'video_id': video.id if is_exists else -1,
+    'is_exists': is_exists
+  }) 
+
 @routes.post('/api/login')
 async def api_login(request):
   session = await get_session(request)

static/js/login.js

@@ -1,4 +1,7 @@
 $(function () {
+  if (window.my_user_id >= 0) 
+    document.location.href = '/';
+
   $('#username_error').hide();
   $('#password_error').hide();
   $('#captcha_error').hide();

static/js/signup.js

@@ -1,4 +1,7 @@
 $(function () {
+  if (window.my_user_id >= 0) 
+    document.location.href = '/';
+
   $('#username_error').hide();
   $('#username_taken_error').hide();
   $('#password_error').hide();

static/js/video.js

@@ -68,8 +68,11 @@ function load_more() {
 $(function () {
   window.offset = 0;
   window.player = new Plyr('#player');
+  
+  var last_video_id = window.video_id - 1;
+  var next_video_id = window.video_id + 1;
 
-  if (window.is_limited) {
+  if (window.my_user_id < 0) {
     $('#comment_field').prop('disabled', true);
     $('#comment_field').attr('placeholder', 'You must log in to write comments.');
 
@@ -79,7 +82,7 @@ $(function () {
   $('#upload_date').text(moment.unix(window.video_upload_ts).calendar());
 
   $('#likes_icon').click(function () {
-    if (window.is_limited) {
+    if (window.my_user_id < 0) {
       popup('danger', 'You must be logged in to like videos.');
 
       return;
@@ -101,12 +104,32 @@ $(function () {
     $('#likes_count').text(data.likes_count);
   });
 
-  if (!window.is_limited)
+  if (window.my_user_id >= 0)
     api('liked', {video_id: window.video_id}, function (data) {
       if (data.is_liked)
         $('#likes_icon').addClass('liked');
     });
 
+  api('exists', {video_id: last_video_id}, function (data) {
+    if (data.is_exists) {
+      $('#last_button').prop('disabled', false);
+
+      $('#last_button').click(function () {
+        document.location.href = '/watch/' + String(last_video_id);
+      });
+    }
+  });
+
+  api('exists', {video_id: next_video_id}, function (data) {
+    if (data.is_exists) {
+      $('#next_button').prop('disabled', false);
+
+      $('#next_button').click(function () {
+        document.location.href = '/watch/' + String(next_video_id);
+      });
+    }
+  });
+
   $('#send_comment').click(function () {
     var text = $('#comment_field').val().trim();
 

templates/video.html

@@ -19,11 +19,11 @@
     <span id="likes_count"></span>
   </span>
 
-  <span>
+  <span class="is-inline">
     <div class="media">
       <div class="media-left">
         <figure class="image is-24x24">
-          <img id="uploader_avatar">
+          <img id="uploader_avatar" src="/static/avatars/default/default.128.png">
         </figure>
       </div>
       <div class="media-content">
@@ -31,6 +31,25 @@
       </div>
     </div>   
   </span>
+</div> 
+
+<br>
+
+<div class="buttons is-centered">
+  <button id="last_button" class="button is-small" disabled>
+    <span class="icon"><i class="fas fa-angle-left"></i></span>
+    <span>Last</span>
+  </button>
+
+  <a class="button is-small" href="/random">
+    <span class="icon"><i class="fas fa-dice"></i></span>
+    <span>Random</span>
+  </a>
+
+  <button id="next_button" class="button is-small" disabled>
+    <span class="icon"><i class="fas fa-angle-right"></i></span>
+    <span>Next</span>
+  </button>
 </div>
 
 <br>
@@ -58,7 +77,6 @@
 <div id="comments" class="columns is-desktop is-multiline"></div>
 
 <script>
-  window.is_limited = ${'false' if 'authorized' in session else 'true'};
   window.video_id = ${video.id};
   window.video_uploader_id = ${video.uploader.id};
   window.video_upload_ts = ${int(video.upload_date.timestamp())};