+ const classnn = style.sideinfogeometry + ' ' + (this.props.hiddenFrame === undefined ? style.sideinfo + ' ' + themeStyle.secbackground : '');
+
+ return (
{this.props.children}
);
}
@@ -18,7 +25,7 @@ class SideBar extends React.Component {
* The title of the sidebar
*/
export class SideBarTitle extends React.Component {
- render() {
+ render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
{this.props.children}
@@ -30,7 +37,7 @@ export class SideBarTitle extends React.Component {
* An item of the sidebar
*/
export class SideBarItem extends React.Component {
- render() {
+ render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
this.TagClick()}
- data-testid='Test-Tag'>{this.props.children}
- );
- }
-
- /**
- * click handling for a Tag
- */
- TagClick() {
- const tag = this.props.children.toString().toLowerCase();
-
- if (this.props.onclick) {
- this.props.onclick(tag);
- return;
- }
-
- // call callback functin to switch to category page with specified tag
- GlobalInfos.getViewBinding().changeRootElement(
-
);
- }
-}
-
-export default Tag;
diff --git a/src/elements/Tag/Tag.test.js b/src/elements/Tag/Tag.test.js
index 7717484..6960592 100644
--- a/src/elements/Tag/Tag.test.js
+++ b/src/elements/Tag/Tag.test.js
@@ -6,33 +6,20 @@ import {shallow} from 'enzyme';
describe('', function () {
it('renders without crashing ', function () {
- const wrapper = shallow(test);
+ const wrapper = shallow();
wrapper.unmount();
});
it('renders childs correctly', function () {
- const wrapper = shallow(test);
+ const wrapper = shallow();
expect(wrapper.children().text()).toBe('test');
});
- it('click event triggered and setvideo callback called', function () {
- global.fetch = prepareFetchApi({});
- const func = jest.fn();
- prepareViewBinding(func);
-
- const wrapper = shallow(test);
-
- expect(func).toBeCalledTimes(0);
-
- wrapper.simulate('click');
-
- expect(func).toBeCalledTimes(1);
- });
-
it('test custom onclick function', function () {
const func = jest.fn();
const wrapper = shallow( {func();}}>test);
expect(func).toBeCalledTimes(0);
diff --git a/src/elements/Tag/Tag.tsx b/src/elements/Tag/Tag.tsx
new file mode 100644
index 0000000..de744ca
--- /dev/null
+++ b/src/elements/Tag/Tag.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import styles from './Tag.module.css';
+import {Link} from 'react-router-dom';
+import {TagType} from '../../api/VideoTypes';
+
+interface props {
+ onclick?: (_: string) => void
+ tagInfo: TagType
+}
+
+/**
+ * A Component representing a single Category tag
+ */
+class Tag extends React.Component {
+ render(): JSX.Element {
+ if (this.props.onclick) {
+ return this.renderButton();
+ } else {
+ return (
+
+ {this.renderButton()}
+
+ );
+ }
+ }
+
+ renderButton(): JSX.Element {
+ return (
+
+ );
+ }
+
+ /**
+ * click handling for a Tag
+ */
+ TagClick(): void {
+ if (this.props.onclick) {
+ // call custom onclick handling
+ this.props.onclick(this.props.tagInfo.tag_name); // todo check if param is neccessary
+ return;
+ }
+ }
+}
+
+export default Tag;
diff --git a/src/elements/VideoContainer/VideoContainer.js b/src/elements/VideoContainer/VideoContainer.tsx
similarity index 75%
rename from src/elements/VideoContainer/VideoContainer.js
rename to src/elements/VideoContainer/VideoContainer.tsx
index cb9ee52..1ec22d6 100644
--- a/src/elements/VideoContainer/VideoContainer.js
+++ b/src/elements/VideoContainer/VideoContainer.tsx
@@ -1,33 +1,41 @@
import React from 'react';
import Preview from '../Preview/Preview';
import style from './VideoContainer.module.css';
+import {VideoUnloadedType} from '../../api/VideoTypes';
+
+interface props {
+ data: VideoUnloadedType[]
+}
+
+interface state {
+ loadeditems: VideoUnloadedType[];
+ selectionnr: number;
+}
/**
* A videocontainer storing lots of Preview elements
* includes scroll handling and loading of preview infos
*/
-class VideoContainer extends React.Component {
+class VideoContainer extends React.Component {
// stores current index of loaded elements
- loadindex = 0;
+ loadindex: number = 0;
- constructor(props, context) {
- super(props, context);
-
- this.data = props.data;
+ constructor(props: props) {
+ super(props);
this.state = {
loadeditems: [],
- selectionnr: null
+ selectionnr: 0
};
}
- componentDidMount() {
+ componentDidMount(): void {
document.addEventListener('scroll', this.trackScrolling);
this.loadPreviewBlock(16);
}
- render() {
+ render(): JSX.Element {
return (
{this.state.loadeditems.map(elem => (
@@ -44,7 +52,7 @@ class VideoContainer extends React.Component {
);
}
- componentWillUnmount() {
+ componentWillUnmount(): void {
this.setState({});
// unbind scroll listener when unmounting component
document.removeEventListener('scroll', this.trackScrolling);
@@ -54,13 +62,13 @@ class VideoContainer extends React.Component {
* load previews to the container
* @param nr number of previews to load
*/
- loadPreviewBlock(nr) {
+ loadPreviewBlock(nr: number): void {
console.log('loadpreviewblock called ...');
let ret = [];
for (let i = 0; i < nr; i++) {
// only add if not end
- if (this.data.length > this.loadindex + i) {
- ret.push(this.data[this.loadindex + i]);
+ if (this.props.data.length > this.loadindex + i) {
+ ret.push(this.props.data[this.loadindex + i]);
}
}
@@ -78,7 +86,7 @@ class VideoContainer extends React.Component {
/**
* scroll event handler -> load new previews if on bottom
*/
- trackScrolling = () => {
+ trackScrolling = (): void => {
// comparison if current scroll position is on bottom --> 200 is bottom offset to trigger load
if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
this.loadPreviewBlock(8);
diff --git a/src/index.js b/src/index.js
index 17544dd..219b67b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
import App from './App';
// don't allow console logs within production env
-global.console.log = process.env.NODE_ENV !== "development" ? (s) => {} : global.console.log;
+global.console.log = process.env.NODE_ENV !== 'development' ? (s) => {} : global.console.log;
ReactDOM.render(
diff --git a/src/pages/ActorOverviewPage/ActorOverviewPage.module.css b/src/pages/ActorOverviewPage/ActorOverviewPage.module.css
new file mode 100644
index 0000000..df976c8
--- /dev/null
+++ b/src/pages/ActorOverviewPage/ActorOverviewPage.module.css
@@ -0,0 +1,6 @@
+.container {
+ float: left;
+ margin-right: 20px;
+ padding-left: 20px;
+ width: 70%;
+}
diff --git a/src/pages/ActorOverviewPage/ActorOverviewPage.test.js b/src/pages/ActorOverviewPage/ActorOverviewPage.test.js
new file mode 100644
index 0000000..4aa8886
--- /dev/null
+++ b/src/pages/ActorOverviewPage/ActorOverviewPage.test.js
@@ -0,0 +1,43 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import ActorOverviewPage from './ActorOverviewPage';
+
+describe('', function () {
+ it('renders without crashing ', function () {
+ const wrapper = shallow();
+ wrapper.unmount();
+ });
+
+ it('test inerstion of actor tiles', function () {
+ const wrapper = shallow();
+
+ wrapper.setState({
+ actors: [{
+ thumbnail: '',
+ name: 'testname',
+ actor_id: 42
+ }]
+ });
+
+ expect(wrapper.find('ActorTile')).toHaveLength(1);
+ });
+
+ it('test newtagpopup visibility', function () {
+ const wrapper = shallow();
+
+ expect(wrapper.find('NewActorPopup')).toHaveLength(0);
+
+ wrapper.find('SideBar').find('Button').simulate('click');
+
+ expect(wrapper.find('NewActorPopup')).toHaveLength(1);
+ });
+
+ it('test popup hiding', function () {
+ const wrapper = shallow();
+ wrapper.setState({NActorPopupVisible: true});
+
+ wrapper.find('NewActorPopup').props().onHide();
+
+ expect(wrapper.find('NewActorPopup')).toHaveLength(0);
+ });
+});
diff --git a/src/pages/ActorOverviewPage/ActorOverviewPage.tsx b/src/pages/ActorOverviewPage/ActorOverviewPage.tsx
new file mode 100644
index 0000000..6fd9be6
--- /dev/null
+++ b/src/pages/ActorOverviewPage/ActorOverviewPage.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {callAPI} from '../../utils/Api';
+import {ActorType} from '../../api/VideoTypes';
+import ActorTile from '../../elements/ActorTile/ActorTile';
+import PageTitle from '../../elements/PageTitle/PageTitle';
+import SideBar from '../../elements/SideBar/SideBar';
+import style from './ActorOverviewPage.module.css';
+import {Button} from '../../elements/GPElements/Button';
+import NewActorPopup from '../../elements/Popups/NewActorPopup/NewActorPopup';
+
+interface props {
+}
+
+interface state {
+ actors: ActorType[];
+ NActorPopupVisible: boolean
+}
+
+class ActorOverviewPage extends React.Component {
+ constructor(props: props) {
+ super(props);
+
+ this.state = {
+ actors: [],
+ NActorPopupVisible: false
+ };
+
+ this.fetchAvailableActors();
+ }
+
+ render(): JSX.Element {
+ return (
+ <>
+
+
+
+
+ {this.state.actors.map((el) => (
))}
+
-
-
- Attention: This is an early preview!
-
- {this.state.data ?
- :
- No Data found!
}
-
- );
- }
-
- componentDidMount() {
- this.getActorInfo();
- }
-
- /**
- * request more actor info from backend
- */
- getActorInfo() {
- // todo 2020-12-4: fetch to db
- callAPI('actor.php', {action: 'getActorInfo', actorid: this.props.actor.actor_id}, result => {
- console.log(result);
- this.setState({data: result.videos ? result.videos : []});
- });
- }
-}
-
-export default ActorPage;
diff --git a/src/pages/ActorPage/ActorPage.module.css b/src/pages/ActorPage/ActorPage.module.css
index 4923c46..88b85f1 100644
--- a/src/pages/ActorPage/ActorPage.module.css
+++ b/src/pages/ActorPage/ActorPage.module.css
@@ -1,4 +1,9 @@
.pic {
- text-align: center;
margin-bottom: 25px;
+ text-align: center;
+}
+
+.overviewbutton {
+ float: right;
+ margin-top: 25px;
}
diff --git a/src/pages/ActorPage/ActorPage.test.js b/src/pages/ActorPage/ActorPage.test.js
index e665cbf..0407977 100644
--- a/src/pages/ActorPage/ActorPage.test.js
+++ b/src/pages/ActorPage/ActorPage.test.js
@@ -1,12 +1,27 @@
import {shallow} from 'enzyme';
import React from 'react';
-import ActorPage from './ActorPage';
+import {ActorPage} from './ActorPage';
describe('', function () {
it('renders without crashing ', function () {
- const wrapper = shallow();
+ const wrapper = shallow();
wrapper.unmount();
});
+ it('fetch infos', function () {
+ callAPIMock({
+ videos: [{
+ movie_id: 0,
+ movie_name: 'test'
+ }], info: {
+ thumbnail: '',
+ name: '',
+ actor_id: 0
+ }
+ });
+ const wrapper = shallow();
+
+ expect(wrapper.find('VideoContainer')).toHaveLength(1);
+ });
});
diff --git a/src/pages/ActorPage/ActorPage.tsx b/src/pages/ActorPage/ActorPage.tsx
new file mode 100644
index 0000000..4a5ca31
--- /dev/null
+++ b/src/pages/ActorPage/ActorPage.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import PageTitle from '../../elements/PageTitle/PageTitle';
+import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faUser} from '@fortawesome/free-solid-svg-icons';
+import style from './ActorPage.module.css';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
+import {callAPI} from '../../utils/Api';
+import {ActorType, VideoUnloadedType} from '../../api/VideoTypes';
+import {Link, withRouter} from 'react-router-dom';
+import {RouteComponentProps} from 'react-router';
+import {Button} from '../../elements/GPElements/Button';
+
+interface state {
+ data: VideoUnloadedType[],
+ actor: ActorType
+}
+
+/**
+ * empty default props with id in url
+ */
+interface props extends RouteComponentProps<{ id: string }> {
+}
+
+/**
+ * result of actor fetch
+ */
+interface videofetchresult {
+ videos: VideoUnloadedType[];
+ info: ActorType;
+}
+
+/**
+ * info page about a specific actor and a list of all its videos
+ */
+export class ActorPage extends React.Component {
+ constructor(props: props) {
+ super(props);
+
+ this.state = {data: [], actor: {actor_id: 0, name: '', thumbnail: ''}};
+ }
+
+ render(): JSX.Element {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ Attention: This is an early preview!
+
+ {this.state.data.length !== 0 ?
+ :
+ No Data found!
}
+
+ );
+ }
+
+ componentDidMount(): void {
+ this.getActorInfo();
+ }
+
+ /**
+ * request more actor info from backend
+ */
+ getActorInfo(): void {
+ callAPI('actor.php', {
+ action: 'getActorInfo',
+ actorid: this.props.match.params.id
+ }, (result: videofetchresult) => {
+ this.setState({
+ data: result.videos ? result.videos : [],
+ actor: result.info
+ });
+ });
+ }
+}
+
+export default withRouter(ActorPage);
diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js
deleted file mode 100644
index 52b135c..0000000
--- a/src/pages/CategoryPage/CategoryPage.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react';
-import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
-import Tag from '../../elements/Tag/Tag';
-import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
-
-import {TagPreview} from '../../elements/Preview/Preview';
-import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
-import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
-import VideoContainer from '../../elements/VideoContainer/VideoContainer';
-import {callAPI} from '../../utils/Api';
-
-/**
- * Component for Category Page
- * Contains a Tag Overview and loads specific Tag videos in VideoContainer
- */
-class CategoryPage extends React.Component {
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- loadedtags: [],
- selected: null
- };
- }
-
- componentDidMount() {
- // check if predefined category is set
- if (this.props.category) {
- this.fetchVideoData(this.props.category);
- } else {
- this.loadTags();
- }
- }
-
- /**
- * render the Title and SideBar component for the Category page
- * @returns {JSX.Element} corresponding jsx element for Title and Sidebar
- */
- renderSideBarATitle() {
- return (
- <>
-
-
-
- Default Tags:
- {this.loadTag(tag);}}>All
- {this.loadTag(tag);}}>FullHd
- {this.loadTag(tag);}}>LowQuality
- {this.loadTag(tag);}}>HD
-
-
-
- );
- }
-
- render() {
- return (
- <>
- {this.renderSideBarATitle()}
-
- {this.state.selected ?
- <>
- {this.videodata ?
- : null}
-
- :
-
- {this.state.loadedtags ?
- this.state.loadedtags.map((m) => (
-
- )) :
- 'loading'}
-
- }
-
- {this.state.popupvisible ?
- {
- console.error("setstatecalled!");
- this.setState({popupvisible: false});
- this.loadTags();
- }}/> :
- null
- }
-
-
- );
- }
-
- /**
- * load a specific tag into a new previewcontainer
- * @param tagname
- */
- loadTag = (tagname) => {
- this.fetchVideoData(tagname);
- };
-
- /**
- * fetch data for a specific tag from backend
- * @param tag tagname
- */
- fetchVideoData(tag) {
- callAPI('video.php', {action: 'getMovies', tag: tag}, result => {
- this.videodata = result;
- this.setState({selected: null}); // needed to trigger the state reload correctly
- this.setState({selected: tag});
- });
- }
-
- /**
- * go back to the default category overview
- */
- loadCategoryPageDefault = () => {
- this.setState({selected: null});
- this.loadTags();
- };
-
- /**
- * load all available tags from db.
- */
- loadTags() {
- callAPI('tags.php', {action: 'getAllTags'}, result => {
- this.setState({loadedtags: result});
- });
- }
-}
-
-export default CategoryPage;
diff --git a/src/pages/CategoryPage/CategoryPage.test.js b/src/pages/CategoryPage/CategoryPage.test.js
index f559756..8286afe 100644
--- a/src/pages/CategoryPage/CategoryPage.test.js
+++ b/src/pages/CategoryPage/CategoryPage.test.js
@@ -1,4 +1,4 @@
-import {mount, shallow} from 'enzyme';
+import {shallow} from 'enzyme';
import React from 'react';
import CategoryPage from './CategoryPage';
@@ -8,22 +8,6 @@ describe('', function () {
wrapper.unmount();
});
- it('test tag fetch call', done => {
- global.fetch = global.prepareFetchApi(['first', 'second']);
-
- const wrapper = shallow();
-
- expect(global.fetch).toHaveBeenCalledTimes(1);
-
- process.nextTick(() => {
- //callback to close window should have called
- expect(wrapper.state().loadedtags.length).toBe(2);
-
- global.fetch.mockClear();
- done();
- });
- });
-
it('test new tag popup', function () {
const wrapper = shallow();
@@ -33,63 +17,31 @@ describe('', function () {
expect(wrapper.find('NewTagPopup')).toHaveLength(1);
});
- it('test setpage callback', done => {
- global.fetch = global.prepareFetchApi([{}, {}]);
-
+ it('test add popup', function () {
const wrapper = shallow();
- wrapper.setState({
- loadedtags: [
- {
- tag_name: 'testname',
- tag_id: 42
- }
- ]
- });
-
- wrapper.find('TagPreview').dive().find('div').first().simulate('click');
-
- process.nextTick(() => {
- // expect callback to have loaded correct tag
- expect(wrapper.state().selected).toBe('testname');
-
- global.fetch.mockClear();
- done();
- });
+ expect(wrapper.find('NewTagPopup')).toHaveLength(0);
+ wrapper.setState({popupvisible: true});
+ expect(wrapper.find('NewTagPopup')).toHaveLength(1);
});
- it('test back to category view callback', function () {
+ it('test hiding of popup', function () {
+ const wrapper = shallow();
+ wrapper.setState({popupvisible: true});
+
+ wrapper.find('NewTagPopup').props().onHide();
+
+ expect(wrapper.find('NewTagPopup')).toHaveLength(0);
+ });
+
+ it('test setting of subtitle', function () {
const wrapper = shallow();
- wrapper.setState({
- selected: 'test'
- });
- expect(wrapper.state().selected).not.toBeNull();
- wrapper.find('[data-testid="backbtn"]').simulate('click');
- expect(wrapper.state().selected).toBeNull();
- });
+ expect(wrapper.find('PageTitle').props().subtitle).not.toBe('testtitle');
- it('load categorypage with predefined tag', function () {
- const func = jest.fn();
- CategoryPage.prototype.fetchVideoData = func;
-
- shallow();
-
- expect(func).toBeCalledTimes(1);
- });
-
- it('test sidebar tag clicks', function () {
- const func = jest.fn();
-
- const wrapper = shallow();
- wrapper.instance().loadTag = func;
-
- expect(func).toBeCalledTimes(0);
- wrapper.find('SideBar').find('Tag').forEach(e => {
- e.dive().simulate('click');
- });
-
- expect(func).toBeCalledTimes(4);
+ wrapper.instance().setSubTitle('testtitle');
+ // test if prop of title is set correctly
+ expect(wrapper.find('PageTitle').props().subtitle).toBe('testtitle');
});
});
diff --git a/src/pages/CategoryPage/CategoryPage.tsx b/src/pages/CategoryPage/CategoryPage.tsx
new file mode 100644
index 0000000..37b7a83
--- /dev/null
+++ b/src/pages/CategoryPage/CategoryPage.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import SideBar, {SideBarTitle} from '../../elements/SideBar/SideBar';
+import Tag from '../../elements/Tag/Tag';
+import NewTagPopup from '../../elements/Popups/NewTagPopup/NewTagPopup';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
+import {Route, Switch} from 'react-router-dom';
+import {DefaultTags} from '../../api/GeneralTypes';
+import {CategoryViewWR} from './CategoryView';
+import TagView from './TagView';
+
+
+interface CategoryPageState {
+ popupvisible: boolean;
+ subtitle: string;
+}
+
+/**
+ * Component for Category Page
+ * Contains a Tag Overview and loads specific Tag videos in VideoContainer
+ */
+class CategoryPage extends React.Component<{}, CategoryPageState> {
+ constructor(props: {}) {
+ super(props);
+
+ this.state = {
+ popupvisible: false,
+ subtitle: ''
+ };
+
+ this.setSubTitle = this.setSubTitle.bind(this);
+ }
+
+ render(): JSX.Element {
+ return (
+ <>
+
+
+
+ Default Tags:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {this.state.popupvisible ?
+ {
+ this.setState({popupvisible: false});
+ // this.loadTags();
+ }}/> :
+ null
+ }
+
+ );
+ }
+
+ /**
+ * set the subtitle of this page
+ * @param subtitle string as subtitle
+ */
+ setSubTitle(subtitle: string): void {
+ this.setState({subtitle: subtitle});
+ }
+}
+
+export default CategoryPage;
diff --git a/src/pages/CategoryPage/CategoryView.test.js b/src/pages/CategoryPage/CategoryView.test.js
new file mode 100644
index 0000000..57fe75b
--- /dev/null
+++ b/src/pages/CategoryPage/CategoryView.test.js
@@ -0,0 +1,24 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import {CategoryView} from './CategoryView';
+
+describe('', function () {
+ function instance() {
+ return shallow();
+ }
+
+ it('renders without crashing ', function () {
+ const wrapper = instance();
+ wrapper.unmount();
+ });
+
+ it('test backbutton', function () {
+ const wrapper = instance();
+ const func = jest.fn();
+ wrapper.setProps({history: {push: func}});
+
+ expect(func).toHaveBeenCalledTimes(0);
+ wrapper.find('button').simulate('click');
+ expect(func).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/pages/CategoryPage/CategoryView.tsx b/src/pages/CategoryPage/CategoryView.tsx
new file mode 100644
index 0000000..0288730
--- /dev/null
+++ b/src/pages/CategoryPage/CategoryView.tsx
@@ -0,0 +1,75 @@
+import {RouteComponentProps} from 'react-router';
+import React from 'react';
+import {VideoUnloadedType} from '../../api/VideoTypes';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
+import {callAPI} from '../../utils/Api';
+import {withRouter} from 'react-router-dom';
+
+interface CategoryViewProps extends RouteComponentProps<{ id: string }> {
+ setSubTitle: (title: string) => void
+}
+
+interface CategoryViewState {
+ loaded: boolean
+}
+
+/**
+ * plain class (for unit testing only)
+ */
+export class CategoryView extends React.Component {
+ private videodata: VideoUnloadedType[] = [];
+
+ constructor(props: CategoryViewProps) {
+ super(props);
+
+ this.state = {
+ loaded: false
+ };
+ }
+
+ componentDidMount(): void {
+ this.fetchVideoData(parseInt(this.props.match.params.id));
+ }
+
+ componentDidUpdate(prevProps: Readonly, prevState: Readonly): void {
+ // trigger video refresh if id changed
+ if (prevProps.match.params.id !== this.props.match.params.id) {
+ this.setState({loaded: false});
+ this.fetchVideoData(parseInt(this.props.match.params.id));
+ }
+ }
+
+ render(): JSX.Element {
+ return (
+ <>
+ {this.state.loaded ?
+ : null}
+
+
+
+ );
+ }
+
+ /**
+ * fetch data for a specific tag from backend
+ * @param id tagid
+ */
+ fetchVideoData(id: number): void {
+ callAPI('video.php', {action: 'getMovies', tag: id}, result => {
+ this.videodata = result;
+ this.setState({loaded: true});
+ this.props.setSubTitle(this.videodata.length + ' Videos');
+ });
+ }
+
+}
+
+/**
+ * export with react Router wrapped (default use)
+ */
+export const CategoryViewWR = withRouter(CategoryView);
diff --git a/src/pages/CategoryPage/TagView.test.js b/src/pages/CategoryPage/TagView.test.js
new file mode 100644
index 0000000..0d2e1a6
--- /dev/null
+++ b/src/pages/CategoryPage/TagView.test.js
@@ -0,0 +1,17 @@
+import {shallow} from 'enzyme';
+import React from 'react';
+import TagView from './TagView';
+
+describe('', function () {
+ it('renders without crashing ', function () {
+ const wrapper = shallow();
+ wrapper.unmount();
+ });
+
+ it('test Tag insertion', function () {
+ const wrapper = shallow();
+ wrapper.setState({loadedtags: [{tag_name: 'test', tag_id: 42}]});
+
+ expect(wrapper.find('TagPreview')).toHaveLength(1);
+ });
+});
diff --git a/src/pages/CategoryPage/TagView.tsx b/src/pages/CategoryPage/TagView.tsx
new file mode 100644
index 0000000..0031653
--- /dev/null
+++ b/src/pages/CategoryPage/TagView.tsx
@@ -0,0 +1,55 @@
+import {TagType} from '../../api/VideoTypes';
+import React from 'react';
+import videocontainerstyle from '../../elements/VideoContainer/VideoContainer.module.css';
+import {Link} from 'react-router-dom';
+import {TagPreview} from '../../elements/Preview/Preview';
+import {callAPI} from '../../utils/Api';
+
+interface TagViewState {
+ loadedtags: TagType[];
+}
+
+interface props {
+ setSubTitle: (title: string) => void
+}
+
+class TagView extends React.Component {
+ constructor(props: props) {
+ super(props);
+
+ this.state = {loadedtags: []};
+ }
+
+ componentDidMount(): void {
+ this.loadTags();
+ }
+
+ render(): JSX.Element {
+ return (
+ <>
+
+ {this.state.loadedtags ?
+ this.state.loadedtags.map((m) => (
+
+ )) :
+ 'loading'}
+
+
+ );
+ }
+
+ /**
+ * load all available tags from db.
+ */
+ loadTags(): void {
+ callAPI('tags.php', {action: 'getAllTags'}, result => {
+ this.setState({loadedtags: result});
+ this.props.setSubTitle(result.length + ' different Tags');
+ });
+ }
+}
+
+export default TagView;
diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
deleted file mode 100644
index f700824..0000000
--- a/src/pages/HomePage/HomePage.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React from 'react';
-import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
-import Tag from '../../elements/Tag/Tag';
-import VideoContainer from '../../elements/VideoContainer/VideoContainer';
-
-import style from './HomePage.module.css';
-import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
-import {callAPI} from '../../utils/Api';
-
-/**
- * The home page component showing on the initial pageload
- */
-class HomePage extends React.Component {
- /** keyword variable needed temporary store search keyword */
- keyword = '';
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- sideinfo: {
- videonr: null,
- fullhdvideonr: null,
- hdvideonr: null,
- sdvideonr: null,
- tagnr: null
- },
- subtitle: 'All Videos',
- data: [],
- selectionnr: 0
- };
- }
-
- componentDidMount() {
- // initial get of all videos
- this.fetchVideoData('All');
- this.fetchStartData();
- }
-
- /**
- * fetch available videos for specified tag
- * this function clears all preview elements an reloads gravity with tag
- *
- * @param tag tag to fetch videos
- */
- fetchVideoData(tag) {
- callAPI('video.php', {action: 'getMovies', tag: tag}, (result) => {
- this.setState({
- data: []
- });
- this.setState({
- data: result,
- selectionnr: result.length,
- tag: tag + ' Videos'
- });
- });
- }
-
- /**
- * fetch the necessary data for left info box
- */
- fetchStartData() {
- callAPI('video.php', {action: 'getStartData'}, (result) => {
- this.setState({
- sideinfo: {
- videonr: result['total'],
- fullhdvideonr: result['fullhd'],
- hdvideonr: result['hd'],
- sdvideonr: result['sd'],
- tagnr: result['tags']
- }
- });
- });
- }
-
- /**
- * search for a keyword in db and update previews
- *
- * @param keyword The keyword to search for
- */
- searchVideos(keyword) {
- console.log('search called');
-
- callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result) => {
- this.setState({
- data: []
- });
- this.setState({
- data: result,
- selectionnr: result.length,
- tag: 'Search result: ' + keyword
- });
- });
- }
-
- render() {
- return (
- <>
-
-
-
-
- Infos:
-
- {this.state.sideinfo.videonr} Videos Total!
- {this.state.sideinfo.fullhdvideonr} FULL-HD Videos!
- {this.state.sideinfo.hdvideonr} HD Videos!
- {this.state.sideinfo.sdvideonr} SD Videos!
- {this.state.sideinfo.tagnr} different Tags!
-
- Default Tags:
- this.fetchVideoData('All')}>All
- this.fetchVideoData('FullHd')}>FullHd
- this.fetchVideoData('LowQuality')}>LowQuality
- this.fetchVideoData('HD')}>HD
-
- {this.state.data.length !== 0 ?
- :
- No Data found!
}
-
-
-
-
-
- );
- }
-}
-
-export default HomePage;
diff --git a/src/pages/HomePage/HomePage.test.js b/src/pages/HomePage/HomePage.test.js
index e4a1554..aa279fa 100644
--- a/src/pages/HomePage/HomePage.test.js
+++ b/src/pages/HomePage/HomePage.test.js
@@ -1,7 +1,8 @@
import {shallow} from 'enzyme';
import React from 'react';
-import HomePage from './HomePage';
+import {HomePage} from './HomePage';
import VideoContainer from '../../elements/VideoContainer/VideoContainer';
+import {SearchHandling} from './SearchHandling';
describe('', function () {
it('renders without crashing ', function () {
@@ -54,23 +55,15 @@ describe('', function () {
});
});
- it('test form submit', done => {
- global.fetch = global.prepareFetchApi([{}, {}]);
-
+ it('test form submit', () => {
+ const func = jest.fn();
const wrapper = shallow();
+ wrapper.setProps({history: {push: () => func()}});
const fakeEvent = {preventDefault: () => console.log('preventDefault')};
wrapper.find('.searchform').simulate('submit', fakeEvent);
- expect(wrapper.state().selectionnr).toBe(0);
-
- process.nextTick(() => {
- // state to be set correctly with response
- expect(wrapper.state().selectionnr).toBe(2);
-
- global.fetch.mockClear();
- done();
- });
+ expect(func).toHaveBeenCalledTimes(1);
});
it('test no backend connection behaviour', done => {
@@ -123,3 +116,24 @@ describe('', function () {
testBtn(tags.first());
});
});
+
+describe('', () => {
+ it('renders without crashing', function () {
+ const wrapper = shallow();
+ wrapper.unmount();
+ });
+
+ it('renders videos correctly into container', function () {
+ const wrapper = shallow();
+
+ wrapper.setState({
+ data: [{
+ movie_id: 42,
+ movie_name: 'testname'
+ }]
+ });
+
+ // expect video container to be visible
+ expect(wrapper.find('VideoContainer')).toHaveLength(1);
+ });
+});
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 0000000..575c01e
--- /dev/null
+++ b/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
+import Tag from '../../elements/Tag/Tag';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
+
+import style from './HomePage.module.css';
+import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
+import {callAPI} from '../../utils/Api';
+import {Route, Switch, withRouter} from 'react-router-dom';
+import {VideoUnloadedType} from '../../api/VideoTypes';
+import {RouteComponentProps} from 'react-router';
+import SearchHandling from './SearchHandling';
+
+interface props extends RouteComponentProps {}
+
+interface state {
+ sideinfo: {
+ videonr: number,
+ fullhdvideonr: number,
+ hdvideonr: number,
+ sdvideonr: number,
+ tagnr: number
+ },
+ subtitle: string,
+ data: VideoUnloadedType[],
+ selectionnr: number
+}
+
+interface startDataData {
+ total: number;
+ fullhd: number;
+ hd: number;
+ sd: number;
+ tags: number;
+}
+
+/**
+ * The home page component showing on the initial pageload
+ */
+export class HomePage extends React.Component {
+ /** keyword variable needed temporary store search keyword */
+ keyword = '';
+
+ constructor(props: props) {
+ super(props);
+
+ this.state = {
+ sideinfo: {
+ videonr: 0,
+ fullhdvideonr: 0,
+ hdvideonr: 0,
+ sdvideonr: 0,
+ tagnr: 0
+ },
+ subtitle: 'All Videos',
+ data: [],
+ selectionnr: 0
+ };
+ }
+
+ componentDidMount(): void {
+ // initial get of all videos
+ this.fetchVideoData('All');
+ this.fetchStartData();
+ }
+
+ /**
+ * fetch available videos for specified tag
+ * this function clears all preview elements an reloads gravity with tag
+ *
+ * @param tag tag to fetch videos
+ */
+ fetchVideoData(tag: string): void {
+ callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoUnloadedType[]) => {
+ this.setState({
+ data: []
+ });
+ this.setState({
+ data: result,
+ selectionnr: result.length,
+ subtitle: `${tag} Videos`
+ });
+ });
+ }
+
+ /**
+ * fetch the necessary data for left info box
+ */
+ fetchStartData(): void {
+ callAPI('video.php', {action: 'getStartData'}, (result: startDataData) => {
+ this.setState({
+ sideinfo: {
+ videonr: result['total'],
+ fullhdvideonr: result['fullhd'],
+ hdvideonr: result['hd'],
+ sdvideonr: result['sd'],
+ tagnr: result['tags']
+ }
+ });
+ });
+ }
+
+
+ render(): JSX.Element {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ Infos:
+
+ {this.state.sideinfo.videonr} Videos Total!
+ {this.state.sideinfo.fullhdvideonr} FULL-HD Videos!
+ {this.state.sideinfo.hdvideonr} HD Videos!
+ {this.state.sideinfo.sdvideonr} SD Videos!
+ {this.state.sideinfo.tagnr} different Tags!
+
+ Default Tags:
+ this.fetchVideoData('All')}/>
+ this.fetchVideoData('FullHd')}/>
+ this.fetchVideoData('LowQuality')}/>
+ this.fetchVideoData('HD')}/>
+
+ {this.state.data.length !== 0 ?
+ :
+ No Data found!
}
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withRouter(HomePage);
diff --git a/src/pages/HomePage/SearchHandling.tsx b/src/pages/HomePage/SearchHandling.tsx
new file mode 100644
index 0000000..788e69a
--- /dev/null
+++ b/src/pages/HomePage/SearchHandling.tsx
@@ -0,0 +1,70 @@
+import {RouteComponentProps} from 'react-router';
+import React from 'react';
+import {withRouter} from 'react-router-dom';
+import {callAPI} from '../../utils/Api';
+import {VideoUnloadedType} from '../../api/VideoTypes';
+import VideoContainer from '../../elements/VideoContainer/VideoContainer';
+import PageTitle from '../../elements/PageTitle/PageTitle';
+import SideBar from '../../elements/SideBar/SideBar';
+
+interface params {
+ name: string;
+}
+
+interface props extends RouteComponentProps {}
+
+interface state {
+ data: VideoUnloadedType[];
+}
+
+export class SearchHandling extends React.Component {
+ constructor(props: props) {
+ super(props);
+
+ this.state = {
+ data: []
+ };
+ }
+
+ componentDidMount(): void {
+ this.searchVideos(this.props.match.params.name);
+ }
+
+ render(): JSX.Element {
+ return (
+ <>
+
+
+ {this.getVideoData()}
+
+ );
+ }
+
+ /**
+ * get videocontainer if data loaded
+ */
+ getVideoData(): JSX.Element {
+ if (this.state.data.length !== 0) {
+ return (
+
+ );
+ } else {
+ return (No Data found!
);
+ }
+ }
+
+ /**
+ * search for a keyword in db and update previews
+ *
+ * @param keyword The keyword to search for
+ */
+ searchVideos(keyword: string): void {
+ callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoUnloadedType[]) => {
+ this.setState({
+ data: result
+ });
+ });
+ }
+}
+
+export default withRouter(SearchHandling);
diff --git a/src/pages/Player/Player.module.css b/src/pages/Player/Player.module.css
index 36b5bd0..ae2bc08 100644
--- a/src/pages/Player/Player.module.css
+++ b/src/pages/Player/Player.module.css
@@ -24,24 +24,16 @@
margin-top: 13px;
}
-.button {
- border-radius: 5px;
- border-width: 0;
- color: white;
- margin-right: 15px;
- padding: 6px;
-}
-
.actorAddTile {
+ color: white;
+ cursor: pointer;
float: left;
padding-left: 25px;
padding-top: 50px;
- cursor: pointer;
- color: white;
transition: opacity ease 0.5s;
}
-.actorAddTile:hover{
+.actorAddTile:hover {
opacity: 0.7;
transition: opacity ease 0.5s;
}
diff --git a/src/pages/Player/Player.test.js b/src/pages/Player/Player.test.js
index bb20753..06d0bc7 100644
--- a/src/pages/Player/Player.test.js
+++ b/src/pages/Player/Player.test.js
@@ -1,16 +1,22 @@
import {shallow} from 'enzyme';
import React from 'react';
-import Player from './Player';
+import {Player} from './Player';
import {callAPI} from '../../utils/Api';
describe('', function () {
+
+ // help simulating id passed by url
+ function instance() {
+ return shallow();
+ }
+
it('renders without crashing ', function () {
- const wrapper = shallow();
+ const wrapper = instance();
wrapper.unmount();
});
it('plyr insertion', function () {
- const wrapper = shallow();
+ const wrapper = instance();
wrapper.setState({
sources: [
@@ -26,11 +32,11 @@ describe('', function () {
});
function simulateLikeButtonClick() {
- const wrapper = shallow();
+ const wrapper = instance();
// initial fetch for getting movie data
expect(global.fetch).toHaveBeenCalledTimes(1);
- wrapper.find('.videoactions').find('button').first().simulate('click');
+ wrapper.find('.videoactions').find('Button').first().simulate('click');
// fetch for liking
expect(global.fetch).toHaveBeenCalledTimes(2);
@@ -70,28 +76,28 @@ describe('', function () {
});
it('show tag popup', function () {
- const wrapper = shallow();
+ const wrapper = instance();
expect(wrapper.find('AddTagPopup')).toHaveLength(0);
// todo dynamic button find without index
- wrapper.find('.videoactions').find('button').at(1).simulate('click');
+ wrapper.find('.videoactions').find('Button').at(1).simulate('click');
// addtagpopup should be showing now
expect(wrapper.find('AddTagPopup')).toHaveLength(1);
});
it('test delete button', done => {
- const wrapper = shallow();
+ const wrapper = instance();
- const func = jest.fn();
- prepareViewBinding(func);
+
+ wrapper.setProps({history: {goBack: jest.fn()}});
global.fetch = prepareFetchApi({result: 'success'});
- wrapper.find('.videoactions').find('button').at(2).simulate('click');
+ wrapper.find('.videoactions').find('Button').at(2).simulate('click');
process.nextTick(() => {
// refetch is called so fetch called 3 times
expect(global.fetch).toHaveBeenCalledTimes(1);
- expect(func).toHaveBeenCalledTimes(1);
+ expect(wrapper.instance().props.history.goBack).toHaveBeenCalledTimes(1);
global.fetch.mockClear();
done();
@@ -99,19 +105,20 @@ describe('', function () {
});
it('hide click ', function () {
- const wrapper = shallow();
+ const wrapper = instance();
const func = jest.fn();
- prepareViewBinding(func);
+
+ wrapper.setProps({history: {goBack: func}});
expect(func).toHaveBeenCalledTimes(0);
wrapper.find('.closebutton').simulate('click');
- // addtagpopup should be showing now
+ // backstack should be popped once
expect(func).toHaveBeenCalledTimes(1);
});
it('inserts Tags correctly', function () {
- const wrapper = shallow();
+ const wrapper = instance();
expect(wrapper.find('Tag')).toHaveLength(0);
@@ -165,7 +172,7 @@ describe('', function () {
});
it('showspopups correctly', function () {
- const wrapper = shallow();
+ const wrapper = instance();
wrapper.setState({popupvisible: true}, () => {
// is the AddTagpopu rendered?
@@ -180,13 +187,13 @@ describe('', function () {
it('quickadd tag correctly', function () {
- const wrapper = shallow();
+ const wrapper = instance();
global.callAPIMock({result: 'success'});
wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}]}, () => {
// mock funtion should have not been called
expect(callAPI).toBeCalledTimes(0);
- wrapper.find('Tag').findWhere(p => p.text() === 'test').parent().dive().simulate('click');
+ wrapper.find('Tag').findWhere(p => p.props().tagInfo.tag_name === 'test').dive().simulate('click');
// mock function should have been called once
expect(callAPI).toBeCalledTimes(1);
@@ -198,13 +205,13 @@ describe('', function () {
});
it('test adding of already existing tag', function () {
- const wrapper = shallow();
+ const wrapper = instance();
global.callAPIMock({result: 'success'});
wrapper.setState({suggesttag: [{tag_name: 'test', tag_id: 1}], tags: [{tag_name: 'test', tag_id: 1}]}, () => {
// mock funtion should have not been called
expect(callAPI).toBeCalledTimes(0);
- wrapper.find('Tag').findWhere(p => p.text() === 'test').last().parent().dive().simulate('click');
+ wrapper.find('Tag').findWhere(p => p.props().tagInfo.tag_name === 'test').last().dive().simulate('click');
// mock function should have been called once
expect(callAPI).toBeCalledTimes(1);
@@ -217,7 +224,7 @@ describe('', function () {
});
function generatetag() {
- const wrapper = shallow();
+ const wrapper = instance();
expect(wrapper.find('Tag')).toHaveLength(0);
@@ -233,7 +240,7 @@ describe('', function () {
}
it('test addactor popup showing', function () {
- const wrapper = shallow();
+ const wrapper = instance();
expect(wrapper.find('AddActorPopup')).toHaveLength(0);
@@ -244,7 +251,7 @@ describe('', function () {
});
it('test hiding of addactor popup', function () {
- const wrapper = shallow();
+ const wrapper = instance();
wrapper.instance().addActor();
expect(wrapper.find('AddActorPopup')).toHaveLength(1);
@@ -253,4 +260,36 @@ describe('', function () {
expect(wrapper.find('AddActorPopup')).toHaveLength(0);
});
+
+ it('test addtagpopup hiding', function () {
+ const wrapper = instance();
+
+ wrapper.setState({popupvisible: true});
+ expect(wrapper.find('AddTagPopup')).toHaveLength(1);
+
+ wrapper.find('AddTagPopup').props().onHide();
+
+ expect(wrapper.find('AddTagPopup')).toHaveLength(0);
+ });
+
+ it('test insertion of actor tiles', function () {
+ const wrapper = instance();
+ wrapper.setState({
+ actors: [{
+ thumbnail: '',
+ name: 'testname',
+ actor_id: 42
+ }]
+ });
+
+ expect(wrapper.find('ActorTile')).toHaveLength(1);
+ });
+
+ it('test Addactor button', function () {
+ const wrapper = instance();
+ expect(wrapper.state().actorpopupvisible).toBe(false);
+ wrapper.find('.actorAddTile').simulate('click');
+
+ expect(wrapper.state().actorpopupvisible).toBe(true);
+ });
});
diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.tsx
similarity index 74%
rename from src/pages/Player/Player.js
rename to src/pages/Player/Player.tsx
index b59da03..c0996a9 100644
--- a/src/pages/Player/Player.js
+++ b/src/pages/Player/Player.tsx
@@ -12,16 +12,36 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
import AddActorPopup from '../../elements/Popups/AddActorPopup/AddActorPopup';
import ActorTile from '../../elements/ActorTile/ActorTile';
-import GlobalInfos from '../../utils/GlobalInfos';
+import {withRouter} from 'react-router-dom';
import {callAPI, getBackendDomain} from '../../utils/Api';
+import {RouteComponentProps} from 'react-router';
+import {GeneralSuccess} from '../../api/GeneralTypes';
+import {ActorType, loadVideoType, TagType} from '../../api/VideoTypes';
+import PlyrJS from 'plyr';
+import {Button} from '../../elements/GPElements/Button';
+interface myprops extends RouteComponentProps<{ id: string }> {}
+
+interface mystate {
+ sources?: PlyrJS.SourceInfo,
+ movie_id: number,
+ movie_name: string,
+ likes: number,
+ quality: number,
+ length: number,
+ tags: TagType[],
+ suggesttag: TagType[],
+ popupvisible: boolean,
+ actorpopupvisible: boolean,
+ actors: ActorType[]
+}
/**
* Player page loads when a video is selected to play and handles the video view
* and actions such as tag adding and liking
*/
-class Player extends React.Component {
- options = {
+export class Player extends React.Component {
+ options: PlyrJS.Options = {
controls: [
'play-large', // The large play button in the center
'play', // Play/pause playback
@@ -38,130 +58,31 @@ class Player extends React.Component {
]
};
- constructor(props, context) {
- super(props, context);
+ constructor(props: myprops) {
+ super(props);
this.state = {
- sources: null,
- movie_id: null,
- movie_name: null,
- likes: null,
- quality: null,
- length: null,
+ movie_id: -1,
+ movie_name: '',
+ likes: 0,
+ quality: 0,
+ length: 0,
tags: [],
suggesttag: [],
popupvisible: false,
- actorpopupvisible: false
+ actorpopupvisible: false,
+ actors: []
};
this.quickAddTag = this.quickAddTag.bind(this);
}
- componentDidMount() {
+ componentDidMount(): void {
// initial fetch of current movie data
this.fetchMovieData();
}
- /**
- * quick add callback to add tag to db and change gui correctly
- * @param tagId id of tag to add
- * @param tagName name of tag to add
- */
- quickAddTag(tagId, tagName) {
- callAPI('tags.php', {action: 'addTag', id: tagId, movieid: this.props.movie_id}, (result) => {
- if (result.result !== 'success') {
- console.error('error occured while writing to db -- todo error handling');
- console.error(result.result);
- } else {
- // check if tag has already been added
- const tagIndex = this.state.tags.map(function (e) {
- return e.tag_name;
- }).indexOf(tagName);
-
- // only add tag if it isn't already there
- if (tagIndex === -1) {
- // update tags if successful
- let array = [...this.state.suggesttag]; // make a separate copy of the array (because of setState)
- const quickaddindex = this.state.suggesttag.map(function (e) {
- return e.tag_id;
- }).indexOf(tagId);
-
- // check if tag is available in quickadds
- if (quickaddindex !== -1) {
- array.splice(quickaddindex, 1);
-
- this.setState({
- tags: [...this.state.tags, {tag_name: tagName}],
- suggesttag: array
- });
- } else {
- this.setState({
- tags: [...this.state.tags, {tag_name: tagName}]
- });
- }
- }
- }
- });
- }
-
- /**
- * handle the popovers generated according to state changes
- * @returns {JSX.Element}
- */
- handlePopOvers() {
- return (
- <>
- {this.state.popupvisible ?
- {this.setState({popupvisible: false});}}
- submit={this.quickAddTag}
- movie_id={this.state.movie_id}/> :
- null
- }
- {
- this.state.actorpopupvisible ?
- {
- this.refetchActors();
- this.setState({actorpopupvisible: false});
- }} movie_id={this.state.movie_id}/> : null
- }
-
- );
- }
-
- /**
- * generate sidebar with all items
- */
- assembleSideBar() {
- return (
-
- Infos:
-
- {this.state.likes} Likes!
- {this.state.quality !== 0 ?
- {this.state.quality}p Quality! : null}
- {this.state.length !== 0 ?
- {Math.round(this.state.length / 60)} Minutes of length! : null}
-
- Tags:
- {this.state.tags.map((m) => (
- {m.tag_name}
- ))}
-
- Tag Quickadd:
- {this.state.suggesttag.map((m) => (
- {
- this.quickAddTag(m.tag_id, m.tag_name);
- }}>
- {m.tag_name}
-
- ))}
-
- );
- }
-
- render() {
+ render(): JSX.Element {
return (
:
not loaded yet
}
-
-
-
+
{/* rendering of actor tiles */}
{this.state.actors ?
- this.state.actors.map((actr) => (
+ this.state.actors.map((actr: ActorType) => (
)) : <>
}
- {
+
{
this.addActor();
}}>
@@ -208,7 +122,7 @@ class Player extends React.Component {
Visible Tags:
{this.state.tags.map((m) => (
- {m.tag_name}
+
))}
@@ -40,7 +51,7 @@ class RandomPage extends React.Component {
-
+
:
@@ -53,7 +64,7 @@ class RandomPage extends React.Component {
/**
* click handler for shuffle btn
*/
- shuffleclick() {
+ shuffleclick(): void {
this.loadShuffledvideos(4);
}
@@ -61,8 +72,8 @@ class RandomPage extends React.Component {
* load random videos from backend
* @param nr number of videos to load
*/
- loadShuffledvideos(nr) {
- callAPI('video.php', {action: 'getRandomMovies', number: nr}, result => {
+ loadShuffledvideos(nr: number): void {
+ callAPI('video.php', {action: 'getRandomMovies', number: nr}, result => {
console.log(result);
this.setState({videos: []}); // needed to trigger rerender of main videoview
diff --git a/src/pages/SettingsPage/GeneralSettings.module.css b/src/pages/SettingsPage/GeneralSettings.module.css
index 5ddf8f1..ab92e69 100644
--- a/src/pages/SettingsPage/GeneralSettings.module.css
+++ b/src/pages/SettingsPage/GeneralSettings.module.css
@@ -8,7 +8,7 @@
width: 40%;
}
-.customapiform{
+.customapiform {
margin-top: 15px;
width: 40%;
}
diff --git a/src/pages/SettingsPage/GeneralSettings.test.js b/src/pages/SettingsPage/GeneralSettings.test.js
index 2f03e34..8adef93 100644
--- a/src/pages/SettingsPage/GeneralSettings.test.js
+++ b/src/pages/SettingsPage/GeneralSettings.test.js
@@ -29,6 +29,13 @@ describe('', function () {
it('test savesettings', done => {
const wrapper = shallow();
+ wrapper.setState({
+ passwordsupport: true,
+ videopath: '',
+ tvshowpath: '',
+ mediacentername: '',
+ tmdbsupport: true
+ });
global.fetch = global.prepareFetchApi({success: true});
@@ -47,6 +54,13 @@ describe('', function () {
it('test failing savesettings', done => {
const wrapper = shallow();
+ wrapper.setState({
+ passwordsupport: true,
+ videopath: '',
+ tvshowpath: '',
+ mediacentername: '',
+ tmdbsupport: true
+ });
global.fetch = global.prepareFetchApi({success: false});
diff --git a/src/pages/SettingsPage/SettingsPage.module.css b/src/pages/SettingsPage/SettingsPage.module.css
index 7e16430..7d1ac0c 100644
--- a/src/pages/SettingsPage/SettingsPage.module.css
+++ b/src/pages/SettingsPage/SettingsPage.module.css
@@ -26,6 +26,7 @@
.SettingSidebarElement {
background-color: #919fd9;
border-radius: 7px;
+ color: black;
font-weight: bold;
margin: 10px 5px 5px;
padding: 5px;
diff --git a/src/pages/SettingsPage/SettingsPage.test.js b/src/pages/SettingsPage/SettingsPage.test.js
index 4c26bd8..e6459dc 100644
--- a/src/pages/SettingsPage/SettingsPage.test.js
+++ b/src/pages/SettingsPage/SettingsPage.test.js
@@ -7,34 +7,4 @@ describe('', function () {
const wrapper = shallow();
wrapper.unmount();
});
-
- it('simulate topic clicka', function () {
- const wrapper = shallow();
-
- simulateSideBarClick('General', wrapper);
- expect(wrapper.state().currentpage).toBe('general');
- expect(wrapper.find('.SettingsContent').find('GeneralSettings')).toHaveLength(1);
-
- simulateSideBarClick('Movies', wrapper);
- expect(wrapper.state().currentpage).toBe('movies');
- expect(wrapper.find('.SettingsContent').find('MovieSettings')).toHaveLength(1);
-
- simulateSideBarClick('TV Shows', wrapper);
- expect(wrapper.state().currentpage).toBe('tv');
- expect(wrapper.find('.SettingsContent').find('span')).toHaveLength(1);
- });
-
- function simulateSideBarClick(name, wrapper) {
- wrapper.find('.SettingSidebarElement').findWhere(it =>
- it.text() === name &&
- it.type() === 'div').simulate('click');
- }
-
- it('simulate unknown topic', function () {
- const wrapper = shallow();
- wrapper.setState({currentpage: 'unknown'});
-
- expect(wrapper.find('.SettingsContent').text()).toBe('unknown button clicked');
-
- });
});
diff --git a/src/pages/SettingsPage/SettingsPage.tsx b/src/pages/SettingsPage/SettingsPage.tsx
index 4b8f718..bcaa0b3 100644
--- a/src/pages/SettingsPage/SettingsPage.tsx
+++ b/src/pages/SettingsPage/SettingsPage.tsx
@@ -3,59 +3,44 @@ import MovieSettings from './MovieSettings';
import GeneralSettings from './GeneralSettings';
import style from './SettingsPage.module.css';
import GlobalInfos from '../../utils/GlobalInfos';
-
-type SettingsPageState = {
- currentpage: string
-}
+import {NavLink, Redirect, Route, Switch} from 'react-router-dom';
/**
* The Settingspage handles all kinds of settings for the mediacenter
* and is basically a wrapper for child-tabs
*/
-class SettingsPage extends React.Component<{}, SettingsPageState> {
- constructor(props: Readonly<{}> | {}, context?: any) {
- super(props, context);
-
- this.state = {
- currentpage: 'general'
- };
- }
-
- /**
- * load the selected tab
- * @returns {JSX.Element|string} the jsx element of the selected tab
- */
- getContent(): JSX.Element | string {
- switch (this.state.currentpage) {
- case 'general':
- return ;
- case 'movies':
- return ;
- case 'tv':
- return ; // todo this page
- default:
- return 'unknown button clicked';
- }
- }
-
- render() : JSX.Element {
+class SettingsPage extends React.Component {
+ render(): JSX.Element {
const themestyle = GlobalInfos.getThemeStyle();
return (
Settings
-
this.setState({currentpage: 'general'})}
- className={style.SettingSidebarElement}>General
-
-
this.setState({currentpage: 'movies'})}
- className={style.SettingSidebarElement}>Movies
-
-
this.setState({currentpage: 'tv'})}
- className={style.SettingSidebarElement}>TV Shows
-
+
+ General
+
+
+ Movies
+
+
+ TV Shows
+
- {this.getContent()}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/setupTests.js b/src/setupTests.js
index dabe128..33c35f7 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -42,24 +42,24 @@ global.prepareViewBinding = (func) => {
return {
changeRootElement: func,
returnToLastElement: func
- }
+ };
};
-}
+};
global.callAPIMock = (resonse) => {
- const helpers = require("./utils/Api");
- helpers.callAPI = jest.fn().mockImplementation((_, __, func1) => {func1(resonse)});
-}
+ const helpers = require('./utils/Api');
+ helpers.callAPI = jest.fn().mockImplementation((_, __, func1) => {func1(resonse);});
+};
// code to run before each test
global.beforeEach(() => {
// empty fetch response implementation for each test
global.fetch = prepareFetchApi({});
// todo with callAPIMock
-})
+});
global.afterEach(() => {
// clear all mocks after each test
jest.resetAllMocks();
-})
+});
diff --git a/src/utils/Api.ts b/src/utils/Api.ts
index 2bd8fc4..787717e 100644
--- a/src/utils/Api.ts
+++ b/src/utils/Api.ts
@@ -23,7 +23,7 @@ export function getBackendDomain(): string {
* set a custom backend domain
* @param domain a url in format [http://x.x.x.x/somanode]
*/
-export function setCustomBackendDomain(domain: string) {
+export function setCustomBackendDomain(domain: string): void {
customBackendURL = domain;
}
@@ -38,9 +38,9 @@ function getAPIDomain(): string {
* interface how an api request should look like
*/
interface ApiBaseRequest {
- action: string,
+ action: string | number,
- [_: string]: string
+ [_: string]: string | number
}
/**
@@ -51,7 +51,7 @@ function buildFormData(args: ApiBaseRequest): FormData {
const req = new FormData();
for (const i in args) {
- req.append(i, args[i]);
+ req.append(i, (args[i].toString()));
}
return req;
}
@@ -63,8 +63,7 @@ function buildFormData(args: ApiBaseRequest): FormData {
* @param callback the callback with json reply from backend
* @param errorcallback a optional callback if an error occured
*/
-export function callAPI(apinode: string, fd: ApiBaseRequest, callback: (_: object) => void, errorcallback: (_: object) => void = (_: object) => {
-}): void {
+export function callAPI(apinode: string, fd: ApiBaseRequest, callback: (_: T) => void, errorcallback: (_: string) => void = (_: string): void => {}): void {
fetch(getAPIDomain() + apinode, {method: 'POST', body: buildFormData(fd)})
.then((response) => response.json()
.then((result) => {
@@ -78,7 +77,7 @@ export function callAPI(apinode: string, fd: ApiBaseRequest, callback: (_: objec
* @param fd the object to send to backend
* @param callback the callback with PLAIN text reply from backend
*/
-export function callAPIPlain(apinode: string, fd: ApiBaseRequest, callback: (_: any) => void): void {
+export function callAPIPlain(apinode: string, fd: ApiBaseRequest, callback: (_: string) => void): void {
fetch(getAPIDomain() + apinode, {method: 'POST', body: buildFormData(fd)})
.then((response) => response.text()
.then((result) => {
diff --git a/src/utils/GlobalInfos.js b/src/utils/GlobalInfos.js
index b5ab724..0995be3 100644
--- a/src/utils/GlobalInfos.js
+++ b/src/utils/GlobalInfos.js
@@ -7,7 +7,6 @@ import lighttheme from '../AppLightTheme.module.css';
*/
class StaticInfos {
#darktheme = true;
- #viewbinding = () => {console.warn('Viewbinding not set now!');};
/**
* check if the current theme is the dark theme
@@ -32,22 +31,6 @@ class StaticInfos {
getThemeStyle() {
return this.isDarkTheme() ? darktheme : lighttheme;
}
-
- /**
- * set the global Viewbinding for the main Navigation
- * @param cb
- */
- setViewBinding(cb) {
- this.#viewbinding = cb;
- }
-
- /**
- * return the Viewbinding for main navigation
- * @returns {StaticInfos.viewbinding}
- */
- getViewBinding() {
- return this.#viewbinding;
- }
}
const GlobalInfos = new StaticInfos();
diff --git a/tsconfig.json b/tsconfig.json
index 7d00a58..62940de 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
{
"compilerOptions": {
- "target": "ES5",
+ "target": "es5",
"lib": [
"dom",
"dom.iterable",
@@ -12,14 +12,16 @@
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react"
+ "jsx": "react-jsx"
},
"include": [
+ "declaration.d.ts",
"src"
]
}