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

new folder structure for php scripts

Browse Source 
renamed api nodes
php braces on same line
This commit is contained in:
Lukas Heiligenbrunner
2020-08-12 17:50:25 +00:00
parent 13336cbf1c
commit 1de36afb69
34 changed files with 457 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.js
View File

@ -10,6 +10,9 @@ import style from './App.module.css'
import SettingsPage from "./pages/SettingsPage/SettingsPage";
import CategoryPage from "./pages/CategoryPage/CategoryPage";
/**
* The main App handles the main tabs and which content to show
*/
class App extends React.Component {
newElement = null;
@ -31,7 +34,7 @@ class App extends React.Component {
const updateRequest = new FormData();
updateRequest.append('action', 'loadInitialData');
fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
// set theme
@ -47,6 +50,10 @@ class App extends React.Component {
}));
}
/**
* create a viewbinding to call APP functions from child elements
* @returns a set of callback functions
*/
constructViewBinding() {
return {
changeRootElement: this.changeRootElement,
@ -54,6 +61,10 @@ class App extends React.Component {
};
}
/**
* load the selected component into the main view
* @returns {JSX.Element} body element of selected page
*/
MainBody() {
let page;
if (this.state.page === "default") {
@ -109,6 +120,9 @@ class App extends React.Component {
);
}
/**
* render a new root element into the main body
*/
changeRootElement(element) {
this.newElement = element;
@ -117,6 +131,9 @@ class App extends React.Component {
});
}
/**
* return from page to the previous page before a change
*/
returnToLastElement() {
this.setState({
page: "lastpage"

26
src/App.module.css
View File

@ -1,12 +1,12 @@
.navitem {
float: left;
margin-left: 20px;
cursor: pointer;
opacity: 0.6;
float: left;
font-size: large;
font-weight: bold;
margin-left: 20px;
opacity: 0.6;
text-transform: capitalize;
}
@ -18,9 +18,9 @@
.navitem::after {
content: '';
display: block;
width: 0;
height: 2px;
transition: width .3s;
width: 0;
}
.navitem:hover::after {
@ -33,22 +33,22 @@
}
.navcontainer {
border-bottom-width: 2px;
border-style: dotted;
border-width: 0;
padding-bottom: 40px;
padding-top: 20px;
width: 100%;
padding-bottom: 40px;
border-width: 0;
border-style: dotted;
border-bottom-width: 2px;
}
.navbrand {
margin-left: 20px;
margin-right: 20px;
float: left;
font-size: large;
font-weight: bold;
margin-left: 20px;
margin-right: 20px;
text-transform: capitalize;
float: left;
}

22
src/GlobalInfos.js
View File

@ -1,23 +1,37 @@
import darktheme from "./AppDarkTheme.module.css";
import lighttheme from "./AppLightTheme.module.css";
/**
* This class is available for all components in project
* it contains general infos about app - like theme
*/
class StaticInfos {
#darktheme = true;
/**
* check if the current theme is the dark theme
* @returns {boolean} is dark theme?
*/
isDarkTheme() {
return this.#darktheme;
};
enableDarkTheme(enable = true){
/**
* setter to enable or disable the dark or light theme
* @param enable enable the dark theme?
*/
enableDarkTheme(enable = true) {
this.#darktheme = enable;
}
getThemeStyle(){
/**
* get the currently selected theme stylesheet
* @returns {*} the style object of the current active theme
*/
getThemeStyle() {
return this.isDarkTheme() ? darktheme : lighttheme;
}
}
const GlobalInfos = new StaticInfos();
//Object.freeze(StaticInfos);
export default GlobalInfos;

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

@ -3,6 +3,9 @@ import Modal from 'react-bootstrap/Modal'
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
/**
* component creates overlay to add a new tag to a video
*/
class AddTagPopup extends React.Component {
constructor(props, context) {
super(props, context);
@ -22,7 +25,7 @@ class AddTagPopup extends React.Component {
const updateRequest = new FormData();
updateRequest.append('action', 'getAllTags');
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({
@ -68,13 +71,16 @@ class AddTagPopup extends React.Component {
);
}
/**
* store the filled in form to the backend
*/
storeselection() {
const updateRequest = new FormData();
updateRequest.append('action', 'addTag');
updateRequest.append('id', this.state.selection.id);
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.result !== "success") {

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

@ -2,6 +2,9 @@ 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);
@ -45,12 +48,15 @@ class NewTagPopup extends React.Component {
);
}
/**
* 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})
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
if (result.result !== "success") {

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

@ -2,14 +2,10 @@ import React from "react";
import style from "./PageTitle.module.css"
import GlobalInfos from "../../GlobalInfos";
/**
* Component for generating PageTitle with bottom Line
*/
class PageTitle extends React.Component {
constructor(props) {
super(props);
this.props = props;
}
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (

2
src/elements/PageTitle/PageTitle.module.css
View File

@ -8,7 +8,7 @@
}
.pageheadersubtitle {
margin-left: 20px;
font-size: 23pt;
margin-left: 20px;
opacity: 0.6;
}

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

@ -4,6 +4,10 @@ import Player from "../../pages/Player/Player";
import {Spinner} from "react-bootstrap";
import GlobalInfos from "../../GlobalInfos";
/**
* Component for single preview tile
* floating side by side
*/
class Preview extends React.Component {
constructor(props, context) {
super(props, context);
@ -24,7 +28,7 @@ class Preview extends React.Component {
updateRequest.append('action', 'readThumbnail');
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.text()
.then((result) => {
this.setState({
@ -36,8 +40,8 @@ class Preview extends React.Component {
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
<div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview} onClick={() => this.itemClick()}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.state.name}</div>
<div className={style.previewpic}>
{this.state.previewpicture !== null ?
<img className={style.previewimage}
@ -53,6 +57,9 @@ class Preview extends React.Component {
);
}
/**
* handle the click event of a tile
*/
itemClick() {
console.log("item clicked!" + this.state.name);
@ -63,11 +70,14 @@ class Preview extends React.Component {
}
}
/**
* Component for a Tag-name tile (used in category page)
*/
export class TagPreview extends React.Component {
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
<div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview} onClick={() => this.itemClick()}>
<div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
{this.props.name}
</div>
@ -75,6 +85,9 @@ export class TagPreview extends React.Component {
);
}
/**
* handle the click event of a Tag tile
*/
itemClick() {
this.props.categorybinding(this.props.name);
}

4
src/elements/Preview/Preview.module.css
View File

@ -1,11 +1,11 @@
.previewtitle {
height: 20px;
text-align: center;
font-size: smaller;
font-weight: bold;
height: 20px;
height: 20px;
max-width: 266px;
text-align: center;
text-align: center;
}
.previewpic {

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

@ -2,24 +2,33 @@ import React from "react";
import style from "./SideBar.module.css"
import GlobalInfos from "../../GlobalInfos";
/**
* component for sidebar-info
*/
class SideBar extends React.Component {
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
return (<div className={style.sideinfo + ' ' + themeStyle.secbackground}>
{this.props.children}
</div>);
}
}
/**
* The title of the sidebar
*/
export class SideBarTitle extends React.Component {
render() {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
<div className={style.sidebartitle + ' ' + themeStyle.subtextcolor}>{this.props.children}</div>
);
}
}
/**
* An item of the sidebar
*/
export class SideBarItem extends React.Component {
render() {
const themeStyle = GlobalInfos.getThemeStyle();

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

@ -3,6 +3,9 @@ import React from "react";
import styles from "./Tag.module.css"
import CategoryPage from "../../pages/CategoryPage/CategoryPage";
/**
* A Component representing a single Category tag
*/
class Tag extends React.Component {
render() {
return (
@ -11,9 +14,13 @@ class Tag extends React.Component {
);
}
/**
* click handling for a Tag
*/
TagClick() {
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}

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

@ -2,6 +2,10 @@ import React from "react";
import Preview from "../Preview/Preview";
import style from "./VideoContainer.module.css"
/**
* A videocontainer storing lots of Preview elements
* includes scroll handling and loading of preview infos
*/
class VideoContainer extends React.Component {
// stores current index of loaded elements
loadindex = 0;
@ -43,9 +47,14 @@ class VideoContainer extends React.Component {
componentWillUnmount() {
this.setState({});
// unbind scroll listener when unmounting component
document.removeEventListener('scroll', this.trackScrolling);
}
/**
* load previews to the container
* @param nr number of previews to load
*/
loadPreviewBlock(nr) {
console.log("loadpreviewblock called ...")
let ret = [];
@ -67,9 +76,11 @@ class VideoContainer extends React.Component {
this.loadindex += nr;
}
/**
* scroll event handler -> load new previews if on bottom
*/
trackScrolling = () => {
// comparison if current scroll position is on bottom
// 200 stands for bottom offset to trigger load
// 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);
}

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

@ -8,6 +8,10 @@ import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
/**
* 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);
@ -27,7 +31,11 @@ class CategoryPage extends React.Component {
}
}
render() {
/**
* render the Title and SideBar component for the Category page
* @returns {JSX.Element} corresponding jsx element for Title and Sidebar
*/
renderSideBarATitle() {
return (
<>
<PageTitle
@ -61,7 +69,14 @@ class CategoryPage extends React.Component {
this.setState({popupvisible: true})
}}>Add a new Tag!
</button>
</SideBar>
</SideBar></>
);
}
render() {
return (
<>
{this.renderSideBarATitle()}
{this.state.selected ?
<>
@ -100,10 +115,18 @@ class CategoryPage extends React.Component {
);
}
/**
* 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) {
console.log(tag);
const updateRequest = new FormData();
@ -113,7 +136,7 @@ class CategoryPage extends React.Component {
console.log("fetching data");
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.videodata = result;
@ -125,6 +148,9 @@ class CategoryPage extends React.Component {
});
}
/**
* go back to the default category overview
*/
loadCategoryPageDefault = () => {
this.setState({selected: null});
this.loadTags();
@ -138,7 +164,7 @@ class CategoryPage extends React.Component {
updateRequest.append('action', 'getAllTags');
// fetch all videos available
fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
fetch('/api/tags.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({loadedtags: result});

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

@ -6,6 +6,9 @@ import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import style from "./HomePage.module.css"
import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
/**
* The home page component showing on the initial pageload
*/
class HomePage extends React.Component {
/** keyword variable needed temporary store search keyword */
keyword = "";
@ -47,7 +50,7 @@ class HomePage extends React.Component {
console.log("fetching data");
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({
@ -71,7 +74,7 @@ class HomePage extends React.Component {
updateRequest.append('action', 'getStartData');
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({
@ -102,7 +105,7 @@ class HomePage extends React.Component {
updateRequest.append('keyword', keyword);
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
this.setState({

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

@ -8,6 +8,10 @@ import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
/**
* 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 = {
controls: [
@ -59,7 +63,8 @@ class Player extends React.Component {
{this.state.quality !== 0 ?
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
{this.state.length !== 0 ?
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of
length!</SideBarItem> : null}
<Line/>
<SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m) => (
@ -98,12 +103,15 @@ class Player extends React.Component {
);
}
/**
* fetch all the required infos of a video from backend
*/
fetchMovieData() {
const updateRequest = new FormData();
updateRequest.append('action', 'loadVideo');
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json())
.then((result) => {
this.setState({
@ -129,13 +137,15 @@ class Player extends React.Component {
}
/* Click Listener */
/**
* click handler for the like btn
*/
likebtn() {
const updateRequest = new FormData();
updateRequest.append('action', 'addLike');
updateRequest.append('movieid', this.props.movie_id);
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.result === "success") {
@ -147,6 +157,10 @@ class Player extends React.Component {
}));
}
/**
* closebtn click handler
* calls callback to viewbinding to show previous page agains
*/
closebtn() {
this.props.viewbinding.returnToLastElement();
}

2
src/pages/Player/Player.module.css
View File

@ -13,8 +13,8 @@
float: left;
margin-left: 20px;
margin-top: 25px;
width: 60%;
margin-top: 20px;
width: 60%;
}
.videoactions {

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

@ -5,6 +5,9 @@ import Tag from "../../elements/Tag/Tag";
import PageTitle from "../../elements/PageTitle/PageTitle";
import VideoContainer from "../../elements/VideoContainer/VideoContainer";
/**
* Randompage shuffles random viedeopreviews and provides a shuffle btn
*/
class RandomPage extends React.Component {
constructor(props, context) {
super(props, context);
@ -50,17 +53,24 @@ class RandomPage extends React.Component {
);
}
/**
* click handler for shuffle btn
*/
shuffleclick() {
this.loadShuffledvideos(4);
}
/**
* load random videos from backend
* @param nr number of videos to load
*/
loadShuffledvideos(nr) {
const updateRequest = new FormData();
updateRequest.append('action', 'getRandomMovies');
updateRequest.append('number', nr);
// fetch all videos available
fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
fetch('/api/video.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log(result);

48
src/pages/SettingsPage/GeneralSettings.js
View File

@ -3,6 +3,10 @@ import {Button, Col, Form} from "react-bootstrap";
import style from "./GeneralSettings.module.css"
import GlobalInfos from "../../GlobalInfos";
/**
* Component for Generalsettings tag on Settingspage
* handles general settings of mediacenter which concerns to all pages
*/
class GeneralSettings extends React.Component {
constructor(props) {
super(props);
@ -19,22 +23,7 @@ class GeneralSettings extends React.Component {
}
componentDidMount() {
const updateRequest = new FormData();
updateRequest.append('action', 'loadGeneralSettings');
fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.setState({
videopath: result.video_path,
tvshowpath: result.episode_path,
mediacentername: result.mediacenter_name,
password: result.password,
passwordsupport: result.passwordEnabled,
tmdbsupport: result.TMDB_grabbing
});
}));
this.loadSettings();
}
render() {
@ -119,6 +108,31 @@ class GeneralSettings extends React.Component {
);
}
/**
* inital load of already specified settings from backend
*/
loadSettings() {
const updateRequest = new FormData();
updateRequest.append('action', 'loadGeneralSettings');
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.setState({
videopath: result.video_path,
tvshowpath: result.episode_path,
mediacentername: result.mediacenter_name,
password: result.password,
passwordsupport: result.passwordEnabled,
tmdbsupport: result.TMDB_grabbing
});
}));
}
/**
* save the selected and typed settings to the backend
*/
saveSettings() {
const updateRequest = new FormData();
updateRequest.append('action', 'saveGeneralSettings');
@ -130,7 +144,7 @@ class GeneralSettings extends React.Component {
updateRequest.append("tmdbsupport", this.state.tmdbsupport);
updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme());
fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.success) {

10
src/pages/SettingsPage/MovieSettings.js
View File

@ -1,6 +1,10 @@
import React from "react";
import style from "./MovieSettings.module.css"
/**
* Component for MovieSettings on Settingspage
* handles settings concerning to movies in general
*/
class MovieSettings extends React.Component {
constructor(props) {
super(props);
@ -36,6 +40,9 @@ class MovieSettings extends React.Component {
);
}
/**
* starts the reindex process of the videos in the specified folder
*/
startReindex() {
// clear output text before start
this.setState({text: []});
@ -60,6 +67,9 @@ class MovieSettings extends React.Component {
this.myinterval = setInterval(this.updateStatus, 1000);
}
/**
* This interval function reloads the current status of reindexing from backend
*/
updateStatus = () => {
const updateRequest = new FormData();
fetch('/api/extractionData.php', {method: 'POST', body: updateRequest})

9
src/pages/SettingsPage/SettingsPage.js
View File

@ -4,7 +4,10 @@ import GeneralSettings from "./GeneralSettings";
import style from "./SettingsPage.module.css"
import GlobalInfos from "../../GlobalInfos";
/**
* The Settingspage handles all kinds of settings for the mediacenter
* and is basically a wrapper for child-tabs
*/
class SettingsPage extends React.Component {
constructor(props, context) {
super(props, context);
@ -14,6 +17,10 @@ class SettingsPage extends React.Component {
};
}
/**
* load the selected tab
* @returns {JSX.Element|string} the jsx element of the selected tab
*/
getContent() {
switch (this.state.currentpage) {
case "general":

9
src/setupTests.js
View File

@ -9,6 +9,11 @@ import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()});
/**
* prepares fetch api for a virtual test call
* @param response the response fetch should give you back
* @returns {jest.Mock<any, any>} a jest mock function simulating a fetch
*/
global.prepareFetchApi = (response) => {
const mockJsonPromise = Promise.resolve(response);
const mockFetchPromise = Promise.resolve({
@ -17,6 +22,10 @@ global.prepareFetchApi = (response) => {
return (jest.fn().mockImplementation(() => mockFetchPromise));
}
/**
* prepares a failing virtual fetch api call
* @returns {jest.Mock<any, any>} a jest moch function simulating a failing fetch call
*/
global.prepareFailingFetchApi = () => {
const mockFetchPromise = Promise.reject("myreason");
return (jest.fn().mockImplementation(() => mockFetchPromise));