Feat fix precommit (#280)

* add version file, fix pre-commit

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

.github/workflows/python.yml

@@ -0,0 +1,35 @@
+name: Python Tests
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v1
+
+    - name: Build the Stack
+      run:  docker-compose -f docker-compose-dev.yaml build
+
+    - name: Start containers
+      run: docker-compose -f docker-compose-dev.yaml up -d
+
+    - name: List containers
+      run: docker ps
+
+    - name: Sleep for 60 seconds
+      run: sleep 60s
+      shell: bash
+
+    - name: Run Django Tests
+      run: docker-compose -f docker-compose-dev.yaml exec --env TESTING=True -T web pytest
+
+    - name: Tear down the Stack
+      run:  docker-compose -f docker-compose-dev.yaml down

.gitignore

@@ -12,5 +12,6 @@ static/ckeditor/
 static/debug_toolbar/
 static/mptt/
 static/rest_framework/
+static/drf-yasg
 cms/local_settings.py
 deploy/docker/local_settings.py

Dockerfile

@@ -7,7 +7,7 @@ ENV VIRTUAL_ENV=/home/mediacms.io
 ENV PATH="$VIRTUAL_ENV/bin:$PATH"
 ENV PIP_NO_CACHE_DIR=1
 
-RUN mkdir -p /home/mediacms.io/mediacms/{logs,pids} && cd /home/mediacms.io && python3 -m venv $VIRTUAL_ENV
+RUN mkdir -p /home/mediacms.io/mediacms/{logs} && cd /home/mediacms.io && python3 -m venv $VIRTUAL_ENV
 
 # Install dependencies:
 COPY requirements.txt .
@@ -28,9 +28,6 @@ FROM python:3.8-slim-buster as runtime-image
 
 ENV PYTHONUNBUFFERED=1
 ENV PYTHONDONTWRITEBYTECODE=1
-ENV ADMIN_USER='admin'
-ENV ADMIN_PASSWORD='mediacms'
-ENV ADMIN_EMAIL='admin@localhost'
 
 # See: https://github.com/celery/celery/issues/6285#issuecomment-715316219
 ENV CELERY_APP='cms'
@@ -50,11 +47,17 @@ ENV PATH="$VIRTUAL_ENV/bin:$PATH"
 COPY --chown=www-data:www-data --from=compile-image /home/mediacms.io /home/mediacms.io
 
 RUN apt-get update -y && apt-get -y upgrade && apt-get install --no-install-recommends \
-    supervisor nginx ffmpeg imagemagick procps -y && \
+    supervisor nginx imagemagick procps wget xz-utils -y && \
     rm -rf /var/lib/apt/lists/* && \
     apt-get purge --auto-remove && \
     apt-get clean
 
+RUN wget -q https://johnvansickle.com/ffmpeg/releases/ffmpeg-release-amd64-static.tar.xz && \
+    mkdir -p ffmpeg-tmp && \
+    tar -xf ffmpeg-release-amd64-static.tar.xz --strip-components 1 -C ffmpeg-tmp && \
+    cp -v ffmpeg-tmp/ffmpeg ffmpeg-tmp/ffprobe ffmpeg-tmp/qt-faststart /usr/local/bin && \
+    rm -rf ffmpeg-tmp ffmpeg-release-amd64-static.tar.xz
+
 WORKDIR /home/mediacms.io/mediacms
 
 EXPOSE 9000 80

Dockerfile-dev

@@ -0,0 +1,16 @@
+FROM mediacms/mediacms:latest
+
+SHELL ["/bin/bash", "-c"]
+
+# Set up virtualenv
+ENV VIRTUAL_ENV=/home/mediacms.io
+ENV PATH="$VIRTUAL_ENV/bin:$PATH"
+ENV PIP_NO_CACHE_DIR=1
+
+RUN cd /home/mediacms.io && python3 -m venv $VIRTUAL_ENV
+
+COPY requirements.txt . 
+COPY requirements-dev.txt .
+RUN pip install -r requirements-dev.txt
+
+WORKDIR /home/mediacms.io/mediacms

README.md

@@ -1,4 +1,13 @@
-![MediaCMS](static/images/logo_dark.png)
+# MediaCMS
+
+[![Code Quality: Cpp](https://img.shields.io/lgtm/grade/python/g/mediacms-io/mediacms.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/mediacms-io/mediacms/context:python)
+[![Code Quality: Cpp](https://img.shields.io/lgtm/grade/javascript/g/mediacms-io/mediacms.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/mediacms-io/mediacms/context:javascript)
+<br/>
+[![GitHub license](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](https://raw.githubusercontent.com/mediacms-io/mediacms/main/LICENSE.txt)
+[![Releases](https://img.shields.io/github/v/release/mediacms-io/mediacms?color=green)](https://github.com/mediacms-io/mediacms/releases/)
+[![DockerHub](https://img.shields.io/docker/pulls/mediacms/mediacms)](https://hub.docker.com/repository/docker/mediacms/mediacms/)
+
+
 
 MediaCMS is a modern, fully featured open source video and media CMS. It is developed to meet the needs of modern web platforms for viewing and sharing media. It can be used to build a small to medium video and media portal within minutes. 
 
@@ -34,6 +43,7 @@ A demo is available at https://demo.mediacms.io
 - **Subtitles/CC**: support for multilingual subtitle files
 - **Scalable transcoding**: transcoding through priorities. Experimental support for remote workers
 - **Chunked file uploads**: for pausable/resumable upload of content
+- **REST API**: Documented through Swagger
 
 
 ## Example cases
@@ -73,95 +83,37 @@ For a small to medium installation, with a few hours of video uploaded daily, an
 In terms of disk space, think of what the needs will be. A general rule is to multiply by three the size of the expected uploaded videos (since the system keeps original versions, encoded versions plus HLS), so if you receive 1G of videos daily and maintain all of them, you should consider a 1T disk across a year (1G * 3 * 365).
 
 
-## Installation
+## Releases
 
-There are two ways to run MediaCMS, through Docker Compose and through installing it on a server via an automation script that installs and configures all needed services.
-
-### Docker Compose installation
-Install a recent version of [Docker](https://docs.docker.com/get-docker/), and [Docker Compose](https://docs.docker.com/compose/install/).
-
-Run as root
-
-```bash
-git clone https://github.com/mediacms-io/mediacms
-cd mediacms
-```
-
-The default option is to serve MediaCMS on all ips available of the server (including localhost).
-
-Now run
-
-```bash
-docker-compose up
-```
-
-This will download all MediaCMS related Docker images and start all containers. Once it finishes, MediaCMS will be installed and available on http://localhost or http://ip
-
-For more instructions, checkout the docs on the [Docker deployment](docs/Docker_deployment.md) page. Docker Compose support has been contributed by @swiftugandan.
+Visit [Releases Page](https://github.com/mediacms-io/mediacms/releases) for detailed Changelog
 
 
-### Single server installation
+## Installation / Maintanance
 
-The core dependencies are Python3, Django3, Celery, PostgreSQL, Redis, ffmpeg. Any system that can have these dependencies installed, can run MediaCMS. But we strongly suggest installing on Linux Ubuntu 18 or 20 versions.
+There are two ways to run MediaCMS, through Docker Compose and through installing it on a server via an automation script that installs and configures all needed services. Find the related pages:
 
-Installation on a Ubuntu 18 or 20 system with git utility installed should be completed in a few minutes with the following steps.
-Make sure you run it as user root, on a clear system, since the automatic script will install and configure the following services: Celery/PostgreSQL/Redis/Nginx and will override any existing settings. 
+* [Single Server](docs/admins_docs.md#2-server-installation) page
+* [Docker Compose](docs/admins_docs.md#3-docker-installation) page
 
-Automated script - tested on Ubuntu 18, Ubuntu 20, and Debian Buster
+## Configuration
 
-```bash
-mkdir /home/mediacms.io && cd /home/mediacms.io/
-git clone https://github.com/mediacms-io/mediacms
-cd /home/mediacms.io/mediacms/ && bash ./install.sh
-```
-
-The script will ask if you have a URL where you want to deploy MediaCMS, otherwise it will use localhost. If you provide a URL, it will use Let's Encrypt service to install a valid ssl certificate. 
+Visit [Configuration](docs/admins_docs.md#5-configuration) page.
 
 
-## Update
-
-If you've used the above way to install MediaCMS, update with the following:
-
-```bash
-cd /home/mediacms.io/mediacms # enter mediacms directory
-source  /home/mediacms.io/bin/activate # use virtualenv
-git pull # update code
-python manage.py migrate # run Django migrations
-sudo systemctl restart mediacms celery_long celery_short # restart services
-```
-
-
-## Configure
-
-Several options are available on cms/settings.py, most of the things that are allowed or should be disallowed are described there. It is advisable to override any of them by adding it to cms/local_settings.py. All configuration options will be documented gradually on the [Configuration](docs/Configuration.md) page.
-
-## Authors
-MediaCMS is developed by Yiannis Stergiou and Markos Gogoulos. We are Wordgames - https://wordgames.gr. 
+## Documentation
+* [Users documentation](docs/user_docs.md) page
+* [Administrators documentation](docs/admins_docs.md) page
+* [Developers documentation](docs/developers_docs.md) page
 
 
 ## Technology
-This software uses the following list of awesome technologies:
-- Python
-- Django
-- Django Rest Framework
-- Celery
-- PostgreSQL
-- Redis
-- Nginx
-- uWSGI
-- React
-- Fine Uploader
-- video.js
-- FFMPEG
-- Bento4
+This software uses the following list of awesome technologies: Python, Django, Django Rest Framework, Celery, PostgreSQL, Redis, Nginx, uWSGI, React, Fine Uploader, video.js, FFMPEG, Bento4
 
 
 ## Who is using it
 
 - **Cinemata** non-profit media, technology and culture organization - https://cinemata.org
-
 - **Critical Commons** public media archive and fair use advocacy network - https://criticalcommons.org
-
 - **Heritales** International Heritage Film Festival - https://stage.heritales.org
 
 
@@ -176,12 +128,6 @@ If you like the project, here's a few things you can do
 - Star the project
 - Add functionality, work on a PR, fix an issue! 
 
-## Developers info
-
-- API documentation available under /swagger URL (example https://demo.mediacms.io/swagger/)
-- We're working on proper documentation for users, managers and developers, until then checkout what's available on the docs/ folder of this repository
-- Before you send a PR, make sure your code is properly formatted. For that, use `pre-commit install` to install a pre-commit hook and run `pre-commit run --all` and fix everything before you commit. This pre-commit will check for your code lint everytime you commit a code.
-- Checkout the [Code of conduct page](CODE_OF_CONDUCT.md) if you want to contribute to this repository
 
 ## Contact
 info@mediacms.io

cms/settings.py

@@ -146,10 +146,13 @@ STATIC_ROOT = BASE_DIR + "/static/"
 # where uploaded + encoded media are stored
 MEDIA_ROOT = BASE_DIR + "/media_files/"
 
-MEDIA_UPLOAD_DIR = os.path.join(MEDIA_ROOT, "original/")
-MEDIA_ENCODING_DIR = os.path.join(MEDIA_ROOT, "encoded/")
-THUMBNAIL_UPLOAD_DIR = os.path.join(MEDIA_UPLOAD_DIR, "thumbnails/")
-SUBTITLES_UPLOAD_DIR = os.path.join(MEDIA_UPLOAD_DIR, "subtitles/")
+# these used to be os.path.join(MEDIA_ROOT, "folder/") but update to
+# Django 3.1.9 requires not absolute paths to be utilized...
+
+MEDIA_UPLOAD_DIR = "original/"
+MEDIA_ENCODING_DIR = "encoded/"
+THUMBNAIL_UPLOAD_DIR = f"{MEDIA_UPLOAD_DIR}/thumbnails/"
+SUBTITLES_UPLOAD_DIR = f"{MEDIA_UPLOAD_DIR}/subtitles/"
 HLS_DIR = os.path.join(MEDIA_ROOT, "hls/")
 
 FFMPEG_COMMAND = "ffmpeg"  # this is the path
@@ -349,6 +352,16 @@ FILE_UPLOAD_HANDLERS = [
 
 LOGS_DIR = os.path.join(BASE_DIR, "logs")
 
+error_filename = os.path.join(LOGS_DIR, "debug.log")
+if not os.path.exists(LOGS_DIR):
+    try:
+        os.mkdir(LOGS_DIR)
+    except PermissionError:
+        pass
+
+if not os.path.isfile(error_filename):
+    open(error_filename, 'a').close()
+
 LOGGING = {
     "version": 1,
     "disable_existing_loggers": False,
@@ -356,7 +369,7 @@ LOGGING = {
         "file": {
             "level": "ERROR",
             "class": "logging.FileHandler",
-            "filename": os.path.join(LOGS_DIR, "debug.log"),
+            "filename": error_filename,
         },
     },
     "loggers": {
@@ -427,9 +440,20 @@ CELERY_BEAT_SCHEDULE = {
 
 LOCAL_INSTALL = False
 
+# this is an option to make the whole portal available to logged in users only
+# it is placed here so it can be overrided on local_settings.py
+GLOBAL_LOGIN_REQUIRED = False
+
+# TODO: separate settings on production/development more properly, for now
+# this should be ok
+CELERY_TASK_ALWAYS_EAGER = False
+if os.environ.get("TESTING"):
+    CELERY_TASK_ALWAYS_EAGER = True
+
+
 try:
     # keep a local_settings.py file for local overrides
-    from .local_settings import *
+    from .local_settings import *  # noqa
 
     # ALLOWED_HOSTS needs a url/ip
     ALLOWED_HOSTS.append(FRONTEND_HOST.replace("http://", "").replace("https://", ""))
@@ -446,3 +470,12 @@ if LOCAL_INSTALL:
     SSL_FRONTEND_HOST = FRONTEND_HOST.replace("http", "https")
 else:
     SSL_FRONTEND_HOST = FRONTEND_HOST
+
+if GLOBAL_LOGIN_REQUIRED:
+    # this should go after the AuthenticationMiddleware middleware
+    MIDDLEWARE.insert(5, "login_required.middleware.LoginRequiredMiddleware")
+    LOGIN_REQUIRED_IGNORE_PATHS = [
+        r'/accounts/login/$',
+        r'/accounts/logout/$',
+        r'/accounts/signup/$',
+    ]

cms/urls.py

@@ -1,7 +1,8 @@
 import debug_toolbar
-from django.conf.urls import include, url
+from django.conf.urls import include, re_path
 from django.contrib import admin
-from django.urls import path, re_path
+from django.urls import path
+from django.views.generic.base import TemplateView
 from drf_yasg import openapi
 from drf_yasg.views import get_schema_view
 from rest_framework.permissions import AllowAny
@@ -14,11 +15,15 @@ schema_view = get_schema_view(
 
 
 urlpatterns = [
-    url(r"^__debug__/", include(debug_toolbar.urls)),
-    url(r"^", include("files.urls")),
-    url(r"^", include("users.urls")),
-    url(r"^accounts/", include("allauth.urls")),
-    url(r"^api-auth/", include("rest_framework.urls")),
+    re_path(r"^__debug__/", include(debug_toolbar.urls)),
+    path(
+        "robots.txt",
+        TemplateView.as_view(template_name="robots.txt", content_type="text/plain"),
+    ),
+    re_path(r"^", include("files.urls")),
+    re_path(r"^", include("users.urls")),
+    re_path(r"^accounts/", include("allauth.urls")),
+    re_path(r"^api-auth/", include("rest_framework.urls")),
     path("admin/", admin.site.urls),
     re_path(r'^swagger(?P<format>\.json|\.yaml)$', schema_view.without_ui(cache_timeout=0), name='schema-json'),
     re_path(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),

conftest.py

@@ -0,0 +1,5 @@
+from pytest_factoryboy import register
+
+from tests.users.factories import UserFactory
+
+register(UserFactory)

deploy/docker/entrypoint.sh

@@ -7,11 +7,11 @@ ln -sf /dev/stdout /var/log/nginx/mediacms.io.access.log && ln -sf /dev/stderr /
 
 cp /home/mediacms.io/mediacms/deploy/docker/local_settings.py /home/mediacms.io/mediacms/cms/local_settings.py
 
-mkdir -p /home/mediacms.io/mediacms/{logs,pids,media_files/hls}
+mkdir -p /home/mediacms.io/mediacms/{logs,media_files/hls}
 touch /home/mediacms.io/mediacms/logs/debug.log
 
-# Remove any dangling pids
-rm -rf /home/mediacms.io/mediacms/pids/*
+mkdir -p /var/run/mediacms
+chown www-data:www-data /var/run/mediacms
 
 TARGET_GID=$(stat -c "%g" /home/mediacms.io/mediacms/)
 

deploy/docker/prestart.sh

@@ -4,20 +4,29 @@ RANDOM_ADMIN_PASS=`python -c "import secrets;chars = 'abcdefghijklmnopqrstuvwxyz
 ADMIN_PASSWORD=${ADMIN_PASSWORD:-$RANDOM_ADMIN_PASS}
 
 if [ X"$ENABLE_MIGRATIONS" = X"yes" ]; then
+    echo "Running migrations service"
     python manage.py migrate
-    python manage.py loaddata fixtures/encoding_profiles.json
-    python manage.py loaddata fixtures/categories.json
+    EXISTING_INSTALLATION=`echo "from users.models import User; print(User.objects.exists())" |python manage.py shell`
+    if [ "$EXISTING_INSTALLATION" = "True" ]; then 
+        echo "Loaddata has already run"
+    else
+        echo "Running loaddata and creating admin user"
+        python manage.py loaddata fixtures/encoding_profiles.json
+        python manage.py loaddata fixtures/categories.json
+
+    	# post_save, needs redis to succeed (ie. migrate depends on redis)
+        DJANGO_SUPERUSER_PASSWORD=$ADMIN_PASSWORD python manage.py createsuperuser \
+            --no-input \
+            --username=$ADMIN_USER \
+            --email=$ADMIN_EMAIL \
+            --database=default || true
+        echo "Created admin user with password: $ADMIN_PASSWORD"
+
+    fi
+    echo "RUNNING COLLECTSTATIC"
+
     python manage.py collectstatic --noinput
 
-    echo "Admin Password: $ADMIN_PASSWORD"
-
-    # post_save, needs redis to succeed (ie. migrate depends on redis)
-    DJANGO_SUPERUSER_PASSWORD=$ADMIN_PASSWORD python manage.py createsuperuser \
-        --no-input \
-        --username=$ADMIN_USER \
-        --email=$ADMIN_EMAIL \
-        --database=default || true
-
     # echo "Updating hostname ..."
     # TODO: Get the FRONTEND_HOST from cms/local_settings.py
     # echo "from django.contrib.sites.models import Site; Site.objects.update(name='$FRONTEND_HOST', domain='$FRONTEND_HOST')" | python manage.py shell

deploy/docker/reverse_proxy/client_max_body_size.conf

@@ -1 +1 @@
-client_max_body_size 1g;
+client_max_body_size 5800M;

deploy/docker/supervisord/supervisord-celery_beat.conf

@@ -9,4 +9,4 @@ user=www-data
 directory=/home/mediacms.io/mediacms
 priority=300
 startinorder=true
-command=/home/mediacms.io/bin/celery beat --pidfile=/home/mediacms.io/mediacms/pids/beat%%n.pid --loglevel=INFO --logfile=/home/mediacms.io/mediacms/logs/celery_beat.log
+command=/home/mediacms.io/bin/celery beat --pidfile=/var/run/mediacms/beat%%n.pid --loglevel=INFO --logfile=/home/mediacms.io/mediacms/logs/celery_beat.log

deploy/docker/supervisord/supervisord-celery_long.conf

@@ -10,4 +10,4 @@ directory=/home/mediacms.io/mediacms
 priority=500
 startinorder=true
 startsecs=0
-command=/home/mediacms.io/bin/celery multi start long1 --pidfile=/home/mediacms.io/mediacms/pids/%%n.pid --loglevel=INFO --logfile=/home/mediacms.io/mediacms/logs/celery_long.log -Ofair --prefetch-multiplier=1 -Q long_tasks
+command=/home/mediacms.io/bin/celery multi start long1 --pidfile=/var/run/mediacms/%%n.pid --loglevel=INFO --logfile=/home/mediacms.io/mediacms/logs/celery_long.log -Ofair --prefetch-multiplier=1 -Q long_tasks

deploy/docker/supervisord/supervisord-celery_short.conf

@@ -9,4 +9,4 @@ user=www-data
 directory=/home/mediacms.io/mediacms
 priority=400
 startinorder=true
-command=/home/mediacms.io/bin/celery multi start short1 short2 --pidfile=/home/mediacms.io/mediacms/pids/%%n.pid --loglevel=INFO --logfile=/home/mediacms.io/mediacms/logs/celery_short.log --soft-time-limit=300 -c10 -Q short_tasks
+command=/home/mediacms.io/bin/celery multi start short1 short2 --pidfile=/var/run/mediacms/%%n.pid --loglevel=INFO --logfile=/home/mediacms.io/mediacms/logs/celery_short.log --soft-time-limit=300 -c10 -Q short_tasks

deploy/local_install/dhparams.pem

@@ -0,0 +1,13 @@
+-----BEGIN DH PARAMETERS-----
+MIICCAKCAgEAo3MMiEY/fNbu+usIM0cDi6x8G3JBApv0Lswta4kiyedWT1WN51iQ
+9zhOFpmcu6517f/fR9MUdyhVKHxxSqWQTcmTEFtz4P3VLTS/W1N5VbKE2VEMLpIi
+wr350aGvV1Er0ujcp5n4O4h0I1tn4/fNyDe7+pHCdwM+hxe8hJ3T0/tKtad4fnIs
+WHDjl4f7m7KuFfheiK7Efb8MsT64HDDAYXn+INjtDZrbE5XPw20BqyWkrf07FcPx
+8o9GW50Ox7/FYq7jVMI/skEu0BRc8u6uUD9+UOuWUQpdeHeFcvLOgW53Z03XwWuX
+RXosUKzBPuGtUDAaKD/HsGW6xmGr2W9yRmu27jKpfYLUb/eWbbnRJwCw04LdzPqv
+jmtq02Gioo3lf5H5wYV9IYF6M8+q/slpbttsAcKERimD1273FBRt5VhSugkXWKjr
+XDhoXu6vZgj8Opei38qPa8pI1RUFoXHFlCe6WpZQmU8efL8gAMrJr9jUIY8eea1n
+u20t5B9ueb9JMjrNafcq6QkKhZLi6fRDDTUyeDvc0dN9R/3Yts97SXfdi1/lX7HS
+Ht4zXd5hEkvjo8GcnjsfZpAC39QfHWkDaeUGEqsl3jXjVMfkvoVY51OuokPWZzrJ
+M5+wyXNpfGbH67dPk7iHgN7VJvgX0SYscDPTtms50Vk7RwEzLeGuSHMCAQI=
+-----END DH PARAMETERS-----

deploy/local_install/mediacms.io

@@ -46,6 +46,12 @@ server {
 
     ssl_certificate_key  /etc/letsencrypt/live/localhost/privkey.pem;
     ssl_certificate  /etc/letsencrypt/live/localhost/fullchain.pem;
+    ssl_dhparam /etc/nginx/dhparams/dhparams.pem;
+
+    ssl_protocols TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
+    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;    
+    ssl_ecdh_curve secp521r1:secp384r1;
+    ssl_prefer_server_ciphers on;
 
     gzip on;
     access_log /var/log/nginx/mediacms.io.access.log;

deploy/local_install/nginx.conf

@@ -19,10 +19,7 @@ http {
 
     include /etc/nginx/mime.types;
     default_type application/octet-stream;
-
-    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
-    ssl_prefer_server_ciphers on;
-
+    
     access_log /var/log/nginx/access.log;
     error_log /var/log/nginx/error.log;
 

docker-compose-dev.yaml

@@ -0,0 +1,66 @@
+version: "3"
+
+services:
+  frontend:
+    image: node:14
+    volumes:
+      - ${PWD}/frontend:/home/mediacms.io/mediacms/frontend/
+    working_dir: /home/mediacms.io/mediacms/frontend/
+    command: bash -c "npm install && npm run start"
+    env_file:
+      - ${PWD}/frontend/.env
+    ports:
+      - "8088:8088"
+    depends_on:
+      - web
+  web:
+    build:
+      context: .
+      dockerfile: ./Dockerfile-dev
+    image: mediacms/mediacms-dev:latest
+    ports:
+      - "80:80"
+    volumes:
+      - ./:/home/mediacms.io/mediacms/
+    depends_on:
+      redis:
+        condition: service_healthy
+      db:
+        condition: service_healthy
+  selenium_hub:
+    container_name: selenium_hub
+    image: selenium/hub
+    ports:
+      - "4444:4444"
+  selenium_chrome:
+    container_name: selenium_chrome
+    image: selenium/node-chrome-debug
+    environment:
+      - HUB_PORT_4444_TCP_ADDR=selenium_hub
+      - HUB_PORT_4444_TCP_PORT=4444
+    ports:
+      - "5900:5900"
+    depends_on:
+      - selenium_hub
+  db:
+    image: postgres
+    volumes:
+      - ../postgres_data:/var/lib/postgresql/data/
+    restart: always
+    environment:
+      POSTGRES_USER: mediacms
+      POSTGRES_PASSWORD: mediacms
+      POSTGRES_DB: mediacms
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U mediacms"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+  redis:
+    image: "redis:alpine"
+    restart: always
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 30s
+      timeout: 10s
+      retries: 3

docker-compose-http-proxy.yaml

@@ -18,6 +18,11 @@ services:
       ENABLE_CELERY_SHORT: 'no'
       ENABLE_CELERY_LONG: 'no'
       ENABLE_CELERY_BEAT: 'no'
+      ADMIN_USER: 'admin'
+      ADMIN_EMAIL: 'admin@localhost'
+      #ADMIN_PASSWORD: 'uncomment_and_set_password_here'
+    command: "./deploy/docker/prestart.sh"
+    restart: on-failure
     depends_on:
       redis:
         condition: service_healthy

docker-compose-https-proxy.yaml

@@ -20,6 +20,8 @@ services:
       ENABLE_CELERY_SHORT: 'no'
       ENABLE_CELERY_LONG: 'no'
       ENABLE_CELERY_BEAT: 'no'
+    command: "./deploy/docker/prestart.sh"
+    restart: on-failure
     depends_on:
       redis:
         condition: service_healthy
@@ -36,6 +38,9 @@ services:
       ENABLE_CELERY_SHORT: 'no'
       ENABLE_CELERY_LONG: 'no'
       ENABLE_MIGRATIONS: 'no'
+      ADMIN_USER: 'admin'
+      ADMIN_EMAIL: 'admin@localhost'
+      #ADMIN_PASSWORD: 'uncomment_and_set_password_here'
       VIRTUAL_HOST: localhost
     depends_on:
       - migrations

docker-compose-letsencrypt.yaml

@@ -0,0 +1,120 @@
+version: "3"
+
+# Uses https://github.com/nginx-proxy/acme-companion
+
+services:
+  nginx-proxy:
+    image: nginxproxy/nginx-proxy
+    container_name: nginx-proxy
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - conf:/etc/nginx/conf.d
+      - vhost:/etc/nginx/vhost.d
+      - html:/usr/share/nginx/html
+      - dhparam:/etc/nginx/dhparam
+      - certs:/etc/nginx/certs:ro
+      - /var/run/docker.sock:/tmp/docker.sock:ro
+      - ./deploy/docker/reverse_proxy/client_max_body_size.conf:/etc/nginx/conf.d/client_max_body_size.conf:ro
+
+  acme-companion:
+    image: nginxproxy/acme-companion
+    container_name: nginx-proxy-acme
+    volumes_from:
+      - nginx-proxy
+    volumes:
+      - certs:/etc/nginx/certs:rw
+      - acme:/etc/acme.sh
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+
+  migrations:
+    image: mediacms/mediacms:latest
+    volumes:
+      - ./:/home/mediacms.io/mediacms/
+    environment:
+      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: 'uncomment_and_set_password_here'
+    command: "./deploy/docker/prestart.sh"
+    restart: on-failure
+    depends_on:
+      redis:
+        condition: service_healthy
+      db:
+        condition: service_healthy
+  web:
+    image: mediacms/mediacms:latest
+    deploy:
+      replicas: 1
+    volumes:
+      - ./:/home/mediacms.io/mediacms/
+    environment:
+      ENABLE_CELERY_BEAT: 'no'
+      ENABLE_CELERY_SHORT: 'no'
+      ENABLE_CELERY_LONG: 'no'
+      ENABLE_MIGRATIONS: 'no'
+      VIRTUAL_HOST: 'mediacms.52.209.5.113.nip.io'
+      LETSENCRYPT_HOST: 'mediacms.52.209.5.113.nip.io'
+      LETSENCRYPT_EMAIL: 'email@example.com'
+    depends_on:
+      - migrations
+  celery_beat:
+    image: mediacms/mediacms:latest
+    volumes:
+      - ./:/home/mediacms.io/mediacms/
+    environment:
+      ENABLE_UWSGI: 'no'
+      ENABLE_NGINX: 'no'
+      ENABLE_CELERY_SHORT: 'no'
+      ENABLE_CELERY_LONG: 'no'
+      ENABLE_MIGRATIONS: 'no'
+    depends_on:
+      - redis
+  celery_worker:
+    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'
+    depends_on:
+      - migrations
+  db:
+    image: postgres
+    volumes:
+      - ../postgres_data:/var/lib/postgresql/data/
+    restart: always
+    environment:
+      POSTGRES_USER: mediacms
+      POSTGRES_PASSWORD: mediacms
+      POSTGRES_DB: mediacms
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U mediacms"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+  redis:
+    image: "redis:alpine"
+    restart: always
+    healthcheck:
+      test: ["CMD", "redis-cli","ping"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+volumes:
+  conf:
+  vhost:
+  html:
+  dhparam:
+  certs:
+  acme:

docker-compose-named-volumes.yaml

@@ -11,6 +11,11 @@ services:
       ENABLE_CELERY_SHORT: 'no'
       ENABLE_CELERY_LONG: 'no'
       ENABLE_CELERY_BEAT: 'no'
+      ADMIN_USER: 'admin'
+      ADMIN_EMAIL: 'admin@localhost'
+      #ADMIN_PASSWORD: 'uncomment_and_set_password_here'
+    command: "./deploy/docker/prestart.sh"
+    restart: on-failure
     depends_on:
       redis:
         condition: service_healthy

docker-compose.yaml

@@ -11,6 +11,11 @@ services:
       ENABLE_CELERY_SHORT: 'no'
       ENABLE_CELERY_LONG: 'no'
       ENABLE_CELERY_BEAT: 'no'
+      ADMIN_USER: 'admin'
+      ADMIN_EMAIL: 'admin@localhost'
+      #ADMIN_PASSWORD: 'uncomment_and_set_password_here'
+    command: "./deploy/docker/prestart.sh"
+    restart: on-failure
     depends_on:
       redis:
         condition: service_healthy

docs/Configuration.md

@@ -1,256 +0,0 @@
-## Configuration
-
-A number of options are available on `cms/settings.py`. 
-
-It is advisable to override any of them by adding it to `local_settings.py` . 
-
-In case of a the single server installation, add to `cms/local_settings.py` .
-
-In case of a docker compose installation, add to `deploy/docker/local_settings.py` . This will automatically overwrite `cms/local_settings.py` .
-
-Any change needs restart of MediaCMS in order to take effect. So edit `cms/local_settings.py`, make a change and restart MediaCMS 
-
-```
-#systemctl restart mediacms
-```
-
-
-### change portal logo
-
-Set a new svg file for the white theme (`static/images/logo_dark.svg`) or the dark theme (`static/images/logo_light.svg`)
-
-### set global portal title
-
-set `PORTAL_NAME`, eg
-
-```
-PORTAL_NAME = 'my awesome portal'
-```
-
-### who can add media
-
-By default `CAN_ADD_MEDIA = "all"` means that all registered users can add media. Other valid options are:
-
-- **email_verified**, a user not only has to register an account but also verify the email (by clicking the link sent upon registration). Apparently email configuration need to work, otherise users won't receive emails. 
-
-- **advancedUser**, only users that are marked as advanced users can add media. Admins or MediaCMS managers can make users advanced users by editing their profile and selecting advancedUser.
-
-### what is the portal workflow
-
-The `PORTAL_WORKFLOW` variable specifies what happens to newly uploaded media, whether they appear on listings (as the index page, or search)
-
-- **public** is the default option and means that a media can appear on listings. If media type is video, it will appear once at least a task that produces an encoded version of the file has finished succesfully. For other type of files, as image/audio they appear instantly
-
-- **private** means that newly uploaded content is private - only users can see it or MediaCMS editors, managers and admins. Those can also set the status to public or unlisted
-
-- **unlisted** means that items are unlisted. However if a user visits the url of an unlisted media, it will be shown (as opposed to private)
-
-
-### show/hide the Sign in button
-
-to show button:
-```
-LOGIN_ALLOWED = True
-```
-
-to hide button:
-
-```
-LOGIN_ALLOWED = False
-```
-
-### show/hide the Register button
-
-to show button:
-```
-REGISTER_ALLOWED = True
-```
-
-to hide button:
-
-```
-REGISTER_ALLOWED = False
-```
-
-
-### show/hide the upload media button
-
-To show:
-
-```
-UPLOAD_MEDIA_ALLOWED = True
-```
-
-To hide:
-
-```
-UPLOAD_MEDIA_ALLOWED = False
-```
-
-### show/hide the actions buttons (like/dislike/report)
-
-Make changes (True/False) to any of the following:
-
-```
-- CAN_LIKE_MEDIA = True  # whether the like media appears
-- CAN_DISLIKE_MEDIA = True  # whether the dislike media appears
-- CAN_REPORT_MEDIA = True  # whether the report media appears
-- CAN_SHARE_MEDIA = True  # whether the share media appears
-```
-
-### show/hide the download option on a media
-
-Edit `templates/config/installation/features.html` and set 
-
-```
-download: false
-```
-
-### automatically hide media upon being reported
-
-set a low number for variable `REPORTED_TIMES_THRESHOLD`
-eg 
-
-```
-REPORTED_TIMES_THRESHOLD = 2
-```
-
-once the limit is reached, media goes to private state and an email is sent to admins
-
-### set a custom message on the media upload page
-
-this message will appear below the media drag and drop form
-
-```
-PRE_UPLOAD_MEDIA_MESSAGE = 'custom message'
-```
-
-### set email settings
-
-Set correct settings per provider
-
-```
-DEFAULT_FROM_EMAIL = 'info@mediacms.io'
-EMAIL_HOST_PASSWORD = 'xyz'
-EMAIL_HOST_USER = 'info@mediacms.io'
-EMAIL_USE_TLS = True
-SERVER_EMAIL = DEFAULT_FROM_EMAIL
-EMAIL_HOST = 'mediacms.io'
-EMAIL_PORT = 587
-ADMIN_EMAIL_LIST = ['info@mediacms.io']
-```
-
-### disallow user registrations from specific domains
-
-set domains that are not valid for registration via this variable:
-
-```
-RESTRICTED_DOMAINS_FOR_USER_REGISTRATION = [
-    'xxx.com', 'emaildomainwhatever.com']
-```
-
-### require a review by MediaCMS editors/managers/admins
-
-set value
-
-```
-MEDIA_IS_REVIEWED = False
-```
-
-any uploaded media now needs to be reviewed before it can appear to the listings. 
-MediaCMS editors/managers/admins can visit the media page and edit it, where they can see the option to mark media as reviewed. By default this is set to True, so all media don't require to be reviewed
-
-### specify maximum number of media for a playlist
-
-set a different threshold on variable `MAX_MEDIA_PER_PLAYLIST`
-
-eg
-
-```
-MAX_MEDIA_PER_PLAYLIST = 14
-```
-
-### specify maximum size of a media that can be uploaded
-
-change `UPLOAD_MAX_SIZE`. 
-
-default is 4GB
-
-```
-UPLOAD_MAX_SIZE = 800 * 1024 * 1000 * 5
-```
-
-### specify maximum size of comments
-
-change `MAX_CHARS_FOR_COMMENT`
-
-default:
-
-```
-MAX_CHARS_FOR_COMMENT = 10000
-```
-
-### how many files to upload in parallel
-
-set a different threshold for `UPLOAD_MAX_FILES_NUMBER`
-default:
-
-```
-UPLOAD_MAX_FILES_NUMBER = 100
-```
-
-### force users confirm their email upon registrations
-
-default option for email confirmation is optional. Set this to mandatory in order to force users confirm their email before they can login
-
-```
-ACCOUNT_EMAIL_VERIFICATION = 'optional'
-```
-
-### rate limit account login attempts
-
-after this number is reached
-
-```
-ACCOUNT_LOGIN_ATTEMPTS_LIMIT = 20
-```
-
-sets a timeout (in seconds)
-
-```
-ACCOUNT_LOGIN_ATTEMPTS_TIMEOUT = 5
-```
-
-### disallow user registration
-
-set the following variable to False
-
-```
-USERS_CAN_SELF_REGISTER = True
-```
-
-### configure notifications
-
-Global notifications that are implemented are controlled by the following options:
-
-```
-USERS_NOTIFICATIONS = {
-    'MEDIA_ADDED': True,    
-}
-```
-
-If you want to disable notification for new media, set to False
-
-Admins also receive notifications on different events, set any of the following to False to disable
-
-```
-ADMINS_NOTIFICATIONS = {
-    'NEW_USER': True,
-    'MEDIA_ADDED': True,
-    'MEDIA_REPORTED': True,
-}
-```
-
-- NEW_USER: a new user is added
-- MEDIA_ADDED: a media is added
-- MEDIA_REPORTED: the report for a media was hit

docs/Docker_deployment.md

@@ -1,40 +0,0 @@
-# MediaCMS on Docker
-
-The mediacms image is built to use supervisord as the main process, which manages one or more services required to run mediacms. We can toggle which services are run in a given container by setting the environment variables below to `yes` or `no`:
-
-* ENABLE_UWSGI
-* ENABLE_NGINX
-* ENABLE_CELERY_BEAT
-* ENABLE_CELERY_SHORT
-* ENABLE_CELERY_LONG
-* ENABLE_MIGRATIONS
-
-By default, all these services are enabled, but in order to create a scaleable deployment, some of them can be disabled, splitting the service up into smaller services.
-
-Also see the `Dockerfile` for other environment variables which you may wish to override. Application settings, eg. `FRONTEND_HOST` can also be overridden by updating the `deploy/docker/local_settings.py` file.
-
-See example deployments in the sections below. These example deployments have been tested on `docker-compose version 1.27.4` running on `Docker version 19.03.13`
-
-To run, update the configs above if necessary, build the image by running `docker-compose build`, then run `docker-compose run`
-
-## Simple Deployment, accessed as http://localhost
-
-The main container runs migrations, mediacms_web, celery_beat, celery_workers (celery_short and celery_long services), exposed on port 80 supported by redis and postgres database. The FRONTEND_HOST in `deploy/docker/local_settings.py` is configured as http://localhost, on the docker host machine.
-
-## Advanced Deployment, accessed as http://localhost:8000
-
-Here we can run 1 mediacms_web instance, with the FRONTEND_HOST in `deploy/docker/local_settings.py` configured as http://localhost:8000. This is bootstrapped by a single migrations instance and supported by a single celery_beat instance and 1 or more celery_worker instances. Redis and postgres containers are also used for persistence. Clients can access the service on http://localhost:8000, on the docker host machine. This is similar to [this deployment](../docker-compose.yaml), with a `port` defined in FRONTEND_HOST.
-
-## Advanced Deployment, with reverse proxy, accessed as http://mediacms.io
-
-Here we can use `jwilder/nginx-proxy` to reverse proxy to 1 or more instances of mediacms_web supported by other services as mentioned in the previous deployment. The FRONTEND_HOST in `deploy/docker/local_settings.py` is configured as http://mediacms.io, nginx-proxy has port 80 exposed. Clients can access the service on http://mediacms.io (Assuming DNS or the hosts file is setup correctly to point to the IP of the nginx-proxy instance). This is similar to [this deployment](../docker-compose-http-proxy.yaml).
-
-## Advanced Deployment, with reverse proxy, accessed as https://localhost
-
-The reverse proxy (`jwilder/nginx-proxy`) can be configured to provide SSL termination using self-signed certificates, letsencrypt or CA signed certificates (see: https://hub.docker.com/r/jwilder/nginx-proxy or [LetsEncrypt Example](https://www.singularaspect.com/use-nginx-proxy-and-letsencrypt-companion-to-host-multiple-websites/) ). In this case the FRONTEND_HOST should be set to https://mediacms.io. This is similar to [this deployment](../docker-compose-http-proxy.yaml).
-
-## A Scaleable Deployment Architecture (Docker, Swarm, Kubernetes)
-
-The architecture below generalises all the deployment scenarios above, and provides a conceptual design for other deployments based on kubernetes and docker swarm. It allows for horizontal scaleability through the use of multiple mediacms_web instances and celery_workers. For large deployments, managed postgres, redis and storage may be adopted.
-
-![MediaCMS](images/architecture.png)

docs/User_Scenarios.md

@@ -1,20 +0,0 @@
-## User scenarios to test
-
-
-## test video media + image
-    try uploading a video + image, make sure they get encoded well and check they appear on index/search/category/author page
-    try editing/setting metadata, confirm action is performed, also that are searchable
-    try adding custom poster, confirm it loads well on video page/listings
-    try specifying different thumbnail time, confirm an automatic screenshot is taken
-
-
-## portal workflow
-    change workflow to unlisted, check they don't appear on index/search/category/author page
-
-## users management
-   create an admin, a MediaCMS editor and MediaCMS manager. All should see edit/delete on a media and also comments, and action should work.
-   For users edit and delete, only MediaCMS manager and admin should see edit/delete and these actions should work.
-
-## test subtitle
-    add language and test subtitling
-

docs/admins_docs.md

@@ -0,0 +1,650 @@
+# Administrators documentation
+
+## Table of contents
+- [1. Welcome](#1-welcome)
+- [2. Server Installaton](#2-server-installation)
+- [3. Docker Installation](#3-docker-installation)
+- [4. Docker Deployement options](#4-docker-deployment-options)
+- [5. Configuration](#5-configuration)
+- [6. Manage pages](#6-manage-pages)
+- [7. Django admin dashboard](#7-django-admin-dashboard)
+- [8. On portal workflow](#8-on-portal-workflow)
+- [9. On user roles](#9-on-user-roles)
+- [10. Adding languages for Captions and subtitles](#10-adding-languages-for-captions-and-subtitles)
+- [11. Add/delete categories and tags](#11-adddelete-categories-and-tags)
+- [12. Video transcoding](#12-video-transcoding)
+- [13. How To Add A Static Page To The Sidebar](#13-how-to-add-a-static-page-to-the-sidebar)
+- [14. Add Google Analytics](#14-add-google-analytics)
+
+
+## 1. Welcome
+This page is created for MediaCMS administrators that are responsible for setting up the software, maintaining it and making modifications. 
+
+## 2. Server Installation
+
+The core dependencies are Python3, Django3, Celery, PostgreSQL, Redis, ffmpeg. Any system that can have these dependencies installed, can run MediaCMS. But we strongly suggest installing on Linux Ubuntu 18 or 20 versions.
+
+Installation on a Ubuntu 18 or 20 system with git utility installed should be completed in a few minutes with the following steps.
+Make sure you run it as user root, on a clear system, since the automatic script will install and configure the following services: Celery/PostgreSQL/Redis/Nginx and will override any existing settings. 
+
+Automated script - tested on Ubuntu 18, Ubuntu 20, and Debian Buster
+
+```bash
+mkdir /home/mediacms.io && cd /home/mediacms.io/
+git clone https://github.com/mediacms-io/mediacms
+cd /home/mediacms.io/mediacms/ && bash ./install.sh
+```
+
+The script will ask if you have a URL where you want to deploy MediaCMS, otherwise it will use localhost. If you provide a URL, it will use Let's Encrypt service to install a valid ssl certificate. 
+
+
+### Update
+
+If you've used the above way to install MediaCMS, update with the following:
+
+```bash
+cd /home/mediacms.io/mediacms # enter mediacms directory
+source  /home/mediacms.io/bin/activate # use virtualenv
+git pull # update code
+python manage.py migrate # run Django migrations
+sudo systemctl restart mediacms celery_long celery_short # restart services
+```
+
+### Configuration
+Checkout the configuration section here.
+
+
+### Maintenance
+Database can be backed up with pg_dump and media_files on /home/mediacms.io/mediacms/media_files include original files and encoded/transcoded versions
+
+
+## 3. Docker Installation
+
+## Installation
+Install a recent version of [Docker](https://docs.docker.com/get-docker/), and [Docker Compose](https://docs.docker.com/compose/install/).
+
+For Ubuntu 18/20 systems this is:
+
+```bash
+curl -fsSL https://get.docker.com -o get-docker.sh
+sudo sh get-docker.sh
+sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+sudo chmod +x /usr/local/bin/docker-compose
+```
+
+Then run as root
+
+```bash
+git clone https://github.com/mediacms-io/mediacms
+cd mediacms
+```
+
+The default option is to serve MediaCMS on all ips available of the server (including localhost).
+If you want to explore more options (including setup of https with letsencrypt certificate) checkout [Docker deployment](/docs/admins_docs.md#4-docker-deployment-options) section for different docker-compose setups to use.
+
+Run
+
+```bash
+docker-compose up
+```
+
+This will download all MediaCMS related Docker images and start all containers. Once it finishes, MediaCMS will be installed and available on http://localhost or http://ip
+
+A user admin has been created with random password, you should be able to see it at the end of migrations container, eg
+
+```
+migrations_1     | Created admin user with password: gwg1clfkwf
+```
+
+or if you have set the ADMIN_PASSWORD variable on docker-compose file you have used (example `docker-compose.yaml`), that variable will be set as the admin user's password
+
+### Update
+
+Get latest MediaCMS image and stop/start containers
+
+```bash
+cd /path/to/mediacms/installation
+docker pull mediacms/mediacms
+docker-compose down
+docker-compose up
+```
+
+## Configuration
+Checkout the configuration docs here.
+
+
+### Maintenance
+Database is stored on ../postgres_data/ and media_files on media_files/
+
+
+## 4. Docker Deployment options
+
+The mediacms image is built to use supervisord as the main process, which manages one or more services required to run mediacms. We can toggle which services are run in a given container by setting the environment variables below to `yes` or `no`:
+
+* ENABLE_UWSGI
+* ENABLE_NGINX
+* ENABLE_CELERY_BEAT
+* ENABLE_CELERY_SHORT
+* ENABLE_CELERY_LONG
+* ENABLE_MIGRATIONS
+
+By default, all these services are enabled, but in order to create a scaleable deployment, some of them can be disabled, splitting the service up into smaller services.
+
+Also see the `Dockerfile` for other environment variables which you may wish to override. Application settings, eg. `FRONTEND_HOST` can also be overridden by updating the `deploy/docker/local_settings.py` file.
+
+See example deployments in the sections below. These example deployments have been tested on `docker-compose version 1.27.4` running on `Docker version 19.03.13`
+
+To run, update the configs above if necessary, build the image by running `docker-compose build`, then run `docker-compose run`
+
+### Simple Deployment, accessed as http://localhost
+
+The main container runs migrations, mediacms_web, celery_beat, celery_workers (celery_short and celery_long services), exposed on port 80 supported by redis and postgres database.
+
+ The FRONTEND_HOST in `deploy/docker/local_settings.py` is configured as http://localhost, on the docker host machine.
+
+### Server with ssl certificate through letsencrypt service, accessed as https://my_domain.com
+Before trying this out make sure the ip points to my_domain.com. 
+
+With this method [this deployment](../docker-compose-letsencrypt.yaml) is used. 
+
+Edit this file and set `VIRTUAL_HOST` as my_domain.com, `LETSENCRYPT_HOST` as my_domain.com, and your email on `LETSENCRYPT_EMAIL`
+
+Edit `deploy/docker/local_settings.py` and set https://my_domain.com as `FRONTEND_HOST`
+
+Now run docker-compose -f docker-compose-letsencrypt.yaml up, when installation finishes you will be able to access https://my_domain.com using a valid Letsencrypt certificate!
+
+### Advanced Deployment, accessed as http://localhost:8000
+
+Here we can run 1 mediacms_web instance, with the FRONTEND_HOST in `deploy/docker/local_settings.py` configured as http://localhost:8000. This is bootstrapped by a single migrations instance and supported by a single celery_beat instance and 1 or more celery_worker instances. Redis and postgres containers are also used for persistence. Clients can access the service on http://localhost:8000, on the docker host machine. This is similar to [this deployment](../docker-compose.yaml), with a `port` defined in FRONTEND_HOST.
+
+### Advanced Deployment, with reverse proxy, accessed as http://mediacms.io
+
+Here we can use `jwilder/nginx-proxy` to reverse proxy to 1 or more instances of mediacms_web supported by other services as mentioned in the previous deployment. The FRONTEND_HOST in `deploy/docker/local_settings.py` is configured as http://mediacms.io, nginx-proxy has port 80 exposed. Clients can access the service on http://mediacms.io (Assuming DNS or the hosts file is setup correctly to point to the IP of the nginx-proxy instance). This is similar to [this deployment](../docker-compose-http-proxy.yaml).
+
+### Advanced Deployment, with reverse proxy, accessed as https://localhost
+
+The reverse proxy (`jwilder/nginx-proxy`) can be configured to provide SSL termination using self-signed certificates, letsencrypt or CA signed certificates (see: https://hub.docker.com/r/jwilder/nginx-proxy or [LetsEncrypt Example](https://www.singularaspect.com/use-nginx-proxy-and-letsencrypt-companion-to-host-multiple-websites/) ). In this case the FRONTEND_HOST should be set to https://mediacms.io. This is similar to [this deployment](../docker-compose-http-proxy.yaml).
+
+### A Scaleable Deployment Architecture (Docker, Swarm, Kubernetes)
+
+The architecture below generalises all the deployment scenarios above, and provides a conceptual design for other deployments based on kubernetes and docker swarm. It allows for horizontal scaleability through the use of multiple mediacms_web instances and celery_workers. For large deployments, managed postgres, redis and storage may be adopted.
+
+![MediaCMS](images/architecture.png)
+
+
+## 5. Configuration
+Several options are available on `cms/settings.py`, most of the things that are allowed or should be disallowed are described there.
+
+It is advisable to override any of them by adding it to `local_settings.py` . 
+
+In case of a the single server installation, add to `cms/local_settings.py` .
+
+In case of a docker compose installation, add to `deploy/docker/local_settings.py` . This will automatically overwrite `cms/local_settings.py` .
+
+Any change needs restart of MediaCMS in order to take effect. 
+
+Single server installation: edit `cms/local_settings.py`, make a change and restart MediaCMS 
+
+```bash
+#systemctl restart mediacms
+```
+
+Docker Compose installation: edit `deploy/docker/local_settings.py`, make a change and restart MediaCMS containers
+
+```bash
+#docker-compose restart web celery_worker celery_beat
+```
+
+### 5.1 Change portal logo
+
+Set a new svg file for the white theme (`static/images/logo_dark.svg`) or the dark theme (`static/images/logo_light.svg`)
+
+### 5.2 Set global portal title
+
+set `PORTAL_NAME`, eg
+
+```
+PORTAL_NAME = 'my awesome portal'
+```
+
+### 5.3 Control who can add media
+
+By default `CAN_ADD_MEDIA = "all"` means that all registered users can add media. Other valid options are:
+
+- **email_verified**, a user not only has to register an account but also verify the email (by clicking the link sent upon registration). Apparently email configuration need to work, otherise users won't receive emails. 
+
+- **advancedUser**, only users that are marked as advanced users can add media. Admins or MediaCMS managers can make users advanced users by editing their profile and selecting advancedUser.
+
+### 5.4 What is the portal workflow
+
+The `PORTAL_WORKFLOW` variable specifies what happens to newly uploaded media, whether they appear on listings (as the index page, or search)
+
+- **public** is the default option and means that a media can appear on listings. If media type is video, it will appear once at least a task that produces an encoded version of the file has finished succesfully. For other type of files, as image/audio they appear instantly
+
+- **private** means that newly uploaded content is private - only users can see it or MediaCMS editors, managers and admins. Those can also set the status to public or unlisted
+
+- **unlisted** means that items are unlisted. However if a user visits the url of an unlisted media, it will be shown (as opposed to private)
+
+
+### 5.5 Show or hide the Sign in button
+
+to show button:
+```
+LOGIN_ALLOWED = True
+```
+
+to hide button:
+
+```
+LOGIN_ALLOWED = False
+```
+
+### 5.6 Show or hide the Register button
+
+to show button:
+```
+REGISTER_ALLOWED = True
+```
+
+to hide button:
+
+```
+REGISTER_ALLOWED = False
+```
+
+
+### 5.7 Show or hide the upload media button
+
+To show:
+
+```
+UPLOAD_MEDIA_ALLOWED = True
+```
+
+To hide:
+
+```
+UPLOAD_MEDIA_ALLOWED = False
+```
+
+### 5.8 Show or hide the actions buttons (like/dislike/report)
+
+Make changes (True/False) to any of the following:
+
+```
+- CAN_LIKE_MEDIA = True  # whether the like media appears
+- CAN_DISLIKE_MEDIA = True  # whether the dislike media appears
+- CAN_REPORT_MEDIA = True  # whether the report media appears
+- CAN_SHARE_MEDIA = True  # whether the share media appears
+```
+
+### 5.9 Show or hide the download option on a media
+
+Edit `templates/config/installation/features.html` and set 
+
+```
+download: false
+```
+
+### 5.10 Automatically hide media upon being reported
+
+set a low number for variable `REPORTED_TIMES_THRESHOLD`
+eg 
+
+```
+REPORTED_TIMES_THRESHOLD = 2
+```
+
+once the limit is reached, media goes to private state and an email is sent to admins
+
+### 5.11 Set a custom message on the media upload page
+
+this message will appear below the media drag and drop form
+
+```
+PRE_UPLOAD_MEDIA_MESSAGE = 'custom message'
+```
+
+### 5.12 Set email settings
+
+Set correct settings per provider
+
+```
+DEFAULT_FROM_EMAIL = 'info@mediacms.io'
+EMAIL_HOST_PASSWORD = 'xyz'
+EMAIL_HOST_USER = 'info@mediacms.io'
+EMAIL_USE_TLS = True
+SERVER_EMAIL = DEFAULT_FROM_EMAIL
+EMAIL_HOST = 'mediacms.io'
+EMAIL_PORT = 587
+ADMIN_EMAIL_LIST = ['info@mediacms.io']
+```
+
+### 5.13 Disallow user registrations from specific domains
+
+set domains that are not valid for registration via this variable:
+
+```
+RESTRICTED_DOMAINS_FOR_USER_REGISTRATION = [
+    'xxx.com', 'emaildomainwhatever.com']
+```
+
+### 5.14 Require a review by MediaCMS editors/managers/admins
+
+set value
+
+```
+MEDIA_IS_REVIEWED = False
+```
+
+any uploaded media now needs to be reviewed before it can appear to the listings. 
+MediaCMS editors/managers/admins can visit the media page and edit it, where they can see the option to mark media as reviewed. By default this is set to True, so all media don't require to be reviewed
+
+### 5.15 Specify maximum number of media for a playlist
+
+set a different threshold on variable `MAX_MEDIA_PER_PLAYLIST`
+
+eg
+
+```
+MAX_MEDIA_PER_PLAYLIST = 14
+```
+
+### 5.16 Specify maximum size of a media that can be uploaded
+
+change `UPLOAD_MAX_SIZE`. 
+
+default is 4GB
+
+```
+UPLOAD_MAX_SIZE = 800 * 1024 * 1000 * 5
+```
+
+### 5.17 Specify maximum size of comments
+
+change `MAX_CHARS_FOR_COMMENT`
+
+default:
+
+```
+MAX_CHARS_FOR_COMMENT = 10000
+```
+
+### 5.18 How many files to upload in parallel
+
+set a different threshold for `UPLOAD_MAX_FILES_NUMBER`
+default:
+
+```
+UPLOAD_MAX_FILES_NUMBER = 100
+```
+
+### 5.18 force users confirm their email upon registrations
+
+default option for email confirmation is optional. Set this to mandatory in order to force users confirm their email before they can login
+
+```
+ACCOUNT_EMAIL_VERIFICATION = 'optional'
+```
+
+### 5.20 Rate limit account login attempts
+
+after this number is reached
+
+```
+ACCOUNT_LOGIN_ATTEMPTS_LIMIT = 20
+```
+
+sets a timeout (in seconds)
+
+```
+ACCOUNT_LOGIN_ATTEMPTS_TIMEOUT = 5
+```
+
+### 5.21 Disallow user registration
+
+set the following variable to False
+
+```
+USERS_CAN_SELF_REGISTER = True
+```
+
+### 5.22 Configure notifications
+
+Global notifications that are implemented are controlled by the following options:
+
+```
+USERS_NOTIFICATIONS = {
+    'MEDIA_ADDED': True,    
+}
+```
+
+If you want to disable notification for new media, set to False
+
+Admins also receive notifications on different events, set any of the following to False to disable
+
+```
+ADMINS_NOTIFICATIONS = {
+    'NEW_USER': True,
+    'MEDIA_ADDED': True,
+    'MEDIA_REPORTED': True,
+}
+```
+
+- NEW_USER: a new user is added
+- MEDIA_ADDED: a media is added
+- MEDIA_REPORTED: the report for a media was hit
+
+
+
+## 6. Manage pages
+to be written
+
+## 7. Django admin dashboard
+
+## 8. On portal workflow
+Who can publish content, how content appears on public listings.Difference between statuses (private, unlisted, public)
+
+## 9. On user roles
+Differences over MediaCMS manager, MediaCMS editor, logged in user
+
+## 10. Adding languages for Captions and subtitles
+to be written
+
+## 11. Add/delete categories and tags
+Through the admin section - http://your_installation/admin/
+
+## 12. Video transcoding
+Add / remove resolutions and profiles through http://your_installation/admin/encodeprofile
+
+## 13. How To Add A Static Page To The Sidebar
+
+### 1. Create your html page in templates/cms/ 
+e.g. duplicate and rename about.html
+```
+sudo cp templates/cms/about.html templates/cms/volunteer.html
+```
+
+### 2. Create your css file in static/css/ 
+```
+touch static/css/volunteer.css
+```
+
+### 3. In your html file, update block headermeta to reflect your new page
+```
+{% block headermeta %}
+<meta property="og:title" content="Volunteer - {{PORTAL_NAME}}">
+<meta property="og:type" content="website">
+<meta property="og:description" content="">
+<meta name="twitter:card" content="summary">
+<script type="application/ld+json">
+{
+	"@context": "https://schema.org",
+	"@type": "BreadcrumbList",
+	"itemListElement": [{
+		"@type": "ListItem",
+		"position": 1,
+        "name": "{{PORTAL_NAME}}",
+        "item": {
+			"@type": "WebPage",
+	        "@id": "{{FRONTEND_HOST}}"
+	    }
+    },
+    {
+		"@type": "ListItem",
+		"position": 2,
+        "name": "Volunteer",
+        "item": {
+			"@type": "VolunteerPage",
+	        "@id": "{{FRONTEND_HOST}}/volunteer"
+	    }
+    }]
+}
+</script>
+<link href="{% static "css/volunteer.css" %}" rel="stylesheet"/>
+{% endblock headermeta %}
+```
+
+### 4. In your html file, update block innercontent to reflect your actual content
+Write whatever you like.
+
+### 5. In your css file, write matching styles for you html file.
+Write whatever you like.
+
+### 6. Add your view to files/views.py
+```
+def volunteer(request):
+    """Volunteer view"""
+    context = {}
+    return render(request, "cms/volunteer.html", context)
+```
+
+### 7. Add your url pattern to files/urls.py
+```
+urlpatterns = [
+    url(r"^$", views.index),
+    url(r"^about", views.about, name="about"),
+    url(r"^volunteer", views.volunteer, name="volunteer"),
+```
+
+### 8. Add your page to the left sidebar
+To add a link to your page as a menu item in the left sidebar,
+add the following code after the last line in _commons.js   
+```
+/* Checks that a given selector has loaded. */
+const checkElement = async selector => {
+    while ( document.querySelector(selector) === null) {
+      await new Promise( resolve =>  requestAnimationFrame(resolve) )
+    }
+    return document.querySelector(selector); 
+  };
+
+/* Checks that sidebar nav menu has loaded, then adds menu item. */
+checkElement('.nav-menu')
+.then((element) => {
+     (function(){    
+        var a = document.createElement('a');        
+        a.href = "/volunteer";
+        a.title = "Volunteer";
+       
+        var s = document.createElement('span');
+        s.className = "menu-item-icon";
+
+        var icon = document.createElement('i');
+        icon.className = "material-icons";
+        icon.setAttribute("data-icon", "people");
+
+        s.appendChild(icon);
+        a.appendChild(s);
+    
+        var linkText = document.createTextNode("Volunteer");
+        var t = document.createElement('span');
+
+        t.appendChild(linkText);
+        a.appendChild(t);
+
+        var listItem = document.createElement('li');
+        listItem.className = "link-item";
+        listItem.appendChild(a);
+
+        //if signed out use 3rd nav-menu
+        var elem = document.querySelector(".nav-menu:nth-child(3) nav ul"); 
+        var loc = elem.innerText;
+        if (loc.includes("About")){
+          elem.insertBefore(listItem, elem.children[2]);
+        } else { //if signed in use 4th nav-menu
+          elem = document.querySelector(".nav-menu:nth-child(4) nav ul");
+          elem.insertBefore(listItem, elem.children[2]);
+        }       
+    })();
+});
+```
+
+### 9. Restart the mediacms web server
+On docker:
+```
+sudo docker stop mediacms_web_1 && sudo docker start mediacms_web_1
+```
+
+Otherwise
+```
+sudo systemctl restart mediacms
+```
+
+
+## 14. Add Google Analytics
+Instructions contributed by @alberto98fx
+
+1. Create a file:
+
+``` touch $DIR/mediacms/templates/tracking.html ```
+
+2. Add the Gtag/Analytics script
+
+3. Inside ``` $DIR/mediacms/templates/root.html``` you'll see a file like this one: 
+
+```
+<head>
+    {% block head %}
+
+        <title>{% block headtitle %}{{PORTAL_NAME}}{% endblock headtitle %}</title>
+
+        {% include "common/head-meta.html" %}
+
+        {% block headermeta %}
+        
+        <meta property="og:title" content="{{PORTAL_NAME}}">
+        <meta property="og:type" content="website">
+
+        {%endblock headermeta %}
+
+        {% block externallinks %}{% endblock externallinks %}
+
+        {% include "common/head-links.html" %}
+
+        {% block topimports %}{%endblock topimports %}
+
+        {% include "config/index.html" %}
+      
+    {% endblock head %}
+
+</head>
+```
+
+4. Add  ``` {% include "tracking.html" %} ``` at the end inside the section ```<head>```
+  
+5. If you are using Docker and didn't  mount the entire dir you need to bind a new volume: 
+```
+  
+    web:
+    image: mediacms/mediacms:latest
+    restart: unless-stopped
+    ports:
+      - "80:80"
+    deploy:
+      replicas: 1
+    volumes:
+      - ./templates/root.html:/home/mediacms.io/mediacms/templates/root.html
+      - ./templates/tracking.html://home/mediacms.io/mediacms/templates/tracking.html
+  
+ ```

docs/developers_docs.md

@@ -0,0 +1,128 @@
+# Developers documentation
+
+## Table of contents
+- [1. Welcome](#1-welcome)
+- [2. System architecture](#2-system-architecture)
+- [3. API documentation](#3-api-documentation)
+- [4. How to contribute](#4-how-to-contribute)
+- [5. Working with Docker tips](#5-working-with-docker-tips)
+- [6. Working with the automated tests](#6-working-with-the-automated-tests)
+- [7. How video is transcoded](#7-how-video-is-transcoded)
+
+## 1. Welcome
+This page is created for MediaCMS developers and contains related information.
+
+## 2. System architecture
+to be written
+
+## 3. API documentation
+API is documented using Swagger - checkout ot http://your_installation/swagger - example https://demo.mediacms.io/swagger/
+This page allows you to login to perform authenticated actions - it will also use your session if logged in. 
+
+## 4. How to contribute
+Before you send a PR, make sure your code is properly formatted. For that, use `pre-commit install` to install a pre-commit hook and run `pre-commit run --all` and fix everything before you commit. This pre-commit will check for your code lint everytime you commit a code.
+
+Checkout the [Code of conduct page](../CODE_OF_CONDUCT.md) if you want to contribute to this repository
+
+
+## 5. Working with Docker tips
+
+To perform the Docker installation, follow instructions to install Docker + Docker compose (docs/Docker_Compose.md) and then build/start docker-compose-dev.yaml . This will run the frontend application on port 8088 on top of all other containers (including the Django web application on port 80)
+
+```
+docker-compose -f docker-compose-dev.yaml build
+docker-compose -f docker-compose-dev.yaml up
+```
+
+### Frontend application changes
+Eg change `frontend/src/static/js/pages/HomePage.tsx` , dev application refreshes in a number of seconds (hot reloading) and I see the changes, once I'm happy I can run
+
+```
+docker-compose -f docker-compose-dev.yaml exec -T frontend npm run dist
+```
+
+And then in order for the changes to be visible on the application while served through nginx, 
+
+```
+cp -r frontend/dist/static/* static/
+```
+
+POST calls: cannot be performed through the dev server, you have to make through the normal application (port 80) and then see changes on the dev application on port 8088. 
+Make sure the urls are set on `frontend/.env` if different than localhost
+
+
+Media page: need to upload content through the main application (nginx/port 80), and then use an id for page media.html, for example `http://localhost:8088/media.html?m=nc9rotyWP`
+
+There are some issues with CORS too to resolve, in order for some pages to function, eg the manage comments page
+
+```
+http://localhost:8088/manage-media.html manage_media
+```
+
+### Backend application changes
+After I make changes to the django application (eg make a change on `files/forms.py`) in order to see the changes I have to restart the web container
+
+```
+docker-compose -f docker-compose-dev.yaml restart web
+```
+
+## How video is transcoded
+
+Original files get uploaded to the application server, and they get stored there as FileFields.
+
+If files are videos and the duration is greater than a number (defined on settings, I think 4minutes), they are also broken in chunks, so one Encode object per chunk, for all enabled EncodeProfiles.
+
+Then the workers start picking Encode objects and they transcode the chunks, so if a chunk gets transcoded correctly, the original file (the small chunk) gets replaced by the transcoded file, and the Encode object status is marked as 'success'.
+
+
+original.mp4 (1G, 720px)--> Encode1 (100MB, 240px, chunk=True), Encode2 (100MB, 240px, chunk=True)...EncodeXX (100MB, 720px, chunk=True) ---> when all Encode objects are success, for a resolution, they get concatenated to the original_resolution.mp4 file and this gets stored as Encode object (chunk=False). This is what is available for download.
+
+Apparently the Encode object is used to store Encoded files that are served eventually (chunk=False, status='success'), but also files while they are on their way to get transcoded (chunk=True, status='pending/etc')
+
+(Parenthesis opening)
+there is also an experimental small service (not commited to the repo currently) that speaks only through API and a) gets tasks to run, b) returns results. So it makes a request and receives an ffmpeg command, plus a file, it runs the ffmpeg command, and returns the result.I've used this mechanism on a number of installations to migrate existing videos through more servers/cpu and has worked with only one problem, some temporary files needed to be removed from the servers (through a periodic task, not so big problem)
+(Parenthesis closing)
+
+
+When the Encode object is marked as success and chunk=False, and thus is available for download/stream, there is a task that gets started and saves an HLS version of the file (1 mp4-->x number of small .ts chunks). This would be FILES_C
+
+This mechanism allows for workers that have access on the same filesystem (either localhost, or through a shared network filesystem, eg NFS/EFS) to work on the same time and produce results. 
+
+## 6. Working with the automated tests
+
+This instructions assume that you're using the docker installation
+
+1. start docker-compose
+
+```
+docker-compose up
+```
+
+2. Install the requirements on `requirements-dev.txt ` on web container (we'll use the web container for this)
+
+```
+docker-compose exec -T web pip install -r requirements-dev.txt 
+```
+
+3. Now you can run the existing tests
+
+```
+docker-compose exec --env TESTING=True -T web pytest
+```
+
+The `TESTING=True` is passed for Django to be aware this is a testing environment (so that it runs Celery tasks as functions for example and not as background tasks, since Celery is not started in the case of pytest)
+
+
+4. You may try a single test, by specifying the path, for example
+
+```
+docker-compose exec --env TESTING=True -T web pytest tests/test_fixtures.py
+```
+
+5. You can also see the coverage
+
+```
+docker-compose exec --env TESTING=True -T web pytest --cov=. --cov-report=html
+```
+
+and of course...you are very welcome to help us increase it ;)

docs/user_docs.md

@@ -0,0 +1,208 @@
+# Users documentation
+
+## Table of contents
+- [Uploading media](#uploading-media)
+- [Downloading media](#downloading-media)
+- [Adding captions/subtitles](#adding-captionssubtitles)
+- [Search media](#search-media)
+- [Share media](#share-media)
+- [Embed media](#embed-media)
+- [Customize my profile options](#customize-my-profile-options)
+
+## Uploading media
+
+### How to Upload Media
+
+Uploading media is as simple as clicking the _Upload Media_ button, waiting for media to upload, and then clicking the media to add metadata (title, description etc.) by filling out a form.
+
+#### Click Upload Button
+
+Click the _Upload Media_ button from the right-side of the screen at the top:
+
+<p align="left">
+    <img src="./images/Click-Upload-Media-button.png"/>
+</p>
+
+#### Upload Page
+
+Clicking the _Upload Media_ button takes you to the upload page at a URL like this:
+
+https://demo.mediacms.io/upload
+
+#### Click Browse Button
+
+Here you should click the _"Browse your files"_ button (or drag and drop a file from your desktop):
+
+<p align="left">
+    <img src="./images/Click-Browse-button.png"/>
+</p>
+
+#### Select media file and click Open button
+
+Select the media file that you want to upload and click the _"Open"_ button:
+
+<p align="left">
+    <img src="./images/Select-Media-File-Click-Open.png"/>
+</p>
+
+#### Wait for file to upload
+
+Wait for the file to finish uploading:
+
+<p align="left">
+    <img src="./images/Uploading.png"/>
+</p>
+
+#### Pause uploading
+
+If you want you can pause upload by clicking _Pause button_:
+
+<p align="left">
+    <img src="./images/Pause-button.png"/>
+</p>
+
+#### Continue uploading
+
+Continue upload by clicking _Continue button_:
+
+<p align="left">
+    <img src="./images/Continue-button.png"/>
+</p>
+
+#### Wait for media to finish Processing
+
+Wait for the media file to finish Processing:
+
+<p align="left">
+    <img src="./images/Processing.png"/>
+</p>
+
+#### Click View media button
+
+Click the View media button to open the media page:
+
+<p align="left">
+    <img src="./images/Click-View-media-button.png"/>
+</p>
+
+#### Media will be in the encoding queue
+
+The media will take some time to finish encoding (MediaCMS will transcode the file to several formats and resolutions). Meanwhile you can edit the media file to add metadata.
+
+#### Click Edit Media button
+
+Click the EDIT MEDIA button to add metadata and configure the poster image:
+
+<p align="left">
+    <img src="./images/Click-Edit-Media-button.png"/>
+</p>
+
+#### Add Metadata (Summary, Description etc.)
+
+Make sure you fill in all the required fields, and try to complete as many of the non-required fields as possible. This ensures the database is populated with useful meta-data to help others access useful information about you and your video.
+
+<p align="left">
+    <img src="./images/Edit-Media-Metadata-1.png"/>
+</p>
+
+<p align="left">
+    <img src="./images/Edit-Media-Metadata-2.png"/>
+</p>
+
+
+
+## Downloading media
+
+MediaCMS offers a configurable option whereby users can make their media files available for download. Downloads are available for transcoded files, and the original file.
+
+#### How To Enable Download
+
+Visit the media view page and choose the EDIT MEDIA button.
+
+Select the checkbox for "Allow Downloads"
+
+#### How To Download Media
+
+Visit the media view page and click the DOWNLOAD button below the video player.
+
+<p align="left">
+    <img src="./images/Click-Download-Button.png">
+</p>
+
+Choose the version you wish to download - a transcoded file or the original file:
+
+<p align="left">
+    <img src="./images/Click-version-download.png">
+</p>
+
+Choose Save File and click the OK button.
+
+<p align="left">
+    <img src="./images/Save-File.png">
+</p>
+
+
+
+## Adding captions/subtitles
+
+With MediaCMS you can add subtitles/captions to your video by uploading a subtitles file in the popular .vtt format.
+
+### Visit Media Page & Click EDIT SUBTITLE Button
+
+Visit the "single media page" for the media you wish to add subtitles/captions to and click the EDIT SUBTITLES button:
+
+<p align="left">
+    <img src="./images/Click-EDIT-SUBTITLE.png"/>
+</p>
+
+### Upload Subtitles in .vtt Format
+
+Click the Language menu to select the correct language for your Subtitles/Captions file:
+
+<p align="left">
+    <img src="./images/Click-Subtitle-Language-Menu.png"/>
+</p>
+
+Choose the correct Language for your file:
+
+<p align="left">
+    <img src="./images/Subtitles-captions1.png"/>
+</p>
+
+Click Browse to find a subtitles/captions file on your computer (if your file is not in the .vtt format, you may find a conversion service on the Internet):
+
+<p align="left">
+    <img src="./images/Subtitles-captions2.png"/>
+</p>
+
+Choose a .vtt subtitles/captions file from your computer:
+
+<p align="left">
+    <img src="./images/Subtitles-captions3.png"/>
+</p>
+
+Click the Add button to add the file to your media:
+
+<p align="left">
+    <img src="./images/Click-ADD-button.png"/>
+</p>
+
+### View Subtitles/Captions in Video Player
+
+You can now watch the captions/subtitles play back in the video player - and toggle display on/off by clicking the CC button:
+
+<p align="left">
+    <img src="./images/CC-display.png"/>
+</p>
+
+## Search media
+How search can be used
+
+## Share media
+How to share media
+
+## Embed media
+How to use the embed media option
+
+## Customize my profile options
+Customize profile and channel

files/feeds.py

@@ -1,12 +1,11 @@
 from django.conf import settings
 from django.contrib.postgres.search import SearchQuery
 from django.contrib.syndication.views import Feed
-from django.db.models import Q
 from django.urls import reverse
 from django.utils.feedgenerator import Rss201rev2Feed
 
 from . import helpers
-from .models import Category, Media
+from .models import Media
 from .stop_words import STOP_WORDS
 
 

files/helpers.py

@@ -3,7 +3,6 @@
 
 import hashlib
 import json
-import math
 import os
 import random
 import shutil
@@ -23,6 +22,8 @@ CRF_ENCODING_NUM_SECONDS = 2  # 0 * 60 # videos with greater duration will get
 # you should use CRF encoding.
 
 MAX_RATE_MULTIPLIER = 1.5
+MIN_RATE_MULTIPLIER = 0.5
+
 BUF_SIZE_MULTIPLIER = 1.5
 
 # in seconds, anything between 2 and 6 makes sense
@@ -238,7 +239,8 @@ def media_file_info(input_file):
     - `filename`: Filename
     - `file_size`: Size of the file in bytes
     - `video_duration`: Duration of the video in `s.msec`
-    - `video_frame_rate`: Framerate in Hz
+    - `video_frame_rate_d`: Framerate franction denominator
+    - `video_frame_rate_n`: Framerate fraction nominator
     - `video_bitrate`: Bitrate of the video stream in kBit/s
     - `video_width`: Width in pixels
     - `video_height`: Height in pixels
@@ -367,21 +369,33 @@ def media_file_info(input_file):
         stream_size = sum([int(line) for line in stdout.split("\n") if line != ""])
         video_bitrate = round((stream_size * 8 / 1024.0) / video_duration, 2)
 
+    if "r_frame_rate" in video_info.keys():
+        video_frame_rate = video_info["r_frame_rate"].partition("/")
+        video_frame_rate_n = video_frame_rate[0]
+        video_frame_rate_d = video_frame_rate[2]
+
     ret = {
         "filename": input_file,
         "file_size": file_size,
         "video_duration": video_duration,
-        "video_frame_rate": float(Fraction(video_info["r_frame_rate"])),
+        "video_frame_rate_n": video_frame_rate_n,
+        "video_frame_rate_d": video_frame_rate_d,
         "video_bitrate": video_bitrate,
         "video_width": video_info["width"],
         "video_height": video_info["height"],
         "video_codec": video_info["codec_name"],
         "has_video": has_video,
         "has_audio": has_audio,
+        "color_range": video_info.get("color_range"),
+        "color_space": video_info.get("color_space"),
+        "color_transfer": video_info.get("color_space"),
+        "color_primaries": video_info.get("color_primaries"),
+        "field_order": video_info.get("field_order"),
+        "display_aspect_ratio": video_info.get("display_aspect_ratio"),
+        "sample_aspect_ratio": video_info.get("sample_aspect_ratio"),
     }
 
     if has_audio:
-        audio_duration = 1
         if "duration" in audio_info.keys():
             audio_duration = float(audio_info["duration"])
         elif "tags" in audio_info.keys() and "DURATION" in audio_info["tags"]:
@@ -493,7 +507,7 @@ def get_base_ffmpeg_command(
         codec {str} -- video codec
         encoder {str} -- video encoder
         audio_encoder {str} -- audio encoder
-        target_fps {int} -- target FPS
+        target_fps {fractions.Fraction} -- target FPS
         target_height {int} -- height
         target_rate {int} -- target bitrate in kbps
         target_rate_audio {int} -- audio target bitrate
@@ -502,10 +516,12 @@ def get_base_ffmpeg_command(
         enc_type {str} -- encoding type (twopass or crf)
     """
 
-    target_fps = int(target_fps)
-    # avoid Frame rate very high for a muxer not efficiently supporting it.
-    if target_fps > 90:
-        target_fps = 90
+    # avoid very high frame rates
+    while target_fps > 60:
+        target_fps = target_fps / 2
+
+    if target_fps < 1:
+        target_fps = 1
 
     base_cmd = [
         settings.FFMPEG_COMMAND,
@@ -623,6 +639,8 @@ def get_base_ffmpeg_command(
                 str(keyframe_distance),
                 "-maxrate",
                 str(int(int(target_rate) * MAX_RATE_MULTIPLIER)) + "k",
+                "-minrate",
+                str(int(int(target_rate) * MIN_RATE_MULTIPLIER)) + "k",
                 "-bufsize",
                 str(int(int(target_rate) * BUF_SIZE_MULTIPLIER)) + "k",
                 "-speed",
@@ -670,8 +688,8 @@ def produce_ffmpeg_commands(media_file, media_info, resolution, codec, output_fi
     else:
         return False
 
-    src_framerate = media_info.get("video_frame_rate", 30)
-    if src_framerate <= 30:
+    target_fps = Fraction(int(media_info.get("video_frame_rate_n", 30)), int(media_info.get("video_frame_rate_d", 1)))
+    if target_fps <= 30:
         target_rate = VIDEO_BITRATES[codec][25].get(resolution)
     else:
         target_rate = VIDEO_BITRATES[codec][60].get(resolution)
@@ -688,9 +706,6 @@ def produce_ffmpeg_commands(media_file, media_info, resolution, codec, output_fi
     #        target_fps = 25
     #    else:
 
-    # adjust the target frame rate if the input is fractional
-    target_fps = src_framerate if isinstance(src_framerate, int) else math.ceil(src_framerate)
-
     if media_info.get("video_duration") > CRF_ENCODING_NUM_SECONDS:
         enc_type = "crf"
     else:

files/models.py

@@ -24,7 +24,6 @@ from imagekit.processors import ResizeToFit
 from mptt.models import MPTTModel, TreeForeignKey
 
 from . import helpers
-from .methods import notify_users
 from .stop_words import STOP_WORDS
 
 logger = logging.getLogger(__name__)
@@ -1343,6 +1342,8 @@ def media_save(sender, instance, created, **kwargs):
     # SOS: do not put anything here, as if more logic is added,
     # we have to disconnect signal to avoid infinite recursion
     if created:
+        from .methods import notify_users
+
         instance.media_init()
         notify_users(friendly_token=instance.friendly_token, action="media_added")
 
@@ -1507,7 +1508,7 @@ def encoding_file_save(sender, instance, created, **kwargs):
                     # to avoid that this is run twice
                     if (
                         len(orig_chunks)
-                        == Encoding.objects.filter(
+                        == Encoding.objects.filter(  # noqa
                             media=instance.media,
                             profile=instance.profile,
                             chunks_info=instance.chunks_info,
@@ -1537,7 +1538,7 @@ def encoding_file_save(sender, instance, created, **kwargs):
         chunks_paths = [f.media_file.path for f in chunks]
 
         all_logs = "\n".join([st.logs for st in chunks])
-        encoding.logs = "{0}\n{1}\n{2}".format(chunks_paths, all_logs)
+        encoding.logs = "{0}\n{1}".format(chunks_paths, all_logs)
         workers = list(set([st.worker for st in chunks]))
         encoding.worker = json.dumps({"workers": workers})
         start_date = min([st.add_date for st in chunks])
@@ -1548,7 +1549,7 @@ def encoding_file_save(sender, instance, created, **kwargs):
         who = Encoding.objects.filter(media=encoding.media, profile=encoding.profile).exclude(id=encoding.id)
 
         who.delete()
-        pass  # TODO: merge with above if, do not repeat code
+        # TODO: merge with above if, do not repeat code
     else:
         if instance.status in ["fail", "success"]:
             instance.media.post_encode_actions(encoding=instance, action="add")
@@ -1556,7 +1557,6 @@ def encoding_file_save(sender, instance, created, **kwargs):
         encodings = set([encoding.status for encoding in Encoding.objects.filter(media=instance.media)])
         if ("running" in encodings) or ("pending" in encodings):
             return
-        workers = list(set([encoding.worker for encoding in Encoding.objects.filter(media=instance.media)]))
 
 
 @receiver(post_delete, sender=Encoding)

files/serializers.py

@@ -38,7 +38,6 @@ class MediaSerializer(serializers.ModelSerializer):
             "friendly_token",
             "user",
             "add_date",
-            "views",
             "media_type",
             "state",
             "duration",
@@ -49,6 +48,7 @@ class MediaSerializer(serializers.ModelSerializer):
             "reported_times",
             "size",
             "is_reviewed",
+            "featured",
         )
         fields = (
             "friendly_token",
@@ -64,8 +64,6 @@ class MediaSerializer(serializers.ModelSerializer):
             "duration",
             "thumbnail_url",
             "is_reviewed",
-            "url",
-            "api_url",
             "preview_url",
             "author_name",
             "author_profile",

files/tasks.py

@@ -592,7 +592,7 @@ def save_user_action(user_or_session, friendly_token=None, action="watch", extra
     if not (user or session_key):
         return False
 
-    if action in ["like", "dislike", "report"]:
+    if action in ["like", "dislike", "watch", "report"]:
         if not pre_save_action(
             media=media,
             user=user,

files/tests/__init__.py

@@ -0,0 +1 @@
+from .user_utils import create_account  # noqa

files/tests/user_utils.py

@@ -0,0 +1,24 @@
+from faker import Factory
+
+from users.models import User
+
+faker = Factory.create()
+
+
+def create_account(username=None, email=None, password=None, name=None, **kwargs):
+    "Allow to create accounts by passing None or specific arguements"
+    email = email or faker.email()
+    username = username or email.split('@')[0]
+    password = password or faker.password()
+    name = name or faker.name()
+
+    description = kwargs.get('description') or faker.text()
+    is_superuser = kwargs.get('is_superuser') or False
+    is_manager = kwargs.get('is_manager') or False
+    is_editor = kwargs.get('is_editor') or False
+
+    user = User.objects.create(username=username, email=email, name=name, description=description, is_superuser=is_superuser, is_staff=is_superuser, is_editor=is_editor, is_manager=is_manager)
+
+    user.set_password(password)
+    user.save()
+    return user

files/urls.py

@@ -1,5 +1,5 @@
 from django.conf import settings
-from django.conf.urls import include, url
+from django.conf.urls import include, re_path
 from django.conf.urls.static import static
 from django.urls import path
 
@@ -7,85 +7,85 @@ from . import management_views, views
 from .feeds import IndexRSSFeed, SearchRSSFeed
 
 urlpatterns = [
-    url(r"^$", views.index),
-    url(r"^about", views.about, name="about"),
-    url(r"^add_subtitle", views.add_subtitle, name="add_subtitle"),
-    url(r"^categories$", views.categories, name="categories"),
-    url(r"^contact$", views.contact, name="contact"),
-    url(r"^edit", views.edit_media, name="edit_media"),
-    url(r"^embed", views.embed_media, name="get_embed"),
-    url(r"^featured$", views.featured_media),
-    url(r"^fu/", include(("uploader.urls", "uploader"), namespace="uploader")),
-    url(r"^history$", views.history, name="history"),
-    url(r"^liked$", views.liked_media, name="liked_media"),
-    url(r"^latest$", views.latest_media),
-    url(r"^members", views.members, name="members"),
-    url(
+    re_path(r"^$", views.index),
+    re_path(r"^about", views.about, name="about"),
+    re_path(r"^add_subtitle", views.add_subtitle, name="add_subtitle"),
+    re_path(r"^categories$", views.categories, name="categories"),
+    re_path(r"^contact$", views.contact, name="contact"),
+    re_path(r"^edit", views.edit_media, name="edit_media"),
+    re_path(r"^embed", views.embed_media, name="get_embed"),
+    re_path(r"^featured$", views.featured_media),
+    re_path(r"^fu/", include(("uploader.urls", "uploader"), namespace="uploader")),
+    re_path(r"^history$", views.history, name="history"),
+    re_path(r"^liked$", views.liked_media, name="liked_media"),
+    re_path(r"^latest$", views.latest_media),
+    re_path(r"^members", views.members, name="members"),
+    re_path(
         r"^playlist/(?P<friendly_token>[\w]*)$",
         views.view_playlist,
         name="get_playlist",
     ),
-    url(
+    re_path(
         r"^playlists/(?P<friendly_token>[\w]*)$",
         views.view_playlist,
         name="get_playlist",
     ),
-    url(r"^popular$", views.recommended_media),
-    url(r"^recommended$", views.recommended_media),
+    re_path(r"^popular$", views.recommended_media),
+    re_path(r"^recommended$", views.recommended_media),
     path("rss/", IndexRSSFeed()),
-    url("^rss/search", SearchRSSFeed()),
-    url(r"^search", views.search, name="search"),
-    url(r"^scpublisher", views.upload_media, name="upload_media"),
-    url(r"^tags", views.tags, name="tags"),
-    url(r"^tos$", views.tos, name="terms_of_service"),
-    url(r"^view", views.view_media, name="get_media"),
-    url(r"^upload", views.upload_media, name="upload_media"),
+    re_path("^rss/search", SearchRSSFeed()),
+    re_path(r"^search", views.search, name="search"),
+    re_path(r"^scpublisher", views.upload_media, name="upload_media"),
+    re_path(r"^tags", views.tags, name="tags"),
+    re_path(r"^tos$", views.tos, name="terms_of_service"),
+    re_path(r"^view", views.view_media, name="get_media"),
+    re_path(r"^upload", views.upload_media, name="upload_media"),
     # API VIEWS
-    url(r"^api/v1/media$", views.MediaList.as_view()),
-    url(r"^api/v1/media/$", views.MediaList.as_view()),
-    url(
+    re_path(r"^api/v1/media$", views.MediaList.as_view()),
+    re_path(r"^api/v1/media/$", views.MediaList.as_view()),
+    re_path(
         r"^api/v1/media/(?P<friendly_token>[\w]*)$",
         views.MediaDetail.as_view(),
         name="api_get_media",
     ),
-    url(
+    re_path(
         r"^api/v1/media/encoding/(?P<encoding_id>[\w]*)$",
         views.EncodingDetail.as_view(),
         name="api_get_encoding",
     ),
-    url(r"^api/v1/search$", views.MediaSearch.as_view()),
-    url(
+    re_path(r"^api/v1/search$", views.MediaSearch.as_view()),
+    re_path(
         r"^api/v1/media/(?P<friendly_token>[\w]*)/actions$",
         views.MediaActions.as_view(),
     ),
-    url(r"^api/v1/categories$", views.CategoryList.as_view()),
-    url(r"^api/v1/tags$", views.TagList.as_view()),
-    url(r"^api/v1/comments$", views.CommentList.as_view()),
-    url(
+    re_path(r"^api/v1/categories$", views.CategoryList.as_view()),
+    re_path(r"^api/v1/tags$", views.TagList.as_view()),
+    re_path(r"^api/v1/comments$", views.CommentList.as_view()),
+    re_path(
         r"^api/v1/media/(?P<friendly_token>[\w]*)/comments$",
         views.CommentDetail.as_view(),
     ),
-    url(
+    re_path(
         r"^api/v1/media/(?P<friendly_token>[\w]*)/comments/(?P<uid>[\w-]*)$",
         views.CommentDetail.as_view(),
     ),
-    url(r"^api/v1/playlists$", views.PlaylistList.as_view()),
-    url(r"^api/v1/playlists/$", views.PlaylistList.as_view()),
-    url(
+    re_path(r"^api/v1/playlists$", views.PlaylistList.as_view()),
+    re_path(r"^api/v1/playlists/$", views.PlaylistList.as_view()),
+    re_path(
         r"^api/v1/playlists/(?P<friendly_token>[\w]*)$",
         views.PlaylistDetail.as_view(),
         name="api_get_playlist",
     ),
-    url(r"^api/v1/user/action/(?P<action>[\w]*)$", views.UserActions.as_view()),
+    re_path(r"^api/v1/user/action/(?P<action>[\w]*)$", views.UserActions.as_view()),
     # ADMIN VIEWS
-    url(r"^api/v1/encode_profiles/$", views.EncodeProfileList.as_view()),
-    url(r"^api/v1/manage_media$", management_views.MediaList.as_view()),
-    url(r"^api/v1/manage_comments$", management_views.CommentList.as_view()),
-    url(r"^api/v1/manage_users$", management_views.UserList.as_view()),
-    url(r"^api/v1/tasks$", views.TasksList.as_view()),
-    url(r"^api/v1/tasks/$", views.TasksList.as_view()),
-    url(r"^api/v1/tasks/(?P<friendly_token>[\w|\W]*)$", views.TaskDetail.as_view()),
-    url(r"^manage/comments$", views.manage_comments, name="manage_comments"),
-    url(r"^manage/media$", views.manage_media, name="manage_media"),
-    url(r"^manage/users$", views.manage_users, name="manage_users"),
+    re_path(r"^api/v1/encode_profiles/$", views.EncodeProfileList.as_view()),
+    re_path(r"^api/v1/manage_media$", management_views.MediaList.as_view()),
+    re_path(r"^api/v1/manage_comments$", management_views.CommentList.as_view()),
+    re_path(r"^api/v1/manage_users$", management_views.UserList.as_view()),
+    re_path(r"^api/v1/tasks$", views.TasksList.as_view()),
+    re_path(r"^api/v1/tasks/$", views.TasksList.as_view()),
+    re_path(r"^api/v1/tasks/(?P<friendly_token>[\w|\W]*)$", views.TaskDetail.as_view()),
+    re_path(r"^manage/comments$", views.manage_comments, name="manage_comments"),
+    re_path(r"^manage/media$", views.manage_media, name="manage_media"),
+    re_path(r"^manage/users$", views.manage_users, name="manage_users"),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

files/views.py

@@ -366,13 +366,18 @@ class MediaList(APIView):
     """Media listings views"""
 
     permission_classes = (IsAuthorizedToAdd,)
-    parser_classes = (JSONParser, MultiPartParser, FormParser, FileUploadParser)
+    parser_classes = (MultiPartParser, FormParser, FileUploadParser)
 
     @swagger_auto_schema(
-        manual_parameters=[],
+        manual_parameters=[
+            openapi.Parameter(name='page', type=openapi.TYPE_INTEGER, in_=openapi.IN_QUERY, description='Page number'),
+            openapi.Parameter(name='author', type=openapi.TYPE_STRING, in_=openapi.IN_QUERY, description='username'),
+            openapi.Parameter(name='show', type=openapi.TYPE_STRING, in_=openapi.IN_QUERY, description='show', enum=['recommended', 'featured', 'latest']),
+        ],
         tags=['Media'],
-        operation_summary='to_be_written',
-        operation_description='to_be_written',
+        operation_summary='List Media',
+        operation_description='Lists all media',
+        responses={200: MediaSerializer(many=True)},
     )
     def get(self, request, format=None):
         # Show media
@@ -414,10 +419,15 @@ class MediaList(APIView):
         return paginator.get_paginated_response(serializer.data)
 
     @swagger_auto_schema(
-        manual_parameters=[],
+        manual_parameters=[
+            openapi.Parameter(name="media_file", in_=openapi.IN_FORM, type=openapi.TYPE_FILE, required=True, description="media_file"),
+            openapi.Parameter(name="description", in_=openapi.IN_FORM, type=openapi.TYPE_STRING, required=False, description="description"),
+            openapi.Parameter(name="title", in_=openapi.IN_FORM, type=openapi.TYPE_STRING, required=False, description="title"),
+        ],
         tags=['Media'],
-        operation_summary='to_be_written',
-        operation_description='to_be_written',
+        operation_summary='Add new Media',
+        operation_description='Adds a new media, for authenticated users',
+        responses={201: openapi.Response('response description', MediaSerializer), 401: 'bad request'},
     )
     def post(self, request, format=None):
         # Add new media
@@ -435,7 +445,7 @@ class MediaDetail(APIView):
     """
 
     permission_classes = (permissions.IsAuthenticatedOrReadOnly, IsUserOrEditor)
-    parser_classes = (JSONParser, MultiPartParser, FormParser, FileUploadParser)
+    parser_classes = (MultiPartParser, FormParser, FileUploadParser)
 
     def get_object(self, friendly_token, password=None):
         try:
@@ -461,10 +471,13 @@ class MediaDetail(APIView):
             )
 
     @swagger_auto_schema(
-        manual_parameters=[],
+        manual_parameters=[
+            openapi.Parameter(name='friendly_token', type=openapi.TYPE_STRING, in_=openapi.IN_PATH, description='unique identifier', required=True),
+        ],
         tags=['Media'],
-        operation_summary='to_be_written',
-        operation_description='to_be_written',
+        operation_summary='Get information for Media',
+        operation_description='Get information for a media',
+        responses={200: SingleMediaSerializer(), 400: 'bad request'},
     )
     def get(self, request, friendly_token, format=None):
         # Get media details
@@ -492,10 +505,23 @@ class MediaDetail(APIView):
         return Response(ret)
 
     @swagger_auto_schema(
-        manual_parameters=[],
+        manual_parameters=[
+            openapi.Parameter(name='friendly_token', type=openapi.TYPE_STRING, in_=openapi.IN_PATH, description='unique identifier', required=True),
+            openapi.Parameter(name='type', type=openapi.TYPE_STRING, in_=openapi.IN_FORM, description='action to perform', enum=['encode', 'review']),
+            openapi.Parameter(
+                name='encoding_profiles',
+                type=openapi.TYPE_ARRAY,
+                items=openapi.Items(type=openapi.TYPE_STRING),
+                in_=openapi.IN_FORM,
+                description='if action to perform is encode, need to specify list of ids of encoding profiles',
+            ),
+            openapi.Parameter(name='result', type=openapi.TYPE_BOOLEAN, in_=openapi.IN_FORM, description='if action is review, this is the result (True for reviewed, False for not reviewed)'),
+        ],
         tags=['Media'],
-        operation_summary='to_be_written',
-        operation_description='to_be_written',
+        operation_summary='Run action on Media',
+        operation_description='Actions for a media, for MediaCMS editors and managers',
+        responses={201: 'action created', 400: 'bad request'},
+        operation_id='media_manager_actions',
     )
     def post(self, request, friendly_token, format=None):
         """superuser actions
@@ -514,7 +540,6 @@ class MediaDetail(APIView):
         action = request.data.get("type")
         profiles_list = request.data.get("encoding_profiles")
         result = request.data.get("result", True)
-
         if action == "encode":
             # Create encoding tasks for specific profiles
             valid_profiles = []
@@ -548,10 +573,15 @@ class MediaDetail(APIView):
         )
 
     @swagger_auto_schema(
-        manual_parameters=[],
+        manual_parameters=[
+            openapi.Parameter(name="description", in_=openapi.IN_FORM, type=openapi.TYPE_STRING, required=False, description="description"),
+            openapi.Parameter(name="title", in_=openapi.IN_FORM, type=openapi.TYPE_STRING, required=False, description="title"),
+            openapi.Parameter(name="media_file", in_=openapi.IN_FORM, type=openapi.TYPE_FILE, required=False, description="media_file"),
+        ],
         tags=['Media'],
-        operation_summary='to_be_written',
-        operation_description='to_be_written',
+        operation_summary='Update Media',
+        operation_description='Update a Media, for Media uploader',
+        responses={201: openapi.Response('response description', MediaSerializer), 401: 'bad request'},
     )
     def put(self, request, friendly_token, format=None):
         # Update a media object
@@ -561,16 +591,24 @@ class MediaDetail(APIView):
 
         serializer = MediaSerializer(media, data=request.data, context={"request": request})
         if serializer.is_valid():
-            media_file = request.data["media_file"]
-            serializer.save(user=request.user, media_file=media_file)
+            if request.data.get('media_file'):
+                media_file = request.data["media_file"]
+                serializer.save(user=request.user, media_file=media_file)
+            else:
+                serializer.save(user=request.user)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @swagger_auto_schema(
-        manual_parameters=[],
+        manual_parameters=[
+            openapi.Parameter(name='friendly_token', type=openapi.TYPE_STRING, in_=openapi.IN_PATH, description='unique identifier', required=True),
+        ],
         tags=['Media'],
-        operation_summary='to_be_written',
-        operation_description='to_be_written',
+        operation_summary='Delete Media',
+        operation_description='Delete a Media, for MediaCMS editors and managers',
+        responses={
+            204: 'no content',
+        },
     )
     def delete(self, request, friendly_token, format=None):
         # Delete a media object
@@ -757,7 +795,7 @@ class MediaSearch(APIView):
             media = media.filter(user__username=author)
 
         if upload_date:
-            gte = lte = None
+            gte = None
             if upload_date == 'today':
                 gte = datetime.now().date()
             if upload_date == 'this_week':
@@ -769,8 +807,6 @@ class MediaSearch(APIView):
             if upload_date == 'this_year':
                 year = datetime.now().date().year
                 gte = datetime(year, 1, 1)
-            if lte:
-                media = media.filter(add_date__lte=lte)
             if gte:
                 media = media.filter(add_date__gte=gte)
 
@@ -803,6 +839,9 @@ class PlaylistList(APIView):
         tags=['Playlists'],
         operation_summary='to_be_written',
         operation_description='to_be_written',
+        responses={
+            200: openapi.Response('response description', PlaylistSerializer(many=True)),
+        },
     )
     def get(self, request, format=None):
         pagination_class = api_settings.DEFAULT_PAGINATION_CLASS
@@ -1005,8 +1044,8 @@ class EncodingDetail(APIView):
                     chunk=chunk,
                     chunk_file_path=chunk_file_path,
                 ).count()
-                > 1
-                and force is False
+                > 1  # noqa
+                and force is False  # noqa
             ):
                 Encoding.objects.filter(id=encoding_id).delete()
                 return Response({"status": "fail"}, status=status.HTTP_400_BAD_REQUEST)
@@ -1124,6 +1163,9 @@ class CommentList(APIView):
         tags=['Comments'],
         operation_summary='Lists Comments',
         operation_description='Paginated listing of all comments',
+        responses={
+            200: openapi.Response('response description', CommentSerializer(many=True)),
+        },
     )
     def get(self, request, format=None):
         pagination_class = api_settings.DEFAULT_PAGINATION_CLASS
@@ -1280,6 +1322,9 @@ class CategoryList(APIView):
         tags=['Categories'],
         operation_summary='Lists Categories',
         operation_description='Lists all categories',
+        responses={
+            200: openapi.Response('response description', CategorySerializer),
+        },
     )
     def get(self, request, format=None):
         categories = Category.objects.filter().order_by("title")
@@ -1298,6 +1343,9 @@ class TagList(APIView):
         tags=['Tags'],
         operation_summary='Lists Tags',
         operation_description='Paginated listing of all tags',
+        responses={
+            200: openapi.Response('response description', TagSerializer),
+        },
     )
     def get(self, request, format=None):
         tags = Tag.objects.filter().order_by("-media_count")
@@ -1314,8 +1362,9 @@ class EncodeProfileList(APIView):
     @swagger_auto_schema(
         manual_parameters=[],
         tags=['Encoding Profiles'],
-        operation_summary='to_be_written',
-        operation_description='to_be_written',
+        operation_summary='List Encoding Profiles',
+        operation_description='Lists all encoding profiles for videos',
+        responses={200: EncodeProfileSerializer(many=True)},
     )
     def get(self, request, format=None):
         profiles = EncodeProfile.objects.all()

frontend/.babelrc

@@ -0,0 +1,12 @@
+{
+	"presets": [
+		"@babel/react", ["@babel/env", {
+			"modules": false,
+			"useBuiltIns": "usage",
+    		"corejs": 3,
+			"targets": {
+				"browsers": ["defaults"]
+			}
+		}]
+	]
+}

frontend/.env

@@ -0,0 +1,12 @@
+MEDIACMS_ID=mediacms-frontend
+MEDIACMS_TITLE=MediaCMS Frontend
+
+MEDIACMS_URL=http://localhost
+MEDIACMS_API=http://localhost/api/v1
+
+MEDIACMS_USER_IS_ADMIN=true
+MEDIACMS_USER_IS_ANONYMOUS=false
+
+MEDIACMS_USER_USERNAME=admin
+MEDIACMS_USER_NAME=Admin
+MEDIACMS_USER_THUMB=http://localhost/media/userlogos/user.jpg

frontend/.gitignore

@@ -0,0 +1,131 @@
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+!modules/**/*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env.development
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+# dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# System files
+.fuse_hidden*
+
+# Exports
+/build
+/dist
+
+# Packages dev files
+# /packages/**/package-lock.json
+
+# Other
+*playground*

frontend/.prettierignore

@@ -0,0 +1 @@
+config/templates/*.ejs

frontend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120
+}

frontend/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

frontend/README.md

@@ -0,0 +1,29 @@
+# MediaCMS Web Client (demo)
+
+### **Requirements**
+
+- nodejs: version >= 14.17.0
+
+---
+
+### **Installation**
+
+    npm install
+
+---
+
+### **Development**
+
+    npm run start
+
+Open in browser: [http://localhost:8088](http://localhost:8088)
+
+---
+
+### **Build**
+
+    npm run dist
+
+Generates the folder "**_frontend/dist_**".
+
+Copy folders and files from "**_frontend/dist/static_**" into "**_static_**".

frontend/config/mediacms.config.html.js

@@ -0,0 +1,44 @@
+module.exports = {
+  head: {
+    meta: [
+      { charset: 'utf-8' },
+      { content: 'ie=edge', 'http-equiv': 'x-ua-compatible' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'theme-color', content: '#fafafa' },
+      { name: 'msapplication-TileColor', content: '#fafafa' },
+      { name: 'msapplication-config', content: 'favicons/browserconfig.xml' },
+    ],
+    links: [
+      /**
+       * Manifest file link.
+       */
+      { rel: 'manifest', href: 'static/favicons/site.webmanifest' },
+      /**
+       * Favicon links.
+       */
+      { rel: 'apple-touch-icon', sizes: '180x180', href: 'static/favicons/apple-touch-icon.png' },
+      { rel: 'icon', type: 'image/png', sizes: '32x32', href: 'static/favicons/favicon-32x32.png' },
+      { rel: 'icon', type: 'image/png', sizes: '16x16', href: 'static/favicons/favicon-16x16.png' },
+      { rel: 'mask-icon', href: 'static/favicons/safari-pinned-tab.svg', color: '#fafafa' },
+      { rel: 'shortcut icon', href: 'static/favicons/favicon.ico' },
+      /**
+       * Stylesheet links
+       */
+      { rel: 'preload', href: 'static/css/_extra.css', as: 'style' },
+      { rel: 'stylesheet', href: 'static/css/_extra.css' },
+
+      // 'https://fonts.googleapis.com/icon?family=Material+Icons',
+      { rel: 'preload', href: 'static/lib/material-icons/material-icons.css', as: 'style' },
+      { rel: 'stylesheet', href: 'static/lib/material-icons/material-icons.css' },
+
+      // 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i&display=swap
+      { rel: 'preload', href: 'static/lib/gfonts/gfonts.css', as: 'style' },
+      { rel: 'stylesheet', href: 'static/lib/gfonts/gfonts.css' },
+    ],
+    scripts: [],
+  },
+  body: {
+    scripts: [],
+    snippet: '',
+  },
+};

