Frontent dev env (#247)

* Added frontend development files/environment

* More items-categories related removals

* Improvements in pages templates (inc. static pages)

* Improvements in video player

* Added empty home page message + cta

* Updates in media, playlist and management pages

* Improvements in material icons font loading

* Replaced media & playlists links in frontend dev-env

* frontend package version update

* chnaged frontend dev url port

* static files update

* Changed default position of theme switcher

* enabled frontend docker container

frontend/src/static/js/utils/helpers/csrfToken.js

@@ -0,0 +1,19 @@
+export function csrfToken() {
+  var i,
+    cookies,
+    cookie,
+    cookieVal = null;
+  if (document.cookie && '' !== document.cookie) {
+    cookies = document.cookie.split(';');
+    i = 0;
+    while (i < cookies.length) {
+      cookie = cookies[i].trim();
+      if ('csrftoken=' === cookie.substring(0, 10)) {
+        cookieVal = decodeURIComponent(cookie.substring(10));
+        break;
+      }
+      i += 1;
+    }
+  }
+  return cookieVal;
+}

frontend/src/static/js/utils/helpers/dom.js

@@ -0,0 +1,79 @@
+export function supportsSvgAsImg() {
+  // @link: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/svg/asimg.js
+  return document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1');
+}
+
+export function removeClassname(el, cls) {
+  if (el.classList) {
+    el.classList.remove(cls);
+  } else {
+    el.className = el.className.replace(new RegExp('(^|\\b)' + cls.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+  }
+}
+
+export function addClassname(el, cls) {
+  if (el.classList) {
+    el.classList.add(cls);
+  } else {
+    el.className += ' ' + cls;
+  }
+}
+
+export function hasClassname(el, cls) {
+  return el.className && new RegExp('(\\s|^)' + cls + '(\\s|$)').test(el.className);
+}
+
+export const cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+export const requestAnimationFrame =
+  window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+export function BrowserEvents() {
+  const callbacks = {
+    document: {
+      visibility: [],
+    },
+    window: {
+      resize: [],
+      scroll: [],
+    },
+  };
+
+  function onDocumentVisibilityChange() {
+    callbacks.document.visibility.map((fn) => fn());
+  }
+
+  function onWindowResize() {
+    callbacks.window.resize.map((fn) => fn());
+  }
+
+  function onWindowScroll() {
+    callbacks.window.scroll.map((fn) => fn());
+  }
+
+  function windowEvents(resizeCallback, scrollCallback) {
+    if ('function' === typeof resizeCallback) {
+      callbacks.window.resize.push(resizeCallback);
+    }
+
+    if ('function' === typeof scrollCallback) {
+      callbacks.window.scroll.push(scrollCallback);
+    }
+  }
+
+  function documentEvents(visibilityChangeCallback) {
+    if ('function' === typeof visibilityChangeCallback) {
+      callbacks.document.visibility.push(visibilityChangeCallback);
+    }
+  }
+
+  document.addEventListener('visibilitychange', onDocumentVisibilityChange);
+
+  window.addEventListener('resize', onWindowResize);
+  window.addEventListener('scroll', onWindowScroll);
+
+  return {
+    doc: documentEvents,
+    win: windowEvents,
+  };
+}

frontend/src/static/js/utils/helpers/errors.js

@@ -0,0 +1,27 @@
+// TODO: Improve or (even better) remove this file code.
+
+import { error as logErrFn, warn as logWarnFn } from './log';
+
+function logAndReturnError(logFn, msgArr, ErrorConstructor) {
+  let err;
+  switch (ErrorConstructor) {
+    case TypeError:
+    case RangeError:
+    case SyntaxError:
+    case ReferenceError:
+      err = new ErrorConstructor(msgArr[0]);
+      break;
+    default:
+      err = new Error(msgArr[0]);
+  }
+  logFn(err.message, ...msgArr.slice(1));
+  return err;
+}
+
+export function logErrorAndReturnError(msgArr, ErrorConstructor) {
+  return logAndReturnError(logErrFn, msgArr, ErrorConstructor);
+}
+
+export function logWarningAndReturnError(msgArr, ErrorConstructor) {
+  return logAndReturnError(logWarnFn, msgArr, ErrorConstructor);
+}

frontend/src/static/js/utils/helpers/exportStore.js

@@ -0,0 +1,5 @@
+import * as dispatcher from '../dispatcher.js';
+export default function (store, handler) {
+  dispatcher.register(store[handler].bind(store));
+  return store;
+}

frontend/src/static/js/utils/helpers/formatInnerLink.js

@@ -0,0 +1,11 @@
+import urlParse from 'url-parse';
+
+export function formatInnerLink(url, baseUrl) {
+  let link = urlParse(url, {});
+
+  if ('' === link.origin || 'null' === link.origin || !link.origin) {
+    link = urlParse(baseUrl + '/' + url.replace(/^\//g, ''), {});
+  }
+
+  return link.toString();
+}

frontend/src/static/js/utils/helpers/formatManagementTableDate.js

@@ -0,0 +1,15 @@
+import { months as monthList } from '../constants/';
+
+export function formatManagementTableDate(date) {
+  const day = date.getDate();
+  const month = monthList[date.getMonth()].substring(0, 3);
+  const year = date.getFullYear();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+  let ret = month + ' ' + day + ', ' + year;
+  ret += ' ' + (hours < 10 ? '0' : '') + hours;
+  ret += ':' + (minutes < 10 ? '0' : '') + minutes;
+  ret += ':' + (seconds < 10 ? '0' : '') + seconds;
+  return ret;
+}

frontend/src/static/js/utils/helpers/formatViewsNumber.js

@@ -0,0 +1,18 @@
+export default function (views_number, fullNumber) {
+  function formattedValue(val, lim, unit) {
+    return Number(parseFloat(val / lim).toFixed(val < 10 * lim ? 1 : 0)) + unit;
+  }
+
+  function format(i, views, mult, compare, limit, units) {
+    while (views >= compare) {
+      limit *= mult;
+      compare *= mult;
+      i += 1;
+    }
+    return i < units.length
+      ? formattedValue(views, limit, units[i])
+      : formattedValue(views * (mult * (i - (units.length - 1))), limit, units[units.length - 1]);
+  }
+
+  return fullNumber ? views_number.toLocaleString() : format(0, views_number, 1000, 1000, 1, ['', 'K', 'M', 'B', 'T']);
+}

frontend/src/static/js/utils/helpers/imageExtension.js

@@ -0,0 +1,7 @@
+export const imageExtension = (img) => {
+  if (!img) {
+    return;
+  }
+  const ext = img.split('.');
+  return ext[ext.length - 1];
+};

frontend/src/static/js/utils/helpers/index.js

@@ -0,0 +1,14 @@
+export * from './dom';
+export * from './errors';
+export { default as exportStore } from './exportStore';
+export { formatInnerLink } from './formatInnerLink';
+export * from './formatManagementTableDate';
+export { default as formatViewsNumber } from './formatViewsNumber';
+export * from './csrfToken';
+export { imageExtension } from './imageExtension';
+export * from './log';
+export * from './math';
+export * from './propTypeFilters';
+export { default as publishedOnDate } from './publishedOnDate';
+export * from './quickSort';
+export * from './requests';

frontend/src/static/js/utils/helpers/log.js

@@ -0,0 +1,4 @@
+const log = (...x) => console[x[0]](...x.slice(1));
+
+export const warn = (...x) => log('warn', ...x);
+export const error = (...x) => log('error', ...x);

frontend/src/static/js/utils/helpers/math.js

@@ -0,0 +1,10 @@
+export const isGt = (x, y) => x > y;
+export const isZero = (x) => 0 === x;
+export const isNumber = (x) => !isNaN(x) && x === 0 + x;
+export const isInteger = (x) => x === Math.trunc(x);
+export const isPositive = (x) => isGt(x, 0);
+export const isPositiveNumber = (x) => isNumber(x) && isPositive(x);
+export const isPositiveInteger = (x) => isInteger(x) && isPositive(x);
+export const isPositiveIntegerOrZero = (x) => isInteger(x) && (isPositive(x) || isZero(x));
+
+export const greaterCommonDivision = (a, b) => (!b ? a : greaterCommonDivision(b, a % b));

frontend/src/static/js/utils/helpers/propTypeFilters.js

@@ -0,0 +1,38 @@
+import { logErrorAndReturnError } from './errors';
+import { isPositiveInteger, isPositiveIntegerOrZero } from './math';
+
+export const PositiveIntegerOrZero = (function () {
+  return function (obj, key, comp) {
+    return void 0 === obj[key] || isPositiveIntegerOrZero(obj[key])
+      ? null
+      : logErrorAndReturnError([
+          'Invalid prop `' +
+            key +
+            '` of type `' +
+            typeof obj[key] +
+            '` supplied to `' +
+            (comp || 'N/A') +
+            '`, expected `positive integer or zero` (' +
+            obj[key] +
+            ').',
+        ]);
+  };
+})();
+
+export const PositiveInteger = (function () {
+  return function (obj, key, comp) {
+    return void 0 === obj[key] || isPositiveInteger(obj[key])
+      ? null
+      : logErrorAndReturnError([
+          'Invalid prop `' +
+            key +
+            '` of type `' +
+            typeof obj[key] +
+            '` supplied to `' +
+            (comp || 'N/A') +
+            '`, expected `positive integer` (' +
+            obj[key] +
+            ').',
+        ]);
+  };
+})();

frontend/src/static/js/utils/helpers/publishedOnDate.js

@@ -0,0 +1,17 @@
+import { months } from '../constants';
+
+export default function publishedOnDate(date, type) {
+  if (date instanceof Date) {
+    type = 0 + type;
+    type = 0 < type ? type : 1;
+    switch (type) {
+      case 1:
+        return months[date.getMonth()].substring(0, 3) + ' ' + date.getDate() + ', ' + date.getFullYear();
+      case 2:
+        return date.getDate() + ' ' + months[date.getMonth()].substring(0, 3) + ' ' + date.getFullYear();
+      case 3:
+        return date.getDate() + ' ' + months[date.getMonth()] + ' ' + date.getFullYear();
+    }
+  }
+  return null;
+}

frontend/src/static/js/utils/helpers/quickSort.js

@@ -0,0 +1,35 @@
+function swap(arr, i, j) {
+  var temp = arr[i];
+  arr[i] = arr[j];
+  arr[j] = temp;
+}
+
+function partition(arr, pivot, left, right) {
+  var pivotValue = arr[pivot],
+    partitionIndex = left;
+
+  for (var i = left; i < right; i++) {
+    if (arr[i] < pivotValue) {
+      swap(arr, i, partitionIndex);
+      partitionIndex++;
+    }
+  }
+  swap(arr, right, partitionIndex);
+  return partitionIndex;
+}
+
+export function quickSort(arr, left, right) {
+  var len = arr.length,
+    pivot,
+    partitionIndex;
+
+  if (left < right) {
+    pivot = right;
+    partitionIndex = partition(arr, pivot, left, right);
+
+    //sort left and right
+    quickSort(arr, left, partitionIndex - 1);
+    quickSort(arr, partitionIndex + 1, right);
+  }
+  return arr;
+}

frontend/src/static/js/utils/helpers/requests.js

@@ -0,0 +1,135 @@
+import axios, { get as axiosGet, post as axiosPost, put as axiosPut } from 'axios';
+
+export async function getRequest(url, sync, callback, errorCallback) {
+  const requestConfig = {
+    timeout: null,
+    maxContentLength: null,
+  };
+
+  function responseHandler(result) {
+    if (callback instanceof Function) {
+      callback(result);
+    }
+  }
+
+  function errorHandler(error) {
+    if (errorCallback instanceof Function) {
+      let err = error;
+      if (void 0 === error.response) {
+        err = {
+          type: 'network',
+          error: error,
+        };
+      } else if (void 0 !== error.response.status) {
+        // TODO: Improve this, it's valid only in case of media requests.
+        switch (error.response.status) {
+          case 401:
+            err = {
+              type: 'private',
+              error: error,
+              message: 'Media is private',
+            };
+            break;
+          case 400:
+            err = {
+              type: 'unavailable',
+              error: error,
+              message: 'Media is unavailable',
+            };
+            break;
+        }
+      }
+      errorCallback(err);
+    }
+  }
+
+  if (sync) {
+    await axiosGet(url, requestConfig)
+      .then(responseHandler)
+      .catch(errorHandler || null);
+  } else {
+    axiosGet(url, requestConfig)
+      .then(responseHandler)
+      .catch(errorHandler || null);
+  }
+}
+
+export async function postRequest(url, postData, configData, sync, callback, errorCallback) {
+  postData = postData || {};
+
+  function responseHandler(result) {
+    if (callback instanceof Function) {
+      callback(result);
+    }
+  }
+
+  function errorHandler(error) {
+    if (errorCallback instanceof Function) {
+      errorCallback(error);
+    }
+  }
+
+  if (sync) {
+    await axiosPost(url, postData, configData || null)
+      .then(responseHandler)
+      .catch(errorHandler || null);
+  } else {
+    axiosPost(url, postData, configData || null)
+      .then(responseHandler)
+      .catch(errorHandler || null);
+  }
+}
+
+export async function putRequest(url, putData, configData, sync, callback, errorCallback) {
+  putData = putData || {};
+
+  function responseHandler(result) {
+    if (callback instanceof Function) {
+      callback(result);
+    }
+  }
+
+  function errorHandler(error) {
+    if (errorCallback instanceof Function) {
+      errorCallback(error);
+    }
+  }
+
+  if (sync) {
+    await axiosPut(url, putData, configData || null)
+      .then(responseHandler)
+      .catch(errorHandler || null);
+  } else {
+    axiosPut(url, putData, configData || null)
+      .then(responseHandler)
+      .catch(errorHandler || null);
+  }
+}
+
+export async function deleteRequest(url, configData, sync, callback, errorCallback) {
+  configData = configData || {};
+
+  function responseHandler(result) {
+    if (callback instanceof Function) {
+      callback(result);
+    }
+  }
+
+  function errorHandler(error) {
+    if (errorCallback instanceof Function) {
+      errorCallback(error);
+    }
+  }
+
+  if (sync) {
+    await axios
+      .delete(url, configData || null)
+      .then(responseHandler)
+      .catch(errorHandler || null);
+  } else {
+    axios
+      .delete(url, configData || null)
+      .then(responseHandler)
+      .catch(errorHandler || null);
+  }
+}