Frontent dev env (#247)

* Added frontend development files/environment

* More items-categories related removals

* Improvements in pages templates (inc. static pages)

* Improvements in video player

* Added empty home page message + cta

* Updates in media, playlist and management pages

* Improvements in material icons font loading

* Replaced media & playlists links in frontend dev-env

* frontend package version update

* chnaged frontend dev url port

* static files update

* Changed default position of theme switcher

* enabled frontend docker container

frontend/src/static/js/utils/renderer.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { LayoutProvider } from './contexts/LayoutContext';
+import { UserProvider } from './contexts/UserContext';
+
+const AppProviders = ({ children }) => (
+  <LayoutProvider>
+    <ThemeProvider>
+      <UserProvider>{children}</UserProvider>
+    </ThemeProvider>
+  </LayoutProvider>
+);
+
+import { PageHeader, PageSidebar } from '../components/page-layout';
+
+export function renderPage(idSelector, PageComponent) {
+  const appHeader = document.getElementById('app-header');
+  const appSidebar = document.getElementById('app-sidebar');
+  const appContent = idSelector ? document.getElementById(idSelector) : undefined;
+
+  if (appContent && PageComponent) {
+    ReactDOM.render(
+      <AppProviders>
+        {appHeader ? ReactDOM.createPortal(<PageHeader />, appHeader) : null}
+        {appSidebar ? ReactDOM.createPortal(<PageSidebar />, appSidebar) : null}
+        <PageComponent />
+      </AppProviders>,
+      appContent
+    );
+  } else if (appHeader && appSidebar) {
+    ReactDOM.render(
+      <AppProviders>
+        {ReactDOM.createPortal(<PageHeader />, appHeader)}
+        <PageSidebar />
+      </AppProviders>,
+      appSidebar
+    );
+  } else if (appHeader) {
+    ReactDOM.render(
+      <LayoutProvider>
+        <ThemeProvider>
+          <UserProvider>
+            <PageHeader />
+          </UserProvider>
+        </ThemeProvider>
+      </LayoutProvider>,
+      appSidebar
+    );
+  } else if (appSidebar) {
+    ReactDOM.render(
+      <AppProviders>
+        <PageSidebar />
+      </AppProviders>,
+      appSidebar
+    );
+  }
+}
+
+export function renderEmbedPage(idSelector, PageComponent) {
+  const appContent = idSelector ? document.getElementById(idSelector) : undefined;
+
+  if (appContent && PageComponent) {
+    ReactDOM.render(<PageComponent />, appContent);
+  }
+}