frontend/config/mediacms.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+
+const rootDir = '..';
+const srcDir = rootDir + '/src';
+const configDir = srcDir + '/templates/config';
+const coreConfigDir = configDir + '/core';
+const installConfigDir = configDir + '/installation';
+
+module.exports = {
+  src: path.resolve(__dirname, srcDir),
+  build: path.resolve(__dirname, rootDir),
+  html: require('./mediacms.config.html.js'),
+  pages: require('./mediacms.config.pages.js'),
+  window: {
+    MediaCMS: {
+      api: require(coreConfigDir + '/api.config.js'),
+      url: require(coreConfigDir + '/url.config.js'),
+      user: require(coreConfigDir + '/user.config.js'),
+      site: require(installConfigDir + '/site.config.js'),
+      pages: require(installConfigDir + '/pages.config.js'),
+      contents: require(installConfigDir + '/contents.config.js'),
+      features: require(installConfigDir + '/features.config.js'),
+      /*notifications: [
+          'Message one text',
+          'Message two text',
+          'Message three text'
+      ],*/
+    },
+  },
+  postcssConfigFile: path.resolve(__dirname, './postcss.config.js'),
+};

frontend/config/mediacms.config.pages.js

@@ -0,0 +1,268 @@
+const templates = require('./mediacms.config.templates');
+
+const DEV_SAMPLE_DATA = {
+  profileId: process.env.MEDIACMS_USER_USERNAME,
+  media: {
+    videoId: process.env.MEDIACMS_VIDEO_ID,
+    audioId: process.env.MEDIACMS_AUDIO_ID,
+    imageId: process.env.MEDIACMS_IMAGE_ID,
+    pdfId: process.env.MEDIACMS_PDF_ID,
+  },
+  playlistId: process.env.MEDIACMS_PLAYLIST_ID,
+};
+
+const formatPage = (page) => {
+  const pageContentId = 'page-' + page.id;
+  const filename = page.filename ? page.filename : ('home' === page.id ? 'index' : page.id) + '.html';
+  const render = page.renderer
+    ? page.renderer
+    : page.component
+    ? templates.renderPageContent({ page: { id: pageContentId, component: page.component } })
+    : undefined;
+  const headLinks = [
+    { rel: 'preload', href: './static/lib/video-js/7.7.5/video.min.js', as: 'script' },
+    ...(page.headLinks ? page.headLinks : []),
+  ];
+  const bodyScripts = [
+    { src: './static/lib/video-js/7.7.5/video.min.js' },
+    ...(page.bodyScripts ? page.bodyScripts : []),
+  ];
+
+  const ret = {
+    buildExclude: !!page.buildExclude,
+    title: page.title,
+    filename,
+    render,
+    html: {
+      head: {
+        links: headLinks,
+      },
+      body: {
+        scripts: bodyScripts,
+        snippet: page.snippet || templates.htmlBodySnippet({ id: pageContentId }),
+      },
+    },
+    window: { MediaCMS: page.global ? { ...page.global } : {} },
+  };
+
+  return ret;
+};
+
+const formatPageData = (page) => {
+  return formatPage({
+    ...page,
+  });
+};
+
+const formatStaticPageData = (page) => {
+  const pageContentId = 'page-' + page.id;
+  return formatPage({
+    ...page,
+    renderer: page.renderer
+      ? page.renderer
+      : page.component
+      ? templates.renderPageStaticContent({ page: { id: pageContentId, component: page.component } })
+      : undefined,
+  });
+};
+
+const PAGES = {
+  base: {
+    id: 'base',
+    title: 'Layout base',
+    renderer: templates.renderBase(),
+  },
+  index: { id: 'home', title: 'Home', component: 'HomePage' },
+  search: { id: 'search', title: 'Search results', component: 'SearchPage' },
+  latest: { id: 'latest', title: 'Recent uploads', component: 'LatestMediaPage' },
+  featured: { id: 'featured', title: 'Featured', component: 'FeaturedMediaPage' },
+  recommended: { id: 'recommended', title: 'Recommended', component: 'RecommendedMediaPage' },
+  members: { id: 'members', title: 'Members', component: 'MembersPage' },
+  history: { id: 'history', title: 'History', component: 'HistoryPage' },
+  liked: { id: 'liked', title: 'Liked media', component: 'LikedMediaPage' },
+  tags: { id: 'tags', title: 'Tags', component: 'TagsPage' },
+  categories: { id: 'categories', title: 'Categories', component: 'CategoriesPage' },
+  'manage-media': { id: 'manage-media', title: 'Manage media', component: 'ManageMediaPage' },
+  'manage-users': { id: 'manage-users', title: 'Manage users', component: 'ManageUsersPage' },
+  'manage-comments': { id: 'manage-comments', title: 'Manage comments', component: 'ManageCommentsPage' },
+  'add-media': {
+    id: 'add-media',
+    title: 'Add media',
+    renderer: templates.renderAddMediaPageContent(),
+    snippet: templates.htmlBodySnippetAddMediaPage(),
+    headLinks: [{ rel: 'preload', href: './static/lib/file-uploader/5.13.0/fine-uploader.min.js', as: 'script' }],
+    bodyScripts: [{ src: './static/lib/file-uploader/5.13.0/fine-uploader.min.js' }],
+  },
+  embed: {
+    id: 'embed',
+    title: 'Embedded player',
+    renderer: templates.renderEmbedPageContent({ page: { id: 'page-embed', component: 'EmbedPage' } }),
+    snippet: templates.htmlBodySnippetEmbedPage({ id: 'page-embed' }),
+    global: { mediaId: DEV_SAMPLE_DATA.media.videoId },
+  },
+  media: {
+    id: 'media',
+    title: 'Media',
+    component: 'MediaPage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.videoId },
+  },
+  'media-video': {
+    buildExclude: true,
+    id: 'media-video',
+    title: 'Media - Video',
+    component: 'MediaVideoPage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.videoId },
+  },
+  'media-audio': {
+    buildExclude: true,
+    id: 'media-audio',
+    title: 'Media - Audio',
+    component: 'MediaAudioPage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.audioId },
+  },
+  'media-image': {
+    buildExclude: true,
+    id: 'media-image',
+    title: 'Media - Image',
+    component: 'MediaImagePage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.imageId },
+  },
+  'media-pdf': {
+    buildExclude: true,
+    id: 'media-pdf',
+    title: 'Media - Pdf',
+    component: 'MediaPdfPage',
+    global: { mediaId: DEV_SAMPLE_DATA.media.pdfId },
+  },
+  playlist: {
+    id: 'playlist',
+    title: 'Playlist',
+    component: 'PlaylistPage',
+    global: { playlistId: DEV_SAMPLE_DATA.playlistId },
+  },
+  'profile-media': {
+    id: 'profile-media',
+    title: 'Profile - Media',
+    component: 'ProfileMediaPage',
+    global: { profileId: DEV_SAMPLE_DATA.profileId },
+  },
+  'profile-about': {
+    id: 'profile-about',
+    title: 'Profile - About',
+    component: 'ProfileAboutPage',
+    global: { profileId: DEV_SAMPLE_DATA.profileId },
+  },
+  'profile-playlists': {
+    id: 'profile-playlists',
+    title: 'Profile - Playlist',
+    component: 'ProfilePlaylistsPage',
+    global: { profileId: DEV_SAMPLE_DATA.profileId },
+  },
+};
+
+const STATIC_PAGES = {
+  error: {
+    buildExclude: true,
+    id: 'error',
+    title: 'Error',
+    renderer: templates.renderBase(),
+    snippet: templates.static.errorPage(),
+  },
+  about: {
+    id: 'about',
+    title: 'About',
+    renderer: templates.renderBase(),
+    snippet: templates.static.aboutPage(),
+  },
+  terms: {
+    buildExclude: true,
+    id: 'terms',
+    title: 'Terms',
+    renderer: templates.renderBase(),
+    snippet: templates.static.termsPage(),
+  },
+};
+
+const DEV_ONLY_STATIC_PAGES = {
+  'add-media-template': {
+    buildExclude: true,
+    id: 'add-media-template',
+    title: 'Add media - Template',
+    renderer: templates.renderAddMediaPageContent(),
+    snippet: templates.static.addMediaPageTemplate(),
+    headLinks: [{ rel: 'preload', href: './static/lib/file-uploader/5.13.0/fine-uploader.min.js', as: 'script' }],
+    bodyScripts: [{ src: './static/lib/file-uploader/5.13.0/fine-uploader.min.js' }],
+  },
+  'edit-media': {
+    buildExclude: true,
+    id: 'edit-media',
+    title: 'Edit media',
+    renderer: templates.renderBase(),
+    snippet: templates.static.editMediaPage(),
+  },
+  'edit-channel': {
+    buildExclude: true,
+    id: 'edit-channel',
+    title: 'Edit channel',
+    renderer: templates.renderBase(),
+    snippet: templates.static.editChannelPage(),
+  },
+  'edit-profile': {
+    buildExclude: true,
+    id: 'edit-profile',
+    title: 'Edit profile',
+    renderer: templates.renderBase(),
+    snippet: templates.static.editProfilePage(),
+  },
+  signin: {
+    buildExclude: true,
+    id: 'signin',
+    title: 'Sign in',
+    renderer: templates.renderBase(),
+    snippet: templates.static.signinPage(),
+  },
+  signout: {
+    buildExclude: true,
+    id: 'signout',
+    title: 'Sign out',
+    renderer: templates.renderBase(),
+    snippet: templates.static.signoutPage(),
+  },
+  register: {
+    buildExclude: true,
+    id: 'register',
+    title: 'Register',
+    renderer: templates.renderBase(),
+    snippet: templates.static.registerPage(),
+  },
+  'reset-password': {
+    buildExclude: true,
+    id: 'reset-password',
+    title: 'Reset password',
+    renderer: templates.renderBase(),
+    snippet: templates.static.resetPasswordPage(),
+  },
+  contact: {
+    buildExclude: true,
+    id: 'contact',
+    title: 'Contact us',
+    renderer: templates.renderBase(),
+    snippet: templates.static.contactPage(),
+  },
+};
+
+const pages = {};
+
+for (let k in PAGES) {
+  pages[k] = formatPageData(PAGES[k]);
+}
+
+for (let k in STATIC_PAGES) {
+  pages[k] = formatStaticPageData(STATIC_PAGES[k]);
+}
+
+for (let k in DEV_ONLY_STATIC_PAGES) {
+  pages[k] = formatStaticPageData(DEV_ONLY_STATIC_PAGES[k]);
+}
+
+module.exports = pages;

