feat: Frontend Dependencies Upgrade +Fix Timestamps in videos

2025-06-29 00:12:05 +02:00 · 2025-03-18 19:01:50 +02:00 · 2025-03-18 19:01:50 +02:00 · 20f305e69e
commit 20f305e69e
parent d1fda05fdc
72 changed files with 28229 additions and 55880 deletions
--- a/.gitignore
+++ b/.gitignore
@ -17,3 +17,4 @@ static/rest_framework/
 static/drf-yasg
 cms/local_settings.py
 deploy/docker/local_settings.py
+yt.readme.md
--- a/docker-compose-dev-updated.yaml
+++ b/docker-compose-dev-updated.yaml
@ -0,0 +1,144 @@
+services:
+  migrations:
+    platform: linux/amd64
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+      args:
+        - DEVELOPMENT_MODE=True
+    image: mediacms/mediacms:latest
+    volumes:
+      - ./:/home/mediacms.io/mediacms/
+    command: "./deploy/docker/prestart.sh"
+    environment:
+      DEVELOPMENT_MODE: True
+      ENABLE_UWSGI: 'no'
+      ENABLE_NGINX: 'no'
+      ENABLE_CELERY_SHORT: 'no'
+      ENABLE_CELERY_LONG: 'no'
+      ENABLE_CELERY_BEAT: 'no'
+      ADMIN_USER: 'admin'
+      ADMIN_EMAIL: 'admin@localhost'
+      ADMIN_PASSWORD: 'admin'
+    restart: on-failure
+    depends_on:
+      redis:
+        condition: service_healthy
+      db:
+        condition: service_healthy
+  frontend:
+    image: node:20
+    user: "root"
+    volumes:
+      - ${PWD}/frontend:/home/mediacms.io/mediacms/frontend/
+      - frontend_node_modules:/home/mediacms.io/mediacms/frontend/node_modules
+      - player_node_modules:/home/mediacms.io/mediacms/frontend/packages/player/node_modules
+      - scripts_node_modules:/home/mediacms.io/mediacms/frontend/packages/scripts/node_modules
+      - npm_global:/home/node/.npm-global
+    working_dir: /home/mediacms.io/mediacms/frontend/
+    command: >
+      bash -c "
+      echo 'Setting up npm global directory...' &&
+      mkdir -p /home/node/.npm-global &&
+      chown -R node:node /home/node/.npm-global &&
+      echo 'Setting up permissions...' &&
+      chown -R node:node /home/mediacms.io/mediacms/frontend &&
+      echo 'Cleaning up node_modules...' &&
+      find /home/mediacms.io/mediacms/frontend/node_modules -mindepth 1 -delete 2>/dev/null || true &&
+      find /home/mediacms.io/mediacms/frontend/packages/player/node_modules -mindepth 1 -delete 2>/dev/null || true &&
+      find /home/mediacms.io/mediacms/frontend/packages/scripts/node_modules -mindepth 1 -delete 2>/dev/null || true &&
+      chown -R node:node /home/mediacms.io/mediacms/frontend/node_modules &&
+      chown -R node:node /home/mediacms.io/mediacms/frontend/packages/player/node_modules &&
+      chown -R node:node /home/mediacms.io/mediacms/frontend/packages/scripts/node_modules &&
+      echo 'Switching to node user...' &&
+      su node -c '
+        export NPM_CONFIG_PREFIX=/home/node/.npm-global &&
+        echo \"Setting up frontend...\" &&
+        rm -f package-lock.json &&
+        rm -f packages/player/package-lock.json &&
+        rm -f packages/scripts/package-lock.json &&
+        echo \"Installing dependencies...\" &&
+        npm install --legacy-peer-deps &&
+        echo \"Setting up workspaces...\" &&
+        npm install -g npm@latest &&
+        cd packages/scripts &&
+        npm install --legacy-peer-deps &&
+        npm install rollup@2.79.1 --save-dev --legacy-peer-deps &&
+        npm install typescript@4.9.5 --save-dev --legacy-peer-deps &&
+        npm install tslib@2.6.2 --save --legacy-peer-deps &&
+        npm install rollup-plugin-typescript2@0.34.1 --save-dev --legacy-peer-deps &&
+        npm install --legacy-peer-deps &&
+        npm run build &&
+        cd ../.. &&
+        cd packages/player &&
+        npm install --legacy-peer-deps &&
+        npm run build &&
+        cd ../.. &&
+        echo \"Starting development server...\" &&
+        npm run start
+      '"
+    env_file:
+      - ${PWD}/frontend/.env
+    environment:
+      - NPM_CONFIG_PREFIX=/home/node/.npm-global
+    ports:
+      - "8088:8088"
+    depends_on:
+      - web
+    restart: unless-stopped
+  web:
+    platform: linux/amd64
+    image: mediacms/mediacms:latest
+    command: "python manage.py runserver 0.0.0.0:80"
+    environment:
+      DEVELOPMENT_MODE: True
+    ports:
+      - "80:80"
+    volumes:
+      - ./:/home/mediacms.io/mediacms/
+    depends_on:
+      - migrations
+  db:
+    image: postgres:17.2-alpine
+    volumes:
+      - ./postgres_data:/var/lib/postgresql/data/
+    restart: always
+    environment:
+      POSTGRES_USER: mediacms
+      POSTGRES_PASSWORD: mediacms
+      POSTGRES_DB: mediacms
+      TZ: Europe/London
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -d $${POSTGRES_DB} -U $${POSTGRES_USER}", "--host=db", "--dbname=$POSTGRES_DB", "--username=$POSTGRES_USER"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+  redis:
+    image: "redis:alpine"
+    restart: always
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+  celery_worker:
+    platform: linux/amd64
+    image: mediacms/mediacms:latest
+    deploy:
+      replicas: 1
+    volumes:
+      - ./:/home/mediacms.io/mediacms/
+    environment:
+      ENABLE_UWSGI: 'no'
+      ENABLE_NGINX: 'no'
+      ENABLE_CELERY_BEAT: 'no'
+      ENABLE_MIGRATIONS: 'no'
+      DEVELOPMENT_MODE: True
+    depends_on:
+      - web
+
+volumes:
+  frontend_node_modules:
+  player_node_modules:
+  scripts_node_modules:
+  npm_global:
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -14,34 +14,34 @@
    "cover 99.5%"
  ],
  "devDependencies": {
-    "@babel/core": "^7.14.5",
-    "@babel/preset-env": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.7",
-    "autoprefixer": "^10.2.6",
-    "babel-loader": "^8.2.2",
-    "compass-mixins": "^0.12.10",
-    "copy-webpack-plugin": "^9.0.0",
-    "core-js": "^3.14.0",
-    "css-loader": "^5.2.6",
-    "dotenv": "^10.0.0",
-    "ejs": "^3.1.6",
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^10.0.0",
+    "compass-mixins": "^0.12.12",
+    "copy-webpack-plugin": "^13.0.0",
+    "core-js": "^3.41.0",
+    "css-loader": "^7.1.2",
+    "dotenv": "^16.4.7",
+    "ejs": "^3.1.10",
    "ejs-compiled-loader": "^3.1.0",
    "mediacms-scripts": "file:packages/scripts",
-    "postcss-loader": "^6.1.0",
-    "prettier": "^2.3.1",
-    "prop-types": "^15.7.2",
-    "sass": "^1.34.1",
-    "sass-loader": "^12.1.0",
-    "ts-loader": "^9.2.3",
-    "typescript": "^4.3.2",
+    "postcss-loader": "^8.1.1",
+    "prettier": "^3.5.3",
+    "prop-types": "^15.8.1",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.2",
    "url-loader": "^4.1.1",
-    "webpack": "^5.38.1"
+    "webpack": "^5.98.0"
  },
  "dependencies": {
-    "axios": "^0.21.1",
-    "flux": "^4.0.1",
+    "axios": "^1.8.2",
+    "flux": "^4.0.4",
    "mediacms-player": "file:packages/player",
    "normalize.css": "^8.0.1",
    "react": "^17.0.2",
@ -49,10 +49,9 @@
    "react-mentions": "^4.3.1",
    "sortablejs": "^1.13.0",
    "timeago.js": "^4.0.2",
-    "url-parse": "^1.5.1",
-    "pdfjs-dist": "^3.4.120",
+    "url-parse": "^1.5.10",
+    "pdfjs-dist": "3.4.120",
    "@react-pdf-viewer/core": "^3.9.0",
-    "@react-pdf-viewer/default-layout": "^3.12.0"
-
+    "@react-pdf-viewer/default-layout": "^3.9.0"
  }
 }
