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

add style for actor tiles

Browse Source 
render actors got from backend
backend test code to get actors
This commit is contained in:
Lukas Heiligenbrunner
2020-12-11 18:23:13 +00:00
parent 707c54e5f5
commit c5d231d9f2
44 changed files with 1017 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/elements/ActorTile/ActorTile.js Normal file
View File

@ -0,0 +1,43 @@
import style from './ActorTile.module.css';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faUser} from '@fortawesome/free-solid-svg-icons';
import React from 'react';
import GlobalInfos from '../../GlobalInfos';
import ActorPage from '../../pages/ActorPage/ActorPage';
class ActorTile extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className={style.actortile} onClick={() => this.handleActorClick(this.props.actor)}>
<div className={style.actortile_thumbnail}>
{this.props.actor.thumbnail === null ? <FontAwesomeIcon style={{
lineHeight: '130px'
}} icon={faUser} size='5x'/> : 'dfdf' /* todo render picture provided here! */}
</div>
<div className={style.actortile_name}>{this.props.actor.name}</div>
</div>
);
}
/**
* event handling for actor tile click
*/
handleActorClick(actor) {
// if clicklistender is defined use this one
if (this.props.onClick) {
this.props.onClick(actor.id);
return;
}
// Redirect to actor page
GlobalInfos.getViewBinding().changeRootElement(<ActorPage actor={actor}/>);
}
}
export default ActorTile;

29
src/elements/ActorTile/ActorTile.module.css Normal file
View File

@ -0,0 +1,29 @@
.actortile {
background-color: #179017;
border-radius: 10px;
cursor: pointer;
float: left;
height: 200px;
margin: 3px;
width: 130px;
transition: opacity ease 0.5s;
}
.actortile:hover{
opacity: 0.7;
transition: opacity ease 0.5s;
}
.actortile_thumbnail {
color: #c6c6c6;
height: 160px;
margin-top: 10px;
text-align: center;
}
.actortile_name {
color: white;
text-align: center;
/*todo dynamic text coloring dependent on theme*/
}

21
src/elements/ActorTile/ActorTile.test.js Normal file
View File

@ -0,0 +1,21 @@
import {shallow} from 'enzyme';
import React from 'react';
import ActorTile from './ActorTile';
describe('<ActorTile/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<ActorTile actor={{thumbnail: "-1", name: "testname", id: 3}}/>);
wrapper.unmount();
});
it('simulate click', function () {
const wrapper = shallow(<ActorTile actor={{thumbnail: "-1", name: "testname", id: 3}}/>);
const func = jest.fn();
prepareViewBinding(func);
wrapper.simulate('click');
expect(func).toBeCalledTimes(1);
});
});

157
src/elements/AddTagPopup/AddTagPopup.js
View File

@ -1,157 +0,0 @@
import React from 'react';
import ReactDom from 'react-dom';
import style from './AddTagPopup.module.css';
import Tag from '../Tag/Tag';
import {Line} from '../PageTitle/PageTitle';
import GlobalInfos from '../../GlobalInfos';
/**
* component creates overlay to add a new tag to a video
*/
class AddTagPopup extends React.Component {
/// instance of root element
element;
constructor(props, context) {
super(props, context);
this.state = {items: []};
this.handleClickOutside = this.handleClickOutside.bind(this);
this.keypress = this.keypress.bind(this);
this.props = props;
}
componentDidMount() {
document.addEventListener('click', this.handleClickOutside);
document.addEventListener('keyup', this.keypress);
// add element drag drop events
if (this.element != null) {
this.dragElement();
}
const updateRequest = new FormData();
updateRequest.append('action', 'getAllTags');
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({
items: result
});
});
}
componentWillUnmount() {
// remove the appended listeners
document.removeEventListener('click', this.handleClickOutside);
document.removeEventListener('keyup', this.keypress);
}
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={el => this.element = el}>
<div className={[style.header, themeStyle.textcolor].join(' ')}>Add a Tag to this Video:</div>
<Line/>
<div className={style.content}>
{this.state.items ?
this.state.items.map((i) => (
<Tag onclick={() => {
this.addTag(i.tag_id, i.tag_name);
}}>{i.tag_name}</Tag>
)) : null}
</div>
</div>
);
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
const domNode = ReactDom.findDOMNode(this);
if (!domNode || !domNode.contains(event.target)) {
this.props.onHide();
}
}
/**
* key event handling
* @param event keyevent
*/
keypress(event) {
// hide if escape is pressed
if (event.key === 'Escape') {
this.props.onHide();
}
}
/**
* add a new tag to this video
* @param tagid tag id to add
* @param tagname tag name to add
*/
addTag(tagid, tagname) {
console.log(this.props);
const updateRequest = new FormData();
updateRequest.append('action', 'addTag');
updateRequest.append('id', tagid);
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);
} else {
this.props.submit(tagid, tagname);
}
this.props.onHide();
}));
}
/**
* make the element drag and droppable
*/
dragElement() {
let xOld = 0, yOld = 0;
const elmnt = this.element;
elmnt.firstChild.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e.preventDefault();
// get the mouse cursor position at startup:
xOld = e.clientX;
yOld = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
// calculate the new cursor position:
const dx = xOld - e.clientX;
const dy = yOld - e.clientY;
xOld = e.clientX;
yOld = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
}
export default AddTagPopup;