frontend/config/mediacms.config.templates.js

@@ -0,0 +1,45 @@
+const fs = require('fs');
+const path = require('path');
+const ejs = require('ejs');
+
+const templatesPath = path.join(__dirname, './templates');
+const staticTemplatesPath = path.join(__dirname, './templates/static');
+
+const compileTmpl = (filename) =>
+  ejs.compile(fs.readFileSync(path.join(templatesPath, filename), 'utf8'), {
+    root: [templatesPath],
+    filename: path.join(templatesPath, filename),
+    outputFunctionName: 'echo',
+  });
+
+const compileStaticTmpl = (filename) =>
+  ejs.compile(fs.readFileSync(path.join(staticTemplatesPath, filename), 'utf8'), {
+    root: [staticTemplatesPath],
+    filename: path.join(staticTemplatesPath, filename),
+    outputFunctionName: 'echo',
+  });
+
+module.exports = {
+  htmlBodySnippet: compileTmpl('htmlBodySnippet.ejs'),
+  htmlBodySnippetEmbedPage: compileTmpl('htmlBodySnippetEmbedPage.ejs'),
+  htmlBodySnippetAddMediaPage: compileTmpl('htmlBodySnippetAddMediaPage.ejs'),
+  renderBase: compileTmpl('renderBase.ejs'),
+  renderPageContent: compileTmpl('renderPageContent.ejs'),
+  renderPageStaticContent: compileTmpl('renderPageStaticContent.ejs'),
+  renderEmbedPageContent: compileTmpl('renderEmbedPageContent.ejs'),
+  renderAddMediaPageContent: compileTmpl('renderAddMediaPageContent.ejs'),
+  static: {
+    errorPage: compileStaticTmpl('errorPage.html'),
+    aboutPage: compileStaticTmpl('aboutPage.html'),
+    termsPage: compileStaticTmpl('termsPage.html'),
+    contactPage: compileStaticTmpl('contactPage.html'),
+    signinPage: compileStaticTmpl('signinPage.html'),
+    signoutPage: compileStaticTmpl('signoutPage.html'),
+    registerPage: compileStaticTmpl('registerPage.html'),
+    resetPasswordPage: compileStaticTmpl('resetPasswordPage.html'),
+    editMediaPage: compileStaticTmpl('editMediaPage.html'),
+    editChannelPage: compileStaticTmpl('editChannelPage.html'),
+    editProfilePage: compileStaticTmpl('editProfilePage.html'),
+    addMediaPageTemplate: compileStaticTmpl('addMediaPageTemplate.html'),
+  },
+};

