mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-09-19 17:46:33 +00:00
refactoring
This commit is contained in:
parent
62d7740c53
commit
fd44e6f1bc
@ -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;
|
||||
|
@ -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'
|
||||
|
||||
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={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 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>
|
||||
</div>
|
||||
<SettingsMenu activePage={this.props.page} />
|
||||
<SettingsMenu activePage={props.page} />
|
||||
<div
|
||||
className={this.props.page ? '' : 'hidden-xs'}
|
||||
className={props.page ? '' : 'hidden-xs'}
|
||||
style="padding: 0px 15px; overflow: auto; width: 100%;"
|
||||
>
|
||||
<SettingsContent id={this.props.page} />
|
||||
<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;
|
||||
|
Loading…
Reference in New Issue
Block a user