71
src/elements/NewTagPopup/NewTagPopup.js
View File

@ -1,71 +0,0 @@
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import {Form} from 'react-bootstrap';
/**
* creates modal overlay to define a new Tag
*/
class NewTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
render() {
return (
<>
<Modal
show={this.props.show}
onHide={this.props.onHide}
size='lg'
aria-labelledby='contained-modal-title-vcenter'
centered>
<Modal.Header closeButton>
<Modal.Title id='contained-modal-title-vcenter'>
Create a new Tag!
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group>
<Form.Label>Tag Name:</Form.Label>
<Form.Control id='namefield' type='text' placeholder='Enter Tag name' onChange={(v) => {
this.value = v.target.value;
}}/>
<Form.Text className='text-muted'>
This Tag will automatically show up on category page.
</Form.Text>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<button className='btn btn-primary' onClick={() => {
this.storeselection();
}}>Add
</button>
</Modal.Footer>
</Modal>
</>
);
}
/**
* store the filled in form to the backend
*/
storeselection() {
const updateRequest = new FormData();
updateRequest.append('action', 'createTag');
updateRequest.append('tagname', this.value);
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);
}
this.props.onHide();
});
}
}
export default NewTagPopup;

102
src/elements/Popups/AddActorPopup/AddActorPopup.js Normal file
View File

@ -0,0 +1,102 @@
import PopupBase from '../PopupBase';
import React from 'react';
import ActorTile from '../../ActorTile/ActorTile';
import style from './AddActorPopup.module.css';
import {NewActorPopupContent} from '../NewActorPopup/NewActorPopup';
/**
* Popup for Adding a new Actor to a Video
*/
class AddActorPopup extends React.Component {
constructor(props) {
super(props);
this.state = {
contentDefault: true,
actors: undefined
};
this.tileClickHandler = this.tileClickHandler.bind(this);
}
render() {
return (
<>
{/* todo render actor tiles here and add search field*/}
<PopupBase title='Add new Actor to Video' onHide={this.props.onHide} banner={
<button
className={style.newactorbutton}
onClick={() => {this.setState({contentDefault: false});}}>Create new Actor</button>}>
{this.resolvePage()}
</PopupBase>
</>
);
}
componentDidMount() {
// fetch the available actors
this.loadActors();
}
/**
* selector for current showing popup page
* @returns {JSX.Element}
*/
resolvePage() {
if (this.state.contentDefault) return (this.getContent());
else return (<NewActorPopupContent onHide={() => {
this.loadActors();
this.setState({contentDefault: true});
}}/>);
}
/**
* returns content for the newActor popup
* @returns {JSX.Element}
*/
getContent() {
if (this.state.actors) {
return (<div>
{this.state.actors.map((el) => (<ActorTile actor={el} onClick={this.tileClickHandler}/>))}
</div>);
} else {
return (<div>somekind of loading</div>);
}
}
/**
* event handling for ActorTile Click
*/
tileClickHandler(actorid) {
// fetch the available actors
const req = new FormData();
req.append('action', 'addActorToVideo');
req.append('actorid', actorid);
req.append('videoid', this.props.movie_id);
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json()
.then((result) => {
if (result.result === 'success') {
// return back to player page
this.props.onHide();
} else {
console.error('an error occured while fetching actors');
console.error(result);
}
}));
}
loadActors() {
const req = new FormData();
req.append('action', 'getAllActors');
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json()
.then((result) => {
this.setState({actors: result});
}));
}
}
export default AddActorPopup;

