mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-07 17:02:29 +01:00
cleanup (eslint): cleanup as per eslint rules
This commit is contained in:
Mickael Kerjean
parent
d1a6cc6921
commit
ef8fe6adb5
35 changed files with 385 additions and 396 deletions
|
|
@ -1,10 +1,9 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
|
||||
import { Input, Button, Modal, NgIf } from './';
|
||||
import { alert } from '../helpers/';
|
||||
import { Popup } from './popup';
|
||||
import { t } from '../locales/';
|
||||
import { Button } from "./";
|
||||
import { alert } from "../helpers/";
|
||||
import { Popup } from "./popup";
|
||||
import { t } from "../locales/";
|
||||
|
||||
import "./alert.scss";
|
||||
|
||||
|
|
@ -23,7 +22,7 @@ export class ModalAlert extends Popup {
|
|||
});
|
||||
}
|
||||
|
||||
onSubmit(e){
|
||||
onSubmit(){
|
||||
this.setState({appear: false}, () => {
|
||||
requestAnimationFrame(() => this.state.fn && this.state.fn());
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
|
||||
import { Container, Icon, NgIf } from './';
|
||||
import './audio.scss';
|
||||
import { Container, Icon, NgIf } from "./";
|
||||
import "./audio.scss";
|
||||
|
||||
export class Audio extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
percent: 0,
|
||||
state: 'play'
|
||||
state: "play"
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
requestAnimationFrame(() => {
|
||||
if(this.state.state === 'play'){
|
||||
if(this.state.state === "play"){
|
||||
if(this.state.percent < 100){
|
||||
this.setState({percent: this.state.percent + 0.1}, this.componentDidMount);
|
||||
}else{
|
||||
|
|
@ -33,8 +32,8 @@ export class Audio extends React.Component {
|
|||
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')}/>
|
||||
<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" />
|
||||
|
|
@ -45,7 +44,7 @@ export class Audio extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
const Volume = (props) => {
|
||||
const Volume = () => {
|
||||
return (
|
||||
<div className="component_volume">
|
||||
VOLUME
|
||||
|
|
@ -54,21 +53,20 @@ const Volume = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const Control = (props) => {
|
||||
return (
|
||||
<div className="component_control">
|
||||
<NgIf cond={props.state === 'pause'} type="inline">
|
||||
<NgIf cond={props.state === "pause"} type="inline">
|
||||
<Icon name="play" onClick={props.onPlay}/>
|
||||
</NgIf>
|
||||
<NgIf cond={props.state === 'play'} type="inline">
|
||||
<NgIf cond={props.state === "play"} type="inline">
|
||||
<Icon name="pause" onClick={props.onPause}/>
|
||||
</NgIf>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const Progress = (props) => {
|
||||
return (
|
||||
|
|
@ -77,7 +75,7 @@ const Progress = (props) => {
|
|||
<div className="progress-bar" style={{width: props.purcent+"%"}}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const TrackInfo = (props) => {
|
||||
return (
|
||||
|
|
@ -87,4 +85,4 @@ const TrackInfo = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import './button.scss';
|
||||
import "./button.scss";
|
||||
|
||||
export class Button extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -12,7 +12,7 @@ export class Button extends React.Component {
|
|||
let props = Object.assign({}, this.props);
|
||||
delete props.theme;
|
||||
return (
|
||||
<button {...props} className={this.props.theme || '' +" "+this.props.className || ''}>
|
||||
<button {...props} className={(this.props.theme || "") + " " + (this.props.className || "")}>
|
||||
{this.props.children}
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import './card.scss';
|
||||
import React from "react";
|
||||
import "./card.scss";
|
||||
|
||||
export class Card extends React.Component {
|
||||
constructor(props){
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
|
||||
import { Input, Button, Modal, NgIf } from './';
|
||||
import { confirm } from '../helpers/';
|
||||
import { Popup } from './popup';
|
||||
import { t } from '../locales/';
|
||||
import { Button } from "./";
|
||||
import { confirm } from "../helpers/";
|
||||
import { Popup } from "./popup";
|
||||
import { t } from "../locales/";
|
||||
|
||||
export class ModalConfirm extends Popup{
|
||||
constructor(props){
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './container.scss';
|
||||
import React from "react";
|
||||
import "./container.scss";
|
||||
|
||||
export class Container extends React.Component {
|
||||
constructor(props){
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { browserHistory, Redirect } from 'react-router';
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { Session, Admin } from '../model/';
|
||||
import { Container, Loader, Icon, NgIf } from '../components/';
|
||||
import { memory, currentShare } from '../helpers/';
|
||||
import { t } from '../locales/';
|
||||
import { Session } from "../model/";
|
||||
import { Container, Loader, Icon } from "../components/";
|
||||
import { memory, currentShare } from "../helpers/";
|
||||
import { t } from "../locales/";
|
||||
|
||||
import '../pages/error.scss';
|
||||
import "../pages/error.scss";
|
||||
|
||||
export function LoggedInOnly(WrappedComponent){
|
||||
memory.set('user::authenticated', false);
|
||||
memory.set("user::authenticated", false);
|
||||
|
||||
return class extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
is_logged_in: memory.get('user::authenticated')
|
||||
is_logged_in: memory.get("user::authenticated")
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +26,7 @@ export function LoggedInOnly(WrappedComponent){
|
|||
this.props.error({message: "Authentication Required"});
|
||||
return;
|
||||
}
|
||||
memory.set('user::authenticated', true);
|
||||
memory.set("user::authenticated", true);
|
||||
this.setState({is_logged_in: true});
|
||||
}).catch((err) => {
|
||||
if(err.code === "NO_INTERNET"){
|
||||
|
|
@ -56,7 +55,7 @@ export function ErrorPage(WrappedComponent){
|
|||
error: null,
|
||||
has_back_button: false
|
||||
};
|
||||
this.unlisten = this.props.history.listen((location, action) => {
|
||||
this.unlisten = this.props.history.listen(() => {
|
||||
this.setState({has_back_button: false});
|
||||
this.unlisten();
|
||||
});
|
||||
|
|
@ -101,9 +100,9 @@ export function ErrorPage(WrappedComponent){
|
|||
};
|
||||
}
|
||||
|
||||
export const LoadingPage = (props) => {
|
||||
export const LoadingPage = () => {
|
||||
return (
|
||||
<div style={{marginTop: parseInt(window.innerHeight / 3)+'px'}}>
|
||||
<div style={{marginTop: parseInt(window.innerHeight / 3)+"px"}}>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@
|
|||
* we replace the dirty select on desktop by something more fancy but not on ios/android
|
||||
* as there's just no reason for doing that.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import { Icon, NgIf } from "./";
|
||||
import './dropdown.scss';
|
||||
import "./dropdown.scss";
|
||||
|
||||
export class Dropdown extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -44,9 +43,9 @@ export class Dropdown extends React.Component {
|
|||
this.setState({button: false});
|
||||
}
|
||||
|
||||
toggleDropdown(e){
|
||||
toggleDropdown(){
|
||||
if(this.props.enable === false){
|
||||
return
|
||||
return;
|
||||
}
|
||||
document.body.removeEventListener("click", this.closeDropdown);
|
||||
this.setState({button: !this.state.button}, () => {
|
||||
|
|
@ -81,7 +80,7 @@ export const DropdownButton = (props) => {
|
|||
{ props.children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export const DropdownList = (props) => {
|
||||
|
|
@ -107,7 +106,7 @@ export const DropdownItem = (props) => {
|
|||
<div onClick={props.onSelect.bind(null, props.name)}>
|
||||
{props.children}
|
||||
<NgIf cond={!!props.icon} type="inline">
|
||||
<span style={{float: 'right'}}>
|
||||
<span style={{float: "right"}}>
|
||||
<Icon name={props.icon} />
|
||||
</span>
|
||||
</NgIf>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// cheap event system that handle subscription, unsubscriptions and event emitions
|
||||
import React from 'react';
|
||||
let emitters = {}
|
||||
import React from "react";
|
||||
let emitters = {};
|
||||
|
||||
function subscribe(key, event, fn){
|
||||
if(emitters[event]){
|
||||
|
|
@ -25,12 +25,14 @@ function emit(event, payload){
|
|||
// trigger events if needed
|
||||
if(emitters[event]){
|
||||
return Promise.all(Object.keys(emitters[event]).map((key) => {
|
||||
return emitters[event][key].apply(null, payload)
|
||||
return emitters[event][key].apply(null, payload);
|
||||
})).then((res) => {
|
||||
return emitters[event] ? Promise.resolve(res) : Promise.reject({message: 'do not exist', code: 'CANCELLED'})
|
||||
return emitters[event] ?
|
||||
Promise.resolve(res) :
|
||||
Promise.reject({message: "do not exist", code: "CANCELLED"});
|
||||
});
|
||||
}else{
|
||||
return Promise.reject({message: 'oups, something went wrong', code: 'NO_LISTENERS'})
|
||||
return Promise.reject({message: "oups, something went wrong", code: "NO_LISTENERS"});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -39,17 +41,17 @@ export function EventReceiver(WrappedComponent){
|
|||
|
||||
return class extends React.Component {
|
||||
subscribe(event, callback){
|
||||
subscribe(id, event, callback)
|
||||
subscribe(id, event, callback);
|
||||
}
|
||||
|
||||
unsubscribe(event){
|
||||
unsubscribe(id, event)
|
||||
unsubscribe(id, event);
|
||||
}
|
||||
|
||||
render(){
|
||||
return <WrappedComponent subscribe={this.subscribe} unsubscribe={this.unsubscribe} {...this.props} />;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function EventEmitter(WrappedComponent) {
|
||||
|
|
@ -64,12 +66,12 @@ export function EventEmitter(WrappedComponent) {
|
|||
if(res.then){
|
||||
return res;
|
||||
}else{
|
||||
return Promise.resolve(res)
|
||||
return Promise.resolve(res);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <WrappedComponent emit={this.emit} {...this.props} />;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import React from "react";
|
||||
import "./fab.scss";
|
||||
|
||||
import './fab.scss';
|
||||
|
||||
export const Fab = (props) => {
|
||||
export function Fab(props){
|
||||
return (
|
||||
<div className="component_fab" onClick={props.onClick}>
|
||||
<div className="content">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import { Input, Textarea, Select, Enabler } from './';
|
||||
import { FormObjToJSON, format, autoComplete, notify } from '../helpers/';
|
||||
import { t } from '../locales/';
|
||||
import { Input, Textarea, Select, Enabler } from "./";
|
||||
import { FormObjToJSON, format, autoComplete, notify } from "../helpers/";
|
||||
import { t } from "../locales/";
|
||||
|
||||
import "./formbuilder.scss";
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ export class FormBuilder extends React.Component {
|
|||
let _advanced = [];
|
||||
for (let key in s){
|
||||
const tmp = {key: key, data: s[key]};
|
||||
'id' in s[key] ? _advanced.push(tmp) : _normal.push(tmp);
|
||||
"id" in s[key] ? _advanced.push(tmp) : _normal.push(tmp);
|
||||
}
|
||||
return [_normal, _advanced];
|
||||
}(struct);
|
||||
|
|
@ -116,7 +116,7 @@ const FormElement = (props) => {
|
|||
let struct = props.params;
|
||||
let $input = ( <Input onChange={(e) => props.onChange(e.target.value)} {...id} name={struct.label} type="text" defaultValue={struct.value} placeholder={ t(struct.placeholder) } /> );
|
||||
switch(props.params["type"]){
|
||||
case "text":
|
||||
case "text": {
|
||||
const onTextChange = (value) => {
|
||||
if(value === ""){
|
||||
value = null;
|
||||
|
|
@ -152,14 +152,16 @@ const FormElement = (props) => {
|
|||
);
|
||||
}
|
||||
break;
|
||||
case "number":
|
||||
}
|
||||
case "number": {
|
||||
const onNumberChange = (value) => {
|
||||
value = value === "" ? null : parseInt(value);
|
||||
props.onChange(value);
|
||||
};
|
||||
$input = ( <Input onChange={(e) => onNumberChange(e.target.value)} {...id} name={struct.label} type="number" value={struct.value === null ? "" : struct.value} placeholder={ t(struct.placeholder) } /> );
|
||||
break;
|
||||
case "password":
|
||||
}
|
||||
case "password": {
|
||||
const onPasswordChange = (value) => {
|
||||
if(value === ""){
|
||||
value = null;
|
||||
|
|
@ -168,7 +170,8 @@ const FormElement = (props) => {
|
|||
};
|
||||
$input = ( <Input onChange={(e) => onPasswordChange(e.target.value)} {...id} name={struct.label} type="password" value={struct.value || ""} placeholder={ t(struct.placeholder) } autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false"/> );
|
||||
break;
|
||||
case "long_password":
|
||||
}
|
||||
case "long_password": {
|
||||
const onLongPasswordChange = (value) => {
|
||||
if(value === ""){
|
||||
value = null;
|
||||
|
|
@ -179,10 +182,11 @@ const FormElement = (props) => {
|
|||
<Textarea {...id} disabledEnter={true} value={struct.value || ""} onChange={(e) => onLongPasswordChange(e.target.value)} type="text" rows="1" name={struct.label} placeholder={ t(struct.placeholder) } autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" />
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "long_text":
|
||||
$input = ( <Textarea {...id} disabledEnter={true} value={struct.value || ""} onChange={(e) => props.onChange(e.target.value)} type="text" rows="3" name={struct.label} placeholder={ t(struct.placeholder) } autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" /> );
|
||||
break;
|
||||
case "bcrypt":
|
||||
case "bcrypt": {
|
||||
const onBcryptChange = (value) => {
|
||||
if(value === ""){
|
||||
return props.onChange(null);
|
||||
|
|
@ -194,6 +198,7 @@ const FormElement = (props) => {
|
|||
};
|
||||
$input = ( <Input onChange={(e) => onBcryptChange(e.target.value)} {...id} name={struct.label} type="password" defaultValue={struct.value || ""} placeholder={ t(struct.placeholder) } /> );
|
||||
break;
|
||||
}
|
||||
case "hidden":
|
||||
$input = ( <Input name={struct.label} type="hidden" defaultValue={struct.value} /> );
|
||||
break;
|
||||
|
|
@ -215,7 +220,7 @@ const FormElement = (props) => {
|
|||
case "image":
|
||||
$input = ( <img {...id} src={struct.value} /> );
|
||||
break;
|
||||
case "file":
|
||||
case "file": {
|
||||
const getBase64 = function(file){
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new window.FileReader();
|
||||
|
|
@ -242,6 +247,7 @@ const FormElement = (props) => {
|
|||
</div>
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "oauth2":
|
||||
$input = null;
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import './icon.scss';
|
||||
import React from "react";
|
||||
import "./icon.scss";
|
||||
|
||||
import img_save from "../assets/img/save.svg";
|
||||
import img_power from "../assets/img/power.svg";
|
||||
|
|
@ -11,132 +11,130 @@ import img_error from "../assets/img/error.svg";
|
|||
import img_loading_white from "../assets/img/loader_white.svg";
|
||||
import img_download_white from "../assets/img/download_white.svg";
|
||||
import img_upload_white from "../assets/img/upload_white.svg";
|
||||
import img_todo_white from '../assets/img/todo_white.svg';
|
||||
import img_calendar_white from '../assets/img/calendar_white.svg';
|
||||
import img_calendar from '../assets/img/calendar.svg';
|
||||
import img_alarm from '../assets/img/alarm.svg';
|
||||
import img_arrow_right from '../assets/img/arrow_right.svg';
|
||||
import img_arrow_right_white from '../assets/img/arrow_right_white.svg';
|
||||
import img_arrow_left_white from '../assets/img/arrow_left_white.svg';
|
||||
import img_arrow_left from '../assets/img/arrow_left.svg';
|
||||
import img_arrow_top from '../assets/img/arrow_top.svg';
|
||||
import img_arrow_bottom from '../assets/img/arrow_bottom.svg';
|
||||
import img_more from '../assets/img/more.svg';
|
||||
import img_close from '../assets/img/close.svg';
|
||||
import img_close_dark from '../assets/img/close_dark.svg';
|
||||
import img_schedule from '../assets/img/schedule.svg';
|
||||
import img_deadline from '../assets/img/deadline.svg';
|
||||
import img_arrow_down from '../assets/img/arrow-down.svg';
|
||||
import img_arrow_up_double from '../assets/img/arrow-up-double.svg';
|
||||
import img_arrow_down_double from '../assets/img/arrow-down-double.svg';
|
||||
import img_search from '../assets/img/search.svg';
|
||||
import img_search_dark from '../assets/img/search_dark.svg';
|
||||
import img_grid from '../assets/img/grid.svg';
|
||||
import img_list from '../assets/img/list.svg';
|
||||
import img_sort from '../assets/img/sort.svg';
|
||||
import img_check from '../assets/img/check.svg';
|
||||
import img_info from '../assets/img/info.svg';
|
||||
import img_fullscreen from '../assets/img/fullscreen.svg';
|
||||
import img_camera from '../assets/img/camera.svg';
|
||||
import img_location from '../assets/img/location.svg';
|
||||
import img_stop from '../assets/img/stop.svg';
|
||||
import img_refresh from '../assets/img/refresh.svg';
|
||||
import img_copy from '../assets/img/copy.svg';
|
||||
import img_todo_white from "../assets/img/todo_white.svg";
|
||||
import img_calendar_white from "../assets/img/calendar_white.svg";
|
||||
import img_calendar from "../assets/img/calendar.svg";
|
||||
import img_alarm from "../assets/img/alarm.svg";
|
||||
import img_arrow_right from "../assets/img/arrow_right.svg";
|
||||
import img_arrow_right_white from "../assets/img/arrow_right_white.svg";
|
||||
import img_arrow_left_white from "../assets/img/arrow_left_white.svg";
|
||||
import img_arrow_left from "../assets/img/arrow_left.svg";
|
||||
import img_arrow_top from "../assets/img/arrow_top.svg";
|
||||
import img_arrow_bottom from "../assets/img/arrow_bottom.svg";
|
||||
import img_more from "../assets/img/more.svg";
|
||||
import img_close from "../assets/img/close.svg";
|
||||
import img_close_dark from "../assets/img/close_dark.svg";
|
||||
import img_arrow_down from "../assets/img/arrow-down.svg";
|
||||
import img_arrow_up_double from "../assets/img/arrow-up-double.svg";
|
||||
import img_arrow_down_double from "../assets/img/arrow-down-double.svg";
|
||||
import img_search from "../assets/img/search.svg";
|
||||
import img_search_dark from "../assets/img/search_dark.svg";
|
||||
import img_grid from "../assets/img/grid.svg";
|
||||
import img_list from "../assets/img/list.svg";
|
||||
import img_sort from "../assets/img/sort.svg";
|
||||
import img_check from "../assets/img/check.svg";
|
||||
import img_info from "../assets/img/info.svg";
|
||||
import img_fullscreen from "../assets/img/fullscreen.svg";
|
||||
import img_camera from "../assets/img/camera.svg";
|
||||
import img_location from "../assets/img/location.svg";
|
||||
import img_stop from "../assets/img/stop.svg";
|
||||
import img_refresh from "../assets/img/refresh.svg";
|
||||
import img_copy from "../assets/img/copy.svg";
|
||||
export const img_placeholder = "/assets/icons/placeholder.png";
|
||||
|
||||
export const Icon = (props) => {
|
||||
if(props.name === null) return null;
|
||||
let img;
|
||||
if(props.name === 'directory'){
|
||||
if(props.name === "directory"){
|
||||
img = "/assets/icons/folder.svg";
|
||||
}else if(props.name === 'file'){
|
||||
}else if(props.name === "file"){
|
||||
img = "/assets/icons/file.svg";
|
||||
}else if(props.name === 'save'){
|
||||
}else if(props.name === "save"){
|
||||
img = img_save;
|
||||
}else if(props.name === 'power'){
|
||||
}else if(props.name === "power"){
|
||||
img = img_power;
|
||||
}else if(props.name === 'edit'){
|
||||
}else if(props.name === "edit"){
|
||||
img = "/assets/icons/edit.svg";
|
||||
}else if(props.name === 'delete'){
|
||||
}else if(props.name === "delete"){
|
||||
img = "/assets/icons/delete.svg";
|
||||
}else if(props.name === 'share'){
|
||||
}else if(props.name === "share"){
|
||||
img = "/assets/icons/share.svg";
|
||||
}else if(props.name === 'bucket'){
|
||||
}else if(props.name === "bucket"){
|
||||
img = img_bucket;
|
||||
}else if(props.name === 'download_white'){
|
||||
}else if(props.name === "download_white"){
|
||||
img = img_download_white;
|
||||
}else if(props.name === 'upload_white'){
|
||||
}else if(props.name === "upload_white"){
|
||||
img = img_upload_white;
|
||||
}else if(props.name === 'play'){
|
||||
}else if(props.name === "play"){
|
||||
img = img_play;
|
||||
}else if(props.name === 'pause'){
|
||||
}else if(props.name === "pause"){
|
||||
img = img_pause;
|
||||
}else if(props.name === 'error'){
|
||||
}else if(props.name === "error"){
|
||||
img = img_error;
|
||||
}else if(props.name === 'loading_white'){
|
||||
}else if(props.name === "loading_white"){
|
||||
img = img_loading_white;
|
||||
}else if(props.name === 'loading'){
|
||||
}else if(props.name === "loading"){
|
||||
img = img_loading;
|
||||
}else if(props.name === 'calendar_white'){
|
||||
}else if(props.name === "calendar_white"){
|
||||
img = img_calendar_white;
|
||||
}else if(props.name === 'schedule'){
|
||||
}else if(props.name === "schedule"){
|
||||
img = img_calendar;
|
||||
}else if(props.name === 'deadline'){
|
||||
}else if(props.name === "deadline"){
|
||||
img = img_alarm;
|
||||
}else if(props.name === 'todo_white'){
|
||||
}else if(props.name === "todo_white"){
|
||||
img = img_todo_white;
|
||||
}else if(props.name === 'arrow_bottom'){
|
||||
}else if(props.name === "arrow_bottom"){
|
||||
img = img_arrow_bottom;
|
||||
}else if(props.name === 'arrow_top'){
|
||||
}else if(props.name === "arrow_top"){
|
||||
img = img_arrow_top;
|
||||
}else if(props.name === 'arrow_right'){
|
||||
}else if(props.name === "arrow_right"){
|
||||
img = img_arrow_right;
|
||||
}else if(props.name === 'arrow_right_white'){
|
||||
}else if(props.name === "arrow_right_white"){
|
||||
img = img_arrow_right_white;
|
||||
}else if(props.name === 'arrow_left_white'){
|
||||
}else if(props.name === "arrow_left_white"){
|
||||
img = img_arrow_left_white;
|
||||
}else if(props.name === 'arrow_left'){
|
||||
}else if(props.name === "arrow_left"){
|
||||
img = img_arrow_left;
|
||||
}else if(props.name === 'more'){
|
||||
}else if(props.name === "more"){
|
||||
img = img_more;
|
||||
}else if(props.name === 'close'){
|
||||
}else if(props.name === "close"){
|
||||
img = img_close;
|
||||
}else if(props.name === 'close_dark'){
|
||||
}else if(props.name === "close_dark"){
|
||||
img = img_close_dark;
|
||||
}else if(props.name === 'arrow_up_double'){
|
||||
}else if(props.name === "arrow_up_double"){
|
||||
img = img_arrow_up_double;
|
||||
}else if(props.name === 'arrow_down_double'){
|
||||
}else if(props.name === "arrow_down_double"){
|
||||
img = img_arrow_down_double;
|
||||
}else if(props.name === 'arrow_down'){
|
||||
}else if(props.name === "arrow_down"){
|
||||
img = img_arrow_down;
|
||||
}else if(props.name === 'search'){
|
||||
}else if(props.name === "search"){
|
||||
img = img_search;
|
||||
}else if(props.name === 'search_dark'){
|
||||
}else if(props.name === "search_dark"){
|
||||
img = img_search_dark;
|
||||
}else if(props.name === 'grid'){
|
||||
}else if(props.name === "grid"){
|
||||
img = img_grid;
|
||||
}else if(props.name === 'list'){
|
||||
}else if(props.name === "list"){
|
||||
img = img_list;
|
||||
}else if(props.name === 'sort'){
|
||||
}else if(props.name === "sort"){
|
||||
img = img_sort;
|
||||
}else if(props.name === 'check'){
|
||||
}else if(props.name === "check"){
|
||||
img = img_check;
|
||||
}else if(props.name === 'info'){
|
||||
}else if(props.name === "info"){
|
||||
img = img_info;
|
||||
}else if(props.name === 'fullscreen'){
|
||||
}else if(props.name === "fullscreen"){
|
||||
img = img_fullscreen;
|
||||
}else if(props.name === 'camera'){
|
||||
}else if(props.name === "camera"){
|
||||
img = img_camera;
|
||||
}else if(props.name === 'location'){
|
||||
}else if(props.name === "location"){
|
||||
img = img_location;
|
||||
} else if (props.name === 'stop') {
|
||||
} else if (props.name === "stop") {
|
||||
img = img_stop;
|
||||
} else if (props.name === 'refresh') {
|
||||
} else if (props.name === "refresh") {
|
||||
img = img_refresh;
|
||||
} else if (props.name === 'copy') {
|
||||
} else if (props.name === "copy") {
|
||||
img = img_copy;
|
||||
} else{
|
||||
throw('unknown icon: "'+props.name+"'");
|
||||
throw(`unknown icon: "${props.name}"`);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
export { EventEmitter, EventReceiver } from './events';
|
||||
export { BreadCrumb, PathElement } from './breadcrumb';
|
||||
export { Input, Select, Enabler } from './input';
|
||||
export { Textarea } from './textarea';
|
||||
export { Button } from './button';
|
||||
export { Container } from './container';
|
||||
export { NgIf, NgShow } from './ngif';
|
||||
export { Card } from './card';
|
||||
export { Loader } from './loader';
|
||||
export { Fab } from './fab';
|
||||
export { Icon, img_placeholder } from './icon';
|
||||
export { Bundle } from './bundle';
|
||||
export { Modal } from './modal';
|
||||
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';
|
||||
export { LoggedInOnly, ErrorPage, LoadingPage } from './decorator';
|
||||
export { FormBuilder } from './formbuilder';
|
||||
export { UploadQueue } from './upload_queue';
|
||||
export { EventEmitter, EventReceiver } from "./events";
|
||||
export { BreadCrumb, PathElement } from "./breadcrumb";
|
||||
export { Input, Select, Enabler } from "./input";
|
||||
export { Textarea } from "./textarea";
|
||||
export { Button } from "./button";
|
||||
export { Container } from "./container";
|
||||
export { NgIf, NgShow } from "./ngif";
|
||||
export { Card } from "./card";
|
||||
export { Loader } from "./loader";
|
||||
export { Fab } from "./fab";
|
||||
export { Icon, img_placeholder } from "./icon";
|
||||
export { Bundle } from "./bundle";
|
||||
export { Modal } from "./modal";
|
||||
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";
|
||||
export { LoggedInOnly, ErrorPage, LoadingPage } from "./decorator";
|
||||
export { FormBuilder } from "./formbuilder";
|
||||
export { UploadQueue } from "./upload_queue";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './input.scss';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import "./input.scss";
|
||||
|
||||
export class Input extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -72,7 +72,7 @@ export class Enabler extends React.Component {
|
|||
// reset value
|
||||
if($el.value){
|
||||
$el.value = null;
|
||||
let event = new Event('input', { bubbles: true});
|
||||
let event = new Event("input", { bubbles: true});
|
||||
event.simulated = true;
|
||||
$el.dispatchEvent(event);
|
||||
}
|
||||
|
|
@ -85,4 +85,4 @@ export class Enabler extends React.Component {
|
|||
<Input type="checkbox" onChange={this.onChange.bind(this)} defaultChecked={this.props.defaultValue} />
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import './loader.scss';
|
||||
import React from "react";
|
||||
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
|
||||
import "./loader.scss";
|
||||
|
||||
export const Loader = (props) => {
|
||||
export const Loader = () => {
|
||||
return (
|
||||
<ReactCSSTransitionGroup transitionName="loader" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={400}>
|
||||
<div className="component_loader">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import { debounce } from '../helpers/';
|
||||
import { Icon, Loader, NgIf } from './';
|
||||
import { t } from '../locales/';
|
||||
import './mapshot.scss';
|
||||
import React from "react";
|
||||
import { Icon, Loader } from "./";
|
||||
import { t } from "../locales/";
|
||||
import "./mapshot.scss";
|
||||
|
||||
export class MapShot extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -94,7 +93,7 @@ export class MapShot extends React.Component {
|
|||
<div ref="$wrapper" className={"component_mapshot"+(this.state.tile_loaded === 9 ? " loaded" : "")+(this.state.error === true ? " error": "")} style={{height: (this.state.tile_size*3)+"px"}}>
|
||||
<div className="wrapper">
|
||||
<div className="mapshot_placeholder error">
|
||||
<span><div>t("ERROR")</div></span>
|
||||
<span><div>{ t("ERROR") }</div></span>
|
||||
</div>
|
||||
<div className="mapshot_placeholder loading">
|
||||
<Loader/>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import { Input, Button, NgIf } from './';
|
||||
import { debounce } from '../helpers/';
|
||||
import './modal.scss';
|
||||
import { NgIf } from "./";
|
||||
import { debounce } from "../helpers/";
|
||||
import "./modal.scss";
|
||||
|
||||
export class Modal extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -17,7 +17,7 @@ export class Modal extends React.Component {
|
|||
}
|
||||
|
||||
onClick(e){
|
||||
if(e.target.getAttribute('id') === 'modal-box'){
|
||||
if(e.target.getAttribute("id") === "modal-box"){
|
||||
this.props.onQuit && this.props.onQuit();
|
||||
}
|
||||
}
|
||||
|
|
@ -31,11 +31,11 @@ export class Modal extends React.Component {
|
|||
|
||||
componentDidMount(){
|
||||
window.addEventListener("resize", this._resetMargin);
|
||||
window.addEventListener('keydown', this._onEscapeKeyPress);
|
||||
window.addEventListener("keydown", this._onEscapeKeyPress);
|
||||
}
|
||||
componentWillUnmount(){
|
||||
window.removeEventListener("resize", this._resetMargin);
|
||||
window.removeEventListener('keydown', this._onEscapeKeyPress);
|
||||
window.removeEventListener("keydown", this._onEscapeKeyPress);
|
||||
}
|
||||
|
||||
_resetMargin(){
|
||||
|
|
@ -51,7 +51,7 @@ export class Modal extends React.Component {
|
|||
|
||||
_marginTop(){
|
||||
let size = 300;
|
||||
const $box = document.querySelector('#modal-box > div');
|
||||
const $box = document.querySelector("#modal-box > div");
|
||||
if($box) size = $box.offsetHeight;
|
||||
|
||||
size = Math.round((document.body.offsetHeight - size) / 2);
|
||||
|
|
@ -69,7 +69,7 @@ export class Modal extends React.Component {
|
|||
>
|
||||
<NgIf key={"modal-"+this.props.isActive} cond={this.props.isActive}>
|
||||
<div className={"component_modal"+(this.props.className? " " + this.props.className : "")} onClick={this.onClick.bind(this)} id="modal-box">
|
||||
<div style={{margin: this.state.marginTop+'px auto 0 auto', visibility: this.state.marginTop === -1 ? "hidden" : "visible"}}>
|
||||
<div style={{margin: this.state.marginTop+"px auto 0 auto", visibility: this.state.marginTop === -1 ? "hidden" : "visible"}}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
export class NgIf extends React.Component {
|
||||
constructor(props){
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import React from "react";
|
||||
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
|
||||
|
||||
import { NgIf, Icon } from './';
|
||||
import { notify } from '../helpers/';
|
||||
import { t } from '../locales/';
|
||||
import './notification.scss';
|
||||
import { NgIf, Icon } from "./";
|
||||
import { notify } from "../helpers/";
|
||||
import { t } from "../locales/";
|
||||
import "./notification.scss";
|
||||
|
||||
export class Notification extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -16,12 +16,10 @@ export class Notification extends React.Component {
|
|||
};
|
||||
this.runner = new TaskManager();
|
||||
this.notification_current = null;
|
||||
this.notification_is_first = null;
|
||||
this.notification_is_last = null;
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.runner.before_run((task, isFirst, isLast) => {
|
||||
this.runner.before_run((task) => {
|
||||
this.notification_current = task;
|
||||
});
|
||||
|
||||
|
|
@ -35,9 +33,9 @@ export class Notification extends React.Component {
|
|||
});
|
||||
|
||||
function stringify(data){
|
||||
if(typeof data === 'object' && data.message){
|
||||
if(typeof data === "object" && data.message){
|
||||
return data.message;
|
||||
}else if(typeof data === 'string'){
|
||||
}else if(typeof data === "string"){
|
||||
return data;
|
||||
}
|
||||
return JSON.stringify(data);
|
||||
|
|
@ -45,7 +43,7 @@ export class Notification extends React.Component {
|
|||
}
|
||||
|
||||
closeNotification(){
|
||||
return new Promise((done ,err) => {
|
||||
return new Promise((done) => {
|
||||
this.setState({
|
||||
appear: false
|
||||
}, done);
|
||||
|
|
@ -53,7 +51,7 @@ export class Notification extends React.Component {
|
|||
}
|
||||
|
||||
openNotification(message){
|
||||
return new Promise((done ,err) => {
|
||||
return new Promise((done) => {
|
||||
this.setState({
|
||||
appear: true,
|
||||
message_text: message.text,
|
||||
|
|
@ -70,7 +68,7 @@ export class Notification extends React.Component {
|
|||
return (
|
||||
<ReactCSSTransitionGroup transitionName="notification" transitionLeave={true} transitionLeaveTimeout={200} transitionEnter={true} transitionEnterTimeout={100} transitionAppear={false} className="component_notification">
|
||||
<NgIf key={this.state.message_text+this.state.message_type+this.state.appear} cond={this.state.appear === true} className="no-select">
|
||||
<div className={"component_notification--container "+(this.state.message_type || 'info')}>
|
||||
<div className={"component_notification--container "+(this.state.message_type || "info")}>
|
||||
<div className="message">
|
||||
{ t(this.state.message_text || "") }
|
||||
</div>
|
||||
|
|
@ -92,8 +90,6 @@ function TaskManager(){
|
|||
let is_running = false;
|
||||
let subscriber = null;
|
||||
let current_task = null;
|
||||
let is_first = null;
|
||||
let is_last = null;
|
||||
|
||||
const ret ={
|
||||
addTask: function(task){
|
||||
|
|
@ -112,12 +108,11 @@ function TaskManager(){
|
|||
},
|
||||
_run: function(){
|
||||
current_task = tasks.shift();
|
||||
is_last = tasks.length === 0;
|
||||
if(!current_task){
|
||||
is_running = false;
|
||||
return Promise.resolve();
|
||||
}else{
|
||||
const mode = tasks.length > 0 ? 'minimal' : 'normal';
|
||||
const mode = tasks.length > 0 ? "minimal" : "normal";
|
||||
subscriber(current_task, mode);
|
||||
return current_task.run(mode).then(ret._run);
|
||||
}
|
||||
|
|
@ -133,17 +128,17 @@ function Task(_runCallback, _finishCallback, wait_time_before_finish, minimum_ru
|
|||
let timeout = null;
|
||||
|
||||
const ret = {
|
||||
run: function(mode = 'normal'){
|
||||
const wait = mode === 'minimal' ? minimum_running_time : wait_time_before_finish;
|
||||
run: function(mode = "normal"){
|
||||
const wait = mode === "minimal" ? minimum_running_time : wait_time_before_finish;
|
||||
start_date = new Date();
|
||||
|
||||
new Promise((_done, err) => {
|
||||
new Promise((_done) => {
|
||||
timeout = window.setTimeout(() => {
|
||||
_done();
|
||||
}, 200);
|
||||
})
|
||||
.then(_runCallback)
|
||||
.then(() => new Promise((_done, err) => {
|
||||
.then(() => new Promise((_done) => {
|
||||
timeout = window.setTimeout(() => {
|
||||
_done();
|
||||
}, wait);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Modal } from './';
|
||||
import React from "react";
|
||||
import { Modal } from "./";
|
||||
|
||||
import './popup.scss';
|
||||
import "./popup.scss";
|
||||
|
||||
export class Popup extends React.Component {
|
||||
constructor(props){
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
|
||||
import { Input, Button, Modal, NgIf } from './';
|
||||
import { prompt } from '../helpers/';
|
||||
import { Popup } from './popup';
|
||||
import { t } from '../locales/';
|
||||
import { Input, Button } from "./";
|
||||
import { prompt } from "../helpers/";
|
||||
import { Popup } from "./popup";
|
||||
import { t } from "../locales/";
|
||||
|
||||
export class ModalPrompt extends Popup {
|
||||
constructor(props){
|
||||
|
|
@ -15,10 +14,10 @@ export class ModalPrompt extends Popup {
|
|||
prompt.subscribe((text, okCallback, cancelCallback, type) => {
|
||||
this.setState({
|
||||
appear: true,
|
||||
value: '',
|
||||
value: "",
|
||||
error: null,
|
||||
type: type || 'text',
|
||||
text: text || '',
|
||||
type: type || "text",
|
||||
text: text || "",
|
||||
fns: {ok: okCallback, cancel: cancelCallback}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import './textarea.scss';
|
||||
import "./textarea.scss";
|
||||
|
||||
export class Textarea extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -22,7 +22,7 @@ export class Textarea extends React.Component {
|
|||
e.preventDefault();
|
||||
const $form = getForm(this.refs.el);
|
||||
if($form){
|
||||
$form.dispatchEvent(new Event('submit', { cancelable: true }));
|
||||
$form.dispatchEvent(new Event("submit", { cancelable: true }));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ export class Textarea extends React.Component {
|
|||
onKeyPress={disabledEnter}
|
||||
{...inputProps(this.props)}
|
||||
className={className}
|
||||
ref={"el"}
|
||||
ref="el"
|
||||
></textarea>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,38 @@
|
|||
import React from 'react';
|
||||
import Path from 'path';
|
||||
import React from "react";
|
||||
import Path from "path";
|
||||
|
||||
import { Files } from '../model/';
|
||||
import { confirm, notify, upload } from '../helpers/';
|
||||
import { Icon, NgIf } from './';
|
||||
import { t } from '../locales/';
|
||||
import './upload_queue.scss';
|
||||
import { Files } from "../model/";
|
||||
import { confirm, notify, upload } from "../helpers/";
|
||||
import { Icon, NgIf } from "./";
|
||||
import { t } from "../locales/";
|
||||
import "./upload_queue.scss";
|
||||
|
||||
const MAX_POOL_SIZE = 15;
|
||||
|
||||
function humanFileSize(bytes, si) {
|
||||
var thresh = si ? 1000 : 1024;
|
||||
if (Math.abs(bytes) < thresh) {
|
||||
return bytes.toFixed(1) + ' B';
|
||||
return bytes.toFixed(1) + " B";
|
||||
}
|
||||
var units = si
|
||||
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
||||
? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
|
||||
: ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
|
||||
var u = -1;
|
||||
do {
|
||||
bytes /= thresh;
|
||||
++u;
|
||||
} while (Math.abs(bytes) >= thresh && u < units.length - 1);
|
||||
return bytes.toFixed(1) + ' ' + units[u];
|
||||
return bytes.toFixed(1) + " " + units[u];
|
||||
}
|
||||
|
||||
function waitABit() {
|
||||
return new Promise((done) => {
|
||||
window.setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
done();
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
export class UploadQueue extends React.Component {
|
||||
|
|
@ -137,15 +147,6 @@ export class UploadQueue extends React.Component {
|
|||
return this.runner(id);
|
||||
});
|
||||
} else {
|
||||
function waitABit() {
|
||||
return new Promise((done) => {
|
||||
window.setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
done();
|
||||
});
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
return waitABit().then(() => this.runner(id));
|
||||
}
|
||||
}
|
||||
|
|
@ -184,13 +185,13 @@ export class UploadQueue extends React.Component {
|
|||
const processes = files.map((file) => {
|
||||
let original_path = file.path;
|
||||
file.path = Path.join(path, file.path);
|
||||
if (file.type === 'file') {
|
||||
if (files.length < 150) Files.touch(file.path, file.file, 'prepare_only');
|
||||
if (file.type === "file") {
|
||||
if (files.length < 150) Files.touch(file.path, file.file, "prepare_only");
|
||||
return {
|
||||
path: original_path,
|
||||
parent: file._prior || null,
|
||||
fn: Files.touch.bind(
|
||||
Files, file.path, file.file, 'execute_only',
|
||||
Files, file.path, file.file, "execute_only",
|
||||
{
|
||||
progress: (e) => this.updateProgress(original_path, e),
|
||||
abort: (x) => this.updateAbort(original_path, x),
|
||||
|
|
@ -198,12 +199,12 @@ export class UploadQueue extends React.Component {
|
|||
)
|
||||
};
|
||||
} else {
|
||||
Files.mkdir(file.path, 'prepare_only');
|
||||
Files.mkdir(file.path, "prepare_only");
|
||||
return {
|
||||
id: file._id || null,
|
||||
path: original_path,
|
||||
parent: file._prior || null,
|
||||
fn: Files.mkdir.bind(Files, file.path, 'execute_only')
|
||||
fn: Files.mkdir.bind(Files, file.path, "execute_only")
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
@ -231,7 +232,7 @@ export class UploadQueue extends React.Component {
|
|||
running: true,
|
||||
error: null
|
||||
});
|
||||
Promise.all(Array.apply(null, Array(MAX_POOL_SIZE)).map((process, index) => {
|
||||
Promise.all(Array.apply(null, Array(MAX_POOL_SIZE)).map(() => {
|
||||
return this.runner();
|
||||
})).then(() => {
|
||||
this.setState({ running: false });
|
||||
|
|
@ -260,7 +261,7 @@ export class UploadQueue extends React.Component {
|
|||
calcSpeed() {
|
||||
let now = Date.now();
|
||||
let curSpeed = [];
|
||||
for (const [key, value] of Object.entries(this.state.progress)) {
|
||||
for (const [, value] of Object.entries(this.state.progress)) {
|
||||
if (value.prev && now - value.time < 5 * 1000) {
|
||||
let bytes = value.loaded - value.prev.loaded;
|
||||
let timeMs = value.time - value.prev.time;
|
||||
|
|
@ -315,7 +316,7 @@ export class UploadQueue extends React.Component {
|
|||
className="file_path"
|
||||
onClick={() => this.emphasis(process.path)}
|
||||
>
|
||||
{process.path.replace(/\//, '')}
|
||||
{process.path.replace(/\//, "")}
|
||||
</div>
|
||||
{col_state(process)}
|
||||
<div className="file_control">
|
||||
|
|
@ -338,14 +339,14 @@ export class UploadQueue extends React.Component {
|
|||
<span className="completed">{finished.length}</span>
|
||||
<span className="grandTotal">{totalFiles}</span>
|
||||
</div>
|
||||
<Icon name="close" onClick={(e) => this.onClose()} />
|
||||
<Icon name="close" onClick={() => this.onClose()} />
|
||||
</h2>
|
||||
<h3>{this.state.error ? this.state.error : this.getState()}</h3>
|
||||
<div className="stats_content">
|
||||
{this.renderRows(
|
||||
finished,
|
||||
"done",
|
||||
(_) => (<div className="file_state file_state_done">{ t("Done") }</div>),
|
||||
() => (<div className="file_state file_state_done">{ t("Done") }</div>),
|
||||
)}
|
||||
{this.renderRows(
|
||||
currents,
|
||||
|
|
@ -356,13 +357,13 @@ export class UploadQueue extends React.Component {
|
|||
</div>
|
||||
),
|
||||
(p) => (
|
||||
<Icon name="stop" onClick={(e) => this.abort(p)} ></Icon>
|
||||
<Icon name="stop" onClick={() => this.abort(p)} ></Icon>
|
||||
)
|
||||
)}
|
||||
{this.renderRows(
|
||||
processes,
|
||||
"todo",
|
||||
(_) => (
|
||||
() => (
|
||||
<div className="file_state file_state_todo">{ t("Waiting") }</div>
|
||||
)
|
||||
)}
|
||||
|
|
@ -370,14 +371,14 @@ export class UploadQueue extends React.Component {
|
|||
failed,
|
||||
"error",
|
||||
(p) => (
|
||||
(p.err && p.err.message == 'aborted')
|
||||
(p.err && p.err.message == "aborted")
|
||||
?
|
||||
<div className="file_state file_state_error">{ t("Aborted") }</div>
|
||||
:
|
||||
<div className="file_state file_state_error">{ t("Error") }</div>
|
||||
),
|
||||
(p) => (
|
||||
<Icon name="refresh" onClick={(e) => this.retryFiles(p)} ></Icon>
|
||||
<Icon name="refresh" onClick={() => this.retryFiles(p)} ></Icon>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Icon, NgIf } from './';
|
||||
import './video.scss';
|
||||
|
||||
import React from "react";
|
||||
import { Icon } from "./";
|
||||
import "./video.scss";
|
||||
|
||||
export class Video extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -20,8 +17,3 @@ export class Video extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// <video autoPlay="true" width="300" height="200">
|
||||
// <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4" />
|
||||
// </video>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export { URL_HOME, goToHome, URL_FILES, goToFiles, URL_VIEWER, goToViewer, URL_LOGIN, goToLogin, URL_LOGOUT, goToLogout, urlParams } from './navigate';
|
||||
export { URL_HOME, goToHome, URL_FILES, goToFiles, URL_VIEWER, goToViewer, URL_LOGIN, goToLogin, URL_LOGOUT, goToLogout, urlParams, URL_ADMIN, URL_SHARE } from './navigate';
|
||||
export { opener } from './mimetype';
|
||||
export { debounce, throttle } from './backpressure';
|
||||
export { event } from './events';
|
||||
|
|
|
|||
|
|
@ -29,6 +29,10 @@ export function goToLogout(history){
|
|||
return Promise.resolve("ok");
|
||||
}
|
||||
|
||||
export const URL_ADMIN = "/admin";
|
||||
|
||||
export const URL_SHARE = "/s";
|
||||
|
||||
function encode_path(path){
|
||||
if(/%2F/.test(path) === false){
|
||||
return encodeURIComponent(path).replace(/%2F/g, "/"); // replace slash to make url more friendly
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import React from "react";
|
||||
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
|
||||
|
||||
import { MenuBar } from './menubar';
|
||||
import { Container, FormBuilder, NgIf, Icon, Fab } from '../../components/';
|
||||
import { appendShareToUrl } from '../../helpers/';
|
||||
import './formviewer.scss';
|
||||
import { MenuBar } from "./menubar";
|
||||
import { Container, FormBuilder, NgIf, Icon, Fab } from "../../components/";
|
||||
import { appendShareToUrl } from "../../helpers/";
|
||||
import "./formviewer.scss";
|
||||
|
||||
export class FormViewer extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -29,7 +29,7 @@ export class FormViewer extends React.Component {
|
|||
|
||||
save(){
|
||||
if(this.props.needSaving === false) return;
|
||||
let blob = new window.Blob([JSON.stringify(this.state.form)], {type : 'text/plain'});
|
||||
let blob = new window.Blob([JSON.stringify(this.state.form)], {type : "text/plain"});
|
||||
return this.props
|
||||
.onSave(blob)
|
||||
.then(() => this.props.needSavingUpdate(false));
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
export { FileDownloader } from './filedownloader';
|
||||
export { ImageViewer } from './imageviewer';
|
||||
export { PDFViewer } from './pdfviewer';
|
||||
export { FormViewer } from './formviewer';
|
||||
export { FileDownloader } from "./filedownloader";
|
||||
export { ImageViewer } from "./imageviewer";
|
||||
export { PDFViewer } from "./pdfviewer";
|
||||
export { FormViewer } from "./formviewer";
|
||||
// Those are commented because they will be delivered as a separate chunk
|
||||
//export { VideoPlayer } from './videoplayer';
|
||||
//export { IDE } from './ide';
|
||||
//export { AudioPlayer } from './audioplayer';
|
||||
//export { VideoPlayer } from "./videoplayer";
|
||||
//export { IDE } from "./ide";
|
||||
//export { AudioPlayer } from "./audioplayer";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
|
||||
|
||||
import { Container, NgIf, Icon } from '../../components/';
|
||||
import './menubar.scss';
|
||||
import { Container, NgIf, Icon } from "../../components/";
|
||||
import "./menubar.scss";
|
||||
|
||||
|
||||
export const MenuBar = (props) => {
|
||||
|
|
@ -11,7 +11,7 @@ export const MenuBar = (props) => {
|
|||
<div className="component_menubar">
|
||||
<Container>
|
||||
<ReactCSSTransitionGroup transitionName="menubar" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={550}>
|
||||
<div className="titlebar" style={{letterSpacing: '0.3px'}}>{props.title}</div>
|
||||
<div className="titlebar" style={{letterSpacing: "0.3px"}}>{props.title}</div>
|
||||
<div className="action-item no-select">
|
||||
<span className="specific">
|
||||
{props.children}
|
||||
|
|
@ -37,14 +37,15 @@ class DownloadButton extends React.Component {
|
|||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
document.cookie = "download=yes; path=/; max-age=120;";
|
||||
this.state.id = window.setInterval(() => {
|
||||
if(/download=yes/.test(document.cookie) === false){
|
||||
window.clearInterval(this.state.id);
|
||||
this.setState({loading: false});
|
||||
}
|
||||
}, 100);
|
||||
this.setState({
|
||||
id: window.setInterval(() => {
|
||||
if(/download=yes/.test(document.cookie) === false){
|
||||
window.clearInterval(this.state.id);
|
||||
this.setState({loading: false});
|
||||
}
|
||||
}, 100)
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import { StickyContainer, Sticky } from 'react-sticky';
|
||||
import React from "react";
|
||||
import { StickyContainer, Sticky } from "react-sticky";
|
||||
|
||||
import { Modal, Container, NgIf, Icon, Dropdown, DropdownButton, DropdownList, DropdownItem } from '../../components/';
|
||||
import { extractEvents, extractTodos } from '../../helpers/org';
|
||||
import { leftPad } from '../../helpers/common';
|
||||
import { debounce } from '../../helpers/';
|
||||
import { t } from '../../locales/';
|
||||
import './org_viewer.scss';
|
||||
import { Modal, NgIf, Icon, Dropdown, DropdownButton, DropdownList, DropdownItem } from "../../components/";
|
||||
import { extractEvents, extractTodos } from "../../helpers/org";
|
||||
import { leftPad } from "../../helpers/common";
|
||||
import { debounce } from "../../helpers/";
|
||||
import { t } from "../../locales/";
|
||||
import "./org_viewer.scss";
|
||||
|
||||
export class OrgEventsViewer extends React.Component {
|
||||
shouldComponentUpdate(nextProps){
|
||||
|
|
@ -47,7 +47,7 @@ class OrgViewer extends React.Component {
|
|||
this.state = {
|
||||
headlines: this.buildHeadlines(props.headlines),
|
||||
content: props.content,
|
||||
search: '',
|
||||
search: "",
|
||||
_: null
|
||||
};
|
||||
this.rerender = () => {this.setState({_: Math.random()});};
|
||||
|
|
@ -64,8 +64,8 @@ class OrgViewer extends React.Component {
|
|||
buildHeadlines(headlines){
|
||||
return headlines
|
||||
.reduce((acc, headline) => {
|
||||
if(!acc[headline['key']]){ acc[headline['key']] = []; }
|
||||
acc[headline['key']].push(headline);
|
||||
if(!acc[headline["key"]]){ acc[headline["key"]] = []; }
|
||||
acc[headline["key"]].push(headline);
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
|
@ -88,14 +88,14 @@ class OrgViewer extends React.Component {
|
|||
break;
|
||||
case "subtask":
|
||||
if(value === "DONE"){
|
||||
content[line] = content[line].replace(/\[.\]/, '[X]');
|
||||
content[line] = content[line].replace(/\[.\]/, "[X]");
|
||||
}else{
|
||||
content[line] = content[line].replace(/\[.\]/, '[ ]');
|
||||
content[line] = content[line].replace(/\[.\]/, "[ ]");
|
||||
}
|
||||
break;
|
||||
case "existing_scheduled":
|
||||
[head_line, head_status, item_line] = line;
|
||||
content[item_line] = content[item_line].replace(/SCHEDULED\: \<.*?\>\s*/, value ? "SCHEDULED: "+orgdate(value)+" " : "");
|
||||
content[item_line] = content[item_line].replace(/SCHEDULED: <.*?>\s*/, value ? "SCHEDULED: "+orgdate(value)+" " : "");
|
||||
this.state.headlines[head_status] = this.state.headlines[head_status]
|
||||
.map((todo) => {
|
||||
if(todo.line === head_line){
|
||||
|
|
@ -108,7 +108,7 @@ class OrgViewer extends React.Component {
|
|||
break;
|
||||
case "existing_deadline":
|
||||
[head_line, head_status, item_line] = line;
|
||||
content[item_line] = content[item_line].replace(/DEADLINE\: \<.*?\>\s*/, value ? "DEADLINE: "+orgdate(value) : "");
|
||||
content[item_line] = content[item_line].replace(/DEADLINE: <.*?>\s*/, value ? "DEADLINE: "+orgdate(value) : "");
|
||||
this.state.headlines[head_status] = this.state.headlines[head_status]
|
||||
.map((todo) => {
|
||||
if(todo.line === head_line){
|
||||
|
|
@ -185,7 +185,7 @@ class OrgViewer extends React.Component {
|
|||
this.setState({headlines: this.state.headlines});
|
||||
}
|
||||
break;
|
||||
};
|
||||
}
|
||||
this.setState({content: content.join("\n")});
|
||||
|
||||
function orgdate(_date){
|
||||
|
|
@ -194,8 +194,9 @@ class OrgViewer extends React.Component {
|
|||
|
||||
function day(n){
|
||||
switch(navigator.language.split("-")[0]){
|
||||
case "de": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"][n];
|
||||
default: return ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][n];
|
||||
case "de": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"][n];
|
||||
break;
|
||||
default: return ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][n];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -212,10 +213,10 @@ class OrgViewer extends React.Component {
|
|||
}
|
||||
|
||||
componentDidMount(){
|
||||
window.addEventListener('resize', this.rerender);
|
||||
window.addEventListener("resize", this.rerender);
|
||||
}
|
||||
componentWillUnmount(){
|
||||
window.removeEventListener('resize', this.rerender);
|
||||
window.removeEventListener("resize", this.rerender);
|
||||
}
|
||||
|
||||
search(terms){
|
||||
|
|
@ -231,8 +232,8 @@ class OrgViewer extends React.Component {
|
|||
const keywords = terms.split(" ");
|
||||
const head = function(){
|
||||
let str = " ";
|
||||
str += headline['status'] + " ";
|
||||
str += headline['title'] + " ";
|
||||
str += headline["status"] + " ";
|
||||
str += headline["title"] + " ";
|
||||
str += headline.tags.map((tag) => "#"+tag).join(" ") + " ";
|
||||
str += headline.scheduled ? "scheduled "+headline.scheduled.timestamp + " ": "";
|
||||
str += headline.deadline ? "deadline "+headline.deadline.timestamp + " ": "";
|
||||
|
|
@ -273,7 +274,7 @@ class OrgViewer extends React.Component {
|
|||
<div key={i}>
|
||||
<Sticky relative>
|
||||
{
|
||||
({isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight}) => {
|
||||
({style}) => {
|
||||
return (
|
||||
<div className="sticky_header no-select" style={{...style, overflow: "auto", background: "white", zIndex: 4}}>
|
||||
<h2>{list} <span>{this.state.headlines[list].length}</span></h2>
|
||||
|
|
@ -328,7 +329,7 @@ class Headline extends React.Component {
|
|||
};
|
||||
}
|
||||
|
||||
onMenuAction(key, value){
|
||||
onMenuAction(key){
|
||||
if(key === "navigate"){
|
||||
this.props.goTo();
|
||||
}else if(key === "properties"){
|
||||
|
|
@ -339,14 +340,14 @@ class Headline extends React.Component {
|
|||
onStatusToggle(){
|
||||
if(!this.props.todo_status) return;
|
||||
|
||||
const new_status = this.state.status === 'todo' ? 'done' : 'todo';
|
||||
const new_status = this.state.status === "todo" ? "done" : "todo";
|
||||
this.setState({status: new_status});
|
||||
|
||||
const new_status_label = function(new_status, initial_status, initial_keyword){
|
||||
if(new_status === initial_status) return initial_keyword;
|
||||
return new_status === "todo" ? "TODO" : "DONE";
|
||||
}(new_status, this.props.todo_status, this.props.status);
|
||||
this.props.onTaskUpdate('status', this.props.line, new_status_label);
|
||||
this.props.onTaskUpdate("status", this.props.line, new_status_label);
|
||||
}
|
||||
|
||||
onTimeSet(keyword, existing, value){
|
||||
|
|
@ -417,30 +418,30 @@ class Headline extends React.Component {
|
|||
<div>
|
||||
<label> <Icon name="schedule" />
|
||||
<NgIf cond={this.props.scheduled !== null}>
|
||||
<input type="date" value={dateInput(this.props.scheduled)} onChange={(e) => this.onTimeSet('scheduled', true, e.target.value)}/>
|
||||
<input type="date" value={dateInput(this.props.scheduled)} onChange={(e) => this.onTimeSet("scheduled", true, e.target.value)}/>
|
||||
</NgIf>
|
||||
<NgIf cond={this.props.scheduled === null}>
|
||||
<input type="date" onChange={(e) => this.onTimeSet('scheduled', false, e.target.value)}/>
|
||||
<input type="date" onChange={(e) => this.onTimeSet("scheduled", false, e.target.value)}/>
|
||||
</NgIf>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label> <Icon name="deadline" />
|
||||
<NgIf cond={this.props.deadline !== null}>
|
||||
<input type="date" value={dateInput(this.props.deadline)} onChange={(e) => this.onTimeSet('deadline', true, e.target.value)}/>
|
||||
<input type="date" value={dateInput(this.props.deadline)} onChange={(e) => this.onTimeSet("deadline", true, e.target.value)}/>
|
||||
</NgIf>
|
||||
<NgIf cond={this.props.deadline === null}>
|
||||
<input type="date" onChange={(e) => this.onTimeSet('deadline', false, e.target.value)}/>
|
||||
<input type="date" onChange={(e) => this.onTimeSet("deadline", false, e.target.value)}/>
|
||||
</NgIf>
|
||||
</label>
|
||||
</div>
|
||||
</NgIf>
|
||||
<NgIf cond={this.props.tasks.length > 0 && this.state.status === "todo" && this.props.type === 'todos'} className="subtask_container">
|
||||
<NgIf cond={this.props.tasks.length > 0 && this.state.status === "todo" && this.props.type === "todos"} className="subtask_container">
|
||||
{
|
||||
this.props.tasks.map((task, i) => {
|
||||
return (
|
||||
<Subtask key={i} label={task.title} status={task.status}
|
||||
onStatusChange={this.props.onTaskUpdate.bind(this, 'subtask', task.line)} />
|
||||
onStatusChange={this.props.onTaskUpdate.bind(this, "subtask", task.line)} />
|
||||
);
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { MenuBar } from './menubar';
|
||||
import React from "react";
|
||||
import { MenuBar } from "./menubar";
|
||||
import "./pdfviewer.scss";
|
||||
import { Bundle } from "../../components/";
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ const PDFJSViewer = (props) => (
|
|||
|
||||
export const PDFViewer = (props) => {
|
||||
const ViewerComponent = "application/pdf" in navigator.mimeTypes ?
|
||||
<embed src={props.data+"#toolbar=0"} type="application/pdf" style={{height: '100%', width: '100%'}}></embed>
|
||||
<embed src={props.data+"#toolbar=0"} type="application/pdf" style={{height: "100%", width: "100%"}}></embed>
|
||||
: <PDFJSViewer src={props.data} />;
|
||||
return (
|
||||
<div className="component_pdfviewer">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import 'react-pdf/dist/Page/AnnotationLayer.css';
|
||||
import { Document, Page, pdfjs } from 'react-pdf';
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `/assets/vendor/pdfjs/build/pdf.worker.min.js`;
|
||||
import React from "react";
|
||||
import "react-pdf/dist/Page/AnnotationLayer.css";
|
||||
import { Document, Page, pdfjs } from "react-pdf";
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = "/assets/vendor/pdfjs/build/pdf.worker.min.js";
|
||||
|
||||
export class PDFJSViewer extends React.Component {
|
||||
state = {
|
||||
|
|
@ -18,7 +18,7 @@ export class PDFJSViewer extends React.Component {
|
|||
file={this.props.src}
|
||||
onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
|
||||
options={{
|
||||
cMapUrl: '/assets/vendor/pdfjs/cmaps/',
|
||||
cMapUrl: "/assets/vendor/pdfjs/cmaps/",
|
||||
cMapPacked: true,
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React from 'react';
|
||||
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
|
||||
import React from "react";
|
||||
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
|
||||
|
||||
import { Pager } from './pager';
|
||||
import { MenuBar } from './menubar';
|
||||
import { getMimeType } from '../../helpers/';
|
||||
import videojs from 'video.js';
|
||||
import 'videojs-contrib-hls';
|
||||
import { Pager } from "./pager";
|
||||
import { MenuBar } from "./menubar";
|
||||
import { getMimeType } from "../../helpers/";
|
||||
import videojs from "video.js";
|
||||
import "videojs-contrib-hls";
|
||||
|
||||
import 'video.js/dist/video-js.css';
|
||||
import './videoplayer.scss';
|
||||
import "video.js/dist/video-js.css";
|
||||
import "./videoplayer.scss";
|
||||
|
||||
export class VideoPlayer extends React.Component {
|
||||
constructor(props){
|
||||
|
|
@ -53,7 +53,7 @@ export class VideoPlayer extends React.Component {
|
|||
<div className="video_container">
|
||||
<ReactCSSTransitionGroup transitionName="video" transitionAppear={true} transitionLeave={false} transitionEnter={true} transitionEnterTimeout={300} transitionAppearTimeout={300}>
|
||||
<div key={this.props.data} data-vjs-player>
|
||||
<video ref="$video" className="video-js vjs-fill vjs-default-skin vjs-big-play-centered" style={{boxShadow: 'rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px'}}></video>
|
||||
<video ref="$video" className="video-js vjs-fill vjs-default-skin vjs-big-play-centered" style={{boxShadow: "rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px"}}></video>
|
||||
</div>
|
||||
</ReactCSSTransitionGroup>
|
||||
<Pager path={this.props.path} />
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter, Route, IndexRoute, Switch } from 'react-router-dom';
|
||||
import { NotFoundPage, ConnectPage, HomePage, SharePage, LogoutPage, FilesPage, ViewerPage } from './pages/';
|
||||
import { URL_HOME, URL_FILES, URL_VIEWER, URL_LOGIN, URL_LOGOUT } from './helpers/';
|
||||
import { Bundle, ModalPrompt, ModalAlert, ModalConfirm, Notification, Audio, Video, UploadQueue } from './components/';
|
||||
import React from "react";
|
||||
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
||||
import { NotFoundPage, ConnectPage, HomePage, SharePage, LogoutPage, FilesPage, ViewerPage } from "./pages/";
|
||||
import { URL_HOME, URL_FILES, URL_VIEWER, URL_LOGIN, URL_LOGOUT, URL_ADMIN, URL_SHARE } from "./helpers/";
|
||||
import { Bundle, ModalPrompt, ModalAlert, ModalConfirm, Notification, UploadQueue } from "./components/";
|
||||
|
||||
const AdminPage = (props) => (
|
||||
<Bundle loader={import(/* webpackChunkName: "admin" */"./pages/adminpage")} symbol="AdminPage">
|
||||
|
|
@ -13,16 +13,16 @@ const AdminPage = (props) => (
|
|||
export default class AppRouter extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={{height: '100%'}}>
|
||||
<div style={{height: "100%"}}>
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path="/" component={HomePage} />
|
||||
<Route path="/s/:id*" component={SharePage} />
|
||||
<Route path="/login" component={ConnectPage} />
|
||||
<Route path="/files/:path*" component={FilesPage} />
|
||||
<Route path="/view/:path*" component={ViewerPage} />
|
||||
<Route path="/logout" component={LogoutPage} />
|
||||
<Route path="/admin" component={AdminPage} />
|
||||
<Route exact path={URL_HOME} component={HomePage} />
|
||||
<Route path={`${URL_SHARE}/:id*`} component={SharePage} />
|
||||
<Route path={URL_LOGIN} component={ConnectPage} />
|
||||
<Route path={`${URL_FILES}/:path*`} component={FilesPage} />
|
||||
<Route path={`${URL_VIEWER}/:path*`} component={ViewerPage} />
|
||||
<Route path={URL_LOGOUT} component={LogoutPage} />
|
||||
<Route path={URL_ADMIN} component={AdminPage} />
|
||||
<Route component={NotFoundPage} />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
const CACHE_NAME = "v0.3";
|
||||
const DELAY_BEFORE_SENDING_CACHE = 2000;
|
||||
|
||||
/*
|
||||
* Control everything going through the wire, applying different
|
||||
|
|
@ -33,7 +32,7 @@ self.addEventListener("error", function(err){
|
|||
* When a newly installed service worker is coming in, we want to use it
|
||||
* straight away (make it active). By default it would be in a "waiting state"
|
||||
*/
|
||||
self.addEventListener("install", function(event){
|
||||
self.addEventListener("install", function(){
|
||||
caches.open(CACHE_NAME).then(function(cache) {
|
||||
return cache.addAll([
|
||||
"/",
|
||||
|
|
@ -81,7 +80,8 @@ function vacuum(event){
|
|||
}
|
||||
|
||||
function _pathname(request){
|
||||
return request.url.replace(/^http[s]?:\/\/[^\/]*\//, "").split("/")
|
||||
//eslint-disable-next-line no-useless-escape
|
||||
return request.url.replace(/^http[s]?:\/\/[^\/]*\//, "").split("/");
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -118,5 +118,5 @@ function cacheFirstStrategy(event){
|
|||
return response;
|
||||
});
|
||||
}
|
||||
function nil(e){}
|
||||
function nil(){}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue