refactoring

src/js/components/Torrent.js

@@ -1,5 +1,4 @@
 import { Helmet } from 'react-helmet';
-import $ from 'jquery';
 import { createRef } from 'preact';
 
 import Component from '../BaseComponent';
@@ -78,12 +77,12 @@ class Torrent extends Component {
   }
 
   openFile(file, clicked) {
-    const base = $(this.base);
+    const base = document.querySelector(this.base);
     const isVid = isVideo(file);
     const isAud = !isVid && isAudio(file);
     if (this.state.activeFilePath === file.path) {
       if (isVid) {
-        const el = base.find('video').get(0);
+        const el = base.querySelector('video');
         el && el.play();
       } else if (isAud) {
         localState.get('player').get('paused').put(false);
@@ -104,16 +103,16 @@ class Torrent extends Component {
       autoplay = isVid && this.state.settings.autoplayVideos;
       muted = autoplay;
     }
-    const el = base.find('.player');
-    el.empty();
+    const el = base.querySelector('.player');
+    el.innerHTML = '';
     if (isAud && clicked) {
       this.playAudio(file.path);
     }
     if (!isAud) {
-      file.appendTo(el.get(0), { autoplay, muted });
+      file.appendTo(el, { autoplay, muted });
     }
     if (isVid && this.props.autopause) {
-      const vid = base.find('video').get(0);
+      const vid = base.querySelector('video');
       const handlePlay = (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
@@ -131,8 +130,8 @@ class Torrent extends Component {
       this.observer.observe(vid);
     }
 
-    base.find('.info').toggle(!isVid);
-    const player = base.find('video, audio').get(0);
+    base.querySelector('.info').style.display = !isVid ? 'block' : 'none';
+    const player = base.querySelector('video, audio');
     if (player) {
       player.addEventListener('ended', () => {
         const typeCheck = player.tagName === 'VIDEO' ? isVideo : isAudio;

src/js/views/settings/Settings.tsx

@@ -1,70 +1,33 @@
-import { Component } from 'htm/preact';
-import $ from 'jquery';
-import { route } from 'preact-router';
-
 import Header from '../../components/Header';
 import Icons from '../../Icons';
-import localState from '../../LocalState';
 
 import SettingsContent from './SettingsContent';
 import SettingsMenu from './SettingsMenu';
 
 type Props = { page?: string };
 
-type State = {
-  toggleSettingsMenu: boolean;
-  showSettingsMenu: boolean;
-  platform: string;
-};
-
-class Settings extends Component<Props, State> {
-  componentDidMount() {
-    localState.get('toggleSettingsMenu').on((show: boolean) => this.toggleMenu(show));
-  }
-  toggleMenu(show: boolean): void {
-    this.setState({
-      showSettingsMenu: typeof show === 'undefined' ? !this.state.toggleSettingsMenu : show,
-    });
-  }
-
-  render() {
-    // ? const isDesktopNonMac = this.state.platform && this.state.platform !== 'darwin'
-
-    return (
-      <>
-        <Header />
-        <div class="main-view" id="settings">
-          <div style="flex-direction: row; width:100%;" id="settings">
-            <div class="logo" className={this.props.page ? 'visible-xs-flex' : 'hidden'}>
-              <div
-                href="/settings/"
-                onClick={(e) => this.onLogoClick(e)}
-                style="margin: 1em; display:flex;"
-              >
-                <div>{Icons.backArrow}</div>
-              </div>
-            </div>
-            <SettingsMenu activePage={this.props.page} />
-            <div
-              className={this.props.page ? '' : 'hidden-xs'}
-              style="padding: 0px 15px; overflow: auto; width: 100%;"
-            >
-              <SettingsContent id={this.props.page} />
-            </div>
+const Settings = (props: Props) => {
+  return (
+    <>
+      <Header />
+      <div class="main-view" id="settings">
+        <div style="flex-direction: row; width:100%;" id="settings">
+          <div class="logo" className={props.page ? 'visible-xs-flex' : 'hidden'}>
+            <a href="/settings" style="margin: 1em; display:flex; color: var(--text-color)">
+              <span>{Icons.backArrow}</span>
+            </a>
+          </div>
+          <SettingsMenu activePage={props.page} />
+          <div
+            className={props.page ? '' : 'hidden-xs'}
+            style="padding: 0px 15px; overflow: auto; width: 100%;"
+          >
+            <SettingsContent id={props.page} />
           </div>
         </div>
-      </>
-    );
-  }
+      </div>
+    </>
+  );
+};
 
-  onLogoClick(e) {
-    console.log('test open' + ($(window).width() > 625));
-    e.preventDefault();
-    e.stopPropagation();
-    $('a.logo').blur();
-    $(window).width() > 625;
-    localState.get('toggleSettingsMenu').put(true);
-    route('/settings/');
-  }
-}
 export default Settings;