Initial.

.gitignore

@@ -0,0 +1,9 @@
+__pycache__
+__templates_cache__
+database
+config.yml
+static/avatars/*.png
+static/thumbs/*.png
+!static/thumbs/default.png
+static/videos/*.webm
+

api_routes.py

@@ -0,0 +1,349 @@
+from aiohttp import web
+from aiohttp_session import get_session
+
+from user import UserError
+from user import LoginError, log_in, log_out
+from user import SignupError, sign_up
+from user import find_user_by_id
+from user import get_user_videos, get_user_videos_count
+from user import is_video_liked
+from user import like_video, unlike_video
+from user import upload_avatar, upload_video
+from user import serialize_user
+from user import get_authorized_user
+
+from video import VideoError
+from video import serialize_video
+from video import get_random_video
+from video import get_likes, get_tags
+
+from comment import get_comments, get_comments_count, post_comment
+
+from common import search_videos, suggest_tag
+
+from tools import verify_captcha
+
+from config import config
+
+routes = web.RouteTableDef()
+
+def report_error(error):
+  return web.json_response({
+    'error': str(error)
+  })
+
[email protected]('/api/random')
+async def api_random(request):
+  video = await get_random_video()
+
+  return web.json_response({
+    'video_id': video.id
+  })
+
[email protected]('/api/login')
+async def api_login(request):
+  session = await get_session(request)
+
+  data = await request.post()
+  username = data.get('username')
+  password = data.get('password')
+  hcaptcha_token = data.get('h-captcha-response')
+
+  if not await verify_captcha(hcaptcha_token):
+    return report_error('captcha check failed')
+
+  try:
+    user = await log_in(session, username, password)
+  except (UserError, LoginError) as error:
+    return report_error(error)
+  
+  return web.json_response({
+    'user_id': user.id
+  })
+
[email protected]('/api/signup')
+async def api_signup(request):
+  session = await get_session(request)
+
+  data = await request.post()
+  username = data.get('username')
+  password = data.get('password')
+  hcaptcha_token = data.get('h-captcha-response')
+
+  if not await verify_captcha(hcaptcha_token):
+    return report_error('captcha check failed')
+
+  try:
+    user = await sign_up(session, username, password, ip_address=request.remote)
+  except (UserError, SignupError) as error:
+    return report_error(error)
+  
+  return web.json_response({
+    'user_id': user.id
+  })
+
[email protected]('/api/logout')
+async def api_logout(request):
+  session = await get_session(request)
+
+  try:
+    await log_out(session)
+  except UserError as error:
+    return report_error(error)
+
+  return web.json_response({
+    'status': 'success'
+  })
+
[email protected]('/api/user')
+async def api_user(request):
+  data = await request.post()
+  user_id = data.get('user_id')
+
+  try:
+    user = await find_user_by_id(user_id)
+  except UserError as error:
+    return report_error(error)
+ 
+  return web.json_response(await serialize_user(user))
+
[email protected]('/api/videos')
+async def api_videos(request):
+  data = await request.post()
+  user_id = data.get('user_id')
+  offset = data.get('offset')
+
+  try:
+    videos = await get_user_videos(user_id, offset=offset)
+    videos_count = await get_user_videos_count(user_id)
+  except (UserError, VideoError) as error:
+    return report_error(error)
+
+  return web.json_response({
+    'videos': videos,
+    'videos_count': videos_count
+  })
+
[email protected]('/api/comments')
+async def api_comments(request):
+  data = await request.post()
+  video_id = data.get('video_id')
+  offset = data.get('offset')
+
+  try:
+    comments = await get_comments(video_id, offset=offset)
+    comments_count = await get_comments_count(video_id)
+  except VideoError as error:
+    return report_error(error)
+
+  return web.json_response({
+    'comments': comments,
+    'comments_count': comments_count
+  })
+
[email protected]('/api/search')
+async def api_search(request):
+  data = await request.post()
+  tags = data.get('tags')
+  offset = data.get('offset')
+
+  try:
+    videos = await search_videos(tags, offset=offset)
+  except SyntaxError as error: # SyntaxError is thrown by parse_tags.
+    return report_error(error)
+
+  return web.json_response({
+    'videos': videos
+  })
+
[email protected]('/api/suggest')
+async def api_tags(request):
+  data = await request.post()
+  tag = data.get('tag')
+
+  try:
+    tags_list = await suggest_tag(tag)
+  except SyntaxError as error:
+    return report_error(error)
+
+  return web.json_response({
+    'tags_list': tags_list
+  })
+  
[email protected]('/api/tags')
+async def api_tags(request):
+  data = await request.post()
+  video_id = data.get('video_id')
+
+  try:
+    tags_list = await get_tags(video_id)
+  except VideoError as error:
+    return report_error(error)
+
+  return web.json_response({
+    'tags_list': tags_list
+  })
+
[email protected]('/api/liked')
+async def api_liked(request):
+  session = await get_session(request)
+
+  data = await request.post()
+  video_id = data.get('video_id')
+
+  try:
+    is_liked = await is_video_liked(session, video_id)
+  except (UserError, VideoError) as error:
+    return report_error(error)
+
+  return web.json_response({
+    'is_liked': is_liked
+  })
+
[email protected]('/api/likes')
+async def api_likes(request):
+  data = await request.post()
+  video_id = data.get('video_id')
+
+  try:
+    likes_count = await get_likes(video_id)
+  except VideoError as error:
+    return report_error(error)
+
+  return web.json_response({
+    'likes_count': likes_count
+  })
+
[email protected]('/api/like')
+async def api_like(request):
+  session = await get_session(request)
+
+  data = await request.post()
+  video_id = data.get('video_id')
+
+  try:
+    await like_video(session, video_id)
+
+    likes_count = await get_likes(video_id)
+  except (UserError, VideoError) as error:
+    return report_error(error)
+
+  return web.json_response({
+    'likes_count': likes_count
+  })
+
[email protected]('/api/unlike')
+async def api_unlike(request):
+  session = await get_session(request)
+
+  data = await request.post()
+  video_id = data.get('video_id')
+
+  try:
+    await unlike_video(session, video_id)
+    
+    likes_count = await get_likes(video_id)
+  except (UserError, VideoError) as error:
+    return report_error(error)
+
+  return web.json_response({
+    'likes_count': likes_count
+  })
+
[email protected]('/api/comment')
+async def api_comment(request):
+  session = await get_session(request)
+
+  data = await request.post()
+  video_id = data.get('video_id')
+  text = data.get('text')
+
+  try:
+    comment = await post_comment(session, video_id, text)
+  except (UserError, VideoError, ValueError) as error:
+    return report_error(error)
+
+  return web.json_response({
+    'comment_id': comment.id
+  })
+
[email protected]('/api/upload/avatar')
+async def api_upload_avatar(request):
+  session = await get_session(request)
+
+  reader = await request.multipart()
+  image = await reader.next()  
+
+  try:
+    await upload_avatar(session, image)
+  
+    user = await get_authorized_user(session)
+  except UserError as error:
+    return report_error(error)
+ 
+  return web.json_response(await serialize_user(user))
+
[email protected]('/api/upload/video')
+async def api_upload_video(request):
+  session = await get_session(request)
+
+  if 'authorized' not in session:
+    return web.json_response({
+      'error': 'not authorized.'
+    })
+
+  video = None
+  tags = None
+  hcaptcha_token = None
+
+  reader = await request.multipart()
+
+  while True:
+    part = await reader.next()
+
+    if not part:
+      break
+
+    if part.name == 'video':
+      video = bytearray()
+      size = 0
+
+      while True:
+        chunk = await part.read_chunk()
+
+        if not chunk:
+          break
+
+        size += len(chunk)
+
+        if size >= config.MAX_VIDEO_SIZE * 1024 * 1024:
+          return report_error('illegal video')
+
+        video += chunk
+    elif part.name == 'tags':
+      tags = await part.read_chunk()
+      tags = tags.decode('ASCII')
+    elif part.name == 'h-captcha-response':
+      hcaptcha_token = await part.read_chunk()
+      hcaptcha_token = hcaptcha_token.decode('ASCII')
+   
+  if not hcaptcha_token:
+    return report_error('captcha check failed')
+
+  if not await verify_captcha(hcaptcha_token):
+    return report_error('captcha check failed')
+
+  if not video:
+    return report_error('illegal video')
+
+  if not tags:
+    return report_error('illegal tags')
+
+  try:
+    video = await upload_video(session, video, tags)
+  except (UserError, VideoError, SyntaxError) as error:
+    return report_error(error)
+
+  return web.json_response({
+    'video_id': video.id
+  })

app.py

@@ -0,0 +1,20 @@
+from aiohttp import web
+from aiohttp_session import setup
+from aiohttp_session.redis_storage import RedisStorage
+from aioredis import from_url
+
+from api_routes import routes as api_routes
+from view_routes import routes as view_routes
+from config import config
+
+app = web.Application()
+redis = from_url('redis://localhost')
+setup(app, RedisStorage(redis))
+app.add_routes([
+  web.static('/static', './static')
+])
+
+app.add_routes(api_routes)
+app.add_routes(view_routes)
+
+web.run_app(app, port=config.PORT)

comment.py

@@ -0,0 +1,56 @@
+import html
+
+from db import db
+from db import Comment, User, Video
+
+from user import get_authorized_user
+from video import find_video_by_id
+
+from tools import parse_offset, validate_text
+
+async def get_comments(video_id, offset=0):
+  video = await find_video_by_id(video_id)
+
+  comments = await db.execute(Comment
+                              .select(Comment, User)
+                              .join(User)
+                              .switch(Comment)
+                              .join(Video)
+                              .where(
+                                (Video.id == video.id) &
+                                (~Comment.is_hidden)
+                              )
+                              .order_by(Comment.publish_date.desc())
+                              .offset(parse_offset(offset))
+                              .limit(5))
+
+  return [
+    {
+     'id': comment.id,
+     'author_id': comment.user.id,
+     'publish_ts': int(comment.publish_date.timestamp()),
+     'text': html.escape(comment.text)
+    } for comment in comments
+  ]
+
+async def get_comments_count(video_id):
+  video = await find_video_by_id(video_id)
+
+  return await db.count(Comment
+                        .select()
+                        .join(Video)
+                        .where(
+                          (Video.id == video.id) &
+                          (~Comment.is_hidden)
+                        ))
+
+async def post_comment(session, video_id, text):
+  user = await get_authorized_user(session)
+  video = await find_video_by_id(video_id)
+  text = validate_text(text)
+    
+  return await db.create(Comment,
+                         text=text,
+                         user=user,
+                         video=video)
+

common.py

@@ -0,0 +1,35 @@
+from peewee import fn
+
+from db import db
+from db import Video, User, Tag, VideoTag
+
+from video import serialize_video
+from tools import parse_tags, parse_tag, parse_offset
+
+async def search_videos(tags, offset=0):
+  tags = parse_tags(tags)
+  
+  videos = await db.execute(Video
+                            .select(User, Video)
+                            .join(User)
+                            .switch(Video)
+                            .join(VideoTag)
+                            .join(Tag)
+                            .where(
+                              (Tag.tag << tags) &
+                              (~Video.is_hidden)
+                            )
+                            .group_by(User, Video)
+                            .having(fn.Count(Tag.id.distinct()) == len(tags))                            
+                            .order_by(Video.upload_date.desc())                            
+                            .offset(parse_offset(offset))
+                            .limit(6))
+
+  return [await serialize_video(video) for video in videos]
+
+async def suggest_tag(tag):
+  tags = await db.execute(Tag
+                          .select()
+                          .where(Tag.tag.startswith(parse_tag(tag))))
+
+  return [tag.tag for tag in tags]

config.py

@@ -0,0 +1,14 @@
+from yaml import load
+
+try:
+  from yaml import CLoader as Loader
+except ImportError:
+  from yaml import Loader
+
+class Config:
+  def __init__(self, data):
+    self.__dict__.update(**data)
+
+with open('config.yml') as f:
+  config = load(f, Loader=Loader)
+  config = Config(config)

config.yml.sample

@@ -0,0 +1,19 @@
+PORT: 8080
+
+SALT: 'i hate cucumbers'
+
+HCAPTCHA_SITEKEY: '73636-2737-2728-3636'
+HCAPTCHA_SECRET: '0xa'
+
+MIN_CREDENTIALS_LENGTH: 5
+MAX_CREDENTIALS_LENGTH: 15
+
+DATABASE: 'wemb'
+DB_USER: 'wemb'
+DB_PASSWORD: '7071'
+
+ALLOWED_IMAGE_FORMATS:
+  - JPEG
+  - PNG
+
+MAX_VIDEO_SIZE: 64

db.py

@@ -0,0 +1,66 @@
+from datetime import datetime
+
+from peewee import Model
+from peewee import AutoField, BlobField, BooleanField, CharField, DateTimeField, TextField, IPField, ForeignKeyField        
+from peewee_async import Manager, PooledPostgresqlDatabase
+
+from config import config
+
+database = PooledPostgresqlDatabase(config.DATABASE,
+                                    user=config.DB_USER,
+                                    password=config.DB_PASSWORD,
+                                    autorollback=True)
+
+class BaseModel(Model):
+  class Meta:
+    database = database
+
+class User(BaseModel):
+  id = AutoField()
+  signup_date = DateTimeField(default=datetime.now)
+  ip_address = IPField()
+  username = CharField(unique=True)
+  password = BlobField() # Store password hash here (SCrypt).
+  is_disabled = BooleanField(default=False)
+
+class Tag(BaseModel):
+  id = AutoField()
+  tag = CharField(unique=True)
+
+class Video(BaseModel):
+  id = AutoField()
+  upload_date = DateTimeField(default=datetime.now)
+  video = CharField()
+  thumbnail = CharField()
+  uploader = ForeignKeyField(User, backref='videos')
+  is_hidden = BooleanField(default=False)
+
+class Comment(BaseModel):
+  id = AutoField()
+  publish_date = DateTimeField(default=datetime.now)
+  text = TextField()
+  user = ForeignKeyField(User, backref='comments')
+  video = ForeignKeyField(Video, backref='comments')
+  is_hidden = BooleanField(default=False)
+
+class VideoTag(BaseModel):
+  video = ForeignKeyField(Video, backref='tags')
+  tag = ForeignKeyField(Tag, backref='videos')
+
+class Like(BaseModel):
+  user = ForeignKeyField(User, backref='likes')
+  video = ForeignKeyField(Video, backref='likes')
+
+database.connect()
+database.create_tables([
+  User, 
+  Tag, 
+  Video, 
+  Comment,
+  VideoTag,
+  Like
+])
+
+db = Manager(database)
+
+database.set_allow_sync(False)

requirements.txt

@@ -0,0 +1,10 @@
+pyyaml
+aiofiles
+aiohttp
+aiohttp_session[aioredis]
+peewee
+peewee-async
+aiopg
+Mako
+ujson
+

static/css/style.css

@@ -0,0 +1,70 @@
+#main {
+  margin: 2rem 1% 5%;
+}
+
+#footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+ 
+  height: 1px; /* wtf how */
+
+  padding: 5px 5px 2rem !important;
+}
+
+#likes_icon:hover {
+  color: hsl(348, 100%, 61%) !important;
+  cursor: pointer;
+}
+
+#notifications {
+  position: fixed;
+  top: 50px;
+  right: 10px;     
+ 
+  max-width: 90%;
+  z-index: 30;
+}
+
+#video_info {
+  display: flex;
+  justify-content: space-between;
+}
+
+#delimiter {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#upload_date {
+  margin-bottom: 10px;
+}
+
+#tags {
+  padding-top: 10px;
+  margin-bottom: 0px;
+}
+
+#change_avatar_dropdown {
+  padding-top: 3px;
+}
+
+.liked {
+  color: hsl(348, 100%, 61%) !important;
+}
+
+.centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.tag:hover {
+  background-color: hsl(0, 0%, 100%) !important;
+}
+
+.wider {
+  width: 100% !important;
+}