11
src/elements/Popups/AddActorPopup/AddActorPopup.module.css Normal file
View File

@ -0,0 +1,11 @@
.newactorbutton {
border-radius: 5px;
border-width: 0;
color: white;
margin-right: 15px;
margin-top: 12px;
padding: 6px;
background-color: green;
width: 140px;
width: 140px;
}

19
src/elements/Popups/AddActorPopup/AddActorPopup.test.js Normal file
View File

@ -0,0 +1,19 @@
import {shallow} from 'enzyme';
import React from 'react';
import AddActorPopup from './AddActorPopup';
describe('<AddActorPopup/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<AddActorPopup/>);
wrapper.unmount();
});
// it('simulate change to other page', function () {
// const wrapper = shallow(<AddActorPopup/>);
//
// console.log(wrapper.find('PopupBase').dive().debug());
//
//
// console.log(wrapper.debug());
// });
});

67
src/elements/Popups/AddTagPopup/AddTagPopup.js Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import Tag from '../../Tag/Tag';
import PopupBase from '../PopupBase';
/**
* component creates overlay to add a new tag to a video
*/
class AddTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {items: []};
}
componentDidMount() {
const updateRequest = new FormData();
updateRequest.append('action', 'getAllTags');
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({
items: result
});
});
}
render() {
return (
<PopupBase title='Add a Tag to this Video:' onHide={this.props.onHide}>
{this.state.items ?
this.state.items.map((i) => (
<Tag onclick={() => {
this.addTag(i.tag_id, i.tag_name);
}}>{i.tag_name}</Tag>
)) : null}
</PopupBase>
);
}
/**
* add a new tag to this video
* @param tagid tag id to add
* @param tagname tag name to add
*/
addTag(tagid, tagname) {
console.log(this.props);
const updateRequest = new FormData();
updateRequest.append('action', 'addTag');
updateRequest.append('id', tagid);
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);
} else {
this.props.submit(tagid, tagname);
}
this.props.onHide();
}));
}
}
export default AddTagPopup;

0
src/elements/AddTagPopup/AddTagPopup.module.css → src/elements/Popups/AddTagPopup/AddTagPopup.module.css
View File

0
src/elements/AddTagPopup/AddTagPopup.test.js → src/elements/Popups/AddTagPopup/AddTagPopup.test.js
View File

60
src/elements/Popups/NewActorPopup/NewActorPopup.js Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import PopupBase from '../PopupBase';
import style from './NewActorPopup.module.css';
/**
* creates modal overlay to define a new Tag
*/
class NewActorPopup extends React.Component {
render() {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
<NewActorPopupContent onHide={this.props.onHide}/>
</PopupBase>
);
}
}
export class NewActorPopupContent extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
render() {
return (
<>
<div>
<input type='text' placeholder='Actor Name' onChange={(v) => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
</>
);
}
/**
* store the filled in form to the backend
*/
storeselection() {
// check if user typed in name
if (this.value === '' || this.value === undefined) return;
const req = new FormData();
req.append('action', 'createActor');
req.append('actorname', this.value);
fetch('/api/actor.php', {method: 'POST', body: req})
.then((response) => response.json())
.then((result) => {
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);
}
this.props.onHide();
});
}
}
export default NewActorPopup;

8
src/elements/Popups/NewActorPopup/NewActorPopup.module.css Normal file
View File

@ -0,0 +1,8 @@
.savebtn {
background-color: greenyellow;
border: 0;
border-radius: 4px;
float: right;
margin-top: 30px;
padding: 3px;
}