frontend/config/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = (ctx) => {
+  const ret = {
+    map: ctx.env === 'development' ? ctx.map : false,
+    plugins: {
+      autoprefixer: {},
+    },
+  };
+
+  return ret;
+};

frontend/config/templates/htmlBodySnippet.ejs

@@ -0,0 +1,6 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+    <% if (id) { %><div id="<%= id %>"></div><% } %>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/htmlBodySnippetAddMediaPage.ejs

@@ -0,0 +1,65 @@
+<div id="add-media-page">
+	
+	<div class="page-container">
+	
+		<div id="app-header"></div>
+		<div id="app-sidebar"></div>
+
+		<div class="page-main-wrap">
+		
+			<main class="page-main">
+				<div class="page-main-inner">
+
+					<div class="media-uploader-wrap">
+						
+						<div class="media-uploader-top-wrap">
+							
+							<div class="media-uploader-top-left-wrap">
+								<h1>Upload media files</h1>
+							</div>
+							
+							<div class="media-uploader-top-right-wrap"></div>
+						</div>
+
+						<script type="text/template" id="qq-template"> <div class="media-uploader-bottom-wrap qq-uploader-selector"> <div class="media-uploader-bottom-left-wrap"> <div class="media-drag-drop-wrap"> <div class="media-drag-drop-inner" qq-drop-area-text="Drop files here"> <div class="media-drag-drop-content"> <div class="media-drag-drop-content-inner"> <span><i class="material-icons">cloud_upload</i></span> <span>Drag and drop files</span> <span>or</span> <span class="browse-files-btn-wrap"><span class="qq-upload-button-selector">Browse your files</span></span><div class="qq-upload-drop-area-selector media-dropzone" qq-hide-dropzone><span class="qq-upload-drop-area-text-selector"></span></div> </div></div></div></div></div><div class="media-uploader-bottom-right-wrap"> <ul class="media-upload-items-list qq-upload-list-selector"> <li> <div class="media-upload-item-main"> <div class="media-upload-item-thumb"> <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale alt=""/> <span class="media-upload-item-spinner qq-upload-spinner-selector"><i class="material-icons">autorenew</i></span> <button type="button" class="qq-upload-retry-selector retry-media-upload-item" aria-label="Retry"><i class="material-icons">refresh</i> Retry</button> </div><div class="media-upload-item-details"> <div class="media-upload-item-name"> <span class="media-upload-item-filename qq-upload-file-selector"></span> <input class="media-upload-item-filename-input qq-edit-filename-selector" tab-index="0" type="text"/> </div><div class="media-upload-item-details-bottom"> <div class="media-upload-item-progress-bar-container qq-progress-bar-container-selector"> <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="media-upload-item-progress-bar qq-progress-bar-selector"></div></div><span class="media-upload-item-upload-size qq-upload-size-selector"></span> <span role="status" class="media-upload-item-status-text qq-upload-status-text-selector"></span> </div><div class="media-upload-item-top-actions"> <span class="filename-edit qq-edit-filename-icon-selector" aria-label="Edit filename">Edit filename <i class="material-icons">create</i></span> <button type="button" class="delete-media-upload-item qq-upload-delete-selector" aria-label="Delete">Delete <i class="material-icons">delete</i></button> <button type="button" class="cancel-media-upload-item qq-upload-cancel-selector" aria-label="Cancel">Cancel <i class="material-icons">cancel</i></button> </div><div class="media-upload-item-bottom-actions"> <button type="button" class="continue-media-upload-item qq-upload-continue-selector" aria-label="Continue"><i class="material-icons">play_circle_outline</i> Continue</button> <button type="button" class="pause-media-upload-item qq-upload-pause-selector" aria-label="Pause"><i class="material-icons">pause_circle_outline</i> Pause</button> </div></div></div></li></ul> <dialog class="qq-alert-dialog-selector"> <div class="qq-dialog-message-selector"></div><div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">Close</button> </div></dialog> <dialog class="qq-confirm-dialog-selector"> <div class="qq-dialog-message-selector"></div><div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">No</button> <button type="button" class="qq-ok-button-selector">Yes</button> </div></dialog> <dialog class="qq-prompt-dialog-selector"> <div class="qq-dialog-message-selector"></div><input type="text"> <div class="qq-dialog-buttons"> <button type="button" class="qq-cancel-button-selector">Cancel</button> <button type="button" class="qq-ok-button-selector">Ok</button> </div></dialog> </div></div></script>
+
+						<div class="media-uploader"></div>
+					</div>
+
+				</div>
+			</main>
+
+		</div>
+	
+	</div>
+
+</div>
+<script type='text/javascript'>
+
+	function csrfToken(){var a,b=null;if(document.cookie&&""!==document.cookie){var c=document.cookie.split(";");for(a=0;a<c.length;){var d=c[a].trim();if("csrftoken="===d.substring(0,10)){b=decodeURIComponent(d.substring(10));break}a+=1}}return b};
+
+	document.addEventListener("DOMContentLoaded", function(event) {
+	    var default_concurrent_chunked_uploader = new qq.FineUploader({
+	        debug: true,
+	        element: document.querySelector('.media-uploader'),
+	        request: {
+	            endpoint: '/fu/upload/',
+	            customHeaders: {
+	                'X-CSRFToken': csrfToken('csrftoken'),
+	            },
+	        },
+	        retry: {
+	            enableAuto: true,
+	        },
+	        chunking: {
+	            enabled: true,
+	            concurrent: {
+	                enabled: true,
+	            },
+	            success: {
+	                endpoint: '/fu/upload/?done',
+	            },
+	        },
+	    });
+	});
+</script>