static/js/api.js

@@ -0,0 +1,27 @@
+function api_general(method, data, callback, checked, additional_data) {
+  $.ajax({
+    type: 'POST',
+    url: '/api/' + method,
+    data: data,
+    success: function (data) {
+      if (checked && data.error !== undefined)
+        popup('danger', 'Error: ' + data.error);
+      else callback(data, additional_data);
+    },
+    processData: !(data instanceof FormData),
+    contentType: data instanceof FormData? false: 'application/x-www-form-urlencoded',
+    dataType: 'json'
+  });
+}
+
+function api(method, data, callback) {
+  var additional_data = Array.prototype.slice.call(arguments, 3);
+
+  api_general(method, data, callback, true, additional_data);
+}
+
+function api_unchecked(method, data, callback) {
+  var additional_data = Array.prototype.slice.call(arguments, 3);
+
+  api_general(method, data, callback, false, additional_data);
+}

static/js/debug.js

@@ -0,0 +1,3 @@
+window.onerror = function (error, url, line) {
+  popup('danger', String(url) + ':' + String(line) + ': ' + String(error));
+}

static/js/login.js

@@ -0,0 +1,53 @@
+$(function () {
+  $('#username_error').hide();
+  $('#password_error').hide();
+  $('#captcha_error').hide();
+
+  $('#login_button').click(function () { 
+    api_unchecked('login', {
+      username: $('#username').val(),
+      password: $('#password').val(),
+      'h-captcha-response': grecaptcha.getResponse()
+    }, function (data) {
+      if (data.error !== undefined) {
+        switch (data.error) {
+          case 'captcha check failed':
+            show_hide('#captcha_error');
+            break;
+
+          case 'illegal username':
+            show_hide('#username_error');
+            
+            delayed(function () { 
+              $('#username').toggleClass('is-danger'); 
+            });
+            break;
+
+          case 'illegal password':
+          case 'illegal credentials':
+            show_hide('#password_error');
+            
+            delayed(function () { 
+              $('#password').toggleClass('is-danger'); 
+            });
+            break;
+
+          default:
+            popup('danger', 'Error: ' + data.error);
+            break;
+        }
+
+        $('#password').val('');
+        grecaptcha.reset();
+
+        return;
+      }
+
+      popup('primary', 'Successfully logged in!');
+
+      setTimeout(function () {
+        document.location.href = '/';
+      }, 1500);
+    });
+  });
+});

