mirror of
https://github.com/mickael-kerjean/filestash
synced 2026-01-06 07:50:40 +01:00
cleanup (code): cleanup
This commit is contained in:
Mickael Kerjean
parent
8ce43ccc04
commit
48a6763380
8 changed files with 15 additions and 187 deletions
|
|
@ -1,88 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
import { Container, Icon, NgIf } from "./";
|
||||
import "./audio.scss";
|
||||
|
||||
export class Audio extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
percent: 0,
|
||||
state: "play"
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
requestAnimationFrame(() => {
|
||||
if(this.state.state === "play"){
|
||||
if(this.state.percent < 100){
|
||||
this.setState({percent: this.state.percent + 0.1}, this.componentDidMount);
|
||||
}else{
|
||||
this.setState({percent: 0}, this.componentDidMount);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onStateChange(new_state){
|
||||
this.setState({state: new_state});
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<div className="component_audio">
|
||||
<Container maxWidth={700}>
|
||||
<div style={{display: "flex"}}>
|
||||
<Control state={this.state.state} onPlay={this.onStateChange.bind(this, "play")} onPause={this.onStateChange.bind(this, "pause")}/>
|
||||
<Progress purcent={this.state.percent} />
|
||||
<Volume />
|
||||
<TrackInfo name="Cloudkicker - Let Yourself Be Huge - Explore, be curious" />
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Volume = () => {
|
||||
return (
|
||||
<div className="component_volume">
|
||||
VOLUME
|
||||
<div className="volume-controller-wrapper">
|
||||
<div className="volume-controller">s</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Control = (props) => {
|
||||
return (
|
||||
<div className="component_control">
|
||||
<NgIf cond={props.state === "pause"} type="inline">
|
||||
<Icon name="play" onClick={props.onPlay}/>
|
||||
</NgIf>
|
||||
<NgIf cond={props.state === "play"} type="inline">
|
||||
<Icon name="pause" onClick={props.onPause}/>
|
||||
</NgIf>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Progress = (props) => {
|
||||
return (
|
||||
<div className="component_progress">
|
||||
<div className="placeholder"></div>
|
||||
<div className="progress-bar" style={{width: props.purcent+"%"}}></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TrackInfo = (props) => {
|
||||
return (
|
||||
<div className="component_trackinfo">
|
||||
<div>
|
||||
{props.name}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.component_audio{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--super-light);
|
||||
height: 40px;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
|
||||
.component_progress{
|
||||
width: 300px;
|
||||
margin-top: 9px;
|
||||
margin-left: 10px;
|
||||
|
||||
.placeholder{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #dadada;
|
||||
}
|
||||
.progress-bar{
|
||||
height: 2px;
|
||||
background: var(--primary);
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.component_control{
|
||||
.component_icon {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.component_trackinfo{
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
.component_volume{
|
||||
position: relative;
|
||||
.volume-controller-wrapper{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
}
|
||||
.volume-controller{
|
||||
height: 150px;
|
||||
width: 20px;
|
||||
background: var(--super-light);
|
||||
border: 1px solid #e2e2e2;
|
||||
}
|
||||
&:hover{
|
||||
.volume-controller-wrapper{display: block;}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,24 +3,10 @@ import PropTypes from "prop-types";
|
|||
|
||||
import "./button.scss";
|
||||
|
||||
export class Button extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
let props = Object.assign({}, this.props);
|
||||
delete props.theme;
|
||||
let className = this.props.theme || ""
|
||||
if(this.props.className){ className += " " + this.props.className }
|
||||
return (
|
||||
<button {...props} className={className}>
|
||||
{this.props.children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
export function Button({ theme = "", children = null, className = "", ...props }) {
|
||||
return (
|
||||
<button {...props} className={`${className} ${theme}`.trim()}>
|
||||
{ children }
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Button.propTypes = {
|
||||
theme: PropTypes.string
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ export { ModalPrompt } from "./prompt";
|
|||
export { ModalAlert, Alert } from "./alert";
|
||||
export { ModalConfirm } from "./confirm";
|
||||
export { Notification } from "./notification";
|
||||
export { Audio } from "./audio";
|
||||
export { Video } from "./video";
|
||||
export { Dropdown, DropdownButton, DropdownList, DropdownItem } from "./dropdown";
|
||||
export { MapShot } from "./mapshot";
|
||||
|
|
|
|||
|
|
@ -40,14 +40,6 @@ class ConfigModel {
|
|||
}
|
||||
}
|
||||
|
||||
class PluginModel {
|
||||
constructor(){}
|
||||
|
||||
all(){
|
||||
return http_get("/admin/api/plugin").then((r) => r.results);
|
||||
}
|
||||
}
|
||||
|
||||
class BackendModel {
|
||||
constructor(){}
|
||||
|
||||
|
|
@ -56,6 +48,5 @@ class BackendModel {
|
|||
}
|
||||
}
|
||||
|
||||
export const Plugin = new PluginModel();
|
||||
export const Config = new ConfigModel();
|
||||
export const Backend = new BackendModel();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export { Files } from "./files";
|
||||
export { Session } from "./session";
|
||||
export { Share } from "./share";
|
||||
export { Config, Plugin, Backend } from "./config";
|
||||
export { Config, Backend } from "./config";
|
||||
export { Log } from "./log";
|
||||
export { Admin } from "./admin"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import './forkme.scss';
|
||||
import { t } from '../../locales/';
|
||||
import React from "react";
|
||||
import "./forkme.scss";
|
||||
import { t } from "../../locales/";
|
||||
|
||||
export const ForkMe = (props) => {
|
||||
export const ForkMe = ({ repo = "" }) => {
|
||||
return (
|
||||
<div className="component_forkme">
|
||||
<a href={props.repo} className="github-corner" aria-label="View source on GitHub" rel="nofollow">
|
||||
<a href={repo} className="github-corner" aria-label="View source on GitHub" rel="nofollow">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" className="bg"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={{"transformOrigin": "130px 106px"}} className="octo-arm"></path>
|
||||
|
|
@ -20,7 +20,7 @@ export const PoweredByFilestash = () => {
|
|||
if(!window.CONFIG["fork_button"]) return null;
|
||||
return (
|
||||
<div className="component_poweredbyfilestash">
|
||||
{ t('Powered by') } <strong><a href="https://www.filestash.app">Filestash</a></strong>
|
||||
{ t("Powered by") } <strong><a href="https://www.filestash.app">Filestash</a></strong>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
export { ForkMe, PoweredByFilestash } from './forkme';
|
||||
export { Form } from './form';
|
||||
export { ForkMe, PoweredByFilestash } from "./forkme";
|
||||
export { Form } from "./form";
|
||||
|
|
|
|||
Loading…
Reference in a new issue