frontend/config/templates/htmlBodySnippetEmbedPage.ejs

@@ -0,0 +1,3 @@
+<div class="page-main-wrap">
+<% if (id) { %><div id="<%= id %>"></div><% } %>
+</div>

frontend/config/templates/renderAddMediaPageContent.ejs

@@ -0,0 +1,5 @@
+import { renderPage } from './static/js/utils/renderer';
+
+import './static/css/AddMediaPage.scss';
+
+renderPage();

frontend/config/templates/renderBase.ejs

@@ -0,0 +1,3 @@
+import { renderPage } from './static/js/utils/renderer';
+
+renderPage();

frontend/config/templates/renderEmbedPageContent.ejs

@@ -0,0 +1,15 @@
+<% if (page) { %>
+
+	import { renderEmbedPage } from './static/js/utils/renderer';
+
+	<% if (page.component) { %>
+
+		import { <%= page.component %> } from './static/js/pages/<%= page.component %>';
+
+		<% if (page.id) { %>
+			renderEmbedPage( '<%= page.id %>', <%= page.component %> );
+		<% } %>
+
+	<% } %>
+	
+<% } %>

frontend/config/templates/renderPageContent.ejs

@@ -0,0 +1,15 @@
+<% if (page) { %>
+
+	import { renderPage } from './static/js/utils/renderer';
+
+	<% if (page.component) { %>
+
+		import { <%= page.component %> } from './static/js/pages/<%= page.component %>';
+
+		<% if (page.id) { %>
+			renderPage( '<%= page.id %>', <%= page.component %> );
+		<% } %>
+
+	<% } %>
+	
+<% } %>

