lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

use eslint to lint project

Browse Source 
drop code quality job
This commit is contained in:
Lukas Heiligenbrunner 2021-03-14 14:51:53 +00:00
parent ba2704b285
commit 1fc67365f0
42 changed files with 1614 additions and 843 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

291
.eslintrc.js Normal file
View File

@ -0,0 +1,291 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
module.exports = {
env: {
es6: true
},
parserOptions: {
sourceType: 'module'
},
extends: [
'plugin:prettier/recommended', // https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
'prettier'
],
plugins: ['eslint-comments', 'react', 'react-hooks', 'jest'],
settings: {
react: {
version: 'detect'
}
},
ignorePatterns: ['node_modules/', '**/*.js'],
overrides: [
{
files: ['*.ts', '*.tsx'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint/eslint-plugin'],
rules: {
'@typescript-eslint/no-unused-vars': ['error', {argsIgnorePattern: '^_'}],
'no-unused-vars': 'off'
}
}
],
// Map from global var to bool specifying if it can be redefined
globals: {
jest: true,
__DEV__: true,
__dirname: false,
__fbBatchedBridgeConfig: false,
AbortController: false,
alert: false,
cancelAnimationFrame: false,
cancelIdleCallback: false,
clearImmediate: true,
clearInterval: false,
clearTimeout: false,
console: false,
document: false,
ErrorUtils: false,
escape: false,
Event: false,
EventTarget: false,
exports: false,
fetch: false,
FileReader: false,
FormData: false,
global: false,
Headers: false,
Intl: false,
Map: true,
module: false,
navigator: false,
process: false,
Promise: true,
requestAnimationFrame: true,
requestIdleCallback: true,
require: false,
Set: true,
setImmediate: true,
setInterval: false,
setTimeout: false,
URL: false,
URLSearchParams: false,
WebSocket: true,
window: false,
XMLHttpRequest: false,
JSX: true,
KeyboardEvent: true,
MouseEvent: true,
Node: true,
HTMLDivElement: true,
HTMLInputElement: true
},
rules: {
// 'multiline-ternary': [1, 'always-multiline'],
// General
'comma-dangle': [1, 'never'], // allow or disallow trailing commas
'no-cond-assign': 1, // disallow assignment in conditional expressions
'no-console': 0, // disallow use of console (off by default in the node environment)
'no-const-assign': 2, // disallow assignment to const-declared variables
'no-constant-condition': 0, // disallow use of constant expressions in conditions
'no-control-regex': 1, // disallow control characters in regular expressions
'no-debugger': 1, // disallow use of debugger
'no-dupe-class-members': 2, // Disallow duplicate name in class members
'no-dupe-keys': 2, // disallow duplicate keys when creating object literals
'no-empty': 0, // disallow empty statements
'no-ex-assign': 1, // disallow assigning to the exception in a catch block
'no-extra-boolean-cast': 1, // disallow double-negation boolean casts in a boolean context
'no-extra-parens': 0, // disallow unnecessary parentheses (off by default)
'no-extra-semi': 1, // disallow unnecessary semicolons
'no-func-assign': 1, // disallow overwriting functions written as function declarations
'no-inner-declarations': 0, // disallow function or variable declarations in nested blocks
'no-invalid-regexp': 1, // disallow invalid regular expression strings in the RegExp constructor
'no-negated-in-lhs': 1, // disallow negation of the left operand of an in expression
'no-obj-calls': 1, // disallow the use of object properties of the global object (Math and JSON) as functions
'no-regex-spaces': 1, // disallow multiple spaces in a regular expression literal
'no-reserved-keys': 0, // disallow reserved words being used as object literal keys (off by default)
'no-sparse-arrays': 1, // disallow sparse arrays
'no-unreachable': 2, // disallow unreachable statements after a return, throw, continue, or break statement
'use-isnan': 1, // disallow comparisons with the value NaN
'valid-jsdoc': 0, // Ensure JSDoc comments are valid (off by default)
'valid-typeof': 1, // Ensure that the results of typeof are compared against a valid string
// Best Practices
// These are rules designed to prevent you from making mistakes. They either prescribe a better way of doing something or help you avoid footguns.
'block-scoped-var': 0, // treat var statements as if they were block scoped (off by default)
complexity: 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
'consistent-return': 0, // require return statements to either always or never specify values
curly: 1, // specify curly brace conventions for all control statements
'default-case': 0, // require default case in switch statements (off by default)
'dot-notation': 1, // encourages use of dot notation whenever possible
eqeqeq: [1, 'allow-null'], // require the use of === and !==
'guard-for-in': 0, // make sure for-in loops have an if statement (off by default)
'no-alert': 1, // disallow the use of alert, confirm, and prompt
'no-caller': 1, // disallow use of arguments.caller or arguments.callee
'no-div-regex': 1, // disallow division operators explicitly at beginning of regular expression (off by default)
'no-else-return': 0, // disallow else after a return in an if (off by default)
'no-eq-null': 0, // disallow comparisons to null without a type-checking operator (off by default)
'no-eval': 2, // disallow use of eval()
'no-extend-native': 1, // disallow adding to native types
'no-extra-bind': 1, // disallow unnecessary function binding
'no-fallthrough': 1, // disallow fallthrough of case statements
'no-floating-decimal': 1, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
'no-implied-eval': 1, // disallow use of eval()-like methods
'no-labels': 1, // disallow use of labeled statements
'no-iterator': 1, // disallow usage of __iterator__ property
'no-lone-blocks': 1, // disallow unnecessary nested blocks
'no-loop-func': 0, // disallow creation of functions within loops
'no-multi-str': 0, // disallow use of multiline strings
'no-native-reassign': 0, // disallow reassignments of native objects
'no-new': 1, // disallow use of new operator when not part of the assignment or comparison
'no-new-func': 2, // disallow use of new operator for Function object
'no-new-wrappers': 1, // disallows creating new instances of String,Number, and Boolean
'no-octal': 1, // disallow use of octal literals
'no-octal-escape': 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
'no-proto': 1, // disallow usage of __proto__ property
'no-redeclare': 0, // disallow declaring the same variable more then once
'no-return-assign': 1, // disallow use of assignment in return statement
'no-script-url': 1, // disallow use of javascript: urls.
'no-self-compare': 1, // disallow comparisons where both sides are exactly the same (off by default)
'no-sequences': 1, // disallow use of comma operator
'no-unused-expressions': 0, // disallow usage of expressions in statement position
'no-useless-escape': 1, // disallow escapes that don't have any effect in literals
'no-void': 1, // disallow use of void operator (off by default)
'no-warning-comments': 0, // disallow usage of configurable warning terms in comments": 1, // e.g. TODO or FIXME (off by default)
'no-with': 1, // disallow use of the with statement
radix: 1, // require use of the second argument for parseInt() (off by default)
'semi-spacing': 1, // require a space after a semi-colon
'vars-on-top': 0, // requires to declare all vars on top of their containing scope (off by default)
'wrap-iife': 0, // require immediate function invocation to be wrapped in parentheses (off by default)
yoda: 1, // require or disallow Yoda conditions
// Variables
// These rules have to do with variable declarations.
'no-catch-shadow': 1, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
'no-delete-var': 1, // disallow deletion of variables
'no-label-var': 1, // disallow labels that share a name with a variable
'no-shadow': 1, // disallow declaration of variables already declared in the outer scope
'no-shadow-restricted-names': 1, // disallow shadowing of names such as arguments
'no-undef': 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
'no-undefined': 0, // disallow use of undefined variable (off by default)
'no-undef-init': 1, // disallow use of undefined when initializing variables
'no-unused-vars': [1, {vars: 'all', args: 'none', ignoreRestSiblings: true}], // disallow declaration of variables that are not used in the code
'no-use-before-define': 0, // disallow use of variables before they are defined
// Node.js
// These rules are specific to JavaScript running on Node.js.
'handle-callback-err': 1, // enforces error handling in callbacks (off by default) (on by default in the node environment)
'no-mixed-requires': 1, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment)
'no-new-require': 1, // disallow use of new operator with the require function (off by default) (on by default in the node environment)
'no-path-concat': 1, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment)
'no-process-exit': 0, // disallow process.exit() (on by default in the node environment)
'no-restricted-modules': 1, // restrict usage of specified node modules (off by default)
'no-sync': 0, // disallow use of synchronous methods (off by default)
// ESLint Comments Plugin
// The following rules are made available via `eslint-plugin-eslint-comments`
'eslint-comments/no-aggregating-enable': 1, // disallows eslint-enable comments for multiple eslint-disable comments
'eslint-comments/no-unlimited-disable': 1, // disallows eslint-disable comments without rule names
'eslint-comments/no-unused-disable': 1, // disallow disables that don't cover any errors
'eslint-comments/no-unused-enable': 1, // // disallow enables that don't enable anything or enable rules that weren't disabled
// Stylistic Issues
// These rules are purely matters of style and are quite subjective.
'key-spacing': 0,
'keyword-spacing': 1, // enforce spacing before and after keywords
'jsx-quotes': [1, 'prefer-single'], // enforces the usage of double quotes for all JSX attribute values which doesn’t contain a double quote
'comma-spacing': 0,
'no-multi-spaces': 0,
'brace-style': 0, // enforce one true brace style (off by default)
camelcase: 1, // require camel case names
'consistent-this': 1, // enforces consistent naming when capturing the current execution context (off by default)
'eol-last': 1, // enforce newline at the end of file, with no multiple empty lines
'func-names': 0, // require function expressions to have a name (off by default)
'func-style': 0, // enforces use of function declarations or expressions (off by default)
'new-cap': 0, // require a capital letter for constructors
'new-parens': 1, // disallow the omission of parentheses when invoking a constructor with no arguments
'no-nested-ternary': 0, // disallow nested ternary expressions (off by default)
'no-array-constructor': 1, // disallow use of the Array constructor
'no-empty-character-class': 1, // disallow the use of empty character classes in regular expressions
'no-lonely-if': 0, // disallow if as the only statement in an else block (off by default)
'no-new-object': 1, // disallow use of the Object constructor
'no-spaced-func': 1, // disallow space between function identifier and application
'no-ternary': 0, // disallow the use of ternary operators (off by default)
'no-trailing-spaces': 1, // disallow trailing whitespace at the end of lines
'no-underscore-dangle': 0, // disallow dangling underscores in identifiers
'no-mixed-spaces-and-tabs': 1, // disallow mixed spaces and tabs for indentation
quotes: [1, 'single', 'avoid-escape'], // specify whether double or single quotes should be used
'quote-props': 0, // require quotes around object literal property names (off by default)
semi: 1, // require or disallow use of semicolons instead of ASI
'sort-vars': 0, // sort variables within the same declaration block (off by default)
'space-in-brackets': 0, // require or disallow spaces inside brackets (off by default)
'space-in-parens': 0, // require or disallow spaces inside parentheses (off by default)
'space-infix-ops': 1, // require spaces around operators
'space-unary-ops': [1, {words: true, nonwords: false}], // require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
'max-nested-callbacks': 0, // specify the maximum depth callbacks can be nested (off by default)
'one-var': 0, // allow just one var statement per function (off by default)
'wrap-regex': 0, // require regex literals to be wrapped in parentheses (off by default)
// Legacy
// The following rules are included for compatibility with JSHint and JSLint. While the names of the rules may not match up with the JSHint/JSLint counterpart, the functionality is the same.
'max-depth': 0, // specify the maximum depth that blocks can be nested (off by default)
'max-len': 0, // specify the maximum length of a line in your program (off by default)
'max-params': 0, // limits the number of parameters that can be used in the function declaration. (off by default)
'max-statements': 0, // specify the maximum number of statement allowed in a function (off by default)
'no-bitwise': 1, // disallow use of bitwise operators (off by default)
'no-plusplus': 0, // disallow use of unary operators, ++ and -- (off by default)
// React Plugin
// The following rules are made available via `eslint-plugin-react`.
'react/display-name': 0,
'react/jsx-boolean-value': 0,
'react/jsx-no-comment-textnodes': 2,
'react/jsx-no-duplicate-props': 2,
'react/jsx-no-undef': 2,
'react/jsx-sort-props': 0,
'react/jsx-uses-react': 1,
'react/jsx-uses-vars': 1,
'react/no-did-mount-set-state': 1,
'react/no-did-update-set-state': 1,
'react/no-multi-comp': 0,
'react/no-string-refs': 1,
'react/no-unknown-property': 0,
'react/prop-types': 0,
'react/react-in-jsx-scope': 1,
'react/self-closing-comp': 1,
'react/wrap-multilines': 0,
// React-Hooks Plugin
// The following rules are made available via `eslint-plugin-react-hooks`
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error',
// Jest Plugin
// The following rules are made available via `eslint-plugin-jest`.
'jest/no-disabled-tests': 1,
'jest/no-focused-tests': 1,
'jest/no-identical-title': 1,
'jest/valid-expect': 1
}
};

21
.gitlab-ci.yml
View File

@ -6,9 +6,6 @@ stages:
- packaging - packaging
- deploy - deploy
include:
- template: Code-Quality.gitlab-ci.yml
variables: variables:
SAST_DISABLE_DIND: "true" SAST_DISABLE_DIND: "true"
@ -68,9 +65,21 @@ Backend_Tests:
reports: reports:
junit: ./apiGo/report.xml junit: ./apiGo/report.xml
code_quality: lint:
tags: stage: test
- dind before_script:
- yarn install --cache-folder .yarn
script:
- yarn run lint
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- .yarn/
- ./node_modules/
artifacts:
reports:
codequality: gl-codequality.json
needs: []
Debian_Server: Debian_Server:
stage: packaging stage: packaging

10
.prettierrc.js Normal file
View File

@ -0,0 +1,10 @@
module.exports = {
bracketSpacing: false,
jsxBracketSameLine: true,
singleQuote: true,
tabWidth: 4,
trailingComma: 'none',
printWidth: 135,
semi: true,
jsxSingleQuote: true
};

18
package.json
View File

@ -2,7 +2,6 @@
"name": "openmediacenter", "name": "openmediacenter",
"version": "0.1.2", "version": "0.1.2",
"private": true, "private": true,
"main": "public/electron.js",
"author": { "author": {
"email": "lukas.heiligenbrunner@gmail.com", "email": "lukas.heiligenbrunner@gmail.com",
"name": "Lukas Heiligenbrunner", "name": "Lukas Heiligenbrunner",
@ -24,8 +23,9 @@
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "CI=false react-scripts build",
"test": "CI=true react-scripts test --reporters=jest-junit --verbose --silent --coverage --reporters=default" "test": "CI=true react-scripts test --reporters=jest-junit --verbose --silent --coverage --reporters=default",
"lint": "eslint --format gitlab src/"
}, },
"jest": { "jest": {
"collectCoverageFrom": [ "collectCoverageFrom": [
@ -78,9 +78,21 @@
"@types/react-dom": "^17.0.1", "@types/react-dom": "^17.0.1",
"@types/react-router": "5.1.12", "@types/react-router": "5.1.12",
"@types/react-router-dom": "^5.1.6", "@types/react-router-dom": "^5.1.6",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
"enzyme": "^3.11.0", "enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5", "enzyme-adapter-react-16": "^1.15.5",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
"eslint-formatter-gitlab": "^2.2.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-jest": "^24.3.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"jest-junit": "^12.0.0", "jest-junit": "^12.0.0",
"prettier": "^2.2.1",
"prettier-config": "^1.0.0",
"react-scripts": "4.0.3" "react-scripts": "4.0.3"
} }
} }

133
src/App.tsx
View File