static/js/navbar.js

@@ -0,0 +1,62 @@
+$(function() {
+  $('#suggestions').hide();
+
+  $('#nav-toggle').click(function() {
+    $('#nav-toggle').toggleClass('is-active');
+    $('#nav-menu').toggleClass('is-active');
+  });
+
+  $('#search_button').click(function () {
+    var query = $('#search_field').val().trim();
+
+    if (query.length == 0)
+      return;
+
+    document.location.href = '/search?q=' + query;
+  });
+  
+  $('#search_field').on('keyup', function (event) {
+    if (event.keyCode == 13) {
+       $('#search_button').click();
+
+       return;
+    }    
+
+    var query = $('#search_field').val();
+
+    query = query.trim();
+
+    if (query.length == 0) {
+      $('#suggestions').hide();
+
+      return;
+    }
+
+    suggest('#suggestions', '#suggestions_content', '#search_field', query);
+  });
+
+  if (window.my_user_id >= 0) {
+    $('#navbar_user_link').attr('href', '/user/' + String(window.my_user_id));
+
+    api('user', {user_id: window.my_user_id}, function (data) {
+      $('#navbar_avatar').attr('src', data.avatar128);
+
+      var username = data.username;
+
+      if (username.length > 10)
+        username = username.slice(0, 10) + '...';
+
+      $('#navbar_username').text(username);
+    });
+
+    $('#logout_button').click(function () {
+      api('logout', {}, function () {
+        popup('primary', 'Successfully logged out!');
+
+        setTimeout(function () {
+          document.location.href = '/';
+        }, 1500);
+      });
+    });
+  }
+});

static/js/popup.js

@@ -0,0 +1,17 @@
+function popup(kind, body) {
+  var html = '';
+
+  html += '<div id="notification_' + String(window.notification_id) + '" class="notification is-' + kind + '">';
+  html += '<button class="delete" onclick="$(\'#notification_' + String(window.notification_id) + '\').remove();"></button>';
+  html += body;
+  html += '<script>setTimeout(function() {$(\'#notification_' + String(window.notification_id) + '\').fadeOut(500);}, 2500);</script>';
+  html += '</div>';
+
+  $('#notifications').append(html);
+
+  window.notification_id++;
+}
+
+$(function() {
+  window.notification_id = 0;
+});

static/js/random.js

@@ -0,0 +1,5 @@
+$(function () {
+  api('random', {}, function (data) {
+    document.location.href = '/watch/' + String(data.video_id);
+  });
+});

static/js/search.js

@@ -0,0 +1,108 @@
+function render_results(results) {
+  if (results.length < 6)
+    $(window).unbind('scroll', load_more);
+
+  if (results.length == 0) {
+    if (window.offset == 0)
+      $('#nothing_found').show();
+
+    return;
+  }
+
+  for (var i = 0; i < results.length; i++) {
+    var result = results[i];
+    var html = '';
+    var tags = '';
+
+    for (var j = 0; j < result.tags_list.length; j++) {
+      tags += '<a class="tag is-light" href="/search?q=' + result.tags_list[j] + '">';
+      tags += result.tags_list[j];
+      tags += '</a>'
+    }
+
+    html += '<div class="column is-half">';
+    html += '<div class="card">';
+    html += '<div class="card-image">';
+    html += '<figure class="image is-16by9">';
+    html += '<a href="/watch/' + String(result.id) + '">';
+    html += '<img src="' + result.thumbnail + '">';
+    html += '</a>';
+    html += '</figure>';
+    html += '</div>';
+    html += '<div class="card-content">';
+    html += '<div class="content">';
+    html += '<div class="tags are-normal">' + tags + '</div>';
+    html += '</div>';
+    html += '<div class="media">';
+    html += '<div class="media-left">';
+    html += '<figure class="image is-48x48">';
+    html += '<a href="/user/' + result.uploader_id + '"><img id="avatar_' + String(result.id) + '" src="/static/avatars/default/default.128.png"></a>';
+    html += '</figure>';
+    html += '</div>';
+    html += '<div class="media-content">';
+    html += '<p class="title is-5"><a id="username_' + String(result.id) + '" href="/user/' + result.uploader_id + '">the void</a></p>';
+    html += '<p class="subtitle is-6"><i class="fas fa-heart"></i> ' + String(result.likes_count) + '</p>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+
+    $('#search_results').append(html);      
+
+    api('user', {user_id: result.uploader_id}, function (data, additional_data) {  
+      var video_id =  additional_data[0];
+
+      $('#avatar_' + String(video_id)).attr('src', data.avatar128);
+      $('#username_' + String(video_id)).text(data.username);
+    }, result.id);
+  }
+
+  if (results.length >= 6) {
+    window.offset += results.length;
+
+    $(window).bind('scroll', load_more);
+  }
+}
+
+function search(query) {
+  $('#search_field').val(query);
+  $('#suggestions').hide();
+  
+  $('#search_button').addClass('is-loading');
+
+  api('search', {tags: query, offset: window.offset}, function (data) {
+    render_results(data.videos);
+
+    $('#search_button').removeClass('is-loading');
+  });
+}
+
+function load_more() {
+  if (!scrolled_down(100))
+    return;
+  
+  var query = $('#search_field').val().trim();
+
+  if (query.length == 0)
+    return;
+
+  search(query);
+
+  $(window).unbind('scroll', load_more);
+}
+
+$(function() {
+  window.offset = 0; 
+  $('#nothing_found').hide();
+
+  // God Bless SO...
+  // https://stackoverflow.com/a/901144
+  var params = new Proxy(new URLSearchParams(window.location.search), {
+    get: (searchParams, prop) => searchParams.get(prop),
+  });
+  // ^ taken from SO.
+
+  if (params.q) 
+    search(params.q);
+});

static/js/signup.js

@@ -0,0 +1,61 @@
+$(function () {
+  $('#username_error').hide();
+  $('#username_taken_error').hide();
+  $('#password_error').hide();
+  $('#captcha_error').hide();
+
+  $('#signup_button').click(function () { 
+    api_unchecked('signup', {
+      username: $('#username').val(),
+      password: $('#password').val(),
+      'h-captcha-response': grecaptcha.getResponse()
+    }, function (data) {
+      if (data.error !== undefined) {
+        switch (data.error) {
+          case 'captcha check failed':
+            show_hide('#captcha_error');
+            break;
+
+          case 'illegal username':
+            show_hide('#username_error');
+            
+            delayed(function () { 
+              $('#username').toggleClass('is-danger'); 
+            });
+            break;
+
+          case 'this username is already taken':
+            show_hide('#username_taken_error');
+            
+            delayed(function () { 
+              $('#username').toggleClass('is-danger'); 
+            });
+            break;
+
+          case 'illegal password':
+            show_hide('#password_error');
+            
+            delayed(function () { 
+              $('#password').toggleClass('is-danger'); 
+            });
+            break;
+
+          default:
+            popup('danger', 'Error: ' + data.error);
+            break;
+        }
+
+        $('#password').val('');
+        grecaptcha.reset();
+
+        return;
+      }
+
+      popup('primary', 'Successfully signed up!');
+
+      setTimeout(function () {
+        document.location.href = '/login';
+      }, 1500);
+    });
+  });
+});

static/js/suggest.js

@@ -0,0 +1,64 @@
+function split_query(query) {
+  query = query.split(' ');
+  query = query.map(function (tag) { 
+    return tag.trim();
+  });
+  query = query.filter(Boolean);
+   
+  return query;
+}
+
+function complete(field, suggestions, tag) {
+  var query = $(field).val();
+
+  query = split_query(query);
+  if (query.length == 0)
+    return;
+
+  query[query.length - 1] = tag + ' ';
+
+  $(field).val(query.join(' '));
+
+  $(suggestions).hide();
+}
+
+function suggest(suggestions, suggestion_content, field, query) {
+  query = split_query(query);
+  if (query.length == 0)
+    return;
+
+  query = query[query.length - 1];
+  if (query.length < 2)
+    return;
+
+  if (query[query.length - 1] == ' ' || query[query.length - 1] == '-') {
+    $(suggestions).hide();
+
+    return;
+  }
+  
+  api_unchecked('suggest', {tag: query}, function (data) {
+    if (data.error !== undefined) {
+      popup('danger', data.error);
+
+      $(suggestions).hide();
+
+      return;
+    }
+
+    $(suggestion_content).html('');
+
+    for (var i = 0; i < data.tags_list.length; i++) {
+      var html = '';
+
+      html += '<a class="dropdown-item" onclick="complete(\'' + field + '\', \'' + suggestions + '\', \'' + data.tags_list[i] + '\');">';
+      html += data.tags_list[i];
+      html += '</a>';
+
+      $(suggestion_content).append(html);
+    }
+
+    if (data.tags_list.length)
+      $(suggestions).show();
+  });
+}