frontend/config/templates/renderPageStaticContent.ejs

@@ -0,0 +1,15 @@
+<% if (page) { %> 
+    
+    import { renderPage } from './static/js/utils/renderer'; 
+    
+    <% if (page.component) { %> 
+        
+        import { <%= page.component %> } from './static/js/static-pages/<%= page.component %>'; 
+        
+        <% if (page.id) { %> 
+            renderPage( '<%= page.id %>', <%= page.component %> ); 
+        <% } %> 
+    
+    <% } %> 
+    
+<% } %>

frontend/config/templates/static/aboutPage.html

@@ -0,0 +1,18 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="custom-page-wrapper">
+        <h2>About</h2>
+        <hr />
+        <p>
+          <a href="https://mediacms.io">MediaCMS</a> is a modern, fully featured open source video and media CMS. It is
+          developed to meet the needs of modern web platforms for viewing and sharing media.
+        </p>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/addMediaPageTemplate.html

@@ -0,0 +1,144 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="media-uploader-wrap">
+        <div class="media-uploader-top-wrap">
+          <div class="media-uploader-top-left-wrap">
+            <h1>Upload media files</h1>
+          </div>
+          <div class="media-uploader-top-right-wrap"></div>
+        </div>
+        <div class="media-uploader">
+          <div class="media-uploader-bottom-wrap">
+            <div class="media-uploader-bottom-left-wrap">
+              <div class="media-drag-drop-wrap">
+                <div class="media-drag-drop-inner">
+                  <div class="media-drag-drop-content">
+                    <div class="media-drag-drop-content-inner">
+                      <span><i class="material-icons">cloud_upload</i></span>
+                      <span>Drag and drop files</span>
+                      <span>or</span>
+                      <span class="browse-files-btn-wrap">
+                        <span
+                          class="qq-upload-button-selector"
+                          style="position: relative; overflow: hidden; direction: ltr"
+                          >Browse your files<input
+                            qq-button-id="9523a4a3-6688-40a5-b01d-7c72a79c7bcb"
+                            title="file input"
+                            multiple=""
+                            type="file"
+                            name="qqfile"
+                            style="
+                              position: absolute;
+                              right: 0px;
+                              top: 0px;
+                              font-family: Arial;
+                              font-size: 118px;
+                              margin: 0px;
+                              padding: 0px;
+                              cursor: pointer;
+                              opacity: 0;
+                              height: 100%;
+                            "
+                        /></span>
+                      </span>
+                      <div class="qq-upload-drop-area-selector media-dropzone" qq-hide-dropzone>
+                        <span class="qq-upload-drop-area-text-selector"></span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="media-uploader-bottom-right-wrap">
+              <ul class="media-upload-items-list qq-upload-list-selector">
+                <li>
+                  <div class="media-upload-item-main">
+                    <div class="media-upload-item-thumb">
+                      <img class="qq-thumbnail-selector" alt="" />
+                      <span class="media-upload-item-spinner qq-upload-spinner-selector"
+                        ><i class="material-icons">autorenew</i></span
+                      >
+                      <button type="button" class="qq-upload-retry-selector retry-media-upload-item" aria-label="Retry">
+                        <i class="material-icons">refresh</i> Retry
+                      </button>
+                    </div>
+                    <div class="media-upload-item-details">
+                      <div class="media-upload-item-name">
+                        <span class="media-upload-item-filename qq-upload-file-selector" title="">File #1</span>
+                        <input
+                          class="
+                            media-upload-item-filename-input
+                            qq-edit-filename-selector qq-edit-filename-icon-selector
+                          "
+                          tabindex="0"
+                          type="text"
+                          value="File #1"
+                        />
+                      </div>
+                      <div class="media-upload-item-details-bottom">
+                        <div class="media-upload-item-progress-bar-container qq-progress-bar-container-selector">
+                          <div
+                            role="progressbar"
+                            aria-valuenow="80"
+                            aria-valuemin="0"
+                            aria-valuemax="100"
+                            class="media-upload-item-progress-bar qq-progress-bar-selector"
+                            style="width: 80%"
+                          ></div>
+                        </div>
+                        <span class="media-upload-item-upload-size qq-upload-size-selector">80% of 7.5MB</span>
+                        <span role="status" class="media-upload-item-status-text qq-upload-status-text-selector"
+                          >Retrying 3/3...</span
+                        >
+                      </div>
+                      <div class="media-upload-item-top-actions">
+                        <span class="filename-edit qq-edit-filename-icon-selector" aria-label="Edit filename"
+                          >Edit filename <i class="material-icons">create</i></span
+                        >
+                        <button
+                          type="button"
+                          class="delete-media-upload-item qq-upload-delete-selector"
+                          aria-label="Delete"
+                        >
+                          Delete <i class="material-icons">delete</i>
+                        </button>
+                        <button
+                          type="button"
+                          class="cancel-media-upload-item qq-upload-cancel-selector"
+                          aria-label="Cancel"
+                        >
+                          Cancel <i class="material-icons">cancel</i>
+                        </button>
+                      </div>
+                      <div class="media-upload-item-bottom-actions">
+                        <button
+                          type="button"
+                          class="continue-media-upload-item qq-upload-continue-selector"
+                          aria-label="Continue"
+                        >
+                          <i class="material-icons">play_circle_outline</i> Continue
+                        </button>
+                        <button
+                          type="button"
+                          class="pause-media-upload-item qq-upload-pause-selector"
+                          aria-label="Pause"
+                        >
+                          <i class="material-icons">pause_circle_outline</i> Pause
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/contactPage.html