@ -17,7 +17,7 @@ import Player from './pages/Player/Player';
import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage'; import ActorOverviewPage from './pages/ActorOverviewPage/ActorOverviewPage';
import ActorPage from './pages/ActorPage/ActorPage'; import ActorPage from './pages/ActorPage/ActorPage';
import {SettingsTypes} from './types/ApiTypes'; import {SettingsTypes} from './types/ApiTypes';
import AuthenticationPage from "./pages/AuthenticationPage/AuthenticationPage"; import AuthenticationPage from './pages/AuthenticationPage/AuthenticationPage';
interface state { interface state {
password: boolean | null; // null if uninitialized - true if pwd needed false if not needed password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
@ -39,13 +39,13 @@ class App extends React.Component<{}, state> {
} else { } else {
refreshAPIToken((err) => { refreshAPIToken((err) => {
if (err === 'invalid_client') { if (err === 'invalid_client') {
this.setState({password: true}) this.setState({password: true});
} else if (err === '') { } else if (err === '') {
this.setState({password: false}) this.setState({password: false});
} else { } else {
console.log("unimplemented token error: " + err) console.log('unimplemented token error: ' + err);
} }
}) });
} }
this.state = { this.state = {
@ -56,33 +56,37 @@ class App extends React.Component<{}, state> {
GlobalInfos.onThemeChange(() => { GlobalInfos.onThemeChange(() => {
this.forceUpdate(); this.forceUpdate();
}) });
} }
initialAPICall(): void { initialAPICall(): void {
// this is the first api call so if it fails we know there is no connection to backend // this is the first api call so if it fails we know there is no connection to backend
callApiUnsafe(APINode.Init, {action: 'loadInitialData'}, (result: SettingsTypes.initialApiCallData) => { callApiUnsafe(
// set theme APINode.Init,
GlobalInfos.enableDarkTheme(result.DarkMode); {action: 'loadInitialData'},
(result: SettingsTypes.initialApiCallData) => {
// set theme
GlobalInfos.enableDarkTheme(result.DarkMode);
GlobalInfos.setVideoPath(result.VideoPath); GlobalInfos.setVideoPath(result.VideoPath);
this.setState({ this.setState({
mediacentername: result.MediacenterName, mediacentername: result.MediacenterName,
onapierror: false onapierror: false
}); });
// set tab title to received mediacenter name // set tab title to received mediacenter name
document.title = result.MediacenterName; document.title = result.MediacenterName;
}, error => { },
this.setState({onapierror: true}); () => {
}); this.setState({onapierror: true});
}
);
} }
componentDidMount(): void { componentDidMount(): void {
this.initialAPICall(); this.initialAPICall();
} }
render(): JSX.Element { render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle(); const themeStyle = GlobalInfos.getThemeStyle();
// add the main theme to the page body // add the main theme to the page body
@ -90,33 +94,52 @@ class App extends React.Component<{}, state> {
if (this.state.password === true) { if (this.state.password === true) {
return ( return (
<AuthenticationPage submit={(password): void => { <AuthenticationPage
refreshAPIToken((error) => { submit={(password): void => {
if (error !== '') { refreshAPIToken((error) => {
console.log("wrong password!!!"); if (error !== '') {
} else { console.log('wrong password!!!');
this.setState({password: false}); } else {
} this.setState({password: false});
}, password); }
}}/> }, password);
}}
/>
); );
} else if (this.state.password === false) { } else if (this.state.password === false) {
return ( return (
<Router> <Router>
<div className={style.app}> <div className={style.app}>
<div <div
className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}> className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(
' '
)}>
<div className={style.navbrand}>{this.state.mediacentername}</div> <div className={style.navbrand}>{this.state.mediacentername}</div>
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/'} <NavLink
activeStyle={{opacity: '0.85'}}>Home</NavLink> className={[style.navitem, themeStyle.navitem].join(' ')}
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/random'} to={'/'}
activeStyle={{opacity: '0.85'}}>Random activeStyle={{opacity: '0.85'}}>
Video</NavLink> Home
</NavLink>
<NavLink
className={[style.navitem, themeStyle.navitem].join(' ')}
to={'/random'}
activeStyle={{opacity: '0.85'}}>
Random Video
</NavLink>
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/categories'} <NavLink
activeStyle={{opacity: '0.85'}}>Categories</NavLink> className={[style.navitem, themeStyle.navitem].join(' ')}
<NavLink className={[style.navitem, themeStyle.navitem].join(' ')} to={'/settings'} to={'/categories'}
activeStyle={{opacity: '0.85'}}>Settings</NavLink> activeStyle={{opacity: '0.85'}}>
Categories
</NavLink>
<NavLink
className={[style.navitem, themeStyle.navitem].join(' ')}
to={'/settings'}
activeStyle={{opacity: '0.85'}}>
Settings
</NavLink>
</div> </div>
{this.routing()} {this.routing()}
</div> </div>
@ -124,33 +147,33 @@ class App extends React.Component<{}, state> {
</Router> </Router>
); );
} else { } else {
return (<>still loading...</>); return <>still loading...</>;
} }
} }
routing(): JSX.Element { routing(): JSX.Element {
return ( return (
<Switch> <Switch>
<Route path="/random"> <Route path='/random'>
<RandomPage/> <RandomPage />
</Route> </Route>
<Route path="/categories"> <Route path='/categories'>
<CategoryPage/> <CategoryPage />
</Route> </Route>
<Route path="/settings"> <Route path='/settings'>
<SettingsPage/> <SettingsPage />
</Route> </Route>
<Route exact path="/player/:id"> <Route exact path='/player/:id'>
<Player/> <Player />
</Route> </Route>
<Route exact path="/actors"> <Route exact path='/actors'>
<ActorOverviewPage/> <ActorOverviewPage />
</Route> </Route>
<Route path="/actors/:id"> <Route path='/actors/:id'>
<ActorPage/> <ActorPage />
</Route> </Route>
<Route path="/"> <Route path='/'>
<HomePage/> <HomePage />
</Route> </Route>
</Switch> </Switch>
); );
@ -158,7 +181,7 @@ class App extends React.Component<{}, state> {
ApiError(): JSX.Element { ApiError(): JSX.Element {
// on api error show popup and retry and show again if failing.. // on api error show popup and retry and show again if failing..
return (<NoBackendConnectionPopup onHide={(): void => this.initialAPICall()}/>); return <NoBackendConnectionPopup onHide={(): void => this.initialAPICall()} />;
} }
} }

31
src/elements/ActorTile/ActorTile.tsx
View File

@ -5,13 +5,13 @@ import React from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import {ActorType} from '../../types/VideoTypes'; import {ActorType} from '../../types/VideoTypes';
interface props { interface Props {
actor: ActorType; actor: ActorType;
onClick?: (actor: ActorType) => void onClick?: (actor: ActorType) => void;
} }
class ActorTile extends React.Component<props> { class ActorTile extends React.Component<Props> {
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = {}; this.state = {};
@ -21,12 +21,7 @@ class ActorTile extends React.Component<props> {
if (this.props.onClick) { if (this.props.onClick) {
return this.renderActorTile(this.props.onClick); return this.renderActorTile(this.props.onClick);
} else { } else {
return ( return <Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>{this.renderActorTile(() => {})}</Link>;
<Link to={{pathname: '/actors/' + this.props.actor.ActorId}}>
{this.renderActorTile(() => {
})}
</Link>
);
} }
} }
@ -34,9 +29,19 @@ class ActorTile extends React.Component<props> {
return ( return (
<div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}> <div className={style.actortile} onClick={(): void => customclickhandler(this.props.actor)}>
<div className={style.actortile_thumbnail}> <div className={style.actortile_thumbnail}>
{this.props.actor.Thumbnail === '' ? <FontAwesomeIcon style={{ {
lineHeight: '130px' this.props.actor.Thumbnail === '' ? (
}} icon={faUser} size='5x'/> : 'dfdf' /* todo render picture provided here! */} <FontAwesomeIcon
style={{
lineHeight: '130px'
}}
icon={faUser}
size='5x'
/>
) : (
'dfdf'
) /* todo render picture provided here! */
}
</div> </div>
<div className={style.actortile_name}>{this.props.actor.Name}</div> <div className={style.actortile_name}>{this.props.actor.Name}</div>
</div> </div>

96
src/elements/FilterButton/FilterButton.tsx
View File

@ -1,12 +1,12 @@
import React from "react"; import React from 'react';
import style from "../Popups/AddActorPopup/AddActorPopup.module.css"; import style from '../Popups/AddActorPopup/AddActorPopup.module.css';
import {Button} from "../GPElements/Button"; import {Button} from '../GPElements/Button';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faFilter, faTimes} from "@fortawesome/free-solid-svg-icons"; import {faFilter, faTimes} from '@fortawesome/free-solid-svg-icons';
import {addKeyHandler, removeKeyHandler} from "../../utils/ShortkeyHandler"; import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
interface props { interface Props {
onFilterChange: (filter: string) => void onFilterChange: (filter: string) => void;
} }
interface state { interface state {
@ -14,18 +14,17 @@ interface state {
filter: string; filter: string;
} }
class FilterButton extends React.Component<props, state> { class FilterButton extends React.Component<Props, state> {
// filterfield anchor, needed to focus after filter btn click // filterfield anchor, needed to focus after filter btn click
private filterfield: HTMLInputElement | null | undefined; private filterfield: HTMLInputElement | null | undefined;
constructor(props: Props) {
constructor(props: props) {
super(props); super(props);
this.state = { this.state = {
filtervisible: false, filtervisible: false,
filter: '' filter: ''
} };
this.keypress = this.keypress.bind(this); this.keypress = this.keypress.bind(this);
this.enableFilterField = this.enableFilterField.bind(this); this.enableFilterField = this.enableFilterField.bind(this);
@ -43,34 +42,57 @@ class FilterButton extends React.Component<props, state> {
if (this.state.filtervisible) { if (this.state.filtervisible) {
return ( return (
<> <>
<input className={'form-control mr-sm-2 ' + style.searchinput} <input
type='text' placeholder='Filter' value={this.state.filter} className={'form-control mr-sm-2 ' + style.searchinput}
onChange={(e): void => { type='text'
this.props.onFilterChange(e.target.value); placeholder='Filter'
this.setState({filter: e.target.value}); value={this.state.filter}
}} onChange={(e): void => {
ref={(input): void => { this.props.onFilterChange(e.target.value);
this.filterfield = input; this.setState({filter: e.target.value});
}}/> }}
<Button title={<FontAwesomeIcon style={{ ref={(input): void => {
verticalAlign: 'middle', this.filterfield = input;
lineHeight: '130px' }}
}} icon={faTimes} size='1x'/>} color={{backgroundColor: 'red'}} onClick={(): void => { />
this.setState({filter: '', filtervisible: false}); <Button
}}/> title={
<FontAwesomeIcon
style={{
verticalAlign: 'middle',
lineHeight: '130px'
}}
icon={faTimes}
size='1x'
/>
}
color={{backgroundColor: 'red'}}
onClick={(): void => {
this.setState({filter: '', filtervisible: false});
}}
/>
</> </>
); );
} else { } else {
return (<Button return (
title={<span>Filter <FontAwesomeIcon <Button
style={{ title={
verticalAlign: 'middle', <span>
lineHeight: '130px' Filter{' '}
}} <FontAwesomeIcon
icon={faFilter} style={{
size='1x'/></span>} verticalAlign: 'middle',
color={{backgroundColor: 'cornflowerblue', color: 'white'}} lineHeight: '130px'
onClick={this.enableFilterField}/>) }}
icon={faFilter}
size='1x'
/>
</span>
}
color={{backgroundColor: 'cornflowerblue', color: 'white'}}
onClick={this.enableFilterField}
/>
);
} }
} }

44
src/elements/InfoHeaderItem/InfoHeaderItem.tsx
View File

@ -5,11 +5,11 @@ import {Spinner} from 'react-bootstrap';
import {IconDefinition} from '@fortawesome/fontawesome-common-types'; import {IconDefinition} from '@fortawesome/fontawesome-common-types';
interface props { interface props {
onClick?: () => void onClick?: () => void;
backColor: string backColor: string;
icon: IconDefinition icon: IconDefinition;
text: string | number text: string | number;
subtext: string | number subtext: string | number;
} }
/** /**
@ -18,23 +18,35 @@ interface props {
class InfoHeaderItem extends React.Component<props> { class InfoHeaderItem extends React.Component<props> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<div onClick={(): void => { <div
// call clicklistener if defined onClick={(): void => {
if (this.props.onClick != null) this.props.onClick(); // call clicklistener if defined
}} className={style.infoheaderitem} style={{backgroundColor: this.props.backColor}}> if (this.props.onClick != null) {
this.props.onClick();
}
}}
className={style.infoheaderitem}
style={{backgroundColor: this.props.backColor}}>
<div className={style.icon}> <div className={style.icon}>
<FontAwesomeIcon style={{ <FontAwesomeIcon
verticalAlign: 'middle', style={{
lineHeight: '130px' verticalAlign: 'middle',
}} icon={this.props.icon} size='5x'/> lineHeight: '130px'
}}
icon={this.props.icon}
size='5x'
/>
</div> </div>
{this.props.text !== null && this.props.text !== undefined ? {this.props.text !== null && this.props.text !== undefined ? (
<> <>
<div className={style.maintext}>{this.props.text}</div> <div className={style.maintext}>{this.props.text}</div>
<div className={style.subtext}>{this.props.subtext}</div> <div className={style.subtext}>{this.props.subtext}</div>
</> </>
: <span className={style.loadAnimation}><Spinner animation='border'/></span> ) : (
} <span className={style.loadAnimation}>
<Spinner animation='border' />
</span>
)}
</div> </div>
); );
} }

8
src/elements/PageTitle/PageTitle.tsx
View File

@ -17,10 +17,8 @@ class PageTitle extends React.Component<props> {
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}> <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
<span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span> <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
<span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span> <span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
<> <>{this.props.children}</>
{this.props.children} <Line />
</>
<Line/>
</div> </div>
); );
} }
@ -35,7 +33,7 @@ export class Line extends React.Component {
const themeStyle = GlobalInfos.getThemeStyle(); const themeStyle = GlobalInfos.getThemeStyle();
return ( return (
<> <>
<hr className={themeStyle.hrcolor}/> <hr className={themeStyle.hrcolor} />
</> </>
); );
} }

2
src/elements/Popups/AddActorPopup/AddActorPopup.test.js
View File

@ -40,7 +40,7 @@ describe('<AddActorPopup/>', function () {
it('simulate actortile click', function () { it('simulate actortile click', function () {
const func = jest.fn(); const func = jest.fn();
const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movie_id={1}/>); const wrapper = shallow(<AddActorPopup onHide={() => {func();}} movieId={1}/>);
global.callAPIMock({result: 'success'}); global.callAPIMock({result: 'success'});

88
src/elements/Popups/AddActorPopup/AddActorPopup.tsx
View File

@ -6,11 +6,11 @@ import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
import {APINode, callAPI} from '../../../utils/Api'; import {APINode, callAPI} from '../../../utils/Api';
import {ActorType} from '../../../types/VideoTypes'; import {ActorType} from '../../../types/VideoTypes';
import {GeneralSuccess} from '../../../types/GeneralTypes'; import {GeneralSuccess} from '../../../types/GeneralTypes';
import FilterButton from "../../FilterButton/FilterButton"; import FilterButton from '../../FilterButton/FilterButton';
interface props { interface Props {
onHide: () => void; onHide: () => void;
movie_id: number; movieId: number;
} }
interface state { interface state {
@ -22,11 +22,11 @@ interface state {
/** /**
* Popup for Adding a new Actor to a Video * Popup for Adding a new Actor to a Video
*/ */
class AddActorPopup extends React.Component<props, state> { class AddActorPopup extends React.Component<Props, state> {
// filterfield anchor, needed to focus after filter btn click // filterfield anchor, needed to focus after filter btn click
private filterfield: HTMLInputElement | null | undefined; private filterfield: HTMLInputElement | null | undefined;
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
@ -48,12 +48,19 @@ class AddActorPopup extends React.Component<props, state> {
return ( return (
<> <>
{/* todo render actor tiles here and add search field*/} {/* todo render actor tiles here and add search field*/}
<PopupBase title='Add new Actor to Video' onHide={this.props.onHide} banner={ <PopupBase
<button title='Add new Actor to Video'
className={style.newactorbutton} onHide={this.props.onHide}
onClick={(): void => { banner={
this.setState({contentDefault: false}); <button
}}>Create new Actor</button>} ParentSubmit={this.parentSubmit}> className={style.newactorbutton}
onClick={(): void => {
this.setState({contentDefault: false});
}}>
Create new Actor
</button>
}
ParentSubmit={this.parentSubmit}>
{this.resolvePage()} {this.resolvePage()}
</PopupBase> </PopupBase>
</> </>
@ -65,11 +72,18 @@ class AddActorPopup extends React.Component<props, state> {
* @returns {JSX.Element} * @returns {JSX.Element}
*/ */
resolvePage(): JSX.Element { resolvePage(): JSX.Element {
if (this.state.contentDefault) return (this.getContent()); if (this.state.contentDefault) {
else return (<NewActorPopupContent onHide={(): void => { return this.getContent();
this.loadActors(); } else {
this.setState({contentDefault: true}); return (
}}/>); <NewActorPopupContent
onHide={(): void => {
this.loadActors();
this.setState({contentDefault: true});
}}
/>
);
}
} }
/** /**
@ -81,15 +95,19 @@ class AddActorPopup extends React.Component<props, state> {
return ( return (
<> <>
<div className={style.searchbar}> <div className={style.searchbar}>
<FilterButton onFilterChange={(filter): void => { <FilterButton
this.setState({filter: filter}) onFilterChange={(filter): void => {
}}/> this.setState({filter: filter});
}}
/>
</div> </div>
{this.state.actors.filter(this.filterSearch).map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))} {this.state.actors.filter(this.filterSearch).map((el) => (
<ActorTile actor={el} onClick={this.tileClickHandler} />
))}
</> </>
); );
} else { } else {
return (<div>somekind of loading</div>); return <div>somekind of loading</div>;
} }
} }
@ -98,25 +116,29 @@ class AddActorPopup extends React.Component<props, state> {
*/ */
tileClickHandler(actor: ActorType): void { tileClickHandler(actor: ActorType): void {
// fetch the available actors // fetch the available actors
callAPI<GeneralSuccess>(APINode.Actor, { callAPI<GeneralSuccess>(
action: 'addActorToVideo', APINode.Actor,
ActorId: actor.ActorId, {
MovieId: this.props.movie_id action: 'addActorToVideo',
}, result => { ActorId: actor.ActorId,
if (result.result === 'success') { MovieId: this.props.movieId
// return back to player page },
this.props.onHide(); (result) => {
} else { if (result.result === 'success') {
console.error('an error occured while fetching actors: ' + result); // return back to player page
this.props.onHide();
} else {
console.error('an error occured while fetching actors: ' + result);
}
} }
}); );
} }
/** /**
* load the actors from backend and set state * load the actors from backend and set state
*/ */
loadActors(): void { loadActors(): void {
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => { callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
this.setState({actors: result}); this.setState({actors: result});
}); });
} }

20
src/elements/Popups/AddTagPopup/AddTagPopup.tsx
View File

@ -3,10 +3,10 @@ import Tag from '../../Tag/Tag';
import PopupBase from '../PopupBase'; import PopupBase from '../PopupBase';
import {APINode, callAPI} from '../../../utils/Api'; import {APINode, callAPI} from '../../../utils/Api';
import {TagType} from '../../../types/VideoTypes'; import {TagType} from '../../../types/VideoTypes';
import FilterButton from "../../FilterButton/FilterButton"; import FilterButton from '../../FilterButton/FilterButton';
import styles from './AddTagPopup.module.css' import styles from './AddTagPopup.module.css';
interface props { interface Props {
onHide: () => void; onHide: () => void;
submit: (tagId: number, tagName: string) => void; submit: (tagId: number, tagName: string) => void;
} }
@ -19,8 +19,8 @@ interface state {
/** /**
* component creates overlay to add a new tag to a video * component creates overlay to add a new tag to a video
*/ */
class AddTagPopup extends React.Component<props, state> { class AddTagPopup extends React.Component<Props, state> {
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = {items: [], filter: ''}; this.state = {items: [], filter: ''};
@ -42,13 +42,11 @@ class AddTagPopup extends React.Component<props, state> {
return ( return (
<PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide} ParentSubmit={this.parentSubmit}> <PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide} ParentSubmit={this.parentSubmit}>
<div className={styles.actionbar}> <div className={styles.actionbar}>
<FilterButton onFilterChange={(filter): void => this.setState({filter: filter})}/> <FilterButton onFilterChange={(filter): void => this.setState({filter: filter})} />
</div> </div>
{this.state.items ? {this.state.items
this.state.items.filter(this.tagFilter).map((i) => ( ? this.state.items.filter(this.tagFilter).map((i) => <Tag tagInfo={i} onclick={(): void => this.onItemClick(i)} />)
<Tag tagInfo={i} : null}
onclick={(): void => this.onItemClick(i)}/>
)) : null}
</PopupBase> </PopupBase>
); );
} }

21
src/elements/Popups/NewActorPopup/NewActorPopup.tsx
View File

@ -15,7 +15,7 @@ class NewActorPopup extends React.Component<NewActorPopupProps> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'> <PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
<NewActorPopupContent onHide={this.props.onHide}/> <NewActorPopupContent onHide={this.props.onHide} />
</PopupBase> </PopupBase>
); );
} }
@ -28,10 +28,17 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
return ( return (
<> <>
<div> <div>
<input type='text' placeholder='Actor Name' onChange={(v): void => { <input
this.value = v.target.value; type='text'
}}/></div> placeholder='Actor Name'
<button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button> onChange={(v): void => {
this.value = v.target.value;
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>
Save
</button>
</> </>
); );
} }
@ -41,7 +48,9 @@ export class NewActorPopupContent extends React.Component<NewActorPopupProps> {
*/ */
storeselection(): void { storeselection(): void {
// check if user typed in name // check if user typed in name
if (this.value === '' || this.value === undefined) return; if (this.value === '' || this.value === undefined) {
return;
}
callAPI(APINode.Actor, {action: 'createActor', actorname: this.value}, (result: GeneralSuccess) => { callAPI(APINode.Actor, {action: 'createActor', actorname: this.value}, (result: GeneralSuccess) => {
if (result.result !== 'success') { if (result.result !== 'success') {

25
src/elements/Popups/NewTagPopup/NewTagPopup.tsx
View File

@ -5,7 +5,7 @@ import {APINode, callAPI} from '../../../utils/Api';
import {GeneralSuccess} from '../../../types/GeneralTypes'; import {GeneralSuccess} from '../../../types/GeneralTypes';
interface props { interface props {
onHide: () => void onHide: () => void;
} }
/** /**
@ -16,11 +16,24 @@ class NewTagPopup extends React.Component<props> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px' ParentSubmit={(): void => this.storeselection()}> <PopupBase
<div><input type='text' placeholder='Tagname' onChange={(v): void => { title='Add new Tag'
this.value = v.target.value; onHide={this.props.onHide}
}}/></div> height='200px'
<button className={style.savebtn} onClick={(): void => this.storeselection()}>Save</button> width='400px'
ParentSubmit={(): void => this.storeselection()}>
<div>
<input
type='text'
placeholder='Tagname'
onChange={(v): void => {
this.value = v.target.value;
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => this.storeselection()}>
Save
</button>
</PopupBase> </PopupBase>
); );
} }

17
src/elements/Popups/NoBackendConnectionPopup/NoBackendConnectionPopup.tsx
View File

@ -4,17 +4,24 @@ import style from '../NewActorPopup/NewActorPopup.module.css';
import {setCustomBackendDomain} from '../../../utils/Api'; import {setCustomBackendDomain} from '../../../utils/Api';
interface NBCProps { interface NBCProps {
onHide: (_: void) => void onHide: (_: void) => void;
} }
export function NoBackendConnectionPopup(props: NBCProps): JSX.Element { export function NoBackendConnectionPopup(props: NBCProps): JSX.Element {
return ( return (
<PopupBase title='No connection to backend API!' onHide={props.onHide} height='200px' width='600px'> <PopupBase title='No connection to backend API!' onHide={props.onHide} height='200px' width='600px'>
<div> <div>
<input type='text' placeholder='http://192.168.0.2' onChange={(v): void => { <input
setCustomBackendDomain(v.target.value); type='text'
}}/></div> placeholder='http://192.168.0.2'
<button className={style.savebtn} onClick={(): void => props.onHide()}>Refresh</button> onChange={(v): void => {
setCustomBackendDomain(v.target.value);
}}
/>
</div>
<button className={style.savebtn} onClick={(): void => props.onHide()}>
Refresh
</button>
</PopupBase> </PopupBase>
); );
} }

44
src/elements/Popups/PopupBase.tsx
View File

@ -4,7 +4,7 @@ import {Line} from '../PageTitle/PageTitle';
import React, {RefObject} from 'react'; import React, {RefObject} from 'react';
import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler'; import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
interface props { interface Props {
width?: string; width?: string;
height?: string; height?: string;
banner?: JSX.Element; banner?: JSX.Element;
@ -16,11 +16,11 @@ interface props {
/** /**
* wrapper class for generic types of popups * wrapper class for generic types of popups
*/ */
class PopupBase extends React.Component<props> { class PopupBase extends React.Component<Props> {
private wrapperRef: RefObject<HTMLDivElement>; private wrapperRef: RefObject<HTMLDivElement>;
private framedimensions: { minHeight: string | undefined; width: string | undefined; height: string | undefined }; private framedimensions: {minHeight: string | undefined; width: string | undefined; height: string | undefined};
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = {items: []}; this.state = {items: []};
@ -32,9 +32,9 @@ class PopupBase extends React.Component<props> {
// parse style props // parse style props
this.framedimensions = { this.framedimensions = {
width: (this.props.width ? this.props.width : undefined), width: this.props.width ? this.props.width : undefined,
height: (this.props.height ? this.props.height : undefined), height: this.props.height ? this.props.height : undefined,
minHeight: (this.props.height ? this.props.height : undefined) minHeight: this.props.height ? this.props.height : undefined
}; };
} }
@ -63,10 +63,8 @@ class PopupBase extends React.Component<props> {
<div className={style.banner}>{this.props.banner}</div> <div className={style.banner}>{this.props.banner}</div>
</div> </div>
<Line/> <Line />
<div className={style.content}> <div className={style.content}>{this.props.children}</div>
{this.props.children}
</div>
</div> </div>
); );
} }
@ -90,7 +88,9 @@ class PopupBase extends React.Component<props> {
this.props.onHide(); this.props.onHide();
} else if (event.key === 'Enter') { } else if (event.key === 'Enter') {
// call a parentsubmit if defined // call a parentsubmit if defined
if (this.props.ParentSubmit) this.props.ParentSubmit(); if (this.props.ParentSubmit) {
this.props.ParentSubmit();
}
} }
} }
@ -98,15 +98,19 @@ class PopupBase extends React.Component<props> {
* make the element drag and droppable * make the element drag and droppable
*/ */
dragElement(): void { dragElement(): void {
let xOld = 0, yOld = 0; let xOld = 0,
yOld = 0;
const elmnt = this.wrapperRef.current; const elmnt = this.wrapperRef.current;
if (elmnt === null) return; if (elmnt === null) {
if (elmnt.firstChild === null) return; return;
}
if (elmnt.firstChild === null) {
return;
}
(elmnt.firstChild as HTMLDivElement).onmousedown = dragMouseDown; (elmnt.firstChild as HTMLDivElement).onmousedown = dragMouseDown;
function dragMouseDown(e: MouseEvent): void { function dragMouseDown(e: MouseEvent): void {
e.preventDefault(); e.preventDefault();
// get the mouse cursor position at startup: // get the mouse cursor position at startup:
@ -125,9 +129,11 @@ class PopupBase extends React.Component<props> {
xOld = e.clientX; xOld = e.clientX;
yOld = e.clientY; yOld = e.clientY;
// set the element's new position: // set the element's new position:
if (elmnt === null) return; if (elmnt === null) {
elmnt.style.top = (elmnt.offsetTop - dy) + 'px'; return;
elmnt.style.left = (elmnt.offsetLeft - dx) + 'px'; }
elmnt.style.top = elmnt.offsetTop - dy + 'px';
elmnt.style.left = elmnt.offsetLeft - dx + 'px';
} }
function closeDragElement(): void { function closeDragElement(): void {

9
src/elements/Popups/SubmitPopup/SubmitPopup.tsx
View File

@ -2,17 +2,16 @@ import React from 'react';
import PopupBase from '../PopupBase'; import PopupBase from '../PopupBase';
import {Button} from '../../GPElements/Button'; import {Button} from '../../GPElements/Button';
interface props { interface Props {
onHide: (_: void) => void; onHide: (_: void) => void;
submit: (_: void) => void; submit: (_: void) => void;
} }
export default function SubmitPopup(props: props): JSX.Element { export default function SubmitPopup(props: Props): JSX.Element {
return ( return (
<PopupBase title='Are you sure?' onHide={props.onHide} height='160px' width='300px'> <PopupBase title='Are you sure?' onHide={props.onHide} height='160px' width='300px'>
<Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()}/> <Button title='Submit' color={{backgroundColor: 'green'}} onClick={(): void => props.submit()} />
<Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()}/> <Button title='Cancel' color={{backgroundColor: 'red'}} onClick={(): void => props.onHide()} />
</PopupBase> </PopupBase>
); );
} }

33
src/elements/Preview/Preview.tsx
View File

@ -7,7 +7,7 @@ import {APINode, callAPIPlain} from '../../utils/Api';
interface PreviewProps { interface PreviewProps {
name: string; name: string;
movie_id: number; movieId: number;
} }
interface PreviewState { interface PreviewState {
@ -28,7 +28,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
} }
componentDidMount(): void { componentDidMount(): void {
callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movie_id}, (result) => { callAPIPlain(APINode.Video, {action: 'readThumbnail', movieid: this.props.movieId}, (result) => {
this.setState({ this.setState({
previewpicture: result previewpicture: result
}); });
@ -38,23 +38,21 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
render(): JSX.Element { render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle(); const themeStyle = GlobalInfos.getThemeStyle();
return ( return (
<Link to={'/player/' + this.props.movie_id}> <Link to={'/player/' + this.props.movieId}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}> <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div> <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
<div className={style.previewpic}> <div className={style.previewpic}>
{this.state.previewpicture !== null ? {this.state.previewpicture !== null ? (
<img className={style.previewimage} <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />
src={this.state.previewpicture} ) : (
alt='Pic loading.'/> : <span className={style.loadAnimation}>
<span className={style.loadAnimation}><Spinner animation='border'/></span>} <Spinner animation='border' />
</span>
</div> )}
<div className={style.previewbottom}>
</div> </div>
<div className={style.previewbottom} />
</div> </div>
</Link> </Link>
); );
} }
} }
@ -62,15 +60,12 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
/** /**
* Component for a Tag-name tile (used in category page) * Component for a Tag-name tile (used in category page)
*/ */
export class TagPreview extends React.Component<{ name: string }> { export class TagPreview extends React.Component<{name: string}> {
render(): JSX.Element { render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle(); const themeStyle = GlobalInfos.getThemeStyle();
return ( return (
<div <div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}> <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
{this.props.name}
</div>
</div> </div>
); );
} }

6
src/elements/Preview/Previw.test.js
View File

@ -5,7 +5,7 @@ import Preview, {TagPreview} from './Preview';
describe('<Preview/>', function () { describe('<Preview/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<Preview movie_id={1}/>); const wrapper = shallow(<Preview movieId={1}/>);
wrapper.unmount(); wrapper.unmount();
}); });
@ -17,7 +17,7 @@ describe('<Preview/>', function () {
}); });
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise); global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
const wrapper = shallow(<Preview name='test' movie_id={1}/>); const wrapper = shallow(<Preview name='test' movieId={1}/>);
// now called 1 times // now called 1 times
expect(global.fetch).toHaveBeenCalledTimes(1); expect(global.fetch).toHaveBeenCalledTimes(1);
@ -35,7 +35,7 @@ describe('<Preview/>', function () {
}); });
it('spinner loads correctly', function () { it('spinner loads correctly', function () {
const wrapper = shallow(<Preview movie_id={1}/>); const wrapper = shallow(<Preview movieId={1}/>);
// expect load animation to be visible // expect load animation to be visible
expect(wrapper.find('.loadAnimation')).toHaveLength(1); expect(wrapper.find('.loadAnimation')).toHaveLength(1);

22
src/elements/SideBar/SideBar.tsx
View File

@ -13,11 +13,16 @@ interface SideBarProps {
class SideBar extends React.Component<SideBarProps> { class SideBar extends React.Component<SideBarProps> {
render(): JSX.Element { render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle(); const themeStyle = GlobalInfos.getThemeStyle();
const classnn = style.sideinfogeometry + ' ' + (this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : ''); const classnn =
style.sideinfogeometry +
' ' +
(this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : '');
return (<div className={classnn} style={{width: this.props.width}}> return (
{this.props.children} <div className={classnn} style={{width: this.props.width}}>
</div>); {this.props.children}
</div>
);
} }
} }
@ -27,9 +32,7 @@ class SideBar extends React.Component<SideBarProps> {
export class SideBarTitle extends React.Component { export class SideBarTitle extends React.Component {
render(): JSX.Element { render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle(); const themeStyle = GlobalInfos.getThemeStyle();
return ( return <div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>;
<div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>
);
} }
} }
@ -40,8 +43,9 @@ export class SideBarItem extends React.Component {
render(): JSX.Element { render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle(); const themeStyle = GlobalInfos.getThemeStyle();
return ( return (
<div <div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>
className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div> {this.props.children}
</div>
); );
} }
} }

15
src/elements/Tag/Tag.tsx
View File

@ -5,8 +5,8 @@ import {Link} from 'react-router-dom';
import {TagType} from '../../types/VideoTypes'; import {TagType} from '../../types/VideoTypes';
interface props { interface props {
onclick?: (_: string) => void onclick?: (_: string) => void;
tagInfo: TagType tagInfo: TagType;
} }
/** /**
@ -17,18 +17,15 @@ class Tag extends React.Component<props> {
if (this.props.onclick) { if (this.props.onclick) {
return this.renderButton(); return this.renderButton();
} else { } else {
return ( return <Link to={'/categories/' + this.props.tagInfo.TagId}>{this.renderButton()}</Link>;
<Link to={'/categories/' + this.props.tagInfo.TagId}>
{this.renderButton()}
</Link>
);
} }
} }
renderButton(): JSX.Element { renderButton(): JSX.Element {
return ( return (
<button className={styles.tagbtn} onClick={(): void => this.TagClick()} <button className={styles.tagbtn} onClick={(): void => this.TagClick()} data-testid='Test-Tag'>
data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button> {this.props.tagInfo.TagName}
</button>
); );
} }

24
src/elements/VideoContainer/VideoContainer.tsx
View File

@ -3,8 +3,8 @@ import Preview from '../Preview/Preview';
import style from './VideoContainer.module.css'; import style from './VideoContainer.module.css';
import {VideoTypes} from '../../types/ApiTypes'; import {VideoTypes} from '../../types/ApiTypes';
interface props { interface Props {
data: VideoTypes.VideoUnloadedType[] data: VideoTypes.VideoUnloadedType[];
} }
interface state { interface state {
@ -16,11 +16,11 @@ interface state {
* A videocontainer storing lots of Preview elements * A videocontainer storing lots of Preview elements
* includes scroll handling and loading of preview infos * includes scroll handling and loading of preview infos
*/ */
class VideoContainer extends React.Component<props, state> { class VideoContainer extends React.Component<Props, state> {
// stores current index of loaded elements // stores current index of loaded elements
loadindex: number = 0; loadindex: number = 0;
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
@ -38,15 +38,11 @@ class VideoContainer extends React.Component<props, state> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<div className={style.maincontent}> <div className={style.maincontent}>
{this.state.loadeditems.map(elem => ( {this.state.loadeditems.map((elem) => (
<Preview <Preview key={elem.MovieId} name={elem.MovieName} movieId={elem.MovieId} />
key={elem.MovieId}
name={elem.MovieName}
movie_id={elem.MovieId}/>
))} ))}
{/*todo css for no items to show*/} {/*todo css for no items to show*/}
{this.state.loadeditems.length === 0 ? {this.state.loadeditems.length === 0 ? 'no items to show!' : null}
'no items to show!' : null}
{this.props.children} {this.props.children}
</div> </div>
); );
@ -73,13 +69,9 @@ class VideoContainer extends React.Component<props, state> {
} }
this.setState({ this.setState({
loadeditems: [ loadeditems: [...this.state.loadeditems, ...ret]
...this.state.loadeditems,
...ret
]
}); });
this.loadindex += nr; this.loadindex += nr;
} }

4
src/index.tsx
View File

@ -3,11 +3,11 @@ import ReactDOM from 'react-dom';
import App from './App'; import App from './App';
// don't allow console logs within production env // don't allow console logs within production env
global.console.log = process.env.NODE_ENV !== 'development' ? (s: string | number | boolean): void => {} : global.console.log; global.console.log = process.env.NODE_ENV !== 'development' ? (_: string | number | boolean): void => {} : global.console.log;
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App/> <App />
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
); );

32
src/pages/ActorOverviewPage/ActorOverviewPage.tsx
View File

@ -8,16 +8,15 @@ import style from './ActorOverviewPage.module.css';
import {Button} from '../../elements/GPElements/Button'; import {Button} from '../../elements/GPElements/Button';
import NewActorPopup from '../../elements/Popups/NewActorPopup/NewActorPopup'; import NewActorPopup from '../../elements/Popups/NewActorPopup/NewActorPopup';
interface props { interface Props {}
}
interface state { interface state {
actors: ActorType[]; actors: ActorType[];
NActorPopupVisible: boolean NActorPopupVisible: boolean;
} }
class ActorOverviewPage extends React.Component<props, state> { class ActorOverviewPage extends React.Component<Props, state> {
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
@ -33,24 +32,29 @@ class ActorOverviewPage extends React.Component<props, state> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<> <>
<PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'}/> <PageTitle title='Actors' subtitle={this.state.actors.length + ' Actors'} />
<SideBar> <SideBar>
<Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})}/> <Button title='Add Actor' onClick={(): void => this.setState({NActorPopupVisible: true})} />
</SideBar> </SideBar>
<div className={style.container}> <div className={style.container}>
{this.state.actors.map((el) => (<ActorTile key={el.ActorId} actor={el}/>))} {this.state.actors.map((el) => (
<ActorTile key={el.ActorId} actor={el} />
))}
</div> </div>
{this.state.NActorPopupVisible ? {this.state.NActorPopupVisible ? (
<NewActorPopup onHide={(): void => { <NewActorPopup
this.setState({NActorPopupVisible: false}); onHide={(): void => {
this.fetchAvailableActors(); // refetch actors this.setState({NActorPopupVisible: false});
}}/> : null} this.fetchAvailableActors(); // refetch actors
}}
/>
) : null}
</> </>
); );
} }
fetchAvailableActors(): void { fetchAvailableActors(): void {
callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, result => { callAPI<ActorType[]>(APINode.Actor, {action: 'getAllActors'}, (result) => {
this.setState({actors: result}); this.setState({actors: result});
}); });
} }

43
src/pages/ActorPage/ActorPage.tsx
View File

@ -13,22 +13,20 @@ import {Button} from '../../elements/GPElements/Button';
import {ActorTypes, VideoTypes} from '../../types/ApiTypes'; import {ActorTypes, VideoTypes} from '../../types/ApiTypes';
interface state { interface state {
data: VideoTypes.VideoUnloadedType[], data: VideoTypes.VideoUnloadedType[];
actor: ActorType actor: ActorType;
} }
/** /**
* empty default props with id in url * empty default props with id in url
*/ */
interface props extends RouteComponentProps<{ id: string }> { interface Props extends RouteComponentProps<{id: string}> {}
}
/** /**
* info page about a specific actor and a list of all its videos * info page about a specific actor and a list of all its videos
*/ */
export class ActorPage extends React.Component<props, state> { export class ActorPage extends React.Component<Props, state> {
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = {data: [], actor: {ActorId: 0, Name: '', Thumbnail: ''}}; this.state = {data: [], actor: {ActorId: 0, Name: '', Thumbnail: ''}};
@ -40,20 +38,17 @@ export class ActorPage extends React.Component<props, state> {
<PageTitle title={this.state.actor.Name} subtitle={this.state.data ? this.state.data.length + ' videos' : null}> <PageTitle title={this.state.actor.Name} subtitle={this.state.data ? this.state.data.length + ' videos' : null}>
<span className={style.overviewbutton}> <span className={style.overviewbutton}>
<Link to='/actors'> <Link to='/actors'>
<Button onClick={(): void => {}} title='Go to Actor overview'/> <Button onClick={(): void => {}} title='Go to Actor overview' />
</Link> </Link>
</span> </span>
</PageTitle> </PageTitle>
<SideBar> <SideBar>
<div className={style.pic}> <div className={style.pic}>
<FontAwesomeIcon style={{color: 'white'}} icon={faUser} size='10x'/> <FontAwesomeIcon style={{color: 'white'}} icon={faUser} size='10x' />
</div> </div>
<SideBarTitle>Attention: This is an early preview!</SideBarTitle> <SideBarTitle>Attention: This is an early preview!</SideBarTitle>
</SideBar> </SideBar>
{this.state.data.length !== 0 ? {this.state.data.length !== 0 ? <VideoContainer data={this.state.data} /> : <div>No Data found!</div>}
<VideoContainer
data={this.state.data}/> :
<div>No Data found!</div>}
</> </>
); );
} }
@ -66,15 +61,19 @@ export class ActorPage extends React.Component<props, state> {
* request more actor info from backend * request more actor info from backend
*/ */
getActorInfo(): void { getActorInfo(): void {
callAPI(APINode.Actor, { callAPI(
action: 'getActorInfo', APINode.Actor,
ActorId: parseInt(this.props.match.params.id) {
}, (result: ActorTypes.videofetchresult) => { action: 'getActorInfo',
this.setState({ ActorId: parseInt(this.props.match.params.id, 10)
data: result.Videos ? result.Videos : [], },
actor: result.Info (result: ActorTypes.videofetchresult) => {
}); this.setState({
}); data: result.Videos ? result.Videos : [],
actor: result.Info
});
}
);
} }
} }