static/js/tools.js

@@ -0,0 +1,26 @@
+function toggle_password_visibility() {
+  if ($('#password').attr('type') === 'password')
+    $('#password').attr('type', 'text');
+  else 
+    $('#password').attr('type', 'password');
+}
+
+function delayed(callback) {
+  callback();
+
+  setTimeout(callback, 3000);
+}
+
+function show_hide() {
+  for (var i = 0; i < arguments.length; i++) {
+    var element = arguments[i];
+
+    delayed(function () {
+      $(element).toggle();
+    });
+  }
+}
+
+function scrolled_down(offset) {
+  return $(window).scrollTop() >= $(document).height() - $(window).height() - offset;
+}

static/js/upload.js

@@ -0,0 +1,76 @@
+$(function () {
+  if (window.my_user_id < 0) // dirty hack!
+    document.location.href = '/';
+
+  $('#file_error').hide();
+  $('#tags_error').hide();
+  $('#captcha_error').hide();
+  
+  $('#upload_suggestions').hide();
+
+  $('#tags_field').on('keyup', function (event) {
+    var tags = $('#tags_field').val();
+    if (tags[tags.length - 1] == ' ') {
+      $('#upload_suggestions').hide();
+
+      return;
+    }
+
+    tags = tags.trim();
+
+    if (tags.length == 0) {
+      $('#upload_suggestions').hide();
+
+      return;
+    }
+
+    suggest('#upload_suggestions', '#upload_suggestions_content', '#tags_field', tags);
+  });
+
+  $('#upload_button').click(function () {
+    $('#upload_button').addClass('is-loading');
+    $('#upload_button').prop('disabled', true);
+
+    var form = new FormData();    
+    form.append('video', $('#video').prop('files')[0]);
+    form.append('tags', $('#tags_field').val());
+    form.append('h-captcha-response', grecaptcha.getResponse());
+
+    api_unchecked('upload/video', form, function (data) {
+      $('#upload_button').removeClass('is-loading');
+      $('#upload_button').prop('disabled', false);
+
+      if (data.error !== undefined) {
+        switch (data.error) {
+          case 'not a valid video':
+          case 'illegal video':
+            show_hide('#file_error');
+            break;
+
+          case 'illegal tags':
+            show_hide('#tags_error');
+            break;
+
+          case 'captcha check failed':
+            show_hide('#captcha_error');
+            break;           
+
+          default:
+            popup('danger', 'Error: ' + data.error);
+            break;
+        }
+
+        grecaptcha.reset();
+
+        return;
+      }
+
+      popup('primary', 'Successfully uploaded your video!');
+
+      setTimeout(function () {
+        document.location.href = '/watch/' + String(data.video_id);
+      }, 1500);
+    });
+  });
+});
+

static/js/user.js

@@ -0,0 +1,125 @@
+function render_videos(results) {
+  if (results.length < 6)
+    $(window).unbind('scroll', load_more);
+
+  if (results.length == 0)
+    return;
+
+  $('#no_videos').hide();
+
+  for (var i = 0; i < results.length; i++) {
+    var result = results[i];
+    var html = '';
+    var tags = '';
+
+    for (var j = 0; j < result.tags_list.length; j++) {
+      tags += '<a class="tag is-light" href="/search?q=' + result.tags_list[j] + '">';
+      tags += result.tags_list[j];
+      tags += '</a>'
+    }
+
+    html += '<div class="column is-half">';
+    html += '<div class="card">';
+    html += '<div class="card-image">';
+    html += '<figure class="image is-16by9">';
+    html += '<a href="/watch/' + String(result.id) + '">';
+    html += '<img src="' + result.thumbnail + '">';
+    html += '</a>';
+    html += '</figure>';
+    html += '</div>';
+    html += '<div class="card-content">';
+    html += '<div class="content">';
+    html += '<div class="tags are-normal">' + tags + '</div>';
+    html += '</div>';
+    html += '<div class="media">';
+    html += '<div class="media-left">';
+    html += '<figure class="image is-48x48">';
+    html += '<a href="/user/' + result.uploader_id + '"><img id="avatar_' + String(result.id) + '" src="/static/avatars/default/default.128.png"></a>';
+    html += '</figure>';
+    html += '</div>';
+    html += '<div class="media-content">';
+    html += '<p class="title is-5"><a id="username_' + String(result.id) + '" href="/user/' + result.uploader_id + '">the void</a></p>';
+    html += '<p class="subtitle is-6"><i class="fas fa-heart"></i> ' + String(result.likes_count) + '</p>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+
+    $('#user_videos').append(html);      
+
+    api('user', {user_id: result.uploader_id}, function (data, additional_data) {  
+      var video_id =  additional_data[0];
+
+      $('#avatar_' + String(video_id)).attr('src', data.avatar128);
+      $('#username_' + String(video_id)).text(data.username);
+    }, result.id);
+  }
+
+  if (results.length >= 6) {
+    window.offset += results.length;
+
+    $(window).bind('scroll', load_more);
+  }
+}
+
+function get_user_videos() {
+  api('videos', {user_id: window.user_id, offset: window.offset}, function (data) {
+    $('#videos_count').text(data.videos_count);
+
+    $('#videos_count_suffix').text(data.videos_count != 1? 's': '');
+    
+    render_videos(data.videos);
+  });
+}
+
+function load_more() {
+  if (!scrolled_down(100))
+    return;
+
+  get_user_videos();
+
+  $(window).unbind('scroll', load_more);
+}
+
+$(function () {
+  window.offset = 0;
+  $('#change_avatar').hide();
+
+  api_unchecked('user', {user_id: window.user_id}, function (data) {
+    if (data.error !== undefined) {
+      document.location.href = '/404';
+      
+      return; 
+    }
+
+    $('#avatar').attr('src', data.avatar128);
+    $('#username').text(data.username);
+    $('#signup_date').text(moment.unix(data.signup_ts).format('L'));
+    
+    get_user_videos();
+  });
+  
+  if (window.user_id == window.my_user_id) {
+    $('#change_avatar').show();
+    
+    $('#upload_avatar_button').click(function () {
+      $('#upload_avatar_button').addClass('is-loading');
+      $('#upload_avatar_button').prop('disabled', true);
+
+      var form = new FormData();
+      form.append('avatar', $('#avatar_input').prop('files')[0]);
+
+      api('upload/avatar', form, function (data) {
+        $('#upload_avatar_button').removeClass('is-loading');
+        $('#upload_avatar_button').prop('disabled', false);
+
+        popup('primary', 'Successfully updated your avatar!');
+
+        setTimeout(function () {
+          window.location.reload();
+        }, 1500);
+      });
+    });
+  } 
+});

static/js/video.js