@@ -0,0 +1,27 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Contact us</h1>
+          <form enctype="multipart/form-data" action="" method="post" class="post-form">
+            <p>
+              <label for="id_from_email">Your email:</label>
+              <input type="email" name="from_email" required="" id="id_from_email" />
+            </p>
+            <p><label for="id_name">Your name:</label> <input type="text" name="name" id="id_name" /></p>
+            <p>
+              <label for="id_message">Please add your message here and submit:</label>
+              <textarea name="message" cols="40" rows="10" required="" id="id_message"></textarea>
+            </p>
+            <button class="primaryAction" type="submit">Submit</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/editChannelPage.html

@@ -0,0 +1,30 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Edit Channel</h1>
+
+          <form enctype="multipart/form-data" action="" method="post" class="post-form">
+            <div id="div_id_banner_logo" class="control-group">
+              <label for="id_banner_logo" class="control-label"> Banner logo </label>
+              <div class="controls">
+                Currently: <a href="#">*****</a>
+                <input type="checkbox" name="banner_logo-clear" id="banner_logo-clear_id" />
+                <label for="banner_logo-clear_id">Clear</label><br />
+                Change:
+                <input type="file" name="banner_logo" accept="image/*" class="clearablefileinput" id="id_banner_logo" />
+              </div>
+            </div>
+
+            <button class="primaryAction" type="submit">Update Channel</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/editMediaPage.html

