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

moved all css files to module files to seperate into namespaces and prevent name overlaps

Browse Source
This commit is contained in:
Lukas Heiligenbrunner 2020-07-08 00:14:08 +02:00
parent afae31618c
commit 720c218a11
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