@@ -0,0 +1,164 @@
+function render_comments(comments) {
+  for (var i = 0; i < comments.length; i++) {
+    var comment = comments[i];
+    var html = '';
+
+    var ago = moment.unix(comment.publish_ts).calendar();
+
+    html += '<div class="column is-full">';
+    html += '<div class="card">';
+    html += '<div class="card-content">';
+    html += '<div class="media">';
+    html += '<div class="media-left">';
+    html += '<figure class="image is-64x64">';
+    html += '<a href="/user/' + String(comment.author_id) + '"><img id="avatar_' + String(comment.id) + '" src="/static/avatars/default/default.128.png"></a>';
+    html += '</figure>';
+    html += '</div>';
+    html += '<div class="media-content" style="overflow-x: hidden;">';
+    html += '<div class="content">';
+    html += '<p>';
+    html += '<strong ><a id="username_' + String(comment.id) + '" href="/user/' + String(comment.author_id) + '">the void</a></strong> <small>' + ago + '</small>';
+    html += '<br>';
+    html += '<div class="content" style="word-break: break-all;">';
+    html += comment.text;
+    html += '</div>';
+    html += '</p>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+
+    $('#comments').append(html);
+
+    api('user', {user_id: comment.author_id}, function (data, additional_data) {  
+      var comment_id = additional_data[0];
+
+      $('#avatar_' + String(comment_id)).attr('src', data.avatar128);
+      $('#username_' + String(comment_id)).text(data.username);
+    }, comment.id);
+  }
+
+  if (comments.length >= 5) {
+    window.offset += comments.length;
+
+    $(window).bind('scroll', load_more);
+  }
+}
+
+function update_comments() {
+  api('comments', {video_id: window.video_id, offset: window.offset}, function (data) {
+    $('#comments_count').text(data.comments_count);
+    $('#comments_count_suffix').text(data.comments_count != 1? 's': '');
+
+    render_comments(data.comments);
+  });
+}
+
+function load_more() {
+  if (!scrolled_down(100))
+    return;
+  
+  update_comments() 
+
+  $(window).unbind('scroll', load_more);
+}
+
+$(function () {
+  window.offset = 0;
+  window.player = new Plyr('#player');
+
+  if (window.is_limited) {
+    $('#comment_field').prop('disabled', true);
+    $('#comment_field').attr('placeholder', 'You must log in to write comments.');
+
+    $('#send_comment_field').hide();
+  }
+
+  $('#upload_date').text(moment.unix(window.video_upload_ts).calendar());
+
+  $('#likes_icon').click(function () {
+    if (window.is_limited) {
+      popup('danger', 'You must be logged in to like videos.');
+
+      return;
+    }
+    
+    api('liked', {video_id: window.video_id}, function (data) {
+      api(data.is_liked? 'unlike': 'like', {video_id: window.video_id}, function (data) {
+        $('#likes_count').text(data.likes_count);
+      });
+
+      if (data.is_liked)
+        $('#likes_icon').removeClass('liked');
+      else
+        $('#likes_icon').addClass('liked');
+    });
+  });
+
+  api('likes', {video_id: window.video_id}, function (data) {
+    $('#likes_count').text(data.likes_count);
+  });
+
+  if (!window.is_limited)
+    api('liked', {video_id: window.video_id}, function (data) {
+      if (data.is_liked)
+        $('#likes_icon').addClass('liked');
+    });
+
+  $('#send_comment').click(function () {
+    var text = $('#comment_field').val().trim();
+
+    if (text.length < 2)
+      return;
+
+    $('#comment_field').val('');
+    $('#send_comment').addClass('is-loading');
+
+    api('comment', {video_id: window.video_id, text: text}, function () {
+      $('#comments').html('');
+      $('#characters_left').text('256');
+
+      window.offset = 0;
+
+      update_comments();
+
+      $('#send_comment').removeClass('is-loading');
+    });
+  });
+
+  api('user', {user_id: window.video_uploader_id}, function (data) {
+    $('#uploader_avatar').attr('src', data.avatar128);
+    $('#uploader_username').text(data.username);
+    $('#uploader_username').attr('href', '/user/' + String(window.video_uploader_id));
+  });
+
+  api('tags', {video_id: window.video_id}, function (data) {
+    for (var i = 0; i < data.tags_list.length; i++) {
+      var html = '';
+
+      html += '<a class="tag is-light" href="/search?q=' + data.tags_list[i] + '">';
+      html += data.tags_list[i];
+      html += '</a>'
+
+      $('#tags').append(html);
+    }
+  });
+
+  update_comments();
+
+  $('textarea').each(function () {
+    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;resize:none;');
+  }).on('input', function () {
+    this.style.height = 'auto';
+    this.style.height = (this.scrollHeight) + 'px';
+  });
+
+  $('#comment_field').keyup(function () {
+    if ($('#comment_field').val().length > 256) 
+      $('#comment_field').val($('#comment_field').val().slice(0, 256));
+
+    $('#characters_left').text(256 - $('#comment_field').val().length);
+  });
+});

templates.py

@@ -0,0 +1,20 @@
+from aiohttp import web
+from mako.lookup import TemplateLookup
+from mako.template import Template
+from mako.exceptions import TopLevelLookupException
+
+templates = TemplateLookup(directories=['./templates'], module_directory='./__templates_cache__')
+
+def render_template(name, status=200, **data):
+  try:
+    text = templates.get_template(f'{name}.html').render_unicode(**data)
+  except TopLevelLookupException:
+    text = '404: template not found.'
+    status = 404
+
+  response = web.Response(text=text,
+                          status=status,
+                          charset = 'utf-8',
+                          content_type = 'text/html')
+
+  return response

templates/footer.inc.html

@@ -0,0 +1,13 @@
+    </section>
+
+    <div id="notifications"></div>
+
+    <footer id="footer" class="footer">
+      <div class="content has-text-centered">
+        <p>
+          <strong>openwemb</strong> • made with ❤️ by <a href="https://txlyre.website" target="_blank">@txlyre</a>
+        </p>
+      </div>
+    </footer>
+  </body>
+</html>

templates/header.inc.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name='viewport' content='width=device-width,initial-scale=1'/>
+    <meta content='true' name='HandheldFriendly'/>
+    <meta content='width' name='MobileOptimized'/>
+    <meta content='yes' name='apple-mobile-web-app-capable'/>
+    <title>openwemb</title>
+
+    <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" integrity="sha512-IgmDkwzs96t4SrChW29No3NXBIBv8baW490zk5aXvhCD8vuZM3yUSkbyTBcXohkySecyzIrUwiF/qV0cuPcL3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.12/plyr.min.css" integrity="sha512-cDe2OuLwzNwBFIlDDHUbnu6XoAUmOIGY2fctiLCxgNPw4OdkWfPcbO+rJmJ4Ck71ZxVo0gB30hzKUqfQG0mvNg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="/static/js/popup.js"></script>
+    <script src="/static/js/debug.js"></script>
+    <script src="/static/js/tools.js"></script>
+    <script src="/static/js/api.js"></script>
+    <script src="/static/js/suggest.js"></script>
+    <script src="/static/js/navbar.js"></script>
+    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.12/plyr.min.js" integrity="sha512-KD7SjO7VUcKW975+6TGB/h/E//W8Pei+W9806myhzEwekQ9W82Ne5jUMa2JMVn+pqSICZDVnvckAhTUwfON+pA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script>
+      window.my_user_id = ${session.get('authorized', -1)};
+    </script>
+  </head>
+  <body>
+    <nav id="navbar" class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation">
+      <div class="navbar-brand">
+        <a class="navbar-item" href="/">
+          <h1 class="title">openwemb</h1>
+        </a>
+
+        <a role="button" id="nav-toggle" class="navbar-burger nav-toggle" aria-label="menu" aria-expanded="false" data-target="nav-menu">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+
+      <div id="nav-menu" class="navbar-menu">
+        <div class="navbar-start wider">
+          <div class="navbar-item wider">
+            <div class="dropdown wider">
+              <div class="dropdown-trigger wider">
+                <div class="field has-addons wider" style="padding-right: 1rem;">
+                  <div class="control wider">
+                    <input id="search_field" class="input" type="text" placeholder="Ex: cucumber nsfw">
+                  </div>
+                  <div class="control">
+                    <a id="search_button" class="button is-info"><i class="fas fa-search"></i></a>
+                  </div>
+                </div>
+              </div>
+              <div id="suggestions" class="dropdown-menu" role="menu">
+                <div id="suggestions_content" class="dropdown-content"></div>
+              </div>
+            </div>
+          </div>      
+        </div>
+
+        <div class="navbar-end">          
+% if 'authorized' not in session:
+          <div class="navbar-item">
+            <div class="buttons">
+              <a class="button is-primary" href="/signup">
+                <strong>Sign up</strong>
+              </a>
+              <a class="button is-light" href="/login">
+                Log in
+              </a>
+            </div>
+          </div>
+% else:         
+          <div class="navbar-item">
+            <div class="buttons">
+              <a id="navbar_user_link" class="button is-light"><strong id="navbar_username">the void</strong></a>
+   
+              <button id="logout_button" class="button is-danger is-small">Log out</button>
+
+              <a class="button is-success is-small" href="/upload" alt="Upload a video"><i class="fa-solid fa-upload"></i></a>
+            </div>
+          </div>
+% endif
+        </div>
+      </div>
+    </nav>
+
+    <section class="section" id="main">

templates/login.html

@@ -0,0 +1,55 @@
+<%include file="header.inc.html"/>
+
+<div class="box centered">
+  <h1 class="title">Log in</h1>
+  <hr>
+
+  <div class="field">
+    <label class="label">Username</label>
+    <div class="control has-icons-left">
+      <input id="username" class="input" type="text" placeholder="e.g. cirno9">
+      <span class="icon is-small is-left">
+        <i class="fa-solid fa-user"></i>
+      </span>
+    </div>
+
+    <p id="username_error" class="help is-danger">This username is not valid.</p>   
+  </div>
+
+  <div class="field">
+    <label class="label">Password</label>
+    <div class="control has-icons-left">
+      <input id="password" class="input" type="password" placeholder="********">
+      <span class="icon is-small is-left">
+        <i class="fas fa-lock"></i>
+      </span>
+    </div>   
+
+    <p id="password_error" class="help is-danger">This password is not valid.</p>   
+
+    <div class="control">
+      <label class="checkbox">
+        <input id="show_password" type="checkbox" onclick="toggle_password_visibility();">
+        Show password.
+      </label>
+    </div>
+  </div>
+
+  <div class="field">
+    <div class="control">
+      <div id="h-captcha" class="h-captcha" data-sitekey="${hcaptcha_sitekey}"></div>
+    </div>
+
+    <p id="captcha_error" class="help is-danger">Please, confirm the captcha.</p>
+  </div>
+
+  <div class="field">
+    <div class="control">
+      <button id="login_button" class="button is-primary">Log in</button>
+    </div>
+  </div>
+</form>
+
+<script src="/static/js/login.js"></script>
+
+<%include file="footer.inc.html"/>

templates/not_found.html

@@ -0,0 +1,6 @@
+<%include file="header.inc.html"/>
+
+<h1 class="title">Not found</h1>
+<h6 class="subtitle">Requested profile/video is not available or doesn't exist.</h6>
+
+<%include file="footer.inc.html"/>

