feat: add work in progress 7.0 code

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/main/settings/sections/background/Custom.jsx

@@ -1,141 +1,228 @@
-import variables from 'modules/variables';
-import { PureComponent } from 'react';
-import { toast } from 'react-toastify';
-import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
-import EventBus from 'modules/helpers/eventbus';
+import variables from "modules/variables";
+import { PureComponent } from "react";
+import { toast } from "react-toastify";
+import {
+  MdCancel,
+  MdAddLink,
+  MdAddPhotoAlternate,
+  MdPersonalVideo,
+} from "react-icons/md";
+import EventBus from "modules/helpers/eventbus";
 
-import Checkbox from '../../Checkbox';
-import FileUpload from '../../FileUpload';
+import Checkbox from "../../Checkbox";
+import FileUpload from "../../FileUpload";
+import SettingsItem from "../../SettingsItem";
 
-import Modal from 'react-modal';
+import Modal from "react-modal";
 
-import CustomURLModal from './CustomURLModal';
+import CustomURLModal from "./CustomURLModal";
 
 export default class CustomSettings extends PureComponent {
-  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+  getMessage = (text) =>
+    variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
     this.state = {
       customBackground: this.getCustom(),
-      customURLModal: false
+      customURLModal: false,
     };
   }
 
   resetCustom = () => {
-    localStorage.setItem('customBackground', '[]');
+    localStorage.setItem("customBackground", "[]");
     this.setState({
-      customBackground: []
+      customBackground: [],
     });
-    toast(this.getMessage('toasts.reset'));
-    EventBus.dispatch('refresh', 'background');
-  }
-    
+    toast(this.getMessage("toasts.reset"));
+    EventBus.dispatch("refresh", "background");
+  };
+
   customBackground(e, text, index) {
-    const result = (text === true) ? e.target.value : e.target.result;
-    
+    const result = text === true ? e.target.value : e.target.result;
+
     const customBackground = this.state.customBackground;
     customBackground[index] = result;
     this.setState({
-      customBackground
+      customBackground,
     });
     this.forceUpdate();
-    
-    localStorage.setItem('customBackground', JSON.stringify(customBackground));
-    document.querySelector('.reminder-info').style.display = 'block';
-    localStorage.setItem('showReminder', true);
+
+    localStorage.setItem("customBackground", JSON.stringify(customBackground));
+    document.querySelector(".reminder-info").style.display = "flex";
+    localStorage.setItem("showReminder", true);
   }