54
src/elements/Popups/NewActorPopup/NewActorPopup.test.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import {shallow} from 'enzyme';
import '@testing-library/jest-dom';
import NewActorPopup, {NewActorPopupContent} from './NewActorPopup';
describe('<NewActorPopup/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<NewActorPopup/>);
wrapper.unmount();
});
});
describe('<NewActorPopupContent/>', () => {
it('renders without crashing', function () {
const wrapper = shallow(<NewActorPopupContent/>);
wrapper.unmount();
});
it('simulate button click', function () {
const wrapper = shallow(<NewActorPopupContent/>);
// manually set typed in actorname
wrapper.instance().value = 'testactorname';
global.fetch = prepareFetchApi({});
expect(global.fetch).toBeCalledTimes(0);
wrapper.find('button').simulate('click');
// fetch should have been called once now
expect(global.fetch).toBeCalledTimes(1);
});
it('test not allowing request if textfield is empty', function () {
const wrapper = shallow(<NewActorPopupContent/>);
global.fetch = prepareFetchApi({});
expect(global.fetch).toBeCalledTimes(0);
wrapper.find('button').simulate('click');
// fetch should not be called now
expect(global.fetch).toBeCalledTimes(0);
});
it('test input change', function () {
const wrapper = shallow(<NewActorPopupContent/>);
wrapper.find('input').simulate('change', {target: {value: 'testinput'}});
expect(wrapper.instance().value).toBe('testinput');
});
});

46
src/elements/Popups/NewTagPopup/NewTagPopup.js Normal file
View File

@ -0,0 +1,46 @@
import React from 'react';
import PopupBase from '../PopupBase';
import style from './NewTagPopup.module.css';
/**
* creates modal overlay to define a new Tag
*/
class NewTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
this.props = props;
}
render() {
return (
<PopupBase title='Add new Tag' onHide={this.props.onHide} height='200px' width='400px'>
<div><input type='text' placeholder='Tagname' onChange={(v) => {
this.value = v.target.value;
}}/></div>
<button className={style.savebtn} onClick={() => this.storeselection()}>Save</button>
</PopupBase>
);
}
/**
* store the filled in form to the backend
*/
storeselection() {
const updateRequest = new FormData();
updateRequest.append('action', 'createTag');
updateRequest.append('tagname', this.value);
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
if (result.result !== 'success') {
console.log('error occured while writing to db -- todo error handling');
console.log(result.result);
}
this.props.onHide();
});
}
}
export default NewTagPopup;

8
src/elements/Popups/NewTagPopup/NewTagPopup.module.css Normal file
View File

@ -0,0 +1,8 @@
.savebtn {
background-color: greenyellow;
border: 0;
border-radius: 4px;
float: right;
margin-top: 30px;
padding: 3px;
}

9
src/elements/NewTagPopup/NewTagPopup.test.js → src/elements/Popups/NewTagPopup/NewTagPopup.test.js
View File

@ -11,12 +11,7 @@ describe('<NewTagPopup/>', function () {
});
it('test storeseletion click event', done => {
const mockSuccessResponse = {};
const mockJsonPromise = Promise.resolve(mockSuccessResponse);
const mockFetchPromise = Promise.resolve({
json: () => mockJsonPromise
});
global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
global.fetch = prepareFetchApi({});
const func = jest.fn();
@ -27,7 +22,7 @@ describe('<NewTagPopup/>', function () {
}
});
wrapper.find('ModalFooter').find('button').simulate('click');
wrapper.find('button').simulate('click');
expect(global.fetch).toHaveBeenCalledTimes(1);
process.nextTick(() => {

122
src/elements/Popups/PopupBase.js Normal file
View File

@ -0,0 +1,122 @@
import GlobalInfos from '../../GlobalInfos';
import style from './PopupBase.module.css';
import {Line} from '../PageTitle/PageTitle';
import React from 'react';
/**
* wrapper class for generic types of popups
*/
class PopupBase extends React.Component {
constructor(props) {
super(props);
this.state = {items: []};
this.wrapperRef = React.createRef();
this.handleClickOutside = this.handleClickOutside.bind(this);
this.keypress = this.keypress.bind(this);
// parse style props
this.framedimensions = {
width: (this.props.width ? this.props.width : undefined),
height: (this.props.height ? this.props.height : undefined)
};
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
document.addEventListener('keyup', this.keypress);
// add element drag drop events
if (this.wrapperRef != null) {
this.dragElement();
}
}
componentWillUnmount() {
// remove the appended listeners
document.removeEventListener('mousedown', this.handleClickOutside);
document.removeEventListener('keyup', this.keypress);
}
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div style={this.framedimensions} className={[style.popup, themeStyle.thirdbackground].join(' ')} ref={this.wrapperRef}>
<div className={style.header}>
<div className={[style.title, themeStyle.textcolor].join(' ')}>{this.props.title}</div>
<div className={style.banner}>{this.props.banner}</div>
</div>
<Line/>
<div className={style.content}>
{this.props.children}
</div>
</div>
);
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
this.props.onHide();
}
}
/**
* key event handling
* @param event keyevent
*/
keypress(event) {
// hide if escape is pressed
if (event.key === 'Escape') {
this.props.onHide();
}
}
/**
* make the element drag and droppable
*/
dragElement() {
let xOld = 0, yOld = 0;
const elmnt = this.wrapperRef.current;
if(elmnt === null) return;
elmnt.firstChild.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e.preventDefault();
// get the mouse cursor position at startup:
xOld = e.clientX;
yOld = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
// calculate the new cursor position:
const dx = xOld - e.clientX;
const dy = yOld - e.clientY;
xOld = e.clientX;
yOld = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - dy) + 'px';
elmnt.style.left = (elmnt.offsetLeft - dx) + 'px';
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
}
export default PopupBase;