templates/random.html

@@ -0,0 +1,7 @@
+<%include file="header.inc.html"/>
+
+<h1 class="subtitle centered">Just a moment...</h1>
+
+<script src="/static/js/random.js"></script>
+
+<%include file="footer.inc.html"/>

templates/search.html

@@ -0,0 +1,11 @@
+<%include file="header.inc.html"/>
+
+<p id="nothing_found" class="content is-size-5 has-text-weight-bold has-text-centered">
+  Nothing found...
+</p>
+
+<div id="search_results" class="columns is-multiline is-desktop"></div>
+
+<script src="/static/js/search.js"></script>
+
+<%include file="footer.inc.html"/>

templates/signup.html

@@ -0,0 +1,56 @@
+<%include file="header.inc.html"/>
+
+<div class="box centered">
+  <h1 class="title">Sign up</h1>
+  <hr>
+
+  <div class="field">
+    <label class="label">Username</label>
+    <div class="control has-icons-left">
+      <input id="username" class="input" type="text" placeholder="e.g. cirno9">
+      <span class="icon is-small is-left">
+        <i class="fa-solid fa-user"></i>
+      </span>
+    </div>
+
+    <p id="username_error" class="help is-danger">This username is not valid.</p>   
+    <p id="username_taken_error" class="help is-danger">This username is already taken.</p>   
+  </div>
+
+  <div class="field">
+    <label class="label">Password</label>
+    <div class="control has-icons-left">
+      <input id="password" class="input" type="password" placeholder="********">
+      <span class="icon is-small is-left">
+        <i class="fas fa-lock"></i>
+      </span>
+    </div>   
+
+    <p id="password_error" class="help is-danger">This password is not valid.</p>   
+
+    <div class="control">
+      <label class="checkbox">
+        <input id="show_password" type="checkbox" onclick="toggle_password_visibility();">
+        Show password.
+      </label>
+    </div>
+  </div>
+
+  <div class="field">
+    <div class="control">
+      <div id="h-captcha" class="h-captcha" data-sitekey="${hcaptcha_sitekey}"></div>
+    </div>
+
+    <p id="captcha_error" class="help is-danger">Please, confirm the captcha.</p>
+  </div>
+
+  <div class="field">
+    <div class="control">
+      <button id="signup_button" class="button is-primary">Sign up</button>
+    </div>
+  </div>
+</form>
+
+<script src="/static/js/signup.js"></script>
+
+<%include file="footer.inc.html"/>

templates/upload.html

@@ -0,0 +1,49 @@
+<%include file="header.inc.html"/>
+
+<div class="box centered">
+  <h1 class="title">Upload a video</h1>
+  <hr>
+
+  <div class="field">
+    <label class="label">Video</label>
+    <div class="control">
+      <input type="file" id="video" />
+    </div>
+
+    <p class="help">WebM; resolution upto <b>2048x2048</b>; max. duration is <b>15</b> minutes.</p>
+    <p id="file_error" class="help is-danger">This video is not valid.</p>
+  </div>
+
+  <div class="dropdown is-active wider">
+    <div class="dropdown-trigger wider">
+      <div class="control wider">
+        <div class="field wider">
+          <label class="label">Tags</label>
+          <input id="tags_field" class="input" type="text" />
+        </div>
+        <p id="tags_error" class="help is-danger">Please, enter valid tags.</p>
+      </div>
+    </div>
+    <div id="upload_suggestions" class="dropdown-menu" role="menu">
+      <div id="upload_suggestions_content" class="dropdown-content"></div>
+    </div>
+  </div>
+
+  <div class="field">
+    <div class="control">
+      <div id="h-captcha" class="h-captcha" data-sitekey="${hcaptcha_sitekey}"></div>
+    </div>
+
+    <p id="captcha_error" class="help is-danger">Please, confirm the captcha.</p>
+  </div>
+
+  <div class="field">
+    <div class="control">
+      <button id="upload_button" class="button is-primary">Upload</button>
+    </div>
+  </div>
+</form>
+
+<script src="/static/js/upload.js"></script>
+
+<%include file="footer.inc.html"/>

templates/user.html

@@ -0,0 +1,52 @@
+<%include file="header.inc.html"/>
+
+<div class="media">
+  <div class="media-left">
+    <figure class="image is-128x128">
+      <img id="avatar" src="/static/avatars/default/default.128.png">
+    </figure>
+    <div id="change_avatar">
+      <div id="change_avatar_dropdown" class="dropdown">
+        <div class="dropdown-trigger">
+          <button id="change_avatar_button" class="button is-small is-light is-success" style="width: 128px !important;" onclick="$('#change_avatar_dropdown').toggleClass('is-active');">
+            Change avatar
+          </button>
+        </div>
+        <div class="dropdown-menu" id="dropdown-menu" role="menu">
+          <div class="dropdown-content" style="padding: 5px;">
+            <div class="field">
+              <div class="control">
+                <input type="file" id="avatar_input" />
+              </div>
+            </div>
+
+            <div class="field has-text-right">
+              <div class="control">
+                <button id="upload_avatar_button" class="button is-primary is-small">Upload</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="media-content">
+    <p id="username" class="title is-4"></p>
+    <p class="subtitle is-6">registered at <time id="signup_date" class="has-text-weight-bold"></time> • uploaded <span id="videos_count" class="has-text-weight-bold"></span> video<span id="videos_count_suffix"></span>.</p>
+  </div>
+</div>
+
+<hr>
+
+<p id="no_videos" class="content is-size-5 has-text-weight-bold has-text-centered">
+  No videos.
+</p>
+
+<div id="user_videos" class="columns is-multiline is-desktop"></div>
+
+<script>
+  window.user_id = ${user_id};
+</script>
+<script src="/static/js/user.js"></script>
+
+<%include file="footer.inc.html"/>

templates/video.html

@@ -0,0 +1,68 @@
+<%include file="header.inc.html"/>
+
+<video id="player" playsinline controls data-poster="${video.thumbnail}">
+  <source src="${video.video}" type="video/webm" />
+</video>
+
+<div id="tags" class="tags are-normal"></div>
+
+<hr id="delimiter">
+
+<time id="upload_date" class="is-size-7 is-family-secondary"></time>
+
+<div id="video_info">
+  <span class="icon-text">
+    <span class="icon">
+      <i id="likes_icon" class="fas fa-heart"></i>
+    </span>
+
+    <span id="likes_count"></span>
+  </span>
+
+  <span>
+    <div class="media">
+      <div class="media-left">
+        <figure class="image is-24x24">
+          <img id="uploader_avatar">
+        </figure>
+      </div>
+      <div class="media-content">
+        <a id="uploader_username"></a>
+      </div>
+    </div>   
+  </span>
+</div>
+
+<br>
+ 
+<div class="box">
+  <div class="field"> 
+    <label class="label"><b id="comments_count"></b> comment<span id="comments_count_suffix"></span>.</label>   
+
+    <div class="control is-expanded">
+      <textarea id="comment_field" class="textarea" rows="1"></textarea> 
+    </div>
+
+    <p id="characters_left" class="help">256</p>  
+  </div>
+
+  <div id="send_comment_field" class="field has-text-right">
+    <div class="control">
+      <a id="send_comment" class="button is-primary">Send</a>
+    </div>
+  </div>
+</div>
+
+<hr>
+
+<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())};
+</script>
+<script src="/static/js/video.js"></script>
+
+<%include file="footer.inc.html"/>

tools.py