@@ -0,0 +1,137 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Edit Media</h1>
+
+          <form enctype="multipart/form-data" action="" method="post" class="post-form">
+            <div id="div_id_title" class="control-group">
+              <label for="id_title" class="control-label"> Title </label>
+              <div class="controls">
+                <input
+                  type="text"
+                  name="title"
+                  value="Media title..."
+                  maxlength="100"
+                  class="textinput textInput"
+                  id="id_title"
+                />
+                <p id="hint_id_title" class="help-block">media title</p>
+              </div>
+            </div>
+            <div id="div_id_category" class="control-group">
+              <label for="id_category" class="control-label"> Category </label>
+              <div class="controls">
+                <select name="category" class="selectmultiple" id="id_category" multiple="">
+                  <option value="1">Art</option>
+                  <option value="2">Documentary</option>
+                  <option value="3">Experimental</option>
+                  <option value="4">Film</option>
+                  <option value="5">Music</option>
+                  <option value="6">TV</option>
+                </select>
+                <p id="hint_id_category" class="help-block">Media can be part of one or more categories</p>
+              </div>
+            </div>
+            <div id="div_id_new_tags" class="control-group">
+              <label for="id_new_tags" class="control-label"> Tags </label>
+              <div class="controls">
+                <input type="text" name="new_tags" class="textinput textInput" id="id_new_tags" />
+                <p id="hint_id_new_tags" class="help-block">a comma separated list of new tags.</p>
+              </div>
+            </div>
+            <div id="div_id_add_date" class="control-group">
+              <label for="id_add_date" class="control-label"> Date produced </label>
+              <div class="controls">
+                <input type="text" name="add_date" value="2021-01-01 00:00:01" class="datetimeinput" id="id_add_date" />
+              </div>
+            </div>
+            <div id="div_id_uploaded_poster" class="control-group">
+              <label for="id_uploaded_poster" class="control-label"> Upload image </label>
+              <div class="controls">
+                <input
+                  type="file"
+                  name="uploaded_poster"
+                  accept="image/*"
+                  class="clearablefileinput"
+                  id="id_uploaded_poster"
+                />
+                <p id="hint_id_uploaded_poster" class="help-block">This image will characterize the media</p>
+              </div>
+            </div>
+            <div id="div_id_description" class="control-group">
+              <label for="id_description" class="control-label"> Description </label>
+              <div class="controls">
+                <textarea name="description" cols="40" rows="10" class="textarea" id="id_description"></textarea>
+              </div>
+            </div>
+            <div id="div_id_state" class="control-group">
+              <label for="id_state" class="control-label requiredField">
+                State<span class="asteriskField">*</span>
+              </label>
+              <div class="controls">
+                <select name="state" class="select" id="id_state">
+                  <option value="private">Private</option>
+                  <option value="public" selected="">Public</option>
+                  <option value="unlisted">Unlisted</option>
+                </select>
+                <p id="hint_id_state" class="help-block">state of Media</p>
+              </div>
+            </div>
+            <div id="div_id_enable_comments" class="control-group">
+              <div class="controls">
+                <label for="id_enable_comments" class="checkbox">
+                  <input
+                    type="checkbox"
+                    name="enable_comments"
+                    class="checkboxinput"
+                    id="id_enable_comments"
+                    checked=""
+                  />
+                  Enable comments
+                </label>
+                <p id="hint_id_enable_comments" class="help-block">Whether comments will be allowed for this media</p>
+              </div>
+            </div>
+            <div id="div_id_thumbnail_time" class="control-group">
+              <label for="id_thumbnail_time" class="control-label"> Thumbnail time </label>
+              <div class="controls">
+                <input
+                  type="number"
+                  name="thumbnail_time"
+                  value="132.5"
+                  step="any"
+                  class="numberinput"
+                  id="id_thumbnail_time"
+                />
+                <p id="hint_id_thumbnail_time" class="help-block">Time on video that a thumbnail will be taken</p>
+              </div>
+            </div>
+            <div id="div_id_allow_download" class="control-group">
+              <div class="controls">
+                <label for="id_allow_download" class="checkbox">
+                  <input
+                    type="checkbox"
+                    name="allow_download"
+                    class="checkboxinput"
+                    id="id_allow_download"
+                    checked=""
+                  />
+                  Allow download
+                </label>
+                <p id="hint_id_allow_download" class="help-block">Whether option to download media is shown</p>
+              </div>
+            </div>
+
+            <button class="primaryAction" type="submit">Update Media</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/editProfilePage.html

@@ -0,0 +1,43 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Edit Profile</h1>
+          <form enctype="multipart/form-data" action="" method="post" class="post-form">
+            <p>
+              <label for="id_name">Full name:</label>
+              <input type="text" name="name" value="" maxlength="250" required="" id="id_name" />
+            </p>
+            <p>
+              <label for="id_description">About me:</label>
+              <textarea name="description" cols="40" rows="10" id="id_description"></textarea>
+            </p>
+            <p>
+              <label for="id_email">Email address:</label>
+              <input type="email" name="email" value="" maxlength="254" id="id_email" />
+            </p>
+            <p>
+              <label for="id_logo">Logo:</label> Currently: <a href="#">*****</a>
+              <input type="checkbox" name="logo-clear" id="logo-clear_id" />
+              <label for="logo-clear_id">Clear</label><br />
+              Change:
+              <input type="file" name="logo" accept="image/*" id="id_logo" />
+            </p>
+            <p>
+              <label for="id_notification_on_comments"
+                >Whether you will receive email notifications for comments added to your content:</label
+              >
+              <input type="checkbox" name="notification_on_comments" id="id_notification_on_comments" checked="" />
+            </p>
+            <button class="primaryAction" type="submit">Update Profile</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/errorPage.html

@@ -0,0 +1,11 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="error-page-wrap">Error</div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/registerPage.html

@@ -0,0 +1,45 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Sign Up</h1>
+          <p>Already have an account? Then please <a href="./signin.html">sign in</a>.</p>
+          <form class="signup" id="signup_form" method="post" action="#">
+            <input type="hidden" name="csrfmiddlewaretoken" value="" />
+            <p>
+              <label for="id_email">E-mail:</label>
+              <input type="email" name="email" id="id_email" required="" placeholder="E-mail address" />
+            </p>
+            <p>
+              <label for="id_username">Username:</label>
+              <input
+                type="text"
+                name="username"
+                id="id_username"
+                autofocus="autofocus"
+                placeholder="Username"
+                minlength="4"
+                maxlength="150"
+                required=""
+              />
+            </p>
+            <p>
+              <label for="id_name">Name:</label>
+              <input type="text" name="name" id="id_name" maxlength="100" required="" />
+            </p>
+            <p>
+              <label for="id_password1">Password:</label>
+              <input type="password" name="password1" id="id_password1" required="" placeholder="Password" />
+            </p>
+            <button type="submit">Sign Up »</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/resetPasswordPage.html

@@ -0,0 +1,28 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Password Reset</h1>
+          <p>
+            Forgotten your password? Enter your e-mail address below, and we'll send you an e-mail allowing you to reset
+            it.
+          </p>
+          <form method="POST" action="#" class="password_reset">
+            <input type="hidden" name="csrfmiddlewaretoken" value="" />
+            <p>
+              <label for="id_email">E-mail:</label>
+              <input type="email" name="email" size="30" id="id_email" required="" placeholder="E-mail address" />
+            </p>
+            <input type="submit" value="Reset My Password" />
+          </form>
+          <p>Please contact us if you have any trouble resetting your password.</p>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/signinPage.html

@@ -0,0 +1,36 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Sign In</h1>
+          <p>If you have not created an account yet, then please <a href="./register.html">sign up</a> first.</p>
+          <form class="login" method="POST" action="#">
+            <input type="hidden" name="csrfmiddlewaretoken" value="" />
+            <p>
+              <label for="id_login">Login:</label>
+              <input
+                type="text"
+                name="login"
+                id="id_login"
+                required=""
+                autofocus="autofocus"
+                placeholder="Username or e-mail"
+              />
+            </p>
+            <p>
+              <label for="id_password">Password:</label>
+              <input type="password" name="password" id="id_password" required="" placeholder="Password" />
+            </p>
+            <a class="button secondaryAction" href="./reset-password.html">Forgot Password?</a>
+            <button class="primaryAction" type="submit">Sign In</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/signoutPage.html

@@ -0,0 +1,20 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="user-action-form-wrap">
+        <div class="user-action-form-inner">
+          <h1>Sign Out</h1>
+          <p>Are you sure you want to sign out?</p>
+          <form method="post" action="#">
+            <input type="hidden" name="csrfmiddlewaretoken" value="" />
+            <button type="submit">Sign Out</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/config/templates/static/termsPage.html

@@ -0,0 +1,15 @@
+<div id="app-header"></div>
+<div id="app-sidebar"></div>
+<div class="page-main-wrap">
+  <div class="page-main">
+    <div class="page-main-inner">
+      <div class="custom-page-wrapper">
+        <h2>Terms</h2>
+        <hr />
+        <p>Terms of service</p>
+      </div>
+    </div>
+    <div class="page-sidebar-content-overlay"></div>
+  </div>
+</div>
+<div id="app-footer"></div>

frontend/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "mediacms-frontend",
+  "version": "0.9.1",
+  "description": "",
+  "author": "",
+  "license": "",
+  "keywords": [],
+  "main": "index.js",
+  "scripts": {
+    "start": "mediacms-scripts development --config=./config/mediacms.config.js --host=0.0.0.0 --port=8088",
+    "dist": "mediacms-scripts rimraf ./dist && mediacms-scripts build --config=./config/mediacms.config.js --env=dist"
+  },
+  "browserslist": [
+    "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",
+    "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",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.38.1"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "flux": "^4.0.1",
+    "mediacms-player": "file:packages/player",
+    "normalize.css": "^8.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "sortablejs": "^1.13.0",
+    "timeago.js": "^4.0.2",
+    "url-parse": "^1.5.1"
+  }
+}

frontend/packages/player/.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-env"]
+}

frontend/packages/player/.editorconfig

@@ -0,0 +1,18 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 1
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+insert_final_newline = true
+trim_trailing_whitespace = false

frontend/packages/player/.modernizrrc

@@ -0,0 +1,8 @@
+{
+  "minify": true,
+  "options": [],
+  "feature-detects": [
+    "css/transforms",
+    "test/storage/localstorage"
+  ]
+}

frontend/packages/player/README.md

@@ -0,0 +1 @@
+# mediacms-player

frontend/packages/player/config/includes/rollup_builds.js

@@ -0,0 +1,113 @@
+import gzip from 'rollup-plugin-gzip';
+import postcss from 'rollup-plugin-postcss';
+import babel from 'rollup-plugin-babel';
+import cleanup from 'rollup-plugin-cleanup';
+// import { uglify } from "rollup-plugin-uglify";
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import visualizer from 'rollup-plugin-visualizer';
+import json from '@rollup/plugin-json';
+
+export default function rollup_builds(input_file, output_folder, pkg) {
+	const package_name = pkg.name;
+
+	const dependencies = pkg.dependencies;
+	const dependencies_names = !!dependencies ? Object.keys(pkg.dependencies) : [];
+
+	const esm_format = 'es';
+	const browser_format = 'umd';
+	const commonjs_format = 'cjs';
+
+	const postcss_config = {
+		extract: true,
+		modules: false, // Avoid adding prefixes to classnames (etc).
+		extensions: ['.css', '.sss', '.pcss', '.scss'],
+	};
+
+	const postcss_plugin = postcss(postcss_config);
+	const postcss_plugin_minimized = postcss({ ...postcss_config, minimize: true });
+
+	const commonjs_resolve_config = {
+		// pass custom options to the resolve plugin
+		customResolveOptions: { moduleDirectory: 'node_modules' },
+	};
+
+	function beautify_plugin() {
+		return cleanup(/*{
+            maxEmptyLines: 1,
+            sourcemap: false,
+        }*/);
+	}
+
+	function visualizer_plugin(name) {
+		return visualizer({
+			title: name,
+			filename: output_folder + '/visualizer/' + name + '.html',
+		});
+	}
+
+	function es_build(filename, visualize, bundle) {
+		const plugins = [postcss_plugin, json(), beautify_plugin()];
+
+		if (!!visualize) {
+			plugins.push(visualizer_plugin(filename));
+		}
+
+		return {
+			input: input_file,
+			external: !!bundle ? {} : dependencies_names,
+			output: [{ format: esm_format, file: filename }],
+			plugins: plugins,
+		};
+	}
+
+	function commonjs_build(filename, visualize, bundle) {
+		const plugins = [postcss_plugin, json(), resolve(commonjs_resolve_config), beautify_plugin()];
+
+		if (!!visualize) {
+			plugins.push(visualizer_plugin(filename));
+		}
+
+		return {
+			input: input_file,
+			external: !!bundle ? {} : dependencies_names,
+			output: [{ format: commonjs_format, file: filename }],
+			plugins: plugins,
+		};
+	}
+
+	function browser_build(filename, visualize, minimize, compact) {
+		const plugins = [
+			!!minimize ? postcss_plugin_minimized : postcss_plugin,
+			json(),
+			babel(),
+			resolve(),
+			commonjs(),
+			beautify_plugin(),
+		];
+
+		if (!!minimize) {
+			// plugins.push( uglify() );
+
+			if (!!compact) {
+				plugins.push(gzip());
+			}
+		}
+
+		if (!!visualize) {
+			plugins.push(visualizer_plugin(filename));
+		}
+
+		return {
+			input: input_file,
+			output: { name: package_name, format: browser_format, file: filename },
+			plugins: plugins,
+		};
+	}
+
+	return Object.freeze({
+		es: es_build,
+		browser: browser_build,
+		commonjs: commonjs_build,
+	});
+}

frontend/packages/player/config/rollup.config.build.js

@@ -0,0 +1,11 @@
+import rollup_builds from './includes/rollup_builds';
+import pckg from '../package.json';
+
+const dists = rollup_builds('./src/index.js', './out', pckg);
+
+export default [
+	dists.browser('./dist/mediacms-player.js'),
+	// dists.browser("./dist/mediacms-player.js", true),
+	// dists.browser("./dist/mediacms-player.min.js", true, true),
+	// dists.browser("./dist/mediacms-player.min.js", true, true, true)
+];