From 156aaa7a7150d809d9476f42ef7124b6ffea7cc7 Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Thu, 23 Sep 2021 20:16:09 +0200
Subject: [PATCH] nice heading above uploadfield 10G upload limit for nginx
 config

---
 .../etc/nginx/sites-available/OpenMediaCenter.conf        | 1 +
 src/elements/DropZone/DropZone.module.css                 | 6 ------
 src/elements/DropZone/DropZone.tsx                        | 5 ++++-
 src/pages/SettingsPage/MovieSettings.module.css           | 6 ++++++
 src/pages/SettingsPage/MovieSettings.tsx                  | 8 +++++++-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/deb/OpenMediaCenter/etc/nginx/sites-available/OpenMediaCenter.conf b/deb/OpenMediaCenter/etc/nginx/sites-available/OpenMediaCenter.conf
index cbdb815..b3bd949 100755
--- a/deb/OpenMediaCenter/etc/nginx/sites-available/OpenMediaCenter.conf
+++ b/deb/OpenMediaCenter/etc/nginx/sites-available/OpenMediaCenter.conf
@@ -14,6 +14,7 @@ server {
     }
 
     location ~* ^/(api/|token) {
+        client_max_body_size 10G;
         proxy_pass http://127.0.0.1:8081;
     }
     location /subscribe {
diff --git a/src/elements/DropZone/DropZone.module.css b/src/elements/DropZone/DropZone.module.css
index c994a9c..32f6e61 100644
--- a/src/elements/DropZone/DropZone.module.css
+++ b/src/elements/DropZone/DropZone.module.css
@@ -1,15 +1,9 @@
-.container {
-
-}
-
 .dropArea {
     border: 2px dashed #ccc;
     border-radius: 20px;
     width: 480px;
     font-family: sans-serif;
-    margin: 100px auto;
     padding: 20px;
-    background-color: grey;
 }
 
 .dropArea:hover{
diff --git a/src/elements/DropZone/DropZone.tsx b/src/elements/DropZone/DropZone.tsx
index 3e9967e..2139017 100644
--- a/src/elements/DropZone/DropZone.tsx
+++ b/src/elements/DropZone/DropZone.tsx
@@ -1,11 +1,14 @@
 import style from './DropZone.module.css';
 import React, {useState} from 'react';
 import {cookie} from '../../utils/context/Cookie';
+import GlobalInfos from '../../utils/GlobalInfos';
 
 export const DropZone = (): JSX.Element => {
     const [ondrag, setDrag] = useState(0);
     const [percent, setpercent] = useState(0.0);
 
+    const theme = GlobalInfos.getThemeStyle();
+
     const uploadFile = (f: FileList): void => {
         let xhr = new XMLHttpRequest(); // create XMLHttpRequest
         let data = new FormData(); // create formData object
@@ -39,7 +42,7 @@ export const DropZone = (): JSX.Element => {
 
     return (
         <div
-            className={style.dropArea + (ondrag > 0 ? ' ' + style.highlight : '')}
+            className={style.dropArea + (ondrag > 0 ? ' ' + style.highlight : '') + ' ' + theme.secbackground}
             onDragEnter={(e): void => {
                 e.preventDefault();
                 e.stopPropagation();
diff --git a/src/pages/SettingsPage/MovieSettings.module.css b/src/pages/SettingsPage/MovieSettings.module.css
index 37c5ef8..e67147d 100644
--- a/src/pages/SettingsPage/MovieSettings.module.css
+++ b/src/pages/SettingsPage/MovieSettings.module.css
@@ -11,3 +11,9 @@
     padding: 10px;
     width: 40%;
 }
+
+.uploadtext {
+    font-size: x-large;
+    margin-top: 30px;
+    margin-bottom: 10px;
+}
diff --git a/src/pages/SettingsPage/MovieSettings.tsx b/src/pages/SettingsPage/MovieSettings.tsx
index 3e4d518..f87a92b 100644
--- a/src/pages/SettingsPage/MovieSettings.tsx
+++ b/src/pages/SettingsPage/MovieSettings.tsx
@@ -3,6 +3,7 @@ import style from './MovieSettings.module.css';
 import {APINode, callAPI} from '../../utils/Api';
 import {GeneralSuccess} from '../../types/GeneralTypes';
 import {DropZone} from '../../elements/DropZone/DropZone';
+import GlobalInfos from '../../utils/GlobalInfos';
 
 interface state {
     text: string[];
@@ -100,6 +101,8 @@ class MovieSettings extends React.Component<Props, state> {
     }
 
     render(): JSX.Element {
+        const theme = GlobalInfos.getThemeStyle();
+
         return (
             <>
                 <button
@@ -124,7 +127,10 @@ class MovieSettings extends React.Component<Props, state> {
                         </div>
                     ))}
                 </div>
-                <DropZone />
+                <div className={theme.textcolor}>
+                    <div className={style.uploadtext}>Video Upload:</div>
+                    <DropZone />
+                </div>
             </>
         );
     }