Merge branch 'react17plyr3' into 'master'

React17plyr3

See merge request lukas/openmediacenter!26

package.json

@@ -3,21 +3,21 @@
   "version": "0.1.2",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.11",
+    "@fortawesome/react-fontawesome": "^0.1.13",
     "bootstrap": "^4.5.3",
-    "plyr-react": "^2.2.0",
+    "plyr-react": "^3.0.7",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.1"
-    "react-scripts": "^3.4.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --reporters=jest-junit --reporters=default",
+    "testsec": "set NODE_ENV=test && jest --runInBand --ci --all --detectOpenHandles --forceExit --clearMocks --verbose",
     "coverage": "react-scripts test --coverage --watchAll=false",
     "eject": "react-scripts eject"
   },
@@ -31,7 +31,7 @@
       "text-summary"
     ]
   },
-  "proxy": "http://192.168.0.42:8080",
+  "proxy": "http://192.168.0.209",
   "homepage": "/",
   "eslintConfig": {
     "extends": "react-app"
@@ -49,11 +49,12 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
+    "react-scripts": "^3.4.4",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/user-event": "^7.2.1",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.2.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
-    "jest-junit": "^10.0.0"
+    "jest-junit": "^12.0.0"
   }
 }

src/pages/CategoryPage/CategoryPage.test.js

@@ -46,22 +46,18 @@ describe('<CategoryPage/>', function () {
     });
 
     it('test new tag popup', function () {
-        const wrapper = mount(<CategoryPage/>);
+        const wrapper = shallow(<CategoryPage/>);
 
         expect(wrapper.find('NewTagPopup')).toHaveLength(0);
         wrapper.find('[data-testid="btnaddtag"]').simulate('click');
         // newtagpopup should be showing now
         expect(wrapper.find('NewTagPopup')).toHaveLength(1);
-
-        // click close button in modal
-        wrapper.find('.modal-header').find('button').simulate('click');
-        expect(wrapper.find('NewTagPopup')).toHaveLength(0);
     });
 
     it('test setpage callback', done => {
         global.fetch = global.prepareFetchApi([{}, {}]);
 
-        const wrapper = mount(<CategoryPage/>);
+        const wrapper = shallow(<CategoryPage/>);
 
         wrapper.setState({
             loadedtags: [
@@ -72,7 +68,7 @@ describe('<CategoryPage/>', function () {
             ]
         });
 
-        wrapper.find('TagPreview').find('div').first().simulate('click');
+        wrapper.find('TagPreview').dive().find('div').first().simulate('click');
 
         process.nextTick(() => {
             // expect callback to have loaded correct tag
@@ -106,14 +102,12 @@ describe('<CategoryPage/>', function () {
     it('test sidebar tag clicks', function () {
         const func = jest.fn();
 
-        const wrapper = mount(<CategoryPage category='fullhd'/>);
+        const wrapper = shallow(<CategoryPage category='fullhd'/>);
         wrapper.instance().loadTag = func;
 
-        console.log(wrapper.debug());
-
         expect(func).toBeCalledTimes(0);
         wrapper.find('SideBar').find('Tag').forEach(e => {
-            e.simulate('click');
+            e.dive().simulate('click');
         });
 
         expect(func).toBeCalledTimes(4);

src/pages/Player/Player.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import style from './Player.module.css';
 
-import {PlyrComponent} from 'plyr-react';
+import style from './Player.module.css';
+import plyrstyle from 'plyr-react/dist/plyr.css'
+
+import {Plyr} from 'plyr-react';
 import SideBar, {SideBarItem, SideBarTitle} from '../../elements/SideBar/SideBar';
 import Tag from '../../elements/Tag/Tag';
 import AddTagPopup from '../../elements/AddTagPopup/AddTagPopup';
@@ -168,9 +170,9 @@ class Player extends React.Component {
 
                 <div className={style.videowrapper}>
                     {/* video component is added here */}
-                    {this.state.sources ? <PlyrComponent
+                    {this.state.sources ? <Plyr
-                            className='myvideo'
+                        style={plyrstyle}
-                            sources={this.state.sources}
+                            source={this.state.sources}
                             options={this.options}/> :
                         <div>not loaded yet</div>}
                     <div className={style.videoactions}>

src/pages/Player/Player.test.js

@@ -20,7 +20,8 @@ describe('<Player/>', function () {
                 }
             ]
         });
-        expect(wrapper.find('r')).toHaveLength(1);
+
+        expect(wrapper.find('Plyr').dive().find('video')).toHaveLength(1);
     });
 
     function simulateLikeButtonClick() {