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

Merge branch 'css-components' into 'master'

Browse Source 
seperate css modules

See merge request lukas/openmediacenter!7
This commit is contained in:
Lukas Heiligenbrunner 2020-07-07 20:20:03 +00:00
commit 8292d13a70
18 changed files with 72 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -27,7 +27,7 @@
"text-summary"
]
},
"proxy": "http://192.168.0.248",
"proxy": "http://192.168.0.42",
"homepage": "/",
"eslintConfig": {
"extends": "react-app"

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

@ -1,5 +1,5 @@
import React from "react";
import "./PageTitle.css"
import style from "./PageTitle.module.css"
class PageTitle extends React.Component {
constructor(props) {
@ -11,9 +11,9 @@ class PageTitle extends React.Component {
render() {
return (
<div className='pageheader'>
<span className='pageheadertitle'>{this.props.title}</span>
<span className='pageheadersubtitle'>{this.props.subtitle}</span>
<div className={style.pageheader}>
<span className={style.pageheadertitle}>{this.props.title}</span>
<span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
<>
{this.props.children}
</>

0
src/elements/PageTitle/PageTitle.css → src/elements/PageTitle/PageTitle.module.css
View File

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

@ -1,5 +1,5 @@
import React from "react";
import "./Preview.css";
import style from "./Preview.module.css";
import Player from "../../pages/Player/Player";
import {Spinner} from "react-bootstrap";
@ -38,17 +38,17 @@ class Preview extends React.Component {
render() {
return (
<div className='videopreview' onClick={() => this.itemClick()}>
<div className='previewtitle'>{this.state.name}</div>
<div className='previewpic'>
<div className={style.videopreview} onClick={() => this.itemClick()}>
<div className={style.previewtitle}>{this.state.name}</div>
<div className={style.previewpic}>
{this.state.previewpicture != null ?
<img className='previewimage'
<img className={style.previewimage}
src={this.state.previewpicture}
alt='Pic loading.'/> :
<span className='loadAnimation'><Spinner animation="border"/></span>}
<span className={style.loadAnimation}><Spinner animation="border"/></span>}
</div>
<div className='previewbottom'>
<div className={style.previewbottom}>
</div>
</div>
@ -68,8 +68,8 @@ class Preview extends React.Component {
export class TagPreview extends React.Component {
render() {
return (
<div className='videopreview tagpreview' onClick={() => this.itemClick()}>
<div className='tagpreviewtitle'>
<div className={style.videopreview + ' ' + style.tagpreview} onClick={() => this.itemClick()}>
<div className={style.tagpreviewtitle}>
{this.props.name}
</div>
</div>

0
src/elements/Preview/Preview.css → src/elements/Preview/Preview.module.css
View File

20
src/elements/SideBar/SideBar.js
View File

@ -1,12 +1,28 @@
import React from "react";
import "./SideBar.css"
import style from "./SideBar.module.css"
class SideBar extends React.Component {
render() {
return (<div className='sideinfo'>
return (<div className={style.sideinfo}>
{this.props.children}
</div>);
}
}
export class SideBarTitle extends React.Component {
render() {
return (
<div className={style.sidebartitle}>{this.props.children}</div>
);
}
}
export class SideBarItem extends React.Component {
render() {
return (
<div className={style.sidebarinfo}>{this.props.children}</div>
);
}
}
export default SideBar;

0
src/elements/SideBar/SideBar.css → src/elements/SideBar/SideBar.module.css
View File

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

@ -1,12 +1,12 @@
import React from "react";
import "./Tag.css"
import styles from "./Tag.module.css"
import CategoryPage from "../../pages/CategoryPage/CategoryPage";
class Tag extends React.Component {
render() {
return (
<button className='tagbtn' onClick={() => this.TagClick()}
<button className={styles.tagbtn} onClick={() => this.TagClick()}
data-testid="Test-Tag">{this.props.children}</button>
);
}

0
src/elements/Tag/Tag.css → src/elements/Tag/Tag.module.css
View File

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

@ -1,5 +1,6 @@
import React from "react";
import Preview from "../Preview/Preview";
import style from "./VideoContainer.module.css"
class VideoContainer extends React.Component {
constructor(props, context) {
@ -24,7 +25,7 @@ class VideoContainer extends React.Component {
render() {
return (
<div className='maincontent'>
<div className={style.maincontent}>
{this.state.loadeditems.map(elem => (
<Preview
key={elem.movie_id}

4
src/elements/VideoContainer/VideoContainer.module.css Normal file
View File

@ -0,0 +1,4 @@
.maincontent {
float: left;
width: 70%;
}

7
src/pages/CategoryPage/CategoryPage.js
View File

@ -1,6 +1,7 @@
import React from "react";
import SideBar from "../../elements/SideBar/SideBar";
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/NewTagPopup/NewTagPopup";
@ -34,7 +35,7 @@ class CategoryPage extends React.Component {
subtitle={!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}/>
<SideBar>
<div className='sidebartitle'>Default Tags:</div>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={{
changeRootElement: (e) => {
this.loadTag(e.props.category)
@ -72,7 +73,7 @@ class CategoryPage extends React.Component {
onClick={this.loadCategoryPageDefault}>Back
</button>
</> :
<div className='maincontent'>
<div className={videocontainerstyle.maincontent}>
{this.state.loadedtags ?
this.state.loadedtags.map((m) => (
<TagPreview

26
src/pages/HomePage/HomePage.js
View File

@ -1,9 +1,9 @@
import React from "react";
import SideBar from "../../elements/SideBar/SideBar";
import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import "./HomePage.css"
import style from "./HomePage.module.css"
import PageTitle from "../../elements/PageTitle/PageTitle";
class HomePage extends React.Component {
@ -120,11 +120,11 @@ class HomePage extends React.Component {
render() {
return (
<div>
<>
<PageTitle
title='Home Page'
subtitle={this.state.tag + " Videos - " + this.state.selectionnr}>
<form className="form-inline searchform" onSubmit={(e) => {
<form className={"form-inline " + style.searchform} onSubmit={(e) => {
e.preventDefault();
this.searchVideos(this.keyword);
}}>
@ -137,15 +137,15 @@ class HomePage extends React.Component {
</form>
</PageTitle>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<SideBarTitle>Infos:</SideBarTitle>
<hr/>
<div className='sidebarinfo'><b>{this.state.sideinfo.videonr}</b> Videos Total!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</div>
<div className='sidebarinfo'><b>{this.state.sideinfo.tagnr}</b> different Tags!</div>
<SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
<hr/>
<div className='sidebartitle'>Default Tags:</div>
<SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={this.props.viewbinding}>All</Tag>
<Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
<Tag viewbinding={this.props.viewbinding}>LowQuality</Tag>
@ -156,11 +156,11 @@ class HomePage extends React.Component {
data={this.state.data}
viewbinding={this.props.viewbinding}/> :
<div>No Data found!</div>}
<div className='rightinfo'>
<div className={style.rightinfo}>
</div>
</div>
</>
);
}
}

5
src/pages/HomePage/HomePage.css → src/pages/HomePage/HomePage.module.css
View File

@ -1,8 +1,3 @@
.maincontent {
float: left;
width: 70%;
}
.rightinfo {
float: left;
width: 10%;

22
src/pages/Player/Player.js
View File

@ -1,7 +1,7 @@
import React from "react";
import "./Player.css"
import style from "./Player.module.css"
import {PlyrComponent} from 'plyr-react';
import SideBar from "../../elements/SideBar/SideBar";
import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
import PageTitle from "../../elements/PageTitle/PageTitle";
@ -52,17 +52,15 @@ class Player extends React.Component {
subtitle={this.state.movie_name}/>
<SideBar>
<div className='sidebartitle'>Infos:</div>
<SideBarTitle>Infos:</SideBarTitle>
<hr/>
<div className='sidebarinfo'><b>{this.state.likes}</b> Likes!</div>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{this.state.quality !== 0 ?
<div className='sidebarinfo'><b>{this.state.quality}p</b> Quality!
</div> : null}
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
{this.state.length !== 0 ?
<div className='sidebarinfo'><b>{Math.round(this.state.length / 60)}</b> Minutes of length!
</div> : null}
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
<hr/>
<div className='sidebartitle'>Tags:</div>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag
key={m.tag_name}
@ -70,14 +68,14 @@ class Player extends React.Component {
))}
</SideBar>
<div className="videowrapper">
<div className={style.videowrapper}>
{/* video component is added here */}
{this.state.sources ? <PlyrComponent
className='myvideo'
sources={this.state.sources}
options={this.options}/> :
<div>not loaded yet</div>}
<div className='videoactions'>
<div className={style.videoactions}>
<button className='btn btn-primary' onClick={() => this.likebtn()}>Like this Video!</button>
<button className='btn btn-info' onClick={() => this.setState({popupvisible: true})}>Give this
Video a Tag
@ -94,7 +92,7 @@ class Player extends React.Component {
</div>
</div>
<button className="closebutton" onClick={() => this.closebtn()}>Close</button>
<button className={style.closebutton} onClick={() => this.closebtn()}>Close</button>
</div>
);
}

11
src/pages/Player/Player.css → src/pages/Player/Player.module.css
View File

@ -8,17 +8,6 @@
margin-left: 25px;
}
.likefield {
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
height: 30px;
background-color: #9e5353;
border-radius: 10px;
text-align: center;
color: white;
}
.videowrapper {
margin-left: 20px;
display: block;

10
src/pages/RandomPage/RandomPage.js
View File

@ -1,7 +1,7 @@
import React from "react";
import Preview from "../../elements/Preview/Preview";
import "./RandomPage.css"
import SideBar from "../../elements/SideBar/SideBar";
import style from "./RandomPage.module.css"
import SideBar, {SideBarTitle} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag";
import PageTitle from "../../elements/PageTitle/PageTitle";
@ -27,7 +27,7 @@ class RandomPage extends React.Component {
subtitle='4pc'/>
<SideBar>
<div className='sidebartitle'>Visible Tags:</div>
<SideBarTitle>Visible Tags:</SideBarTitle>
{this.state.tags.map((m) => (
<Tag
key={m.tag_name}
@ -43,8 +43,8 @@ class RandomPage extends React.Component {
movie_id={elem.movie_id}
viewbinding={this.props.viewbinding}/>
))}
<div className='Shufflebutton'>
<button onClick={() => this.shuffleclick()} className='btnshuffle'>Shuffle</button>
<div className={style.Shufflebutton}>
<button onClick={() => this.shuffleclick()} className={style.btnshuffle}>Shuffle</button>
</div>
</div>
</div>

0
src/pages/RandomPage/RandomPage.css → src/pages/RandomPage/RandomPage.module.css
View File