39
src/pages/AuthenticationPage/AuthenticationPage.tsx
View File

@ -1,22 +1,22 @@
import React from "react"; import React from 'react';
import {Button} from "../../elements/GPElements/Button"; import {Button} from '../../elements/GPElements/Button';
import style from './AuthenticationPage.module.css' import style from './AuthenticationPage.module.css';
interface state { interface state {
pwdText: string pwdText: string;
} }
interface props { interface Props {
submit: (password: string) => void submit: (password: string) => void;
} }
class AuthenticationPage extends React.Component<props, state> { class AuthenticationPage extends React.Component<Props, state> {
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
pwdText: '' pwdText: ''
} };
} }
render(): JSX.Element { render(): JSX.Element {
@ -26,16 +26,21 @@ class AuthenticationPage extends React.Component<props, state> {
<div className={style.main}> <div className={style.main}>
<div className={style.loginText}>Login</div> <div className={style.loginText}>Login</div>
<div> <div>
<input className={style.input} <input
placeholder='Password' className={style.input}
type='password' placeholder='Password'
onChange={(ch): void => this.setState({pwdText: ch.target.value})} type='password'
value={this.state.pwdText}/> onChange={(ch): void => this.setState({pwdText: ch.target.value})}
value={this.state.pwdText}
/>
</div> </div>
<div> <div>
<Button title='Submit' onClick={(): void => { <Button
this.props.submit(this.state.pwdText); title='Submit'
}}/> onClick={(): void => {
this.props.submit(this.state.pwdText);
}}
/>
</div> </div>
</div> </div>
</> </>

4
src/pages/CategoryPage/CategoryPage.tsx
View File

@ -12,10 +12,10 @@ class CategoryPage extends React.Component {
return ( return (
<Switch> <Switch>
<Route path='/categories/:id'> <Route path='/categories/:id'>
<CategoryViewWR/> <CategoryViewWR />
</Route> </Route>
<Route path='/categories'> <Route path='/categories'>
<TagView/> <TagView />
</Route> </Route>
</Switch> </Switch>
); );

94
src/pages/CategoryPage/CategoryView.tsx
View File

@ -11,7 +11,7 @@ import {DefaultTags, GeneralSuccess} from '../../types/GeneralTypes';
import {Button} from '../../elements/GPElements/Button'; import {Button} from '../../elements/GPElements/Button';
import SubmitPopup from '../../elements/Popups/SubmitPopup/SubmitPopup'; import SubmitPopup from '../../elements/Popups/SubmitPopup/SubmitPopup';
interface CategoryViewProps extends RouteComponentProps<{ id: string }> {} interface CategoryViewProps extends RouteComponentProps<{id: string}> {}
interface CategoryViewState { interface CategoryViewState {
loaded: boolean; loaded: boolean;
@ -34,42 +34,51 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
} }
componentDidMount(): void { componentDidMount(): void {
this.fetchVideoData(parseInt(this.props.match.params.id)); this.fetchVideoData(parseInt(this.props.match.params.id, 10));
} }
componentDidUpdate(prevProps: Readonly<CategoryViewProps>, prevState: Readonly<CategoryViewState>): void { componentDidUpdate(prevProps: Readonly<CategoryViewProps>): void {
// trigger video refresh if id changed // trigger video refresh if id changed
if (prevProps.match.params.id !== this.props.match.params.id) { if (prevProps.match.params.id !== this.props.match.params.id) {
this.setState({loaded: false}); this.reloadVideoData();
this.fetchVideoData(parseInt(this.props.match.params.id));
} }
} }
reloadVideoData(): void {
this.setState({loaded: false});
this.fetchVideoData(parseInt(this.props.match.params.id, 10));
}
render(): JSX.Element { render(): JSX.Element {
return ( return (
<> <>
<PageTitle <PageTitle title='Categories' subtitle={this.videodata.length + ' Videos'} />
title='Categories'
subtitle={this.videodata.length + ' Videos'}/>
<SideBar> <SideBar>
<SideBarTitle>Default Tags:</SideBarTitle> <SideBarTitle>Default Tags:</SideBarTitle>
<Tag tagInfo={DefaultTags.all}/> <Tag tagInfo={DefaultTags.all} />
<Tag tagInfo={DefaultTags.fullhd}/> <Tag tagInfo={DefaultTags.fullhd} />
<Tag tagInfo={DefaultTags.hd}/> <Tag tagInfo={DefaultTags.hd} />
<Tag tagInfo={DefaultTags.lowq}/> <Tag tagInfo={DefaultTags.lowq} />
<Line/> <Line />
<Button title='Delete Tag' onClick={(): void => {this.deleteTag(false);}} color={{backgroundColor: 'red'}}/> <Button
</SideBar> title='Delete Tag'
{this.state.loaded ?
<VideoContainer
data={this.videodata}/> : null}
<button data-testid='backbtn' className='btn btn-success'
onClick={(): void => { onClick={(): void => {
this.props.history.push('/categories'); this.deleteTag(false);
}}>Back to Categories }}
color={{backgroundColor: 'red'}}
/>
</SideBar>
{this.state.loaded ? <VideoContainer data={this.videodata} /> : null}
<button
data-testid='backbtn'
className='btn btn-success'
onClick={(): void => {
this.props.history.push('/categories');
}}>
Back to Categories
</button> </button>
{this.handlePopups()} {this.handlePopups()}
</> </>
@ -78,9 +87,14 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
private handlePopups(): JSX.Element { private handlePopups(): JSX.Element {
if (this.state.submitForceDelete) { if (this.state.submitForceDelete) {
return (<SubmitPopup return (
onHide={(): void => this.setState({submitForceDelete: false})} <SubmitPopup
submit={(): void => {this.deleteTag(true);}}/>); onHide={(): void => this.setState({submitForceDelete: false})}
submit={(): void => {
this.deleteTag(true);
}}
/>
);
} else { } else {
return <></>; return <></>;
} }
@ -91,7 +105,7 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
* @param id tagid * @param id tagid
*/ */
private fetchVideoData(id: number): void { private fetchVideoData(id: number): void {
callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', tag: id}, result => { callAPI<VideoTypes.VideoUnloadedType[]>(APINode.Video, {action: 'getMovies', tag: id}, (result) => {
this.videodata = result; this.videodata = result;
this.setState({loaded: true}); this.setState({loaded: true});
}); });
@ -101,19 +115,23 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
* delete the current tag * delete the current tag
*/ */
private deleteTag(force: boolean): void { private deleteTag(force: boolean): void {
callAPI<GeneralSuccess>(APINode.Tags, { callAPI<GeneralSuccess>(
action: 'deleteTag', APINode.Tags,
TagId: parseInt(this.props.match.params.id), {
Force: force action: 'deleteTag',
}, result => { TagId: parseInt(this.props.match.params.id, 10),
console.log(result.result); Force: force
if (result.result === 'success') { },
this.props.history.push('/categories'); (result) => {
} else if (result.result === 'not empty tag') { console.log(result.result);
// show submisison tag to ask if really delete if (result.result === 'success') {
this.setState({submitForceDelete: true}); this.props.history.push('/categories');
} else if (result.result === 'not empty tag') {
// show submisison tag to ask if really delete
this.setState({submitForceDelete: true});
}
} }
}); );
} }
} }

57
src/pages/CategoryPage/TagView.tsx
View File

@ -15,10 +15,10 @@ interface TagViewState {
popupvisible: boolean; popupvisible: boolean;
} }
interface props {} interface Props {}
class TagView extends React.Component<props, TagViewState> { class TagView extends React.Component<Props, TagViewState> {
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
@ -34,30 +34,33 @@ class TagView extends React.Component<props, TagViewState> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<> <>
<PageTitle <PageTitle title='Categories' subtitle={this.state.loadedtags.length + ' different Tags'} />
title='Categories'
subtitle={this.state.loadedtags.length + ' different Tags'}/>
<SideBar> <SideBar>
<SideBarTitle>Default Tags:</SideBarTitle> <SideBarTitle>Default Tags:</SideBarTitle>
<Tag tagInfo={DefaultTags.all}/> <Tag tagInfo={DefaultTags.all} />
<Tag tagInfo={DefaultTags.fullhd}/> <Tag tagInfo={DefaultTags.fullhd} />
<Tag tagInfo={DefaultTags.hd}/> <Tag tagInfo={DefaultTags.hd} />
<Tag tagInfo={DefaultTags.lowq}/> <Tag tagInfo={DefaultTags.lowq} />
<Line/> <Line />
<button data-testid='btnaddtag' className='btn btn-success' onClick={(): void => { <button
this.setState({popupvisible: true}); data-testid='btnaddtag'
}}>Add a new Tag! className='btn btn-success'
onClick={(): void => {
this.setState({popupvisible: true});
}}>
Add a new Tag!
</button> </button>
</SideBar> </SideBar>
<div className={videocontainerstyle.maincontent}> <div className={videocontainerstyle.maincontent}>
{this.state.loadedtags ? {this.state.loadedtags
this.state.loadedtags.map((m) => ( ? this.state.loadedtags.map((m) => (
<Link to={'/categories/' + m.TagId} key={m.TagId}> <Link to={'/categories/' + m.TagId} key={m.TagId}>
<TagPreview name={m.TagName}/></Link> <TagPreview name={m.TagName} />
)) : </Link>
'loading'} ))
: 'loading'}
</div> </div>
{this.handlePopups()} {this.handlePopups()}
</> </>
@ -68,7 +71,7 @@ class TagView extends React.Component<props, TagViewState> {
* load all available tags from db. * load all available tags from db.
*/ */
loadTags(): void { loadTags(): void {
callAPI<TagType[]>(APINode.Tags, {action: 'getAllTags'}, result => { callAPI<TagType[]>(APINode.Tags, {action: 'getAllTags'}, (result) => {
this.setState({loadedtags: result}); this.setState({loadedtags: result});
}); });
} }
@ -76,13 +79,15 @@ class TagView extends React.Component<props, TagViewState> {
private handlePopups(): JSX.Element { private handlePopups(): JSX.Element {
if (this.state.popupvisible) { if (this.state.popupvisible) {
return ( return (
<NewTagPopup onHide={(): void => { <NewTagPopup
this.setState({popupvisible: false}); onHide={(): void => {
this.loadTags(); this.setState({popupvisible: false});
}}/> this.loadTags();
}}
/>
); );
} else { } else {
return (<></>); return <></>;
} }
} }
} }

133
src/pages/HomePage/HomePage.tsx
View File

@ -10,25 +10,25 @@ import {Route, Switch, withRouter} from 'react-router-dom';
import {RouteComponentProps} from 'react-router'; import {RouteComponentProps} from 'react-router';
import SearchHandling from './SearchHandling'; import SearchHandling from './SearchHandling';
import {VideoTypes} from '../../types/ApiTypes'; import {VideoTypes} from '../../types/ApiTypes';
import {DefaultTags} from "../../types/GeneralTypes"; import {DefaultTags} from '../../types/GeneralTypes';
interface props extends RouteComponentProps {} interface Props extends RouteComponentProps {}
interface state { interface state {
sideinfo: VideoTypes.startDataType sideinfo: VideoTypes.startDataType;
subtitle: string, subtitle: string;
data: VideoTypes.VideoUnloadedType[], data: VideoTypes.VideoUnloadedType[];
selectionnr: number selectionnr: number;
} }
/** /**
* The home page component showing on the initial pageload * The home page component showing on the initial pageload
*/ */
export class HomePage extends React.Component<props, state> { export class HomePage extends React.Component<Props, state> {
/** keyword variable needed temporary store search keyword */ /** keyword variable needed temporary store search keyword */
keyword = ''; keyword = '';
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
@ -38,7 +38,7 @@ export class HomePage extends React.Component<props, state> {
HDNr: 0, HDNr: 0,
SDNr: 0, SDNr: 0,
DifferentTags: 0, DifferentTags: 0,
Tagged: 0, Tagged: 0
}, },
subtitle: 'All Videos', subtitle: 'All Videos',
data: [], data: [],
@ -65,7 +65,7 @@ export class HomePage extends React.Component<props, state> {
}); });
this.setState({ this.setState({
data: result, data: result,
selectionnr: result.length, selectionnr: result.length
}); });
}); });
} }
@ -79,65 +79,86 @@ export class HomePage extends React.Component<props, state> {
}); });
} }
render(): JSX.Element { render(): JSX.Element {
return ( return (
<> <>
<Switch> <Switch>
<Route path='/search/:name'> <Route path='/search/:name'>
<SearchHandling/> <SearchHandling />
</Route> </Route>
<Route path='/'> <Route path='/'>
<PageTitle <PageTitle title='Home Page' subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
title='Home Page' <form
subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}> className={'form-inline ' + style.searchform}
<form className={'form-inline ' + style.searchform} onSubmit={(e): void => { onSubmit={(e): void => {
e.preventDefault(); e.preventDefault();
this.props.history.push('/search/' + this.keyword); this.props.history.push('/search/' + this.keyword);
}}> }}>
<input data-testid='searchtextfield' className='form-control mr-sm-2' <input
type='text' placeholder='Search' data-testid='searchtextfield'
onChange={(e): void => { className='form-control mr-sm-2'
this.keyword = e.target.value; type='text'
}}/> placeholder='Search'
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button> onChange={(e): void => {
this.keyword = e.target.value;
}}
/>
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>
Search
</button>
</form> </form>
</PageTitle> </PageTitle>
<SideBar> <SideBar>
<SideBarTitle>Infos:</SideBarTitle> <SideBarTitle>Infos:</SideBarTitle>
<Line/> <Line />
<SideBarItem><b>{this.state.sideinfo.VideoNr}</b> Videos Total!</SideBarItem> <SideBarItem>
<SideBarItem><b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!</SideBarItem> <b>{this.state.sideinfo.VideoNr}</b> Videos Total!
<SideBarItem><b>{this.state.sideinfo.HDNr}</b> HD Videos!</SideBarItem> </SideBarItem>
<SideBarItem><b>{this.state.sideinfo.SDNr}</b> SD Videos!</SideBarItem> <SideBarItem>
<SideBarItem><b>{this.state.sideinfo.DifferentTags}</b> different Tags!</SideBarItem> <b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!
<Line/> </SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.HDNr}</b> HD Videos!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.SDNr}</b> SD Videos!
</SideBarItem>
<SideBarItem>
<b>{this.state.sideinfo.DifferentTags}</b> different Tags!
</SideBarItem>
<Line />
<SideBarTitle>Default Tags:</SideBarTitle> <SideBarTitle>Default Tags:</SideBarTitle>
<Tag tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}} onclick={(): void => { <Tag
this.fetchVideoData(DefaultTags.all.TagId); tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
this.setState({subtitle: `All Videos`}); onclick={(): void => {
}}/> this.fetchVideoData(DefaultTags.all.TagId);
<Tag tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}} onclick={(): void => { this.setState({subtitle: 'All Videos'});
this.fetchVideoData(DefaultTags.fullhd.TagId); }}
this.setState({subtitle: `Full Hd Videos`}); />
}}/> <Tag
<Tag tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}} tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
onclick={(): void => { onclick={(): void => {
this.fetchVideoData(DefaultTags.lowq.TagId); this.fetchVideoData(DefaultTags.fullhd.TagId);
this.setState({subtitle: `Low Quality Videos`}); this.setState({subtitle: 'Full Hd Videos'});
}}/> }}
<Tag tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}} onclick={(): void => { />
this.fetchVideoData(DefaultTags.hd.TagId); <Tag
this.setState({subtitle: `HD Videos`}); tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
}}/> onclick={(): void => {
this.fetchVideoData(DefaultTags.lowq.TagId);
this.setState({subtitle: 'Low Quality Videos'});
}}
/>
<Tag
tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
onclick={(): void => {
this.fetchVideoData(DefaultTags.hd.TagId);
this.setState({subtitle: 'HD Videos'});
}}
/>
</SideBar> </SideBar>
{this.state.data.length !== 0 ? {this.state.data.length !== 0 ? <VideoContainer data={this.state.data} /> : <div>No Data found!</div>}
<VideoContainer <div className={style.rightinfo} />
data={this.state.data}/> :
<div>No Data found!</div>}
<div className={style.rightinfo}>
</div>
</Route> </Route>
</Switch> </Switch>
</> </>