@@ -0,0 +1,213 @@
+import re
+import asyncio
+import os.path
+from hashlib import sha1, scrypt
+
+import ujson
+import aiofiles
+from aiofiles.os import path
+from aiofiles.tempfile import TemporaryDirectory
+from aiohttp import ClientSession
+
+from config import config
+
+TAG_REGEX = re.compile(r'^[0-9a-z]+(-[0-9a-z]+)*$')
+USERNAME_REGEX = re.compile(r'^[0-9a-zA-Z_\-]+$')
+PASSWORD_REGEX = re.compile(r'^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{2,}$')
+SALT = config.SALT.encode('ASCII')
+
+async def save_content(content, category, filename=None, override=False):
+  if not filename:
+    filename = sha1(content).hexdigest()
+
+  format = 'webm' if category == 'videos' else 'png'
+  filename = f'{filename}.{format}'  
+  web_path = f'/static/{category}/{filename}' 
+ 
+  file_path = os.path.join('static', category)
+  file_path = os.path.join(file_path, filename)
+  file_path = os.path.join('.', file_path)  
+
+  if not override and await path.isfile(file_path):
+    return web_path
+
+  async with aiofiles.open(file_path, 'wb') as f:
+    if type(content) is not bytes:
+      await content.seek(0)
+
+      while True:
+        chunk = await content.read(8192)
+        if not chunk:
+          break
+
+        await f.write(chunk)
+    else:
+      await f.write(content)
+
+  return web_path
+
+async def probe_video(path):
+  proc = await asyncio.create_subprocess_shell(
+    f'ffprobe -v quiet -print_format json -show_format -show_streams -select_streams v {path}',
+    stderr=asyncio.subprocess.PIPE,
+    stdout=asyncio.subprocess.PIPE
+  )
+
+  stdout, _ = await proc.communicate()
+
+  if proc.returncode != 0:
+    return None
+
+  data = ujson.loads(stdout)
+  
+  if 'format' not in data:
+    return None
+
+  if 'streams' not in data:
+    return None
+
+  if len(data['streams']) < 1:
+    return None
+
+  return data
+
+async def probe_image(path):
+  proc = await asyncio.create_subprocess_shell(
+    f'magick identify {path}',
+    stderr=asyncio.subprocess.PIPE,
+    stdout=asyncio.subprocess.PIPE
+  )
+
+  stdout, _ = await proc.communicate()
+
+  if proc.returncode != 0:
+    return None
+
+  return stdout.decode('ASCII').split(' ')
+  
+async def create_preview(path):
+  async with TemporaryDirectory() as output_directory:
+    output_path = os.path.join(output_directory, 'thumbnail.png')
+
+    proc = await asyncio.create_subprocess_shell(
+      f'ffmpeg -ss 00:00:01.00 -i {path} -vf \'scale=320:320:force_original_aspect_ratio=decrease\' -vframes 1 {output_path}',
+      stderr=asyncio.subprocess.PIPE,
+      stdout=asyncio.subprocess.PIPE
+    )
+
+    await proc.communicate()
+    
+    if proc.returncode != 0:
+      return '/static/thumbs/default.png'
+   
+    async with aiofiles.open(output_path, 'rb') as f:
+      return await save_content(await f.read(), 'thumbs')
+    
+async def create_thumbnail(path, filename, dimension=128):
+  async with TemporaryDirectory() as output_directory:
+    output_path = os.path.join(output_directory, 'thumbnail.png')
+
+    proc = await asyncio.create_subprocess_shell(
+      f'convert {path} -thumbnail \'{dimension}x{dimension}>\' {output_path}',
+      stderr=asyncio.subprocess.PIPE,
+      stdout=asyncio.subprocess.PIPE
+    )
+
+    await proc.communicate()
+
+    if proc.returncode == 0:   
+      async with aiofiles.open(output_path, 'rb') as f:
+        return await save_content(await f.read(), 'avatars', filename=f'{filename}.{dimension}', override=True)   
+
+    return f'/static/avatars/default/default.{dimension}.png'
+
+async def verify_captcha(hcaptcha_token):
+  async with ClientSession() as session:
+    async with session.post('https://hcaptcha.com/siteverify',
+                            data={
+                              'response': hcaptcha_token,
+                              'secret': config.HCAPTCHA_SECRET
+                            }) as resp:
+      resp = await resp.json()
+
+      return resp['success']
+
+def parse_tag(tag):
+  if len(tag) < 2:
+    raise SyntaxError('one of the tags is too short (min. length is 2 characters).')
+
+  if len(tag) > 15:
+    raise SyntaxError('one of the tags is too long (max. length is 15 characters).')
+
+  if not TAG_REGEX.match(tag):
+    raise SyntaxError('tags can only contain digits, lowercase letters and \'-\'; tags can\'t start or end with \'-\'.')
+
+  return tag
+
+def parse_tags(tags):
+  tags = re.sub(r'\s\s+', ' ', tags)
+  tags = filter(lambda tag: len(tag.strip()) > 0, tags.split(' '))
+  tags = map(lambda tag: tag.lower(), tags)
+  tags = list(tags)
+
+  if len(tags) < 1:
+    raise SyntaxError('video should have at least 1 tag.')
+
+  if len(tags) > 10:
+    raise SyntaxError('video shouldn\'t have more than 10 tags.')
+
+  for tag in tags:
+    parse_tag(tag)
+
+  tags = list(set(tags)) # Remove duplicates.
+
+  return tags
+
+def validate_text(text):
+  text = text.strip()
+  
+  if len(text) > 256:
+    raise ValueError('comment is too long (max. length is 256 characters)')
+
+  if len(text) < 2:
+    raise ValueError('comment is too short (min. length is 2 characters)')
+
+  return text
+
+def is_valid_username(username):
+  if not username:
+    return False
+
+  if len(username) > config.MAX_CREDENTIALS_LENGTH or len(username) < config.MIN_CREDENTIALS_LENGTH:
+    return False
+
+  if not USERNAME_REGEX.match(username):
+    return False
+
+  return True
+
+def is_valid_password(password):
+  if not password:
+    return False
+
+  if len(password) > config.MAX_CREDENTIALS_LENGTH or len(password) < config.MIN_CREDENTIALS_LENGTH:
+    return False
+
+  if not PASSWORD_REGEX.match(password):
+    return False
+
+  return True
+
+def hash_password(password):
+  password = password.encode('ASCII')
+
+  return scrypt(password, salt=SALT, n=2, r=8, p=1)
+
+def parse_offset(offset):
+  try:
+    offset = int(offset)
+    offset = abs(offset)
+  except ValueError:
+    offset = 0
+
+  return offset

user.py

@@ -0,0 +1,275 @@
+import os.path
+from hashlib import sha1
+
+from peewee import IntegrityError
+from aiofiles.os import path
+from aiofiles.tempfile import NamedTemporaryFile
+
+from db import db
+from db import User, Video, Like, Tag, VideoTag
+
+from tools import is_valid_username, is_valid_password
+from tools import hash_password
+from tools import probe_image, create_thumbnail 
+from tools import probe_video, create_preview
+from tools import parse_tags
+from tools import save_content
+
+from video import VideoError
+from video import serialize_video, find_video_by_id
+
+from config import config
+
+class LoginError(Exception): pass
+class SignupError(Exception): pass
+class UserError(Exception): pass
+
+async def find_user(username):
+  try:
+    return await db.get(User
+                        .select()
+                        .where(User.username == username))
+  except User.DoesNotExist:
+    raise UserError('account is disabled or doesn\'t exist')
+
+async def find_user_by_id(user_id):
+  try:
+    user_id = int(user_id)
+    user_id = abs(user_id)
+  except ValueError:
+    raise UserError('illegal user_id')
+
+  try:
+    return await db.get(User
+                        .select()
+                        .where(User.id == user_id))
+  except User.DoesNotExist:
+    raise UserError('account is disabled or doesn\'t exist')
+
+async def create_user(username, password, ip_address='127.0.0.1'):
+  try:
+    return await db.create(User,
+                           ip_address=ip_address,
+                           username=username,
+                           password=hash_password(password))
+  except IntegrityError:
+    raise UserError('this username is already taken')
+
+async def get_authorized_user(session):
+  if 'authorized' not in session:
+    raise UserError('not authorized')
+
+  return await find_user_by_id(session['authorized'])
+
+async def log_in(session, username, password):
+  if 'authorized' in session:
+    raise LoginError('already logged in')
+
+  if not is_valid_username(username):
+    raise LoginError('illegal username')
+
+  if not is_valid_password(password):
+    raise LoginError('illegal password')
+
+  user = await find_user(username)
+
+  hash = hash_password(password)
+  if bytes(user.password) != hash:
+    raise LoginError('illegal credentials')
+   
+  session['authorized'] = user.id
+
+  return user
+
+async def sign_up(session, username, password, ip_address='127.0.0.1'):
+  if 'authorized' in session:
+    raise SignupError('already logged in')
+
+  if not is_valid_username(username):
+    raise SignupError('illegal username')
+
+  if not is_valid_password(password):
+    raise SignupError('illegal password')
+
+  return await create_user(username, password, ip_address) 
+
+async def log_out(session):
+  if 'authorized' not in session:
+    raise UserError('not authorized')
+
+  del session['authorized']
+
+async def is_video_liked(session, video_id):
+  user = await get_authorized_user(session)
+  video = await find_video_by_id(video_id)
+
+  try:
+    await db.get(user
+                 .likes
+                 .select()
+                 .join(Video)
+                 .where(Video.id == video.id))
+  except Like.DoesNotExist:
+    return False
+
+  return True
+
+async def like_video(session, video_id):
+  user = await get_authorized_user(session)
+  video = await find_video_by_id(video_id)
+
+  try:
+    await db.get(user
+                 .likes
+                 .select()
+                 .join(Video)
+                 .where(Video.id == video.id))
+  except Like.DoesNotExist:
+    await db.create(Like,
+                    video=video,
+                    user=user)
+
+    return
+
+  raise UserError('this video is already liked')
+
+async def unlike_video(session, video_id):
+  user = await get_authorized_user(session)
+  video = await find_video_by_id(video_id)
+
+  try:
+    await db.delete(
+      await db.get(user
+                   .likes
+                   .select()
+                   .join(Video)
+                   .where(Video.id == video.id))
+    )
+  except Like.DoesNotExist:
+    raise UserError('this video is not liked yet')
+
+async def upload_avatar(session, image):
+  user = await get_authorized_user(session)
+
+  if not image:
+    raise UserError('not a valid image')
+
+  async with NamedTemporaryFile('wb') as f:
+    while True:
+      chunk = await image.read_chunk()
+      if not chunk:
+        break
+           
+      await f.write(chunk)
+
+    image_info = await probe_image(f.name)
+    
+    if not image_info:
+      raise UserError('not a valid image')
+
+    if image_info[1] not in config.ALLOWED_IMAGE_FORMATS:
+      raise UserError('this image format is not allowed')
+
+    width, height = map(int, image_info[2].split('x'))
+    
+    if width > 2048 or height > 2048:
+      raise UserError('image size shouldn\'t exceed 2048 pixels for each dimension')
+
+    await create_thumbnail(f.name, user.id, dimension=128)
+    await create_thumbnail(f.name, user.id, dimension=64)
+
+async def upload_video(session, video, tags):
+  user = await get_authorized_user(session)
+  tags = parse_tags(tags)
+  
+  async with NamedTemporaryFile('w+b') as f:
+    hash = sha1(video).hexdigest()
+
+    await f.write(video)
+
+    video_info = await probe_video(f.name)
+
+    if not video_info:
+      raise VideoError('not a valid video')
+
+    format = video_info['format']
+    format_name = format['format_name'].split(',')
+
+    if 'webm' not in format_name:
+      raise VideoError('not a WebM video')
+
+    if float(format['duration']) > 15 * 60:
+      raise VideoError('video duration shouldn\'t exceed 15 minutes')
+
+    video_stream = video_info['streams'][0]
+    
+    if video_stream['width'] > 2048 or video_stream['height'] > 2048:
+      raise VideoError('video\'s resolution shouldn\'t exceed 2048px for each dimension')
+
+    web_path = await save_content(f, 'videos', filename=hash)
+    
+    path = os.path.join('static', 'videos')
+    path = os.path.join(path, f'{hash}.webm')
+    path = os.path.join('.', path)
+
+    thumbnail = await create_preview(path)
+      
+  video = await db.create(Video, 
+                          video=web_path,
+                          thumbnail=thumbnail,
+                          uploader=user)
+
+  for tag in tags:
+    tag = await db.get_or_create(Tag, tag=tag)
+
+    await db.create(VideoTag,
+                    video=video,
+                    tag=tag[0])   
+    
+  return video
+
+async def get_user_videos(user_id, offset=0):
+  user = await find_user_by_id(user_id)
+
+  videos = await db.execute(Video
+                            .select(Video, User)
+                            .join(User)
+                            .switch(Video)
+                            .where(
+                              (Video.uploader.id == user.id) &
+                              (~Video.is_hidden)
+                            )
+                            .order_by(Video.upload_date.desc())
+                            .offset(offset)
+                            .limit(6))
+
+  return [await serialize_video(video) for video in videos]
+
+async def get_user_videos_count(user_id):
+  user = await find_user_by_id(user_id)
+
+  return await db.count(Video
+                        .select(Video, User)
+                        .join(User)
+                        .switch(Video)
+                        .where(Video.uploader.id == user.id))
+
+async def get_avatar(user_id, dimension=128):
+  filename = f'{user_id}.{dimension}.png' 
+
+  file_path = os.path.join('static', 'avatars')
+  file_path = os.path.join(file_path, filename)
+  file_path = os.path.join('.', file_path)
+
+  if await path.isfile(file_path):
+    return f'/static/avatars/{filename}'
+
+  return f'/static/avatars/default/default.{dimension}.png'
+
+async def serialize_user(user):
+  return {
+    'avatar64': await get_avatar(user.id, dimension=64),
+    'avatar128': await get_avatar(user.id, dimension=128),
+    'signup_ts': int(user.signup_date.timestamp()),
+    'username': user.username
+  }

