openwemb/static/js/search.js

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);
});