43
src/elements/Popups/PopupBase.module.css Normal file
View File

@ -0,0 +1,43 @@
.popup {
border: 3px #3574fe solid;
border-radius: 18px;
height: 80%;
left: 20%;
opacity: 0.95;
position: absolute;
top: 10%;
width: 60%;
z-index: 2;
}
.header{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.title {
cursor: move;
font-size: x-large;
margin-left: 15px;
margin-top: 10px;
opacity: 1;
float: left;
width: 60%;
}
.banner {
width: 40%;
float: left;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.content {
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
opacity: 1;
}

12
src/elements/Popups/PopupBase.test.js Normal file
View File

@ -0,0 +1,12 @@
import {shallow} from "enzyme";
import React from "react";
import PopupBase from "./PopupBase";
describe('<PopupBase/>', function () {
it('renders without crashing ', function () {
const wrapper = shallow(<PopupBase/>);
wrapper.unmount();
});
});

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

@ -64,10 +64,8 @@ class Preview extends React.Component {
itemClick() {
console.log('item clicked!' + this.state.name);
this.props.viewbinding.changeRootElement(
<Player
viewbinding={this.props.viewbinding}
movie_id={this.props.movie_id}/>);
GlobalInfos.getViewBinding().changeRootElement(
<Player movie_id={this.props.movie_id}/>);
}
}

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

@ -20,13 +20,7 @@ describe('<Preview/>', function () {
const func = jest.fn();
const wrapper = shallow(<Preview/>);
wrapper.setProps({
viewbinding: {
changeRootElement: () => {
func();
}
}
});
prepareViewBinding(func);
wrapper.find('.videopreview').simulate('click');

13
src/elements/Tag/Tag.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import styles from './Tag.module.css';
import CategoryPage from '../../pages/CategoryPage/CategoryPage';
import GlobalInfos from '../../GlobalInfos';
/**
* A Component representing a single Category tag
@ -18,18 +19,16 @@ class Tag extends React.Component {
* click handling for a Tag
*/
TagClick() {
const tag = this.props.children.toString().toLowerCase();
if (this.props.onclick) {
this.props.onclick();
this.props.onclick(tag);
return;
}
const tag = this.props.children.toString().toLowerCase();
// call callback functin to switch to category page with specified tag
this.props.viewbinding.changeRootElement(
<CategoryPage
category={tag}
viewbinding={this.props.viewbinding}/>);
GlobalInfos.getViewBinding().changeRootElement(
<CategoryPage category={tag}/>);
}
}

9
src/elements/Tag/Tag.test.js
View File

@ -16,14 +16,11 @@ describe('<Tag/>', function () {
});
it('click event triggered and setvideo callback called', function () {
global.fetch = global.prepareFetchApi({});
global.fetch = prepareFetchApi({});
const func = jest.fn();
const elem = {
changeRootElement: () => func()
};
prepareViewBinding(func);
const wrapper = shallow(<Tag
viewbinding={elem}>test</Tag>);
const wrapper = shallow(<Tag>test</Tag>);
expect(func).toBeCalledTimes(0);

3
src/elements/VideoContainer/VideoContainer.js
View File

@ -34,8 +34,7 @@ class VideoContainer extends React.Component {
<Preview
key={elem.movie_id}
name={elem.movie_name}
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
movie_id={elem.movie_id}/>
))}
{/*todo css for no items to show*/}
{this.state.loadeditems.length === 0 ?