video.py

@@ -0,0 +1,72 @@
+import html
+from hashlib import sha1
+
+from peewee import fn
+from aiofiles.tempfile import NamedTemporaryFile
+
+from db import db
+from db import Video, User, Like, Tag, VideoTag
+
+from tools import parse_tags, parse_offset
+from tools import probe_video, create_preview
+from tools import save_content 
+
+class VideoError(Exception): pass
+
+async def find_video_by_id(video_id):
+  try:
+    video_id = int(video_id)
+    video_id = abs(video_id)
+  except ValueError:
+    raise VideoError('illegal video_id')
+
+  try:
+    return await db.get(Video
+                        .select(Video, User)
+                        .join(User)
+                        .switch(Video)
+                        .where(
+                          (Video.id == video_id) &
+                          (~Video.is_hidden)
+                        ))
+  except Video.DoesNotExist:
+    raise VideoError('video is unavailable or doesn\'t exist')
+
+async def get_tags(video_id):
+  video = await find_video_by_id(video_id)
+
+  tags = await db.execute(Tag
+                          .select()
+                          .join(VideoTag)
+                          .join(Video)
+                          .where(Video.id == video.id))
+
+  return [tag.tag for tag in tags]
+
+async def get_likes(video_id):
+  video = await find_video_by_id(video_id)
+
+  return await db.count(Like
+                        .select(Like, Video)
+                        .join(Video)
+                        .switch(Like)
+                        .where(Like.video.id == video.id))
+
+async def get_random_video():
+  return await db.get(Video
+                      .select(Video, User)
+                      .join(User)
+                      .switch(Video)
+                      .order_by(fn.Random())
+                      .limit(1))
+
+async def serialize_video(video):
+  return {
+    'id': video.id,
+    'upload_ts': int(video.upload_date.timestamp()),
+    'thumbnail': video.thumbnail,
+    'uploader_id': video.uploader.id,
+    'likes_count': await get_likes(video.id),
+    'tags_list': await get_tags(video.id)
+  }
+ 

view_routes.py

@@ -0,0 +1,124 @@
+from aiohttp import web
+from aiohttp_session import get_session
+
+from templates import render_template
+
+from video import VideoError, find_video_by_id
+from user import UserError, find_user_by_id, get_avatar
+
+from config import config
+
+routes = web.RouteTableDef()
+
[email protected]('/mkuser')
+async def debug(request):
+  from db import db, User
+  from tools import hash_password
+  
+  u = await db.create(User, username='cirno', password=hash_password('cirno'), ip_address='127.0.0.1')
+  
+  return web.json_response({'i':u.id})
+
[email protected]('/mkuser2')
+async def debug(request):
+  from db import db, User
+  from tools import hash_password
+  
+  u = await db.create(User, username='cirno9', password=hash_password('cirno9'), ip_address='127.0.0.1')
+  
+  return web.json_response({'i':u.id})
+
[email protected]('/mkvid')
+async def debug(request):
+  from db import db, Video, User, VideoTag, Tag
+ 
+  u = await db.get(User.select().where(User.username == 'cirno'))
+  v = await db.create(Video, video='test', thumbnail='/static/thumbs/default.png', uploader=u)
+  
+  tag1 = await db.get_or_create(Tag, tag='test1')
+  tag2 = await db.get_or_create(Tag, tag='test2')
+  tag3 = await db.get_or_create(Tag, tag='test3')
+  tag4 = await db.get_or_create(Tag, tag='test4')
+
+  await db.create(VideoTag, video=v, tag=tag1[0])
+  await db.create(VideoTag, video=v, tag=tag2[0])
+  await db.create(VideoTag, video=v, tag=tag3[0])
+  await db.create(VideoTag, video=v, tag=tag4[0])
+
+  return web.json_response({'i':v.id})
+
[email protected]('/')
+async def index(request):
+  return web.HTTPFound('/random')
+
[email protected]('/404')
+async def index(request):
+  session = await get_session(request)
+
+  return render_template('not_found', 
+                         session=session)
+
[email protected]('/random')
+async def random(request):
+  session = await get_session(request)
+
+  return render_template('random', 
+                         session=session)
+
[email protected]('/watch/{video_id:[0-9]+}')
+async def watch(request):
+  session = await get_session(request)
+
+  video_id = request.match_info['video_id']
+
+  try:
+    video = await find_video_by_id(video_id)
+  except VideoError:
+    return render_template('not_found', 
+                           session=session)
+
+  return render_template('video', 
+                         session=session,
+                         video=video)
+
[email protected]('/search')
+async def search(request):
+  session = await get_session(request)
+
+  return render_template('search', 
+                         session=session)
+
+
[email protected]('/login')
+async def login(request):
+  session = await get_session(request)
+
+  return render_template('login',
+                         session=session,
+                         hcaptcha_sitekey=config.HCAPTCHA_SITEKEY)
+
[email protected]('/signup')
+async def signup(request):
+  session = await get_session(request)
+
+  return render_template('signup',
+                         session=session,
+                         hcaptcha_sitekey=config.HCAPTCHA_SITEKEY)
+
[email protected]('/user/{user_id:[0-9]+}')
+async def user(request):
+  session = await get_session(request)
+
+  user_id = request.match_info['user_id']
+
+  return render_template('user', 
+                         session=session,
+                         user_id=user_id)
+
[email protected]('/upload')
+async def upload(request):
+  session = await get_session(request)
+
+  return render_template('upload',
+                         session=session,
+                         hcaptcha_sitekey=config.HCAPTCHA_SITEKEY)