16
src/pages/HomePage/SearchHandling.tsx
View File

@ -11,14 +11,14 @@ interface params {
name: string; name: string;
} }
interface props extends RouteComponentProps<params> {} interface Props extends RouteComponentProps<params> {}
interface state { interface state {
data: VideoTypes.VideoUnloadedType[]; data: VideoTypes.VideoUnloadedType[];
} }
export class SearchHandling extends React.Component<props, state> { export class SearchHandling extends React.Component<Props, state> {
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
@ -33,8 +33,8 @@ export class SearchHandling extends React.Component<props, state> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<> <>
<PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length}/> <PageTitle title='Search' subtitle={this.props.match.params.name + ': ' + this.state.data.length} />
<SideBar hiddenFrame/> <SideBar hiddenFrame />
{this.getVideoData()} {this.getVideoData()}
</> </>
); );
@ -45,11 +45,9 @@ export class SearchHandling extends React.Component<props, state> {
*/ */
getVideoData(): JSX.Element { getVideoData(): JSX.Element {
if (this.state.data.length !== 0) { if (this.state.data.length !== 0) {
return ( return <VideoContainer data={this.state.data} />;
<VideoContainer data={this.state.data}/>
);
} else { } else {
return (<div>No Data found!</div>); return <div>No Data found!</div>;
} }
} }

296
src/pages/Player/Player.tsx
View File

@ -20,22 +20,22 @@ import {ActorType, TagType} from '../../types/VideoTypes';
import PlyrJS from 'plyr'; import PlyrJS from 'plyr';
import {Button} from '../../elements/GPElements/Button'; import {Button} from '../../elements/GPElements/Button';
import {VideoTypes} from '../../types/ApiTypes'; import {VideoTypes} from '../../types/ApiTypes';
import GlobalInfos from "../../utils/GlobalInfos"; import GlobalInfos from '../../utils/GlobalInfos';
interface myprops extends RouteComponentProps<{ id: string }> {} interface myprops extends RouteComponentProps<{id: string}> {}
interface mystate { interface mystate {
sources?: PlyrJS.SourceInfo, sources?: PlyrJS.SourceInfo;
movie_id: number, movieId: number;
movie_name: string, movieName: string;
likes: number, likes: number;
quality: number, quality: number;
length: number, length: number;
tags: TagType[], tags: TagType[];
suggesttag: TagType[], suggesttag: TagType[];
popupvisible: boolean, popupvisible: boolean;
actorpopupvisible: boolean, actorpopupvisible: boolean;
actors: ActorType[] actors: ActorType[];
} }
/** /**
@ -64,8 +64,8 @@ export class Player extends React.Component<myprops, mystate> {
super(props); super(props);
this.state = { this.state = {
movie_id: -1, movieId: -1,
movie_name: '', movieName: '',
likes: 0, likes: 0,
quality: 0, quality: 0,
length: 0, length: 0,
@ -87,27 +87,37 @@ export class Player extends React.Component<myprops, mystate> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<div id='videocontainer'> <div id='videocontainer'>
<PageTitle <PageTitle title='Watch' subtitle={this.state.movieName} />
title='Watch'
subtitle={this.state.movie_name}/>
{this.assembleSideBar()} {this.assembleSideBar()}
<div className={style.videowrapper}> <div className={style.videowrapper}>
{/* video component is added here */} {/* video component is added here */}
{this.state.sources ? <Plyr {this.state.sources ? (
style={plyrstyle} <Plyr style={plyrstyle} source={this.state.sources} options={this.options} />
source={this.state.sources} ) : (
options={this.options}/> : <div>not loaded yet</div>
<div>not loaded yet</div>} )}
<div className={style.videoactions}> <div className={style.videoactions}>
<Button onClick={(): void => this.likebtn()} title='Like this Video!' color={{backgroundColor: 'green'}}/> <Button onClick={(): void => this.likebtn()} title='Like this Video!' color={{backgroundColor: 'green'}} />
<Button onClick={(): void => this.setState({popupvisible: true})} title='Give this Video a Tag' color={{backgroundColor: '#3574fe'}}/> <Button
<Button title='Delete Video' onClick={(): void => {this.deleteVideo();}} color={{backgroundColor: 'red'}}/> onClick={(): void => this.setState({popupvisible: true})}
title='Give this Video a Tag'
color={{backgroundColor: '#3574fe'}}
/>
<Button
title='Delete Video'
onClick={(): void => {
this.deleteVideo();
}}
color={{backgroundColor: 'red'}}
/>
</div> </div>
{this.assembleActorTiles()} {this.assembleActorTiles()}
</div> </div>
<button className={style.closebutton} onClick={(): void => this.closebtn()}>Close</button> <button className={style.closebutton} onClick={(): void => this.closebtn()}>
Close
</button>
{ {
// handle the popovers switched on and off according to state changes // handle the popovers switched on and off according to state changes
this.handlePopOvers() this.handlePopOvers()
@ -123,18 +133,26 @@ export class Player extends React.Component<myprops, mystate> {
return ( return (
<SideBar> <SideBar>
<SideBarTitle>Infos:</SideBarTitle> <SideBarTitle>Infos:</SideBarTitle>
<Line/> <Line />
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem> <SideBarItem>
{this.state.quality !== 0 ? <b>{this.state.likes}</b> Likes!
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null} </SideBarItem>
{this.state.length !== 0 ? {this.state.quality !== 0 ? (
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem> : null} <SideBarItem>
<Line/> <b>{this.state.quality}p</b> Quality!
</SideBarItem>
) : null}
{this.state.length !== 0 ? (
<SideBarItem>
<b>{Math.round(this.state.length / 60)}</b> Minutes of length!
</SideBarItem>
) : null}
<Line />
<SideBarTitle>Tags:</SideBarTitle> <SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m: TagType) => ( {this.state.tags.map((m: TagType) => (
<Tag key={m.TagId} tagInfo={m}/> <Tag key={m.TagId} tagInfo={m} />
))} ))}
<Line/> <Line />
<SideBarTitle>Tag Quickadd:</SideBarTitle> <SideBarTitle>Tag Quickadd:</SideBarTitle>
{this.state.suggesttag.map((m: TagType) => ( {this.state.suggesttag.map((m: TagType) => (
<Tag <Tag
@ -142,7 +160,8 @@ export class Player extends React.Component<myprops, mystate> {
key={m.TagName} key={m.TagName}
onclick={(): void => { onclick={(): void => {
this.quickAddTag(m.TagId, m.TagName); this.quickAddTag(m.TagId, m.TagName);
}}/> }}
/>
))} ))}
</SideBar> </SideBar>
); );
@ -154,18 +173,20 @@ export class Player extends React.Component<myprops, mystate> {
private assembleActorTiles(): JSX.Element { private assembleActorTiles(): JSX.Element {
return ( return (
<div className={style.actorcontainer}> <div className={style.actorcontainer}>
{this.state.actors ? {this.state.actors ? this.state.actors.map((actr: ActorType) => <ActorTile key={actr.ActorId} actor={actr} />) : <></>}
this.state.actors.map((actr: ActorType) => ( <div
<ActorTile key={actr.ActorId} actor={actr}/> className={style.actorAddTile}
)) : <></> onClick={(): void => {
} this.addActor();
<div className={style.actorAddTile} onClick={(): void => { }}>
this.addActor();
}}>
<div className={style.actorAddTile_thumbnail}> <div className={style.actorAddTile_thumbnail}>
<FontAwesomeIcon style={{ <FontAwesomeIcon
lineHeight: '130px' style={{
}} icon={faPlusCircle} size='5x'/> lineHeight: '130px'
}}
icon={faPlusCircle}
size='5x'
/>
</div> </div>
<div className={style.actorAddTile_name}>Add Actor</div> <div className={style.actorAddTile_name}>Add Actor</div>
</div> </div>
@ -173,7 +194,6 @@ export class Player extends React.Component<myprops, mystate> {
); );
} }
/** /**
* handle the popovers generated according to state changes * handle the popovers generated according to state changes
* @returns {JSX.Element} * @returns {JSX.Element}
@ -181,18 +201,18 @@ export class Player extends React.Component<myprops, mystate> {
handlePopOvers(): JSX.Element { handlePopOvers(): JSX.Element {
return ( return (
<> <>
{ {this.state.popupvisible ? (
this.state.popupvisible ? <AddTagPopup onHide={(): void => this.setState({popupvisible: false})} submit={this.quickAddTag} />
<AddTagPopup onHide={(): void => this.setState({popupvisible: false})} ) : null}
submit={this.quickAddTag}/> : null {this.state.actorpopupvisible ? (
} <AddActorPopup
{ onHide={(): void => {
this.state.actorpopupvisible ?
<AddActorPopup onHide={(): void => {
this.refetchActors(); this.refetchActors();
this.setState({actorpopupvisible: false}); this.setState({actorpopupvisible: false});
}} movie_id={this.state.movie_id}/> : null }}
} movieId={this.state.movieId}
/>
) : null}
</> </>
); );
} }
@ -203,82 +223,93 @@ export class Player extends React.Component<myprops, mystate> {
* @param tagName name of tag to add * @param tagName name of tag to add
*/ */
quickAddTag(tagId: number, tagName: string): void { quickAddTag(tagId: number, tagName: string): void {
callAPI(APINode.Tags, { callAPI(
action: 'addTag', APINode.Tags,
TagId: tagId, {
MovieId: parseInt(this.props.match.params.id) action: 'addTag',
}, (result: GeneralSuccess) => { TagId: tagId,
if (result.result !== 'success') { MovieId: parseInt(this.props.match.params.id, 10)
console.error('error occured while writing to db -- todo error handling'); },
console.error(result.result); (result: GeneralSuccess) => {
} else { if (result.result !== 'success') {
// check if tag has already been added console.error('error occured while writing to db -- todo error handling');
const tagIndex = this.state.tags.map(function (e: TagType) { console.error(result.result);
return e.TagName; } else {
}).indexOf(tagName); // check if tag has already been added
const tagIndex = this.state.tags
.map(function (e: TagType) {
return e.TagName;
})
.indexOf(tagName);
// only add tag if it isn't already there // only add tag if it isn't already there
if (tagIndex === -1) { if (tagIndex === -1) {
// update tags if successful // update tags if successful
let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState) let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
const quickaddindex = this.state.suggesttag.map(function (e: TagType) { const quickaddindex = this.state.suggesttag
return e.TagId; .map(function (e: TagType) {
}).indexOf(tagId); return e.TagId;
})
.indexOf(tagId);
// check if tag is available in quickadds // check if tag is available in quickadds
if (quickaddindex !== -1) { if (quickaddindex !== -1) {
array.splice(quickaddindex, 1); array.splice(quickaddindex, 1);
this.setState({ this.setState({
tags: [...this.state.tags, {TagName: tagName, TagId: tagId}], tags: [...this.state.tags, {TagName: tagName, TagId: tagId}],
suggesttag: array suggesttag: array
}); });
} else { } else {
this.setState({ this.setState({
tags: [...this.state.tags, {TagName: tagName, TagId: tagId}] tags: [...this.state.tags, {TagName: tagName, TagId: tagId}]
}); });
}
} }
} }
} }
}); );
} }
/** /**
* fetch all the required infos of a video from backend * fetch all the required infos of a video from backend
*/ */
fetchMovieData(): void { fetchMovieData(): void {
callAPI(APINode.Video, {action: 'loadVideo', MovieId: parseInt(this.props.match.params.id)}, (result: VideoTypes.loadVideoType) => { callAPI(
console.log(result) APINode.Video,
this.setState({ {action: 'loadVideo', MovieId: parseInt(this.props.match.params.id, 10)},
sources: { (result: VideoTypes.loadVideoType) => {
type: 'video', console.log(result);
sources: [ this.setState({
{ sources: {
src: getBackendDomain() + GlobalInfos.getVideoPath() + result.MovieUrl, type: 'video',
type: 'video/mp4', sources: [
size: 1080 {
} src: getBackendDomain() + GlobalInfos.getVideoPath() + result.MovieUrl,
], type: 'video/mp4',
poster: result.Poster size: 1080
}, }
movie_id: result.MovieId, ],
movie_name: result.MovieName, poster: result.Poster
likes: result.Likes, },
quality: result.Quality, movieId: result.MovieId,
length: result.Length, movieName: result.MovieName,
tags: result.Tags, likes: result.Likes,
suggesttag: result.SuggestedTag, quality: result.Quality,
actors: result.Actors length: result.Length,
}); tags: result.Tags,
}); suggesttag: result.SuggestedTag,
actors: result.Actors
});
}
);
} }
/** /**
* click handler for the like btn * click handler for the like btn
*/ */
likebtn(): void { likebtn(): void {
callAPI(APINode.Video, {action: 'addLike', MovieId: parseInt(this.props.match.params.id)}, (result: GeneralSuccess) => { callAPI(APINode.Video, {action: 'addLike', MovieId: parseInt(this.props.match.params.id, 10)}, (result: GeneralSuccess) => {
if (result.result === 'success') { if (result.result === 'success') {
// likes +1 --> avoid reload of all data // likes +1 --> avoid reload of all data
this.setState({likes: this.state.likes + 1}); this.setState({likes: this.state.likes + 1});
@ -301,15 +332,19 @@ export class Player extends React.Component<myprops, mystate> {
* delete the current video and return to last page * delete the current video and return to last page
*/ */
deleteVideo(): void { deleteVideo(): void {
callAPI(APINode.Video, {action: 'deleteVideo', MovieId: parseInt(this.props.match.params.id)}, (result: GeneralSuccess) => { callAPI(
if (result.result === 'success') { APINode.Video,
// return to last element if successful {action: 'deleteVideo', MovieId: parseInt(this.props.match.params.id, 10)},
this.props.history.goBack(); (result: GeneralSuccess) => {
} else { if (result.result === 'success') {
console.error('an error occured while liking'); // return to last element if successful
console.error(result); this.props.history.goBack();
} else {
console.error('an error occured while liking');
console.error(result);
}
} }
}); );
} }
/** /**
@ -323,11 +358,14 @@ export class Player extends React.Component<myprops, mystate> {
* fetch the available video actors again * fetch the available video actors again
*/ */
refetchActors(): void { refetchActors(): void {
callAPI<ActorType[]>(APINode.Actor, {action: 'getActorsOfVideo', MovieId: parseInt(this.props.match.params.id)}, result => { callAPI<ActorType[]>(
this.setState({actors: result}); APINode.Actor,
}); {action: 'getActorsOfVideo', MovieId: parseInt(this.props.match.params.id, 10)},
(result) => {
this.setState({actors: result});
}
);
} }
} }
export default withRouter(Player); export default withRouter(Player);

24
src/pages/RandomPage/RandomPage.tsx
View File

@ -47,26 +47,26 @@ class RandomPage extends React.Component<{}, state> {
render(): JSX.Element { render(): JSX.Element {
return ( return (
<div> <div>
<PageTitle title='Random Videos' <PageTitle title='Random Videos' subtitle='4pc' />
subtitle='4pc'/>
<SideBar> <SideBar>
<SideBarTitle>Visible Tags:</SideBarTitle> <SideBarTitle>Visible Tags:</SideBarTitle>
{this.state.tags.map((m) => ( {this.state.tags.map((m) => (
<Tag key={m.TagId} tagInfo={m}/> <Tag key={m.TagId} tagInfo={m} />
))} ))}
</SideBar> </SideBar>
{this.state.videos.length !== 0 ? {this.state.videos.length !== 0 ? (
<VideoContainer <VideoContainer data={this.state.videos}>
data={this.state.videos}>
<div className={style.Shufflebutton}> <div className={style.Shufflebutton}>
<button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button> <button onClick={(): void => this.shuffleclick()} className={style.btnshuffle}>
Shuffle
</button>
</div> </div>
</VideoContainer> </VideoContainer>
: ) : (
<div>No Data found!</div>} <div>No Data found!</div>
)}
</div> </div>
); );
} }
@ -83,8 +83,8 @@ class RandomPage extends React.Component<{}, state> {
* @param nr number of videos to load * @param nr number of videos to load
*/ */
loadShuffledvideos(nr: number): void { loadShuffledvideos(nr: number): void {
callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', number: nr}, result => { callAPI<GetRandomMoviesType>(APINode.Video, {action: 'getRandomMovies', number: nr}, (result) => {
console.log(result) console.log(result);
this.setState({videos: []}); // needed to trigger rerender of main videoview this.setState({videos: []}); // needed to trigger rerender of main videoview
this.setState({ this.setState({
videos: result.Videos, videos: result.Videos,

216
src/pages/SettingsPage/GeneralSettings.tsx
View File

@ -11,20 +11,19 @@ import {SettingsTypes} from '../../types/ApiTypes';
import {GeneralSuccess} from '../../types/GeneralTypes'; import {GeneralSuccess} from '../../types/GeneralTypes';
interface state { interface state {
customapi: boolean customapi: boolean;
apipath: string apipath: string;
generalSettings: SettingsTypes.loadGeneralSettingsType generalSettings: SettingsTypes.loadGeneralSettingsType;
} }
interface props { interface Props {}
}
/** /**
* Component for Generalsettings tag on Settingspage * Component for Generalsettings tag on Settingspage
* handles general settings of mediacenter which concerns to all pages * handles general settings of mediacenter which concerns to all pages
*/ */
class GeneralSettings extends React.Component<props, state> { class GeneralSettings extends React.Component<Props, state> {
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
@ -34,14 +33,14 @@ class GeneralSettings extends React.Component<props, state> {
DarkMode: true, DarkMode: true,
DBSize: 0, DBSize: 0,
DifferentTags: 0, DifferentTags: 0,
EpisodePath: "", EpisodePath: '',
MediacenterName: "", MediacenterName: '',
Password: "", Password: '',
PasswordEnabled: false, PasswordEnabled: false,
TagsAdded: 0, TagsAdded: 0,
TMDBGrabbing: false, TMDBGrabbing: false,
VideoNr: 0, VideoNr: 0,
VideoPath: "" VideoPath: ''
} }
}; };
} }
@ -55,51 +54,71 @@ class GeneralSettings extends React.Component<props, state> {
return ( return (
<> <>
<div className={style.infoheader}> <div className={style.infoheader}>
<InfoHeaderItem backColor='lightblue' <InfoHeaderItem
text={this.state.generalSettings.VideoNr} backColor='lightblue'
subtext='Videos in Gravity' text={this.state.generalSettings.VideoNr}
icon={faArchive}/> subtext='Videos in Gravity'
<InfoHeaderItem backColor='yellow' icon={faArchive}
text={this.state.generalSettings.DBSize + ' MB'} />
subtext='Database size' <InfoHeaderItem
icon={faRulerVertical}/> backColor='yellow'
<InfoHeaderItem backColor='green' text={this.state.generalSettings.DBSize + ' MB'}
text={this.state.generalSettings.DifferentTags} subtext='Database size'
subtext='different Tags' icon={faRulerVertical}
icon={faAddressCard}/> />
<InfoHeaderItem backColor='orange' <InfoHeaderItem
text={this.state.generalSettings.TagsAdded} backColor='green'
subtext='tags added' text={this.state.generalSettings.DifferentTags}
icon={faBalanceScaleLeft}/> subtext='different Tags'
icon={faAddressCard}
/>
<InfoHeaderItem
backColor='orange'
text={this.state.generalSettings.TagsAdded}
subtext='tags added'
icon={faBalanceScaleLeft}
/>
</div> </div>
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}> <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
<Form data-testid='mainformsettings' onSubmit={(e): void => { <Form
e.preventDefault(); data-testid='mainformsettings'
this.saveSettings(); onSubmit={(e): void => {
}}> e.preventDefault();
this.saveSettings();
}}>
<Form.Row> <Form.Row>
<Form.Group as={Col} data-testid='videpathform'> <Form.Group as={Col} data-testid='videpathform'>
<Form.Label>Video Path</Form.Label> <Form.Label>Video Path</Form.Label>
<Form.Control type='text' placeholder='/var/www/html/video' <Form.Control
value={this.state.generalSettings.VideoPath} type='text'
onChange={(ee): void => this.setState({ placeholder='/var/www/html/video'
generalSettings: { value={this.state.generalSettings.VideoPath}
...this.state.generalSettings, onChange={(ee): void =>
VideoPath: ee.target.value this.setState({
} generalSettings: {
})}/> ...this.state.generalSettings,
VideoPath: ee.target.value
}
})
}
/>
</Form.Group> </Form.Group>
<Form.Group as={Col} data-testid='tvshowpath'> <Form.Group as={Col} data-testid='tvshowpath'>
<Form.Label>TV Show Path</Form.Label> <Form.Label>TV Show Path</Form.Label>
<Form.Control type='text' placeholder='/var/www/html/tvshow' <Form.Control
value={this.state.generalSettings.EpisodePath} type='text'
onChange={(e): void => this.setState({ placeholder='/var/www/html/tvshow'
generalSettings: { value={this.state.generalSettings.EpisodePath}
...this.state.generalSettings, onChange={(e): void =>
EpisodePath: e.target.value this.setState({
} generalSettings: {
})}/> ...this.state.generalSettings,
EpisodePath: e.target.value
}
})
}
/>
</Form.Group> </Form.Group>
</Form.Row> </Form.Row>
@ -116,17 +135,20 @@ class GeneralSettings extends React.Component<props, state> {
this.setState({customapi: !this.state.customapi}); this.setState({customapi: !this.state.customapi});
}} }}
/> />
{this.state.customapi ? {this.state.customapi ? (
<Form.Group className={style.customapiform} data-testid='apipath'> <Form.Group className={style.customapiform} data-testid='apipath'>
<Form.Label>API Backend url</Form.Label> <Form.Label>API Backend url</Form.Label>
<Form.Control type='text' placeholder='https://127.0.0.1' <Form.Control
value={this.state.apipath} type='text'
onChange={(e): void => { placeholder='https://127.0.0.1'
this.setState({apipath: e.target.value}); value={this.state.apipath}
setCustomBackendDomain(e.target.value); onChange={(e): void => {
}}/> this.setState({apipath: e.target.value});
</Form.Group> : null} setCustomBackendDomain(e.target.value);
}}
/>
</Form.Group>
) : null}
<Form.Check <Form.Check
type='switch' type='switch'
@ -144,19 +166,24 @@ class GeneralSettings extends React.Component<props, state> {
}} }}
/> />
{this.state.generalSettings.PasswordEnabled ? {this.state.generalSettings.PasswordEnabled ? (
<Form.Group data-testid='passwordfield'> <Form.Group data-testid='passwordfield'>
<Form.Label>Password</Form.Label> <Form.Label>Password</Form.Label>
<Form.Control type='password' placeholder='**********' <Form.Control
value={this.state.generalSettings.Password} type='password'
onChange={(e): void => this.setState({ placeholder='**********'
generalSettings: { value={this.state.generalSettings.Password}
...this.state.generalSettings, onChange={(e): void =>
Password: e.target.value this.setState({
} generalSettings: {
})}/> ...this.state.generalSettings,
</Form.Group> : null Password: e.target.value
} }
})
}
/>
</Form.Group>
) : null}
<Form.Check <Form.Check
type='switch' type='switch'
@ -189,14 +216,19 @@ class GeneralSettings extends React.Component<props, state> {
<Form.Group className={style.mediacenternameform} data-testid='nameform'> <Form.Group className={style.mediacenternameform} data-testid='nameform'>
<Form.Label>The name of the Mediacenter</Form.Label> <Form.Label>The name of the Mediacenter</Form.Label>
<Form.Control type='text' placeholder='Mediacentername' <Form.Control
value={this.state.generalSettings.MediacenterName} type='text'
onChange={(e): void => this.setState({ placeholder='Mediacentername'
generalSettings: { value={this.state.generalSettings.MediacenterName}
...this.state.generalSettings, onChange={(e): void =>
MediacenterName: e.target.value this.setState({
} generalSettings: {
})}/> ...this.state.generalSettings,
MediacenterName: e.target.value
}
})
}
/>
</Form.Group> </Form.Group>
<Button variant='primary' type='submit'> <Button variant='primary' type='submit'>
@ -204,9 +236,7 @@ class GeneralSettings extends React.Component<props, state> {
</Button> </Button>
</Form> </Form>
</div> </div>
<div className={style.footer}> <div className={style.footer}>Version: {version}</div>
Version: {version}
</div>
</> </>
); );
} }
@ -225,23 +255,27 @@ class GeneralSettings extends React.Component<props, state> {
*/ */
saveSettings(): void { saveSettings(): void {
let settings = this.state.generalSettings; let settings = this.state.generalSettings;
if(!this.state.generalSettings.PasswordEnabled){ if (!this.state.generalSettings.PasswordEnabled) {
settings.Password = '-1'; settings.Password = '-1';
} }
settings.DarkMode = GlobalInfos.isDarkTheme() settings.DarkMode = GlobalInfos.isDarkTheme();
callAPI(APINode.Settings, { callAPI(
action: 'saveGeneralSettings', APINode.Settings,
Settings: settings {
}, (result: GeneralSuccess) => { action: 'saveGeneralSettings',
if (result.result) { Settings: settings
console.log('successfully saved settings'); },
// todo 2020-07-10: popup success (result: GeneralSuccess) => {
} else { if (result.result) {
console.log('failed to save settings'); console.log('successfully saved settings');
// todo 2020-07-10: popup error // todo 2020-07-10: popup success
} else {
console.log('failed to save settings');
// todo 2020-07-10: popup error
}
} }
}); );
} }
} }

43
src/pages/SettingsPage/MovieSettings.tsx
View File

@ -5,20 +5,20 @@ import {GeneralSuccess} from '../../types/GeneralTypes';
import {SettingsTypes} from '../../types/ApiTypes'; import {SettingsTypes} from '../../types/ApiTypes';
interface state { interface state {
text: string[] text: string[];
startbtnDisabled: boolean startbtnDisabled: boolean;
} }
interface props {} interface Props {}
/** /**
* Component for MovieSettings on Settingspage * Component for MovieSettings on Settingspage
* handles settings concerning to movies in general * handles settings concerning to movies in general
*/ */
class MovieSettings extends React.Component<props, state> { class MovieSettings extends React.Component<Props, state> {
myinterval: number = -1; myinterval: number = -1;
constructor(props: props) { constructor(props: Props) {
super(props); super(props);
this.state = { this.state = {
@ -32,23 +32,36 @@ class MovieSettings extends React.Component<props, state> {
} }
componentWillUnmount(): void { componentWillUnmount(): void {
if (this.myinterval !== -1) if (this.myinterval !== -1) {
clearInterval(this.myinterval); clearInterval(this.myinterval);
}
} }
render(): JSX.Element { render(): JSX.Element {
return ( return (
<> <>
<button disabled={this.state.startbtnDisabled} <button
className='btn btn-success' disabled={this.state.startbtnDisabled}
onClick={(): void => {this.startReindex();}}>Reindex Movie className='btn btn-success'
onClick={(): void => {
this.startReindex();
}}>
Reindex Movie
</button> </button>
<button className='btn btn-warning' <button
onClick={(): void => {this.cleanupGravity();}}>Cleanup Gravity className='btn btn-warning'
onClick={(): void => {
this.cleanupGravity();
}}>
Cleanup Gravity
</button> </button>
<div className={style.indextextarea}>{this.state.text.map(m => ( <div className={style.indextextarea}>
<div key={m} className='textarea-element'>{m}</div> {this.state.text.map((m) => (
))}</div> <div key={m} className='textarea-element'>
{m}
</div>
))}
</div>
</> </>
); );
} }
@ -99,7 +112,7 @@ class MovieSettings extends React.Component<props, state> {
* send request to cleanup db gravity * send request to cleanup db gravity
*/ */
cleanupGravity(): void { cleanupGravity(): void {
callAPI(APINode.Settings, {action: 'cleanupGravity'}, (result) => { callAPI(APINode.Settings, {action: 'cleanupGravity'}, () => {
this.setState({ this.setState({
text: ['successfully cleaned up gravity!'] text: ['successfully cleaned up gravity!']
}); });

16
src/pages/SettingsPage/SettingsPage.tsx
View File

@ -28,17 +28,17 @@ class SettingsPage extends React.Component {
</div> </div>
<div className={style.SettingsContent}> <div className={style.SettingsContent}>
<Switch> <Switch>
<Route path="/settings/general"> <Route path='/settings/general'>
<GeneralSettings/> <GeneralSettings />
</Route> </Route>
<Route path="/settings/movies"> <Route path='/settings/movies'>
<MovieSettings/> <MovieSettings />
</Route> </Route>
<Route path="/settings/tv"> <Route path='/settings/tv'>
<span/> <span />
</Route> </Route>
<Route path="/settings"> <Route path='/settings'>
<Redirect to='/settings/general'/> <Redirect to='/settings/general' />
</Route> </Route>
</Switch> </Switch>
</div> </div>

44
src/types/ApiTypes.ts
View File

@ -2,16 +2,16 @@ import {ActorType, TagType} from './VideoTypes';
export namespace VideoTypes { export namespace VideoTypes {
export interface loadVideoType { export interface loadVideoType {
MovieUrl: string MovieUrl: string;
Poster: string Poster: string;
MovieId: number MovieId: number;
MovieName: string MovieName: string;
Likes: number Likes: number;
Quality: number Quality: number;
Length: number Length: number;
Tags: TagType[] Tags: TagType[];
SuggestedTag: TagType[] SuggestedTag: TagType[];
Actors: ActorType[] Actors: ActorType[];
} }
export interface startDataType { export interface startDataType {
@ -25,7 +25,7 @@ export namespace VideoTypes {
export interface VideoUnloadedType { export interface VideoUnloadedType {
MovieId: number; MovieId: number;
MovieName: string MovieName: string;
} }
} }
@ -38,18 +38,18 @@ export namespace SettingsTypes {
} }
export interface loadGeneralSettingsType { export interface loadGeneralSettingsType {
VideoPath: string, VideoPath: string;
EpisodePath: string, EpisodePath: string;
MediacenterName: string, MediacenterName: string;
Password: string, Password: string;
PasswordEnabled: boolean, PasswordEnabled: boolean;
TMDBGrabbing: boolean, TMDBGrabbing: boolean;
DarkMode: boolean, DarkMode: boolean;
VideoNr: number, VideoNr: number;
DBSize: number, DBSize: number;
DifferentTags: number, DifferentTags: number;
TagsAdded: number TagsAdded: number;
} }
export interface getStatusMessageType { export interface getStatusMessageType {

4
src/types/GeneralTypes.ts
View File

@ -1,11 +1,11 @@
import {TagType} from './VideoTypes'; import {TagType} from './VideoTypes';
export interface GeneralSuccess { export interface GeneralSuccess {
result: string result: string;
} }
interface TagarrayType { interface TagarrayType {
[_: string]: TagType [_: string]: TagType;
} }
export const DefaultTags: TagarrayType = { export const DefaultTags: TagarrayType = {

4
src/types/VideoTypes.ts
View File

@ -2,8 +2,8 @@
* type accepted by Tag component * type accepted by Tag component
*/ */
export interface TagType { export interface TagType {
TagName: string TagName: string;
TagId: number TagId: number;
} }
export interface ActorType { export interface ActorType {

197
src/utils/Api.ts
View File

@ -8,13 +8,13 @@ export function getBackendDomain(): string {
let userAgent = navigator.userAgent.toLowerCase(); let userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf(' electron/') > -1) { if (userAgent.indexOf(' electron/') > -1) {
// Electron-specific code - force a custom backendurl // Electron-specific code - force a custom backendurl
return (customBackendURL); return customBackendURL;
} else { } else {
// use custom only if defined // use custom only if defined
if (customBackendURL) { if (customBackendURL) {
return (customBackendURL); return customBackendURL;
} else { } else {
return (window.location.origin); return window.location.origin;
} }
} }
} }
@ -38,29 +38,21 @@ function getAPIDomain(): string {
* interface how an api request should look like * interface how an api request should look like
*/ */
interface ApiBaseRequest { interface ApiBaseRequest {
action: string | number, action: string | number;
[_: string]: string | number | boolean | object [_: string]: string | number | boolean | object;
} }
// store api token - empty if not set // store api token - empty if not set
let apiToken = '' let apiToken = '';
// a callback que to be called after api token refresh // a callback que to be called after api token refresh
let callQue: ((error: string) => void)[] = [] let callQue: ((error: string) => void)[] = [];
// flag to check wheter a api refresh is currently pending // flag to check wheter a api refresh is currently pending
let refreshInProcess = false; let refreshInProcess = false;
// store the expire seconds of token // store the expire seconds of token
let expireSeconds = -1; let expireSeconds = -1;
interface APIToken {
error?: string;
access_token: string;
expires_in: number;
scope: string;
token_type: string;
}
/** /**
* refresh the api token or use that one in cookie if still valid * refresh the api token or use that one in cookie if still valid
* @param callback to be called after successful refresh * @param callback to be called after successful refresh
@ -79,34 +71,44 @@ export function refreshAPIToken(callback: (error: string) => void, password?: st
} }
if (apiTokenValid()) { if (apiTokenValid()) {
console.log("token still valid...") console.log('token still valid...');
callFuncQue(''); callFuncQue('');
return; return;
} }
const formData = new FormData(); const formData = new FormData();
formData.append("grant_type", "client_credentials"); formData.append('grant_type', 'client_credentials');
formData.append("client_id", "openmediacenter"); formData.append('client_id', 'openmediacenter');
formData.append("client_secret", password ? password : 'openmediacenter'); formData.append('client_secret', password ? password : 'openmediacenter');
formData.append("scope", 'all'); formData.append('scope', 'all');
interface APIToken {
error?: string;
// eslint-disable-next-line camelcase
access_token: string; // no camel case allowed because of backendlib
// eslint-disable-next-line camelcase
expires_in: number; // no camel case allowed because of backendlib
scope: string;
// eslint-disable-next-line camelcase
token_type: string; // no camel case allowed because of backendlib
}
fetch(getBackendDomain() + '/token', {method: 'POST', body: formData}) fetch(getBackendDomain() + '/token', {method: 'POST', body: formData}).then((response) =>
.then((response) => response.json() response.json().then((result: APIToken) => {
.then((result: APIToken) => { if (result.error) {
if (result.error) { callFuncQue(result.error);
callFuncQue(result.error); return;
return; }
} console.log(result);
console.log(result) // set api token
// set api token apiToken = result.access_token;
apiToken = result.access_token; // set expire time
// set expire time expireSeconds = new Date().getTime() / 1000 + result.expires_in;
expireSeconds = (new Date().getTime() / 1000) + result.expires_in; setTokenCookie(apiToken, expireSeconds);
setTokenCookie(apiToken, expireSeconds); // call all handlers and release flag
// call all handlers and release flag callFuncQue('');
callFuncQue(''); })
})); );
} }
export function apiTokenValid(): boolean { export function apiTokenValid(): boolean {
@ -114,7 +116,7 @@ export function apiTokenValid(): boolean {
const token = getTokenCookie(); const token = getTokenCookie();
if (token !== null) { if (token !== null) {
// check if token is at least valid for the next minute // check if token is at least valid for the next minute
if (token.expire > (new Date().getTime() / 1000) + 60) { if (token.expire > new Date().getTime() / 1000 + 60) {
apiToken = token.token; apiToken = token.token;
expireSeconds = token.expire; expireSeconds = token.expire;
@ -129,11 +131,11 @@ export function apiTokenValid(): boolean {
*/ */
function callFuncQue(error: string): void { function callFuncQue(error: string): void {
// call all pending handlers // call all pending handlers
callQue.map(func => { callQue.map((func) => {
return func(error); return func(error);
}) });
// reset pending que // reset pending que
callQue = [] callQue = [];
// release flag to be able to start new refresh // release flag to be able to start new refresh
refreshInProcess = false; refreshInProcess = false;
} }
@ -146,24 +148,24 @@ function callFuncQue(error: string): void {
function setTokenCookie(token: string, validSec: number): void { function setTokenCookie(token: string, validSec: number): void {
let d = new Date(); let d = new Date();
d.setTime(validSec * 1000); d.setTime(validSec * 1000);
console.log("token set" + d.toUTCString()) console.log('token set' + d.toUTCString());
let expires = "expires=" + d.toUTCString(); let expires = 'expires=' + d.toUTCString();
document.cookie = "token=" + token + ";" + expires + ";path=/"; document.cookie = 'token=' + token + ';' + expires + ';path=/';
document.cookie = "token_expire=" + validSec + ";" + expires + ";path=/"; document.cookie = 'token_expire=' + validSec + ';' + expires + ';path=/';
} }
/** /**
* get all required cookies for the token * get all required cookies for the token
*/ */
function getTokenCookie(): { token: string, expire: number } | null { function getTokenCookie(): {token: string; expire: number} | null {
const token = decodeCookie('token'); const token = decodeCookie('token');
const expireInString = decodeCookie('token_expire'); const expireInString = decodeCookie('token_expire');
const expireIn = parseInt(expireInString, 10) | 0; const expireIn = parseInt(expireInString, 10);
if (expireIn !== 0 && token !== '') { if (expireIn !== 0 && token !== '') {
return {token: token, expire: expireIn}; return {token: token, expire: expireIn};
} else { } else {
return null return null;
} }
} }
@ -172,7 +174,7 @@ function getTokenCookie(): { token: string, expire: number } | null {
* @param key cookie key * @param key cookie key
*/ */
function decodeCookie(key: string): string { function decodeCookie(key: string): string {
let name = key + "="; let name = key + '=';
let decodedCookie = decodeURIComponent(document.cookie); let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';'); let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) { for (let i = 0; i < ca.length; i++) {
@ -184,7 +186,7 @@ function decodeCookie(key: string): string {
return c.substring(name.length, c.length); return c.substring(name.length, c.length);
} }
} }
return ""; return '';
} }
/** /**
@ -196,10 +198,10 @@ function checkAPITokenValid(callback: () => void): void {
// check if token is valid and set // check if token is valid and set
if (apiToken === '' || expireSeconds <= new Date().getTime() / 1000) { if (apiToken === '' || expireSeconds <= new Date().getTime() / 1000) {
refreshAPIToken(() => { refreshAPIToken(() => {
callback() callback();
}) });
} else { } else {
callback() callback();
} }
} }
@ -210,28 +212,34 @@ function checkAPITokenValid(callback: () => void): void {
* @param callback the callback with json reply from backend * @param callback the callback with json reply from backend
* @param errorcallback a optional callback if an error occured * @param errorcallback a optional callback if an error occured
*/ */
export function callAPI<T>(apinode: APINode, export function callAPI<T>(
fd: ApiBaseRequest, apinode: APINode,
callback: (_: T) => void, fd: ApiBaseRequest,
errorcallback: (_: string) => void = (_: string): void => { callback: (_: T) => void,
}): void { errorcallback: (_: string) => void = (_: string): void => {}
): void {
checkAPITokenValid(() => { checkAPITokenValid(() => {
console.log(apiToken);
fetch(getAPIDomain() + apinode, { fetch(getAPIDomain() + apinode, {
method: 'POST', body: JSON.stringify(fd), headers: new Headers({ method: 'POST',
body: JSON.stringify(fd),
headers: new Headers({
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiToken, Authorization: 'Bearer ' + apiToken
}), })
}).then((response) => { })
if (response.status !== 200) { .then((response) => {
console.log('Error: ' + response.statusText); if (response.status !== 200) {
// todo place error popup here console.log('Error: ' + response.statusText);
} else { // todo place error popup here
response.json().then((result: T) => { } else {
callback(result); response.json().then((result: T) => {
}) callback(result);
} });
}).catch(reason => errorcallback(reason)); }
}) })
.catch((reason) => errorcallback(reason));
});
} }
/** /**
@ -239,18 +247,26 @@ export function callAPI<T>(apinode: APINode,
* @param apinode * @param apinode
* @param fd * @param fd
* @param callback * @param callback
* @param errorcallback
*/ */
export function callApiUnsafe<T>(apinode: APINode, fd: ApiBaseRequest, callback: (_: T) => void, errorcallback?: (_: string) => void): void { export function callApiUnsafe<T>(
fetch(getAPIDomain() + apinode, {method: 'POST', body: JSON.stringify(fd),}).then((response) => { apinode: APINode,
if (response.status !== 200) { fd: ApiBaseRequest,
console.log('Error: ' + response.statusText); callback: (_: T) => void,
// todo place error popup here errorcallback?: (_: string) => void
} else { ): void {
response.json().then((result: T) => { fetch(getAPIDomain() + apinode, {method: 'POST', body: JSON.stringify(fd)})
callback(result); .then((response) => {
}) if (response.status !== 200) {
} console.log('Error: ' + response.statusText);
}).catch(reason => errorcallback ? errorcallback(reason) : {}) // todo place error popup here
} else {
response.json().then((result: T) => {
callback(result);
});
}
})
.catch((reason) => (errorcallback ? errorcallback(reason) : {}));
} }
/** /**
@ -262,21 +278,24 @@ export function callApiUnsafe<T>(apinode: APINode, fd: ApiBaseRequest, callback:
export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void { export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void {
checkAPITokenValid(() => { checkAPITokenValid(() => {
fetch(getAPIDomain() + apinode, { fetch(getAPIDomain() + apinode, {
method: 'POST', body: JSON.stringify(fd), headers: new Headers({ method: 'POST',
body: JSON.stringify(fd),
headers: new Headers({
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiToken, Authorization: 'Bearer ' + apiToken
}) })
}) }).then((response) =>
.then((response) => response.text() response.text().then((result) => {
.then((result) => { callback(result);
callback(result); })
})); );
}); });
} }
/** /**
* API nodes definitions * API nodes definitions
*/ */
// eslint-disable-next-line no-shadow
export enum APINode { export enum APINode {
Settings = 'settings', Settings = 'settings',
Tags = 'tags', Tags = 'tags',

10
src/utils/GlobalInfos.ts
View File

@ -7,7 +7,7 @@ import lighttheme from '../AppLightTheme.module.css';
*/ */
class StaticInfos { class StaticInfos {
private darktheme: boolean = true; private darktheme: boolean = true;
private videopath: string = "" private videopath: string = '';
/** /**
* check if the current theme is the dark theme * check if the current theme is the dark theme
@ -15,7 +15,7 @@ class StaticInfos {
*/ */
isDarkTheme(): boolean { isDarkTheme(): boolean {
return this.darktheme; return this.darktheme;
}; }
/** /**
* setter to enable or disable the dark or light theme * setter to enable or disable the dark or light theme
@ -23,16 +23,16 @@ class StaticInfos {
*/ */
enableDarkTheme(enable = true): void { enableDarkTheme(enable = true): void {
this.darktheme = enable; this.darktheme = enable;
this.handlers.map(func => { this.handlers.map((func) => {
return func(); return func();
}) });
} }
/** /**
* get the currently selected theme stylesheet * get the currently selected theme stylesheet
* @returns {*} the style object of the current active theme * @returns {*} the style object of the current active theme
*/ */
getThemeStyle(): { [_: string]: string } { getThemeStyle(): {[_: string]: string} {
return this.isDarkTheme() ? darktheme : lighttheme; return this.isDarkTheme() ? darktheme : lighttheme;
} }

199
yarn.lock
View File

@ -1977,6 +1977,20 @@
dependencies: dependencies:
"@types/yargs-parser" "*" "@types/yargs-parser" "*"
"@typescript-eslint/eslint-plugin@^4.17.0":
version "4.17.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.17.0.tgz#6f856eca4e6a52ce9cf127dfd349096ad936aa2d"
integrity sha512-/fKFDcoHg8oNan39IKFOb5WmV7oWhQe1K6CDaAVfJaNWEhmfqlA24g+u1lqU5bMH7zuNasfMId4LaYWC5ijRLw==
dependencies:
"@typescript-eslint/experimental-utils" "4.17.0"
"@typescript-eslint/scope-manager" "4.17.0"
debug "^4.1.1"
functional-red-black-tree "^1.0.1"
lodash "^4.17.15"
regexpp "^3.0.0"
semver "^7.3.2"
tsutils "^3.17.1"
"@typescript-eslint/eslint-plugin@^4.5.0": "@typescript-eslint/eslint-plugin@^4.5.0":
version "4.16.1" version "4.16.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.16.1.tgz#2caf6a79dd19c3853b8d39769a27fccb24e4e651" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.16.1.tgz#2caf6a79dd19c3853b8d39769a27fccb24e4e651"
@ -2003,6 +2017,18 @@
eslint-scope "^5.0.0" eslint-scope "^5.0.0"
eslint-utils "^2.0.0" eslint-utils "^2.0.0"
"@typescript-eslint/experimental-utils@4.17.0":
version "4.17.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.17.0.tgz#762c44aaa1a6a3c05b6d63a8648fb89b89f84c80"
integrity sha512-ZR2NIUbnIBj+LGqCFGQ9yk2EBQrpVVFOh9/Kd0Lm6gLpSAcCuLLe5lUCibKGCqyH9HPwYC0GIJce2O1i8VYmWA==
dependencies:
"@types/json-schema" "^7.0.3"
"@typescript-eslint/scope-manager" "4.17.0"
"@typescript-eslint/types" "4.17.0"
"@typescript-eslint/typescript-estree" "4.17.0"
eslint-scope "^5.0.0"
eslint-utils "^2.0.0"
"@typescript-eslint/experimental-utils@^3.10.1": "@typescript-eslint/experimental-utils@^3.10.1":
version "3.10.1" version "3.10.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz#e179ffc81a80ebcae2ea04e0332f8b251345a686" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz#e179ffc81a80ebcae2ea04e0332f8b251345a686"
@ -2014,6 +2040,16 @@
eslint-scope "^5.0.0" eslint-scope "^5.0.0"
eslint-utils "^2.0.0" eslint-utils "^2.0.0"
"@typescript-eslint/parser@^4.17.0":
version "4.17.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.17.0.tgz#141b647ffc72ebebcbf9b0fe6087f65b706d3215"
integrity sha512-KYdksiZQ0N1t+6qpnl6JeK9ycCFprS9xBAiIrw4gSphqONt8wydBw4BXJi3C11ywZmyHulvMaLjWsxDjUSDwAw==
dependencies:
"@typescript-eslint/scope-manager" "4.17.0"
"@typescript-eslint/types" "4.17.0"
"@typescript-eslint/typescript-estree" "4.17.0"
debug "^4.1.1"
"@typescript-eslint/parser@^4.5.0": "@typescript-eslint/parser@^4.5.0":
version "4.16.1" version "4.16.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.16.1.tgz#3bbd3234dd3c5b882b2bcd9899bc30e1e1586d2a" resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.16.1.tgz#3bbd3234dd3c5b882b2bcd9899bc30e1e1586d2a"
@ -2032,6 +2068,14 @@
"@typescript-eslint/types" "4.16.1" "@typescript-eslint/types" "4.16.1"
"@typescript-eslint/visitor-keys" "4.16.1" "@typescript-eslint/visitor-keys" "4.16.1"
"@typescript-eslint/scope-manager@4.17.0":
version "4.17.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.17.0.tgz#f4edf94eff3b52a863180f7f89581bf963e3d37d"
integrity sha512-OJ+CeTliuW+UZ9qgULrnGpPQ1bhrZNFpfT/Bc0pzNeyZwMik7/ykJ0JHnQ7krHanFN9wcnPK89pwn84cRUmYjw==
dependencies:
"@typescript-eslint/types" "4.17.0"
"@typescript-eslint/visitor-keys" "4.17.0"
"@typescript-eslint/types@3.10.1": "@typescript-eslint/types@3.10.1":
version "3.10.1" version "3.10.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
@ -2042,6 +2086,11 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.16.1.tgz#5ba2d3e38b1a67420d2487519e193163054d9c15" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.16.1.tgz#5ba2d3e38b1a67420d2487519e193163054d9c15"
integrity sha512-nnKqBwMgRlhzmJQF8tnFDZWfunXmJyuXj55xc8Kbfup4PbkzdoDXZvzN8//EiKR27J6vUSU8j4t37yUuYPiLqA== integrity sha512-nnKqBwMgRlhzmJQF8tnFDZWfunXmJyuXj55xc8Kbfup4PbkzdoDXZvzN8//EiKR27J6vUSU8j4t37yUuYPiLqA==
"@typescript-eslint/types@4.17.0":
version "4.17.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.17.0.tgz#f57d8fc7f31b348db946498a43050083d25f40ad"
integrity sha512-RN5z8qYpJ+kXwnLlyzZkiJwfW2AY458Bf8WqllkondQIcN2ZxQowAToGSd9BlAUZDB5Ea8I6mqL2quGYCLT+2g==
"@typescript-eslint/typescript-estree@3.10.1": "@typescript-eslint/typescript-estree@3.10.1":
version "3.10.1" version "3.10.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853"
@ -2069,6 +2118,19 @@
semver "^7.3.2" semver "^7.3.2"
tsutils "^3.17.1" tsutils "^3.17.1"
"@typescript-eslint/typescript-estree@4.17.0":
version "4.17.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.17.0.tgz#b835d152804f0972b80dbda92477f9070a72ded1"
integrity sha512-lRhSFIZKUEPPWpWfwuZBH9trYIEJSI0vYsrxbvVvNyIUDoKWaklOAelsSkeh3E2VBSZiNe9BZ4E5tYBZbUczVQ==
dependencies:
"@typescript-eslint/types" "4.17.0"
"@typescript-eslint/visitor-keys" "4.17.0"
debug "^4.1.1"
globby "^11.0.1"
is-glob "^4.0.1"
semver "^7.3.2"
tsutils "^3.17.1"
"@typescript-eslint/visitor-keys@3.10.1": "@typescript-eslint/visitor-keys@3.10.1":
version "3.10.1" version "3.10.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931"
@ -2084,6 +2146,14 @@
"@typescript-eslint/types" "4.16.1" "@typescript-eslint/types" "4.16.1"
eslint-visitor-keys "^2.0.0" eslint-visitor-keys "^2.0.0"
"@typescript-eslint/visitor-keys@4.17.0":
version "4.17.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.17.0.tgz#9c304cfd20287c14a31d573195a709111849b14d"
integrity sha512-WfuMN8mm5SSqXuAr9NM+fItJ0SVVphobWYkWOwQ1odsfC014Vdxk/92t4JwS1Q6fCA/ABfCKpa3AVtpUKTNKGQ==
dependencies:
"@typescript-eslint/types" "4.17.0"
eslint-visitor-keys "^2.0.0"
"@webassemblyjs/ast@1.9.0": "@webassemblyjs/ast@1.9.0":
version "1.9.0" version "1.9.0"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@ -2430,6 +2500,11 @@ argparse@^1.0.7:
dependencies: dependencies:
sprintf-js "~1.0.2" sprintf-js "~1.0.2"
argparse@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
aria-query@^4.2.2: aria-query@^4.2.2:
version "4.2.2" version "4.2.2"
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@ -4719,6 +4794,11 @@ escodegen@^1.14.1:
optionalDependencies: optionalDependencies:
source-map "~0.6.1" source-map "~0.6.1"
eslint-config-prettier@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.1.0.tgz#4ef1eaf97afe5176e6a75ddfb57c335121abc5a6"
integrity sha512-oKMhGv3ihGbCIimCAjqkdzx2Q+jthoqnXSP+d86M9tptwugycmTFdVR4IpLgq2c4SHifbwO90z2fQ8/Aio73yw==
eslint-config-react-app@^6.0.0: eslint-config-react-app@^6.0.0:
version "6.0.0" version "6.0.0"
resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e" resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e"
@ -4726,6 +4806,13 @@ eslint-config-react-app@^6.0.0:
dependencies: dependencies:
confusing-browser-globals "^1.0.10" confusing-browser-globals "^1.0.10"
eslint-formatter-gitlab@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/eslint-formatter-gitlab/-/eslint-formatter-gitlab-2.2.0.tgz#e91bf9e22d04ae54561bf84788ed509c32a26e01"
integrity sha512-iLQB4Fp8CFAB2PiHVGMx58Zukzx5ZiNZa8MUKWzEkYwohkv6ZoutMi1JQWG89x1I+26EsvleTMoF2QkZco/XKA==
dependencies:
js-yaml "^4.0.0"
eslint-import-resolver-node@^0.3.4: eslint-import-resolver-node@^0.3.4:
version "0.3.4" version "0.3.4"
resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717" resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
@ -4742,6 +4829,14 @@ eslint-module-utils@^2.6.0:
debug "^2.6.9" debug "^2.6.9"
pkg-dir "^2.0.0" pkg-dir "^2.0.0"
eslint-plugin-eslint-comments@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-eslint-comments/-/eslint-plugin-eslint-comments-3.2.0.tgz#9e1cd7b4413526abb313933071d7aba05ca12ffa"
integrity sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==
dependencies:
escape-string-regexp "^1.0.5"
ignore "^5.0.5"
eslint-plugin-flowtype@^5.2.0: eslint-plugin-flowtype@^5.2.0:
version "5.3.1" version "5.3.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.3.1.tgz#df6227e28c61d967b825c1327a27818bbb2ad325" resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.3.1.tgz#df6227e28c61d967b825c1327a27818bbb2ad325"
@ -4776,6 +4871,13 @@ eslint-plugin-jest@^24.1.0:
dependencies: dependencies:
"@typescript-eslint/experimental-utils" "^4.0.1" "@typescript-eslint/experimental-utils" "^4.0.1"
eslint-plugin-jest@^24.3.1:
version "24.3.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.3.1.tgz#c8df037847b83397940bef7fbc2cc168ab466bcc"
integrity sha512-RQt59rfMSHyvedImT72iaf8JcvCcR4P7Uq499dALtjY8mrCjbwWrFi1UceG4sid2wVIeDi+0tjxXZ8CZEVO7Zw==
dependencies:
"@typescript-eslint/experimental-utils" "^4.0.1"
eslint-plugin-jsx-a11y@^6.3.1: eslint-plugin-jsx-a11y@^6.3.1:
version "6.4.1" version "6.4.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd" resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
@ -4793,12 +4895,19 @@ eslint-plugin-jsx-a11y@^6.3.1:
jsx-ast-utils "^3.1.0" jsx-ast-utils "^3.1.0"
language-tags "^1.0.5" language-tags "^1.0.5"
eslint-plugin-prettier@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz#7079cfa2497078905011e6f82e8dd8453d1371b7"
integrity sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-plugin-react-hooks@^4.2.0: eslint-plugin-react-hooks@^4.2.0:
version "4.2.0" version "4.2.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ== integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
eslint-plugin-react@^7.21.5: eslint-plugin-react@^7.21.5, eslint-plugin-react@^7.22.0:
version "7.22.0" version "7.22.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.22.0.tgz#3d1c542d1d3169c45421c1215d9470e341707269" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.22.0.tgz#3d1c542d1d3169c45421c1215d9470e341707269"
integrity sha512-p30tuX3VS+NWv9nQot9xIGAHBXR0+xJVaZriEsHoJrASGCJZDJ8JLNM0YqKqI0AKm6Uxaa1VUHoNEibxRCMQHA== integrity sha512-p30tuX3VS+NWv9nQot9xIGAHBXR0+xJVaZriEsHoJrASGCJZDJ8JLNM0YqKqI0AKm6Uxaa1VUHoNEibxRCMQHA==
@ -4909,6 +5018,49 @@ eslint@^7.11.0:
text-table "^0.2.0" text-table "^0.2.0"
v8-compile-cache "^2.0.3" v8-compile-cache "^2.0.3"
eslint@^7.22.0:
version "7.22.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.22.0.tgz#07ecc61052fec63661a2cab6bd507127c07adc6f"
integrity sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==
dependencies:
"@babel/code-frame" "7.12.11"
"@eslint/eslintrc" "^0.4.0"
ajv "^6.10.0"
chalk "^4.0.0"
cross-spawn "^7.0.2"
debug "^4.0.1"
doctrine "^3.0.0"
enquirer "^2.3.5"
eslint-scope "^5.1.1"
eslint-utils "^2.1.0"
eslint-visitor-keys "^2.0.0"
espree "^7.3.1"
esquery "^1.4.0"
esutils "^2.0.2"
file-entry-cache "^6.0.1"
functional-red-black-tree "^1.0.1"
glob-parent "^5.0.0"
globals "^13.6.0"
ignore "^4.0.6"
import-fresh "^3.0.0"
imurmurhash "^0.1.4"
is-glob "^4.0.0"
js-yaml "^3.13.1"
json-stable-stringify-without-jsonify "^1.0.1"
levn "^0.4.1"
lodash "^4.17.21"
minimatch "^3.0.4"
natural-compare "^1.4.0"
optionator "^0.9.1"
progress "^2.0.0"
regexpp "^3.1.0"
semver "^7.2.1"
strip-ansi "^6.0.0"
strip-json-comments "^3.1.0"
table "^6.0.4"
text-table "^0.2.0"
v8-compile-cache "^2.0.3"
espree@^7.3.0, espree@^7.3.1: espree@^7.3.0, espree@^7.3.1:
version "7.3.1" version "7.3.1"
resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6" resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
@ -5147,6 +5299,11 @@ fast-deep-equal@^3.1.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-glob@^3.1.1: fast-glob@^3.1.1:
version "3.2.5" version "3.2.5"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
@ -5576,6 +5733,13 @@ globals@^12.1.0:
dependencies: dependencies:
type-fest "^0.8.1" type-fest "^0.8.1"
globals@^13.6.0:
version "13.6.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-13.6.0.tgz#d77138e53738567bb96a3916ff6f6b487af20ef7"
integrity sha512-YFKCX0SiPg7l5oKYCJ2zZGxcXprVXHcSnVuvzrT3oSENQonVLqM5pf9fN5dLGZGyCjhw8TN8Btwe/jKnZ0pjvQ==
dependencies:
type-fest "^0.20.2"
globby@11.0.1: globby@11.0.1:
version "11.0.1" version "11.0.1"
resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357" resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357"
@ -5991,7 +6155,7 @@ ignore@^4.0.6:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
ignore@^5.1.4: ignore@^5.0.5, ignore@^5.1.4:
version "5.1.8" version "5.1.8"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
@ -7013,6 +7177,13 @@ js-yaml@^3.13.1:
argparse "^1.0.7" argparse "^1.0.7"
esprima "^4.0.0" esprima "^4.0.0"
js-yaml@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.0.0.tgz#f426bc0ff4b4051926cd588c71113183409a121f"
integrity sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==
dependencies:
argparse "^2.0.1"
jsbn@~0.1.0: jsbn@~0.1.0:
version "0.1.1" version "0.1.1"
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513" resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@ -7363,7 +7534,7 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5: "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5:
version "4.17.21" version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -9202,6 +9373,23 @@ prepend-http@^1.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
prettier-config@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-config/-/prettier-config-1.0.0.tgz#f8eed3916369b81678acaa33dc0298147d1958c8"
integrity sha1-+O7TkWNpuBZ4rKoz3AKYFH0ZWMg=
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
prettier@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
pretty-bytes@^5.3.0: pretty-bytes@^5.3.0:
version "5.6.0" version "5.6.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@ -11280,6 +11468,11 @@ type-fest@^0.11.0:
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1" resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ== integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
type-fest@^0.20.2:
version "0.20.2"
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
type-fest@^0.3.1: type-fest@^0.3.1:
version "0.3.1" version "0.3.1"
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1" resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"