--- a/frontend/packages/player/dist/mediacms-player.js
+++ b/frontend/packages/player/dist/mediacms-player.js
@ -1,24 +1,8 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 	typeof define === 'function' && define.amd ? define(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global['mediacms-player'] = factory());
-}(this, (function () { 'use strict';
-
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
-  }
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["mediacms-player"] = factory());
+})(this, (function () { 'use strict';

 	var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@ -2334,7 +2318,7 @@
 	function ifBooleanElse(bol, els) {
 	  return isBoolean(bol) ? bol : els;
 	}
-  var defaults = {
+	const defaults = {
 	  options: {
 	    sources: [],
 	    keyboardControls: !0,
@ -2375,7 +2359,7 @@
 	  }
 	};
 	function filterPlayerOptions(domPlayer, opt) {
-    var k, x, i;
+	  let k, x, i;
 	  opt.sources = isArray(opt.sources) && opt.sources.length ? opt.sources : [];
 	  opt.loop = ifBooleanElse(opt.loop, defaults.options.loop);
 	  opt.controls = ifBooleanElse(opt.controls, defaults.options.controls);
@ -2412,9 +2396,9 @@
 	      }
 	    }
 	  }
-    opt.previewSprite = 'object' === _typeof(opt.previewSprite) ? opt.previewSprite : {};
-    var obj;
-    var sources_el = domPlayer.querySelectorAll('source');
+	  opt.previewSprite = 'object' === typeof opt.previewSprite ? opt.previewSprite : {};
+	  let obj;
+	  let sources_el = domPlayer.querySelectorAll('source');
 	  i = 0;
 	  while (i < sources_el.length) {
 	    if (void 0 !== sources_el[i].attributes.src) {
@ -2434,13 +2418,13 @@
 	    }
 	    i += 1;
 	  }
-    var subs_el = domPlayer.querySelectorAll('track[kind="subtitles"]');
-    var subtitles_options = {
+	  let subs_el = domPlayer.querySelectorAll('track[kind="subtitles"]');
+	  const subtitles_options = {
 	    on: opt.subtitles.on,
 	    default: null,
 	    languages: []
 	  };
-    var languages = {};
+	  const languages = {};
 	  function addSubtitle(track) {
 	    track.src = void 0 !== track.src && null !== track.src ? track.src.toString().trim() : '';
 	    track.srclang = void 0 !== track.srclang && null !== track.srclang ? track.srclang.toString().trim() : '';
@ -2513,8 +2497,8 @@
 	    return null;
 	  }
 	  function sourcesSrcs(urls) {
-      var ret = [];
-      var i = 0;
+	    const ret = [];
+	    let i = 0;
 	    while (i < urls.length) {
 	      if (!!urls[i]) {
 	        ret.push(urls[i]);
@ -2524,8 +2508,8 @@
 	    return ret;
 	  }
 	  function sourcesFormats(formats) {
-      var ret = [];
-      var i = 0;
+	    const ret = [];
+	    let i = 0;
 	    while (i < formats.length) {
 	      if (!!formats[i]) {
 	        ret.push(formats[i]);
@ -2534,7 +2518,7 @@
 	    }
 	    return ret;
 	  }
-    var k,
+	  let k,
 	    pluginVideoResolutions = {},
 	    pluginVideoPlaybackSpeeds = {};
 	  if (!!videoResolutions) {
@ -2564,7 +2548,7 @@
 	  if (null !== pluginOptions.subtitles.default && pluginOptions.subtitles.on) {
 	    pluginState.theSelectedSubtitleOption = pluginOptions.subtitles.default;
 	  }
-    var passOptions = constructVideojsOptions(pluginOptions, {
+	  const passOptions = constructVideojsOptions(pluginOptions, {
 	    controlBar: {
 	      children: []
 	    }
@ -2574,11 +2558,11 @@
 	  this.isEnded = this.player.mediaCmsVjsPlugin().isEnded;
 	  this.isFullscreen = this.player.mediaCmsVjsPlugin().isFullscreen;
 	  this.isTheaterMode = this.player.mediaCmsVjsPlugin().isTheaterMode;
-    if (void 0 !== (typeof window === "undefined" ? "undefined" : _typeof(window))) {
+	  if (void 0 !== typeof window) {
 	    window.HELP_IMPROVE_VIDEOJS = false;
 	  }
 	}

 	return MediaPlayer;

-})));
+}));
--- a/frontend/packages/player/package-lock.json
+++ b/frontend/packages/player/package-lock.json
--- a/frontend/packages/player/package.json
+++ b/frontend/packages/player/package.json
@ -47,7 +47,7 @@
    "css-loader": "^5.2.6",
    "global": "^4.4.0",
    "json-loader": "^0.5.7",
-    "node-sass": "^6.0.0",
+    "sass": "^1.85.1",
    "postcss": "^8.3.2",
    "rollup": "^2.51.2",
    "rollup-plugin-babel": "^4.3.3",
--- a/frontend/packages/scripts/dist/webpack-dev-env.js
+++ b/frontend/packages/scripts/dist/webpack-dev-env.js
@ -19,8 +19,12 @@ function __spreadArray(to, from, pack) {
          ar[i] = from[i];
      }
  }
-    return to.concat(ar || from);
+  return to.concat(ar || Array.prototype.slice.call(from));
 }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};

 function bodySnippet(id) {
    return '<div id="' + id + '"></div>';
@ -170,13 +174,13 @@ var config$2 = {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
-                    name: "_commons",
+                    name: '_commons',
                    priority: 1,
-                    chunks: "initial",
+                    chunks: 'initial',
+                },
            },
        },
    },
-    }
 };

 /*const chunksCacheGroups_0 = {
@ -241,13 +245,13 @@ var config$1 = {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
-                    name: "_commons",
+                    name: '_commons',
                    priority: 1,
-                    chunks: "initial",
+                    chunks: 'initial',
+                },
            },
        },
    },
-    }
 };

 /**
@ -307,7 +311,7 @@ function pagesConfig(pagesKeys) {
                head: {},
                body: {
                    scripts: [],
-                    snippet: sitemapTemplate({ pages: __spreadArray(__spreadArray([], pagesKeys), Object.keys(pages)) }),
+                    snippet: sitemapTemplate({ pages: __spreadArray(__spreadArray([], pagesKeys, true), Object.keys(pages), true) }),
                },
            },
            window: {},
@ -649,7 +653,9 @@ function analyzer(analyzerOptions) {
        statsFilename: 'analyzer-stats.json',
        reportFilename: 'analyzer-report.html',
    };
-    var compiler = 'dist' === options.env ? webpack$2(__assign(__assign({}, config$1), config)) : webpack$2(__assign(__assign({}, config$2), config));
+    var compiler = 'dist' === options.env
+        ? webpack$2(__assign(__assign({}, config$1), config))
+        : webpack$2(__assign(__assign({}, config$2), config));
    var analyzer = new BundleAnalyzerPlugin(analyzerConfig);
    analyzer.apply(compiler);
    compiler.run(function (err, stats) {
@ -697,7 +703,9 @@ function build(buildOptions) {
        throw Error('"postcssConfigFile" is not an absolute path');
    }
    var config = generateConfig(options.env, options.config);
-    var compiler = 'dist' === options.env ? webpack$1(__assign(__assign({}, config$1), config)) : webpack$1(__assign(__assign({}, config$2), config));
+    var compiler = 'dist' === options.env
+        ? webpack$1(__assign(__assign({}, config$1), config))
+        : webpack$1(__assign(__assign({}, config$2), config));
    compiler.run(function (err, stats) {
        if (err)
            throw err;
@ -728,8 +736,8 @@ var config = {
    // devtool: 'source-map',
    // devtool: 'eval-cheap-source-map',
    optimization: {
-        minimize: false
-    }
+        minimize: false,
+    },
 };

 function configFunc(contentBase) {
@ -739,7 +747,7 @@ function configFunc(contentBase) {
        },
        contentBase: contentBase,
        compress: true,
-        hot: true
+        hot: true,
    };
 }

--- a/frontend/packages/scripts/package-lock.json
+++ b/frontend/packages/scripts/package-lock.json
--- a/frontend/packages/scripts/package.json
+++ b/frontend/packages/scripts/package.json
@ -36,14 +36,15 @@
    "cross-spawn": "^7.0.3",
    "dotenv": "^10.0.0",
    "rimraf": "^3.0.2",
-    "rollup": "^2.51.2",
+    "rollup": "^2.79.1",
    "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-typescript2": "^0.34.1",
    "rollup-plugin-visualizer": "^5.5.0",
    "serialize-javascript": "^5.0.1",
    "source-map-loader": "^3.0.0",
    "ts-loader": "^9.2.3",
-    "typescript": "^4.3.2"
+    "tslib": "^2.6.2",
+    "typescript": "^4.9.5"
  },
  "dependencies": {
    "@svgr/webpack": "^5.5.0",
@ -64,7 +65,6 @@
    "lodash.merge": "^4.6.2",
    "mini-css-extract-plugin": "^1.6.0",
    "node-polyfill-webpack-plugin": "^1.1.2",
-    "node-sass": "^6.0.0",
    "postcss": "^8.3.2",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.0",
@ -72,6 +72,7 @@
    "postcss-nested": "^5.0.5",
    "postcss-scss": "^3.0.5",
    "progress-bar-webpack-plugin": "^2.1.0",
+    "sass": "^1.85.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
--- a/frontend/packages/vjs-plugin-font-icons/package-lock.json
+++ b/frontend/packages/vjs-plugin-font-icons/package-lock.json
--- a/frontend/packages/vjs-plugin-font-icons/package.json
+++ b/frontend/packages/vjs-plugin-font-icons/package.json
@ -30,7 +30,7 @@
    "load-grunt-tasks": "^5.1.0",
    "lodash": "^4.17.21",
    "material-design-icons": "^3.0.1",
-    "node-sass": "^6.0.0",
+    "sass": "^1.85.1",
    "rimraf": "^3.0.2",
    "time-grunt": "^2.0.0",
    "webfonts-generator": "^0.4.0"
--- a/frontend/packages/vjs-plugin/package-lock.json
+++ b/frontend/packages/vjs-plugin/package-lock.json
--- a/frontend/packages/vjs-plugin/package.json
+++ b/frontend/packages/vjs-plugin/package.json
@ -42,7 +42,7 @@
    "core-js": "^3.14.0",
    "global": "^4.4.0",
    "minami": "^1.2.3",
-    "node-sass": "^6.0.0",
+    "sass": "^1.85.1",
    "postcss": "^8.3.2",
    "rimraf": "^3.0.2",
    "rollup": "^2.51.2",
--- a/frontend/packages/vjs-plugin/src/MediaCmsVjsPlugin.js
+++ b/frontend/packages/vjs-plugin/src/MediaCmsVjsPlugin.js
@ -3025,6 +3025,12 @@ function generatePlugin() {

 	videojs.registerPlugin('mediaCmsVjsPlugin', MediaCmsVjsPlugin);
 	
+	if (typeof videojs.registerPlugin === 'function') {
+		videojs.registerPlugin('mediaCmsVjsPlugin', MediaCmsVjsPlugin);
+	} else {
+		videojs.plugin('mediaCmsVjsPlugin', MediaCmsVjsPlugin);
+	}
+
 	return MediaCmsVjsPlugin;
 }

--- a/frontend/src/static/js/components/MediaListRow.tsx
+++ b/frontend/src/static/js/components/MediaListRow.tsx
@ -7,9 +7,10 @@ interface MediaListRowProps {
  viewAllText?: string;
  className?: string;
  style?: { [key: string]: any };
+  children?: React.ReactNode;
 }

-export const MediaListRow: React.FC<MediaListRowProps> = (props) => {
+export const MediaListRow: React.FC<MediaListRowProps> = (props:any) => {
  return (
    <div className={(props.className ? props.className + ' ' : '') + 'media-list-row'} style={props.style}>
      {props.title ? (
--- a/frontend/src/static/js/components/comments/Comments.jsx
+++ b/frontend/src/static/js/components/comments/Comments.jsx
@ -11,7 +11,7 @@ import { replaceString } from '../../utils/helpers/';

 import './videojs-markers.js';
 import './videojs.markers.css';
-import {enableMarkers, addMarker} from './videojs-markers_config.js'
+import { enableMarkers, addMarker } from './videojs-markers_config.js';
 import { translateString } from '../../utils/helpers/';

 import './Comments.scss';
@ -39,7 +39,7 @@ function CommentForm(props) {
      ? null
      : LinksContext._currentValue.signin +
          '?next=/' +
-          window.location.href.replace(SiteContext._currentValue.url, '').replace(/^\//g, '')
+          window.location.href.replace(SiteContext._currentValue.url, '').replace(/^\//g, ''),
  );

  function onFocus() {
@ -50,11 +50,10 @@ function CommentForm(props) {
    setTextareaFocused(false);
  }

-  function onUsersLoad()
-  {
+  function onUsersLoad() {
    const userList = [...MediaPageStore.get('users')];
-    const cleanList = []
-    userList.forEach(user => {
+    const cleanList = [];
+    userList.forEach((user) => {
      cleanList.push({ id: user.username, display: user.name });
    });

@ -125,16 +124,14 @@ function CommentForm(props) {
  useEffect(() => {
    MediaPageStore.on('comment_submit', onCommentSubmit);
    MediaPageStore.on('comment_submit_fail', onCommentSubmitFail);
-    if (MediaCMS.features.media.actions.comment_mention === true)
-    {
+    if (MediaCMS.features.media.actions.comment_mention === true) {
      MediaPageStore.on('users_load', onUsersLoad);
    }

    return () => {
      MediaPageStore.removeListener('comment_submit', onCommentSubmit);
      MediaPageStore.removeListener('comment_submit_fail', onCommentSubmitFail);
-      if (MediaCMS.features.media.actions.comment_mention === true)
-      {
+      if (MediaCMS.features.media.actions.comment_mention === true) {
        MediaPageStore.removeListener('users_load', onUsersLoad);
      }
    };
@ -146,33 +143,31 @@ function CommentForm(props) {
        <UserThumbnail />
        <div className="form">
          <div className={'form-textarea-wrap' + (textareaFocused ? ' focused' : '')}>
-            { MediaCMS.features.media.actions.comment_mention ?
+            {MediaCMS.features.media.actions.comment_mention ? (
              <MentionsInput
                inputRef={textareaRef}
                className="form-textarea"
                rows="1"
-                placeholder={translateString('Add a ') + commentsText.single + '...'}
+                placeholder={'Add a ' + commentsText.single + '...'}
                value={value}
                onChange={onChangeWithMention}
                onFocus={onFocus}
-                onBlur={onBlur}>
-                <Mention
-                  data={userList}
-                  markup="@(___id___)[___display___]"
-              />
+                onBlur={onBlur}
+              >
+                <Mention data={userList} markup="@(___id___)[___display___]" />
              </MentionsInput>
-            :
+            ) : (
              <textarea
                ref={textareaRef}
                className="form-textarea"
                rows="1"
-                placeholder={translateString('Add a ') + commentsText.single + '...'}
+                placeholder={'Add a ' + commentsText.single + '...'}
                value={value}
                onChange={onChange}
                onFocus={onFocus}
                onBlur={onBlur}
              ></textarea>
-            }
+            )}
          </div>
          <div className="form-buttons">
            <button className={'' === value.trim() ? 'disabled' : ''} onClick={submitComment}>
@ -239,7 +234,9 @@ function CommentActions(props) {
      {MemberContext._currentValue.can.deleteComment ? (
        <div className="comment-action remove-comment">
          <PopupTrigger contentRef={popupContentRef}>
-            <button>{translateString('DELETE')} {commentsText.uppercaseSingle}</button>
+            <button>
+              {translateString('DELETE')} {commentsText.uppercaseSingle}
+            </button>
          </PopupTrigger>

          <PopupContent contentRef={popupContentRef}>
@ -425,7 +422,7 @@ export default function CommentsList(props) {
  const [mediaId, setMediaId] = useState(MediaPageStore.get('media-id'));

  const [comments, setComments] = useState(
-    MemberContext._currentValue.can.readComment ? MediaPageStore.get('media-comments') : []
+    MemberContext._currentValue.can.readComment ? MediaPageStore.get('media-comments') : [],
  );

  const [displayComments, setDisplayComments] = useState(false);
@ -433,62 +430,61 @@ export default function CommentsList(props) {
  function onCommentsLoad() {
    const retrievedComments = [...MediaPageStore.get('media-comments')];

+    retrievedComments.forEach((comment) => {
+      comment.text = setTimestampAnchors(comment.text);
+    });
+
+    displayCommentsRelatedAlert();
    setComments([...retrievedComments]);
-
-    // TODO: this code is breaking, beed ti debug, until then removing the extra
-    // functionality related with video/timestamp/user mentions
-    //    const video = videojs('vjs_video_3');
-
-    // if (MediaCMS.features.media.actions.timestampTimebar)
-    //{
-    //  enableMarkers(video);
-    //}
-
-    //if (MediaCMS.features.media.actions.comment_mention === true)
-    //{
-    //  retrievedComments.forEach(comment => {
-    //    comment.text = setMentions(comment.text);
-    //  });
-    //}
-
-    // TODO: this code is breaking
-    // video.one('loadedmetadata', () => {
-    //  retrievedComments.forEach(comment => {
-    //    comment.text = setTimestampAnchorsAndMarkers(comment.text, video);
-    //  });
-
-    //  displayCommentsRelatedAlert();
-    //  setComments([...retrievedComments]);
-    //});
-    //setComments([...retrievedComments]);
  }

-  function setMentions(text)
-  {
-    let sanitizedComment = text.split('@(_').join("<a href=\"/user/");
-    sanitizedComment = sanitizedComment.split('_)[_').join("\">");
-    return sanitizedComment.split('_]').join("</a>");
-  }
-
-  function setTimestampAnchorsAndMarkers(text, videoPlayer)
-  {
-    function wrapTimestampWithAnchor(match, string)
-    {
-      let split = match.split(':'), s = 0, m = 1;
+  function setTimestampAnchors(text) {
+    function wrapTimestampWithAnchor(match, string) {
+      let split = match.split(':'),
+        s = 0,
+        m = 1;
      let searchParameters = new URLSearchParams(window.location.search);

-      while (split.length > 0)
-      {
+      while (split.length > 0) {
        s += m * parseInt(split.pop(), 10);
        m *= 60;
      }
-      if (MediaCMS.features.media.actions.timestampTimebar)
-      {
+      searchParameters.set('t', s);
+
+      let mediaUrl = MediaPageStore.get('media-url').split('?')[0] + '?' + searchParameters;
+
+      const wrapped = '<a href="' + mediaUrl + '">' + match + '</a>';
+      return wrapped;
+    }
+
+    const timeRegex = new RegExp('((\\d)?\\d:)?(\\d)?\\d:\\d\\d', 'g');
+    return text.replace(timeRegex, wrapTimestampWithAnchor);
+  }
+
+  function setMentions(text) {
+    let sanitizedComment = text.split('@(_').join('<a href="/user/');
+    sanitizedComment = sanitizedComment.split('_)[_').join('">');
+    return sanitizedComment.split('_]').join('</a>');
+  }
+
+  function setTimestampAnchorsAndMarkers(text, videoPlayer) {
+    function wrapTimestampWithAnchor(match, string) {
+      let split = match.split(':'),
+        s = 0,
+        m = 1;
+      let searchParameters = new URLSearchParams(window.location.search);
+
+      while (split.length > 0) {
+        s += m * parseInt(split.pop(), 10);
+        m *= 60;
+      }
+      if (MediaCMS.features.media.actions.timestampTimebar) {
        addMarker(videoPlayer, s, text);
      }

-      searchParameters.set('t', s)
-      const wrapped = "<a href=\"" + MediaPageStore.get('media-url').split('?')[0] + "?" + searchParameters + "\">" + match + "</a>";
+      searchParameters.set('t', s);
+      const wrapped =
+        '<a href="' + MediaPageStore.get('media-url').split('?')[0] + '?' + searchParameters + '">' + match + '</a>';
      return wrapped;
    }

@ -506,7 +502,7 @@ export default function CommentsList(props) {
    // FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
    setTimeout(
      () => PageActions.addNotification(commentsText.ucfirstSingle + ' submission failed', 'commentSubmitFail'),
-      100
+      100,
    );
  }

@ -520,7 +516,7 @@ export default function CommentsList(props) {
    // FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
    setTimeout(
      () => PageActions.addNotification(commentsText.ucfirstSingle + ' removal failed', 'commentDeleteFail'),
-      100
+      100,
    );
  }

@ -528,7 +524,7 @@ export default function CommentsList(props) {
    setDisplayComments(
      comments.length &&
        MemberContext._currentValue.can.readComment &&
-        (MediaPageStore.get('media-data').enable_comments || MemberContext._currentValue.can.editMedia)
+        (MediaPageStore.get('media-data').enable_comments || MemberContext._currentValue.can.editMedia),
    );
  }, [comments]);

--- a/frontend/src/static/js/components/comments/videojs-markers.js
+++ b/frontend/src/static/js/components/comments/videojs-markers.js
@ -520,6 +520,6 @@
    };
  }

-  _video2.default.plugin('markers', registerVideoJsMarkersPlugin);
+    videojs.registerPlugin('markers', registerVideoJsMarkersPlugin);
 });
 //# sourceMappingURL=videojs-markers.js.map
--- a/frontend/src/static/js/components/media-page/ViewerInfoContent.js
+++ b/frontend/src/static/js/components/media-page/ViewerInfoContent.js
@ -14,7 +14,7 @@ function metafield(arr) {
  let sep;
  let ret = [];

-  if (arr.length) {
+  if (arr && arr.length) {
    i = 0;
    sep = 1 < arr.length ? ', ' : '';
    while (i < arr.length) {
@ -50,7 +50,9 @@ function MediaAuthorBanner(props) {
          </a>
        </span>
        {PageStore.get('config-media-item').displayPublishDate && props.published ? (
-          <span className="author-banner-date">{translateString("Published on")} {replaceString(publishedOnDate(new Date(props.published)))}</span>
+          <span className="author-banner-date">
+            {translateString('Published on')} {replaceString(publishedOnDate(new Date(props.published)))}
+          </span>
        ) : null}
      </div>
    </div>
@ -78,8 +80,8 @@ function EditMediaButton(props) {
  }

  return (
-    <a href={link} rel="nofollow" title={translateString("Edit media")} className="edit-media">
-      {translateString("EDIT MEDIA")}
+    <a href={link} rel="nofollow" title={translateString('Edit media')} className="edit-media">
+      {translateString('EDIT MEDIA')}
    </a>
  );
 }
@ -92,8 +94,8 @@ function EditSubtitleButton(props) {
  }

  return (
-    <a href={link} rel="nofollow" title={translateString("Edit subtitle")} className="edit-subtitle">
-      {translateString("EDIT SUBTITLE")}
+    <a href={link} rel="nofollow" title={translateString('Edit subtitle')} className="edit-subtitle">
+      {translateString('EDIT SUBTITLE')}
    </a>
  );
 }
@ -173,6 +175,28 @@ export default function ViewerInfoContent(props) {
  const authorLink = formatInnerLink(props.author.url, SiteContext._currentValue.url);
  const authorThumb = formatInnerLink(props.author.thumb, SiteContext._currentValue.url);

+  function setTimestampAnchors(text) {
+    function wrapTimestampWithAnchor(match, string) {
+      let split = match.split(':'),
+        s = 0,
+        m = 1;
+      let searchParameters = new URLSearchParams(window.location.search);
+
+      while (split.length > 0) {
+        s += m * parseInt(split.pop(), 10);
+        m *= 60;
+      }
+      searchParameters.set('t', s);
+
+      const wrapped =
+        '<a href="' + MediaPageStore.get('media-url').split('?')[0] + '?' + searchParameters + '">' + match + '</a>';
+      return wrapped;
+    }
+
+    const timeRegex = new RegExp('((\\d)?\\d:)?(\\d)?\\d:\\d\\d', 'g');
+    return text.replace(timeRegex, wrapTimestampWithAnchor);
+  }
+
  return (
    <div className="media-info-content">
      {void 0 === PageStore.get('config-media-item').displayAuthor ||
@ -185,11 +209,10 @@ export default function ViewerInfoContent(props) {
        <div className="media-content-banner-inner">
          {hasSummary ? <div className="media-content-summary">{summary}</div> : null}
          {(!hasSummary || isContentVisible) && description ? (
-            PageStore.get('config-options').pages.media.htmlInDescription ? (
-              <div className="media-content-description" dangerouslySetInnerHTML={{ __html: description }}></div>
-            ) : (
-              <div className="media-content-description">{description}</div>
-            )
+            <div
+              className="media-content-description"
+              dangerouslySetInnerHTML={{ __html: setTimestampAnchors(description) }}
+            ></div>
          ) : null}
          {hasSummary ? (
            <button className="load-more" onClick={onClickLoadMore}>
@ -197,7 +220,11 @@ export default function ViewerInfoContent(props) {
            </button>
          ) : null}
          {tagsContent.length ? (
-            <MediaMetaField value={tagsContent} title={1 < tagsContent.length ? translateString('Tags') : translateString('Tag')} id="tags" />
+            <MediaMetaField
+              value={tagsContent}
+              title={1 < tagsContent.length ? translateString('Tags') : translateString('Tag')}
+              id="tags"
+            />
          ) : null}
          {categoriesContent.length ? (
            <MediaMetaField
@ -217,7 +244,7 @@ export default function ViewerInfoContent(props) {
              ) : null}

              <PopupTrigger contentRef={popupContentRef}>
-                <button className="remove-media">{translateString("DELETE MEDIA")}</button>
+                <button className="remove-media">{translateString('DELETE MEDIA')}</button>
              </PopupTrigger>

              <PopupContent contentRef={popupContentRef}>
--- a/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
+++ b/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
@ -589,27 +589,46 @@ function findGetParameter(parameterName) {
  return result;
 }

-function handleCanvas(canvasElem) {
-  const Player = videojs(canvasElem);
-  Player.playsinline(true);
-  // TODO: Make them work only in embedded player...?
-  if (findGetParameter('muted') == 1) {
-    Player.muted(true);
-  }
-  if (findGetParameter('time') >= 0) {
-    Player.currentTime(findGetParameter('time'));
-  }
-  if (findGetParameter('autoplay') == 1) {
-    Player.play();
-  }
+ function handleCanvas(videoElem) { // Make sure it's a video element
+  
+  if (!videoElem || !videoElem.tagName || videoElem.tagName.toLowerCase() !== 'video') {
+    console.error('Invalid video element:', videoElem);
+    return;
  }

-const observer = new MutationObserver(function (mutations, me) {
-  const canvas = document.querySelector('.video-js.vjs-mediacms video');
-  if (canvas) {
-    handleCanvas(canvas);
+  const Player = videojs(videoElem);
+  Player.playsinline(true);
+
+  Player.on('loadedmetadata', function () {
+    const muted = parseInt(findGetParameter('muted'));
+    const autoplay = parseInt(findGetParameter('autoplay'));
+    const timestamp = parseInt(findGetParameter('t'));
+
+    if (muted == 1) {
+      Player.muted(true);
+    }
+    
+    if (timestamp >= 0 && timestamp < Player.duration()) {
+      // Start the video from the given time
+      Player.currentTime(timestamp);
+    } else if (timestamp >= 0 && timestamp >= Player.duration()) {
+      // Restart the video if the given time is greater than the duration
+      Player.play();
+    }
+    if (autoplay === 1) {
+      Player.play();
+    }
+  });
+}
+
+const observer = new MutationObserver((mutations, me) => {
+  const playerContainer = document.querySelector('.video-js.vjs-mediacms');
+  if (playerContainer) {
+    const video = playerContainer.querySelector('video');
+    if (video) {
+      handleCanvas(video);
      me.disconnect();
-    return;
+    }
  }
 });

--- a/frontend/src/static/js/components/video-player/VideoPlayer.jsx
+++ b/frontend/src/static/js/components/video-player/VideoPlayer.jsx
@ -192,12 +192,14 @@ export function VideoPlayer(props) {
      document.addEventListener('visibilitychange', initPlayer);
    }

+    /*
+      // We don't need this because we have a custom function in frontend/src/static/js/components/media-viewer/VideoViewer/index.js:617
      player && player.player.one('loadedmetadata', () => {
      const urlParams = new URLSearchParams(window.location.search);
      const paramT = Number(urlParams.get('t'));
      const timestamp = !isNaN(paramT) ? paramT : 0;
      player.player.currentTime(timestamp);
-    });
+    }); */

    return () => {
      unsetPlayer();
--- a/frontend/src/static/js/utils/helpers/requests.js
+++ b/frontend/src/static/js/utils/helpers/requests.js
@ -1,4 +1,4 @@
-import axios, { get as axiosGet, post as axiosPost, put as axiosPut } from 'axios';
+import axios from 'axios';

 export async function getRequest(url, sync, callback, errorCallback) {
  const requestConfig = {
@ -44,11 +44,11 @@ export async function getRequest(url, sync, callback, errorCallback) {
  }

  if (sync) {
-    await axiosGet(url, requestConfig)
+    await axios.get(url, requestConfig)
      .then(responseHandler)
      .catch(errorHandler || null);
  } else {
-    axiosGet(url, requestConfig)
+    axios.get(url, requestConfig)
      .then(responseHandler)
      .catch(errorHandler || null);
  }
@ -70,11 +70,11 @@ export async function postRequest(url, postData, configData, sync, callback, err
  }

  if (sync) {
-    await axiosPost(url, postData, configData || null)
+    await axios.post(url, postData, configData || null)
      .then(responseHandler)
      .catch(errorHandler || null);
  } else {
-    axiosPost(url, postData, configData || null)
+    axios.post(url, postData, configData || null)
      .then(responseHandler)
      .catch(errorHandler || null);
  }
@ -96,11 +96,11 @@ export async function putRequest(url, putData, configData, sync, callback, error
  }

  if (sync) {
-    await axiosPut(url, putData, configData || null)
+    await axios.put(url, putData, configData || null)
      .then(responseHandler)
      .catch(errorHandler || null);
  } else {
-    axiosPut(url, putData, configData || null)
+    axios.put(url, putData, configData || null)
      .then(responseHandler)
      .catch(errorHandler || null);
  }
--- a/static/12a4b90d32744616116e.png
+++ b/static/12a4b90d32744616116e.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACTUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9E7JV4AAAAwdFJOUwAV7vMX/P76JPECqkdDdSb3cYwcciM4cPXhTukYEA7vdynyKF/lCeL7OnjtT3MSHhkh8ZcAAACHSURBVDjL7dK3DsJQDIXhPwlpdEKvoSWUBPD7Px0XBqYbs8AEZ7P1SZasAz8cseRrpDhfDjoJSjgdVRLe4BrrJILa58h8PZ7qJJjBKFSJP4RlqpMdrNxq4plDGzMnIg07yTORifNYtJp1O2HvbgfVZXgSFn3eEbVSfkcn5lWxo5Oe123zzyt3Bd0ph0DZVBoAAAAASUVORK5CYII="
--- a/static/343ae76c75fa3e79d787.png
+++ b/static/343ae76c75fa3e79d787.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAqtJREFUeNrsmE9LVFEYxueOM6NJiqLpVDgLFaONklBiVBQolZqRJRZlH6Ft22pXy75A+BVs0SaohkrBibDEINLShf0RG7O0dNLb88pz43C9M3POHbNZ+MKPweG95z7n/XfOaNm2HcgHCwbyxPJGSOg/vXcnOAWugmYwYG1xjTSBPtAL6pXvv21FRMpAF+gHJ0DYw2f+Xwo5BC6Dc6Ami+/4ZgupBme4+6PA0nwusRlC5GVH+PKzoCqN3yLZ5SHwRS5CJNw94BJoyeC3BmbBDxD1ELEMxkI+2v04204KsDyLv0TgM8WI8EIPnykwrSukji0nu2/U8F9lFJJgB4hlmFljIJVJSDFoA1fAaQ4hHVugiF+gFOwBBRn8R9JN1v3gIgfPPoO0pShggakoZ01kO0YSqpAS0MHdSxSKDGtHUjBHMWIVbOWARg29cYRI3m+5Rq6uScV/4YIWqWCL6tg78NERchdUGgqQA+oro7CmtGS1RiepNsrn1/MnI/ietJDmw0v0naUgR0TUUMT6IPs7FZXTVyr8MOgG7R6pWmUEkhQQVD53G3SVajKRn7mFqCa9fxB0klrwiTURVCZmiO1Z7EOEpLaBmwvo3EdE1H2KSSkiImBvmmmpY8Og1eSq+BM8V1raZgRiOYgQe+nnzhpnjagHWa6W8CNEqnuGNRHkQSat992nCJvPGwtJMpSFyh1EjvXXzkAyNCn8t35/TjxRWtbmQSYpmuSYnjNYa9wdTRMhQ3LJZTScGgkzXdd4R33sp1BNhUxxJxFGxLmN3wQPGZmT4I7GWiO5CJGXP2UEwvz7Bnig+KyA6+ACC9rLfrO2XKtjoBnQBCZAHLRn8a0Hj+yN9gEUuf1NhcgkPgBimv4RcNslZNDL11SIX86DV+A9OOblY23/f8RlfwQYAHTF0+BsYemdAAAAAElFTkSuQmCC"
--- a/static/4be63bf521d5ce87496b.png
+++ b/static/4be63bf521d5ce87496b.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAEvUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////6vRm/YAAABkdFJOUwDUHSjBZQX0/fXce78bwhKp8ife/sBVooz6bM7GqtWAAWtRiREh2/c5le8ZYjUIEMlyMJKU7Abi7mf28yxg+z5v4XY8KgdXX0ywIiBkU6ihAytd3x9QslJ98S27aS74W6NhSyVzU6IoAAAA8ElEQVQ4y+2TRXIDQRAEW9KiGM3MzEwyMzNj/v8Nng3r2Ot9gF2n7Ig8zEzXiPz57Oc31lhI22NhwtEttUyM6sbhFRzsbVUX01AY0AzH4uHmByehr0dRLuFO5DoX8CCkFMXiSeTeny8a7u0npigFnuXRHLUpGGI0Kgp8im2UumBoAUXxeZMPWIob7mjDVZQK7/LiUQl42KVZUU54/boosxnwCLRrD3NG8Rh2DY0nGYpryo59fgrZjDOVhc6QJTklXJaT5lrdYXvc9lhPzeJbXaFdWKW8IrlE5pe6zFCai2hUnumo0rV6iSilof7/b9byDZ5WLQHgKwvDAAAAAElFTkSuQmCC"
--- a/static/511accb32ccb8952c708.png
+++ b/static/511accb32ccb8952c708.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAFBUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////26H9vQAAABqdFJOUwDF5PXttuge4gwT9zHUThZf2vMD8UXAeFfLmmxaNwrb6q+iqtYCCLEZYxC1aIJvuyog52Vdh88BBTrMM4+ocKfVKKwl9Lmj3Eot8rec+d2pMBpQ/lSknrJ3s/bYXHrTsPzwaXGS35bmgfvR//llAAAA/klEQVQ4y2NgGAVAwC9mK+AsyubuiVuJhIiTA5NXVpY9biVSbgzCjhxZWay4lVjZAQlRMVdrnCo42SwJudaAA7+8IZ8uK4upCY85Nkk5di4GD2+XLDAIljS2UAMKoABZFW4jxiwkYMbLrSCAooQ3CwsQQlECEZP08QNLhYVD+ChKFEEiHJwMAb5AWpqBIRLEF0SNGG2IUCAzkJZhYAgFUvI8qO7VAWnzDwI7mUkiAqRSGc3TmpiuVUJToiGCoYQPPez0QKJpUqmZCemssVFAtroqRvjaAIXZUqSTZJIz4oBMfS0scRASDTKIORFEsogLY08HMfFMYHlGcfaRnj0B5hlVM2lFOakAAAAASUVORK5CYII="
--- a/static/58660785272880d26189.png
+++ b/static/58660785272880d26189.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAByUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////15YQcQAAAAldFJOUwDv/H2h5Av1HIP08a9dXifgIuUbCoCsBBDStN7ykomBlOcZgiYhB3iQAAAAdUlEQVQ4y+3QuwKCMAyF4ZYmAYsXBFS8Iuh5/1e0Do5NdvVf+w0nde6fc5tljcJrYtvgnUYIFulbwIf1SiFdCdz1sVUio06GCAR1K+0L4Eh0zRJ8OtvklCXMU3q/MO+yROSZLrqJHJTBcyIP+18W30WiSX6jFy5aDFqlCyGCAAAAAElFTkSuQmCC"
--- a/static/7b2a1c20f5cbcbc112ad.png
+++ b/static/7b2a1c20f5cbcbc112ad.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wOj5kwAAAA/dFJOUwDtO9fWOjRj0LlD/kr9K9OTvzCLBjNc+B45YpJxQIoP4U7R34kSVVKH8AnO3UYvCB3mLEVoSeh+PCo9Qdk1wa0WUTEAAACgSURBVDjL5dBHDsJADAVQQwglCb333nvv/PvfCpslaJwtUrwY64+eLM8QBbgKmWQ6p5M6gF5bJZBaqqQvZKeS8ALu2Wff9fHqIzb7y/1JdPM8h2ajQatW+SEHXuVF9AC2q7nsFSp9kxjfJojiwMn6vA7llJHIBFfOvJlMx0O7wz1rJhOODe4RM+lydLhbZtKUn9SnVDkWdWJzjP45CVS9AX9hKlcwUFOvAAAAAElFTkSuQmCC"
--- a/static/93563bdd203ec60a90ce.png
+++ b/static/93563bdd203ec60a90ce.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACNUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wOLM4UAAAAudFJOUwBZI01MWOMB1PjN4fpX6AJFKgaxvN/84kie9VUJ3iB+3Ar7B1/zr0tWE8O71brPIxWiAAAAlElEQVQ4y+3T2Q6CQAwF0AGVzgAK7gsqCrjr/f/PkxmNby0kPmqfT9J7m1Sp/6ixMZksRlPAk8kCQE8UZViTviQux1rASxLiRL6xAoG+3ziCzwy+IKGOXov0gyNEHReXiPhKJzSVVl00nq4tOYvExa1Eklpy3e7XPPFn1hyiHU9o8j6vsGk4d6KQ0vjLwMTx6ucf9An38RQWgYRfawAAAABJRU5ErkJggg=="
--- a/static/ae3190653e111006c189.png
+++ b/static/ae3190653e111006c189.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3xJREFUeNrMmGtIFFEUx91V0R5m5pYfRNKwtxlh5YcMelAYlEVSURAYQRFFIGWhCEKEQWkRJRFEH4JAoaLHh+yBRiGlIgmlVJhkiGKSVJaaptv/wn/gdJvZnZ3xgxd+3Nk759z9z70755y7Hr/fHzYRWoQD+0ywln0q8AEvGAE94D2oAzXgje2Z1YrYIAYcBc1++20EPAXb7XyHx8bWbAVnwEIx9gW8Bh9AL1djCkgEi8ESMEnYPwLHwVunK1KqPeVzsBvMDOI3F5wE7cK3D+yw8gk02RUxSQ/Is7mNkhmgXMwzCvaFIuS0cG4A8xyIkOwEP4WYbXaE5AoRz0CcSxEG2WBQbNPcQEISQDeNW0H8OIkwyBMPWQ08VkIu0mgIZGr3osEhcAFkuBBzTYjZbCYkCfTT4LLmrJTfEBM0gQiHQnygi/PUmgkp4M0BkKo5q89/tFc528WqFHEONWeaGvOKkJLDXoXnNi3cpIBwbewg8DhMLTfBAOfcGMYcoVoCo2EYc8R/cc9kLB1EOhTSAZp4vVoKSQaxvG4xcWwF/eLzECgCwy4SbjP7+VLILGHQa+LUBe6Iz0pslcvM38neJ4XIBDVi4VgKfvF6KdjjUshv9uFSyIAwmGrhqDJtiahLKkCGCyEx7MekkB5hkBjA+Ty4xevp4D7I0mzUg5SBXJM3TbbZ7L/KMsDH+K/aORtF0gsRT1TcKRE5qVLce8XCyCz41dPmgR7QakTU9NhI70+0APcJ1FlUa2s0/2Q+gGqFupB8Ee1W2oiO0cw7ozbKxjTN9xjHx4y8ZZVrqkII11ngtkjxeivX7CeDNt5rBF6z7HtVFC8bQswfC5ivqllkq73fZWJXLETutSoDtgijChdJzWsxvkqsnFqNSOOeV3ul5ojruy5ixJjJ2CJQCaKZGo78Ezw1xcZr2c4f43hVZutAp1jtw4FqVrXHwzQs0161A3YPShpxLMSHhYjiYFV8oTih7WdZ+Bj8EJPU8GwyLYiAFHACfBS+g5wz4ElP/VbqwXLur9q7qCD1xEuebbtpH8sCahlYIXKJao0gn0VXwJNeukkpqNo7cAnkgFOgwx9aa+HvIcru2fcsKOBqqDPtQ9Ik0rWR6NaDTVy9JCY549+A71ytBvrXsogK2gwh18FncI+Vk50/TdSXx4M4loyDoA98c/K+eybKHzV/BRgAh7+w9CsbY+IAAAAASUVORK5CYII="
--- a/static/bd03783f2c36604957ce.png
+++ b/static/bd03783f2c36604957ce.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAEyUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////y3XQVoAAABldFJOUwD58/UHdPfeCA/73AbGQNLASif4Iu9q32O19ioCUm20Pk7LA+rZ5oJRZjIJuUY510RcqJlrF4BghVR85JgLMd3OV76GOPCD+uHb8SCmpIR3/fSd7dC3reLMFQFkN47Rwn+ifuctQEA1MAAAASpJREFUOMvlk2VyAzEMhbXQbbwbarBJyszMlCZlxqTM9f2v0FpyKu9MbxD92feeP2vGshegGete/pY3gzomsbppZTOpTLEHbjAtYDhHSNlFN0ouDjX8eikVLq6jaY0o4ybQxDqgndgl3DhvIHphFeDhDlVeqPiCEXGEekLFL0QvKN3CyDnK9JiKSx6aQISQZwvlMB3umtp8MuKCuEXVFyEkZaO1vxtIPvpYR2FNNaa3Qm3eXI0UnwqUrP0NWAxS8gHv0qwhwZfQq7PXrxAiR4yL2pD/ltPGiEiElq7SWngGs5U1iGwpc6bl8S4zkw4janS5S9KHJ8zEBxhRj6Hik6lGmckkzS4As9rtG8fqX56mMKCNOXJ7oUc63nkaOAf2jrZdtm9Z/nZT/q8/+2CSW2b1+zIAAAAASUVORK5CYII="
--- a/static/c70c7108060bd3b62a56.png
+++ b/static/c70c7108060bd3b62a56.png
@ -0,0 +1 @@
+export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAEmUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9wGqaEAAABhdFJOUwDkQe3zAQL+D3YMY/CuGGX0hz05lLgcNZmSoSn47tyr5+gyfrcdYUW7yOnQjVcNS7qa1QrP5gX9UlnDgW53xQbBetrjCGi+RIlJbYPGJQNOwurgn9Ei9d17fSeoj/ErQILt/8VjAAAA8ElEQVQ4y2NgGLGAjRWJIy3PkmjqwcHAIOSLJGpjiWCryyaCgI9XgJsLkhKrRAsYU1UxEQqcPZkQKuyNEs2tzSBsZZiKxEBGfyRTHIAiJvpsIKYKXAmzO7JzbcFi2pxKXAwacCXeKD4ytoOIsitoasGVOCKr0NMRZEnEAGoophgksmMqEUZRooupIJGRAzV4DTGVSKHFgJ+rE7oSJjQlXMEhaCpEMSIyAU2FjDhmZAuiKuHEliDiIoIQKiSwphmOSAG4ChFWdNkooXjuaB64Ah5uTANCY2IRdjBLimG1hY+fNzwskV1Ajpefj2EUMDAAAAd7bXotJnBBAAAAAElFTkSuQmCC"
--- a/static/css/_commons.css
+++ b/static/css/_commons.css
--- a/static/css/add-media.css
+++ b/static/css/add-media.css
--- a/static/css/history.css
+++ b/static/css/history.css
--- a/static/css/liked.css
+++ b/static/css/liked.css
--- a/static/css/media.css
+++ b/static/css/media.css
--- a/static/css/playlist.css
+++ b/static/css/playlist.css
--- a/static/css/profile-about.css
+++ b/static/css/profile-about.css
--- a/static/css/profile-media.css
+++ b/static/css/profile-media.css
--- a/static/css/profile-playlists.css
+++ b/static/css/profile-playlists.css
--- a/static/js/_commons.js
+++ b/static/js/_commons.js
--- a/static/js/_commons.js.LICENSE.txt
+++ b/static/js/_commons.js.LICENSE.txt
@ -78,7 +78,7 @@ object-assign
 */

 /**!
- * Sortable 1.13.0
+ * Sortable 1.15.6
 * @author	RubaXa   <trash@rubaxa.org>
 * @author	owenm    <owen23355@gmail.com>
 * @license MIT
--- a/static/js/about.js
+++ b/static/js/about.js
--- a/static/js/add-media.js
+++ b/static/js/add-media.js
--- a/static/js/base.js
+++ b/static/js/base.js
--- a/static/js/categories.js
+++ b/static/js/categories.js
--- a/static/js/embed.js
+++ b/static/js/embed.js
--- a/static/js/featured.js
+++ b/static/js/featured.js
--- a/static/js/history.js
+++ b/static/js/history.js
--- a/static/js/index.js
+++ b/static/js/index.js
--- a/static/js/latest.js
+++ b/static/js/latest.js
--- a/static/js/liked.js
+++ b/static/js/liked.js
--- a/static/js/manage-comments.js
+++ b/static/js/manage-comments.js
--- a/static/js/manage-media.js
+++ b/static/js/manage-media.js
--- a/static/js/manage-users.js
+++ b/static/js/manage-users.js
--- a/static/js/media.js
+++ b/static/js/media.js
--- a/static/js/media.js.LICENSE.txt
+++ b/static/js/media.js.LICENSE.txt
@ -0,0 +1,2 @@
+/*! videojs-markers - v1.0.1 - 2018-02-03
+  * Copyright (c) 2018 ; Licensed  */
--- a/static/js/members.js
+++ b/static/js/members.js
--- a/static/js/playlist.js
+++ b/static/js/playlist.js
--- a/static/js/profile-about.js
+++ b/static/js/profile-about.js
--- a/static/js/profile-media.js
+++ b/static/js/profile-media.js
--- a/static/js/profile-playlists.js
+++ b/static/js/profile-playlists.js
--- a/static/js/recommended.js
+++ b/static/js/recommended.js
--- a/static/js/search.js
+++ b/static/js/search.js
--- a/static/js/tags.js
+++ b/static/js/tags.js
--- a/static/lib/file-uploader/5.13.0/fine-uploader.js
+++ b/static/lib/file-uploader/5.13.0/fine-uploader.js
--- a/static/lib/file-uploader/5.13.0/fine-uploader.min.js
+++ b/static/lib/file-uploader/5.13.0/fine-uploader.min.js
--- a/static/lib/video-js/7.20.2/video.cjs.js
+++ b/static/lib/video-js/7.20.2/video.cjs.js
--- a/static/lib/video-js/7.20.2/video.es.js
+++ b/static/lib/video-js/7.20.2/video.es.js
--- a/static/lib/video-js/7.20.2/video.js
+++ b/static/lib/video-js/7.20.2/video.js
--- a/static/lib/video-js/7.20.2/video.min.js
+++ b/static/lib/video-js/7.20.2/video.min.js
				`@ -0,0 +1 @@`
				export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACTUExURQAAAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9E7JV4AAAAwdFJOUwAV7vMX/P76JPECqkdDdSb3cYwcciM4cPXhTukYEA7vdynyKF/lCeL7OnjtT3MSHhkh8ZcAAACHSURBVDjL7dK3DsJQDIXhPwlpdEKvoSWUBPD7Px0XBqYbs8AEZ7P1SZasAz8cseRrpDhfDjoJSjgdVRLe4BrrJILa58h8PZ7qJJjBKFSJP4RlqpMdrNxq4plDGzMnIg07yTORifNYtJp1O2HvbgfVZXgSFn3eEbVSfkcn5lWxo5Oe123zzyt3Bd0ph0DZVBoAAAAASUVORK5CYII="