show video previews on tag click

This commit is contained in:
lukas 2020-06-07 22:17:55 +02:00
parent 836f5f342a
commit ed0df26a79
3 changed files with 24 additions and 10 deletions

View File

@ -63,7 +63,7 @@ class Preview extends React.Component {
} }
export class TagPreview extends React.Component { export class TagPreview extends React.Component {
constructor(props: P, context: any) { constructor(props, context) {
super(props, context); super(props, context);
this.props = props; this.props = props;
@ -82,7 +82,7 @@ export class TagPreview extends React.Component {
.then((response) => response.json() .then((response) => response.json()
.then((result) => { .then((result) => {
console.log(result); console.log(result);
this.props.viewbinding.showVideo( this.props.categorybinding(
<VideoContainer <VideoContainer
data={result} data={result}
viewbinding={this.props.viewbinding}/> viewbinding={this.props.viewbinding}/>

View File

@ -2,7 +2,7 @@ import React from "react";
import Preview from "./Preview"; import Preview from "./Preview";
class VideoContainer extends React.Component { class VideoContainer extends React.Component {
constructor(props: P, context: any) { constructor(props, context) {
super(props, context); super(props, context);
this.data = props.data; this.data = props.data;
@ -12,6 +12,7 @@ class VideoContainer extends React.Component {
selectionnr: null selectionnr: null
}; };
} }
// stores current index of loaded elements // stores current index of loaded elements
loadindex = 0; loadindex = 0;
@ -31,6 +32,9 @@ class VideoContainer extends React.Component {
movie_id={elem.movie_id} movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/> viewbinding={this.props.viewbinding}/>
))} ))}
{/*todo css for no items to show*/}
{this.state.loadeditems.length === 0 ?
"no items to show!" : null}
</div> </div>
); );
} }

View File

@ -6,13 +6,14 @@ import "../css/CategoryPage.css"
import {TagPreview} from "../elements/Preview"; import {TagPreview} from "../elements/Preview";
class CategoryPage extends React.Component { class CategoryPage extends React.Component {
constructor(props: P, context: any) { constructor(props, context) {
super(props, context); super(props, context);
this.props = props; this.props = props;
this.state = { this.state = {
loadedtags: [] loadedtags: [],
selected: false
}; };
} }
@ -39,14 +40,17 @@ class CategoryPage extends React.Component {
<button className='btn btn-success'>Add a new Tag!</button> <button className='btn btn-success'>Add a new Tag!</button>
</SideBar> </SideBar>
<div id='categorycontent'> <div id='categorycontent'>
{this.state.loadedtags ? {!this.state.selected ?
(this.state.loadedtags ?
this.state.loadedtags.map((m) => ( this.state.loadedtags.map((m) => (
<TagPreview <TagPreview
name={m.tag_name} name={m.tag_name}
tag_id={m.tag_id} tag_id={m.tag_id}
viewbinding={this.props.viewbinding}/> viewbinding={this.props.viewbinding}
categorybinding={this.setPage}/>
)) : )) :
"loading" "loading") :
this.selectionelements
} }
</div> </div>
@ -54,6 +58,12 @@ class CategoryPage extends React.Component {
); );
} }
setPage = (element) => {
this.selectionelements = element;
this.setState({selected: true});
};
/** /**
* load all available tags from db. * load all available tags from db.
*/ */