-    
+
   modifyCustomBackground(type, index) {
     const customBackground = this.state.customBackground;
-    if (type === 'add') {
-      customBackground.push('');
+    if (type === "add") {
+      customBackground.push("");
     } else {
       customBackground.splice(index, 1);
     }
-    
+
     this.setState({
-      customBackground
+      customBackground,
     });
     this.forceUpdate();
-    
-    localStorage.setItem('customBackground', JSON.stringify(customBackground));
-    document.querySelector('.reminder-info').style.display = 'block';
-    localStorage.setItem('showReminder', true);
+
+    localStorage.setItem("customBackground", JSON.stringify(customBackground));
+    document.querySelector(".reminder-info").style.display = "flex";
+    localStorage.setItem("showReminder", true);
   }
 
   videoCheck(url) {
-    return url.startsWith('data:video/') || url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg');
+    return (
+      url.startsWith("data:video/") ||
+      url.endsWith(".mp4") ||
+      url.endsWith(".webm") ||
+      url.endsWith(".ogg")
+    );
   }
-    
-  videoCustomSettings = () => {
-    const hasVideo = this.state.customBackground.filter(bg => this.videoCheck(bg));
 
-    if (hasVideo.length > 0) { 
+  videoCustomSettings = () => {
+    const hasVideo = this.state.customBackground.filter((bg) =>
+      this.videoCheck(bg)
+    );
+
+    if (hasVideo.length > 0) {
       return (
         <>
-          <Checkbox name='backgroundVideoLoop' text={this.getMessage('modals.main.settings.sections.background.source.loop_video')}/>
-          <Checkbox name='backgroundVideoMute' text={this.getMessage('modals.main.settings.sections.background.source.mute_video')}/>
+          <Checkbox
+            name="backgroundVideoLoop"
+            text={this.getMessage(
+              "modals.main.settings.sections.background.source.loop_video"
+            )}
+          />
+          <Checkbox
+            name="backgroundVideoMute"
+            text={this.getMessage(
+              "modals.main.settings.sections.background.source.mute_video"
+            )}
+          />
         </>
       );
     } else {
       return null;
     }
-  }
-    
+  };
+
   getCustom() {
     let data;
     try {
-      data = JSON.parse(localStorage.getItem('customBackground'));
+      data = JSON.parse(localStorage.getItem("customBackground"));
     } catch (e) {
-      data = [localStorage.getItem('customBackground')];
+      data = [localStorage.getItem("customBackground")];
     }
-    
+
     return data;
   }
-    
+
   uploadCustomBackground() {
-    document.getElementById('bg-input').setAttribute('index', this.state.customBackground.length);
-    document.getElementById('bg-input').click();
+    document
+      .getElementById("bg-input")
+      .setAttribute("index", this.state.customBackground.length);
+    document.getElementById("bg-input").click();
     // to fix loadFunction
     this.setState({
-      currentBackgroundIndex: this.state.customBackground.length
+      currentBackgroundIndex: this.state.customBackground.length,
     });
   }
 
   addCustomURL(e) {
     this.setState({
       customURLModal: false,
-      currentBackgroundIndex: this.state.customBackground.length
+      currentBackgroundIndex: this.state.customBackground.length,
     });
-    this.customBackground({ target: { value: e }}, true, this.state.customBackground.length);
+    this.customBackground(
+      { target: { value: e } },
+      true,
+      this.state.customBackground.length
+    );
   }
 
   render() {
     return (
-      <ul>
-        <p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
-        <div className='data-buttons-row'>
-          <button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <MdAddPhotoAlternate/></button>
-          <button onClick={() => this.setState({ customURLModal: true })}>{this.getMessage('modals.main.settings.sections.background.source.add_url')} <MdAddLink/></button>
-        </div>
-        <div className='images-row'>
-          {this.state.customBackground.map((url, index) => (
-            <div style={{ backgroundImage: `url(${!this.videoCheck(url) ? this.state.customBackground[index] : ''})` }} key={index}>
-              {this.videoCheck(url) ? <MdPersonalVideo className='customvideoicon'/> : null} 
-              {this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
-                <MdCancel/>
-              </button> : null}
-            </div>
-          ))}
-        </div>
-        <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
+      <>
         {this.props.interval}
+        <div className="settingsRow" style={{ alignItems: "flex-start" }}>
+          <div className="content">
+            <div className="images-row">
+              {this.state.customBackground.map((url, index) => (
+                <div key={index}>
+                  <img
+                    alt={"Custom background " + (index || 0)}
+                    src={`${
+                      !this.videoCheck(url)
+                        ? this.state.customBackground[index]
+                        : ""
+                    }`}
+                  />
+                  {this.videoCheck(url) ? (
+                    <MdPersonalVideo className="customvideoicon" />
+                  ) : null}
+                  {this.state.customBackground.length > 0 ? (
+                    <button
+                      className="iconButton"
+                      onClick={() =>
+                        this.modifyCustomBackground("remove", index)
+                      }
+                    >
+                      <MdCancel />
+                    </button>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="action">
+            {/*<button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <MdAddPhotoAlternate/></button>*/}
+            <div className="dropzone">
+              <MdAddPhotoAlternate />
+              <span className="title">Drop to upload</span>
+              <span className="subtitle">
+                Available formats, jpeg, png, webp, webm, gif, mp4, webm, ogg
+              </span>
+              <button onClick={() => this.uploadCustomBackground()}>
+                Or Select
+              </button>
+            </div>
+            <button onClick={() => this.setState({ customURLModal: true })}>
+              {this.getMessage(
+                "modals.main.settings.sections.background.source.add_url"
+              )}{" "}
+              <MdAddLink />
+            </button>
+            {/*<span className='subtitle'>
+              {this.getMessage('modals.main.settings.sections.background.source.custom_background')}{' '}
+              <span className="link" onClick={this.resetCustom}>
+                {this.getMessage('modals.main.settings.buttons.reset')}
+              </span>
+                  </span>*/}
+          </div>
+        </div>
+        <FileUpload
+          id="bg-input"
+          accept="image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg"
+          loadFunction={(e) =>
+            this.customBackground(e, false, this.state.currentBackgroundIndex)
+          }
+        />
         {this.videoCustomSettings()}
-        <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ customURLModal: false })} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
-          <CustomURLModal modalClose={(e) => this.addCustomURL(e)} modalCloseOnly={() => this.setState({ customURLModal: false })} />
+        <Modal
+          closeTimeoutMS={100}
+          onRequestClose={() => this.setState({ customURLModal: false })}
+          isOpen={this.state.customURLModal}
+          className="Modal resetmodal mainModal"
+          overlayClassName="Overlay resetoverlay"
+          ariaHideApp={false}
+        >
+          <CustomURLModal
+            modalClose={(e) => this.addCustomURL(e)}
+            modalCloseOnly={() => this.setState({ customURLModal: false })}
+          />
         </Modal>
-      </ul>
+      </>
     );
   }
 }