load previews correctly with fetch

2020-05-31 20:24:35 +02:00
1 parent 1c2fe33cca
commit c7071491e3
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
-    <meta charset="utf-8">
-    <title>hub</title>
-    <link rel="stylesheet" href="css/plyr.css"/>
-    <link rel="stylesheet" href="css/index.css">
-
-
-    <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-
-    <!-- jQuery library -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
-    <!-- Popper JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-
-    <!-- Latest compiled JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
-
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
-
-    <script src="js/plyr.js"></script>
-    <script src="js/index.js"></script>
-</head>
-<body>
-<!-- Grey with black text -->
-<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
-    <!-- Brand -->
-    <a class="navbar-brand" href="#">Lukis Tube</a>
-
-    <ul class="navbar-nav">
-        <li class="nav-item ">
-            <a class="nav-link" href="index.html">Home</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="random.html">Random Video</a>
-        </li>
-        <li class="nav-item active">
-            <a class="nav-link" href="category.html">Categories</a>
-        </li>
-    </ul>
-</nav>
-
-</body>
-</html>
@@ -1 +0,0 @@
-@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:subpixel-antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5764;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:14px;left:0;padding:10px;position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions .plyr__caption{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions .plyr__caption div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:16px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px)}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 5px rgba(0,179,255,.5);outline:0}a.plyr__control{text-decoration:none}a.plyr__control::after,a.plyr__control::before{display:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b3ff;color:#fff}.plyr--video .plyr__control.plyr__tab-focus,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b3ff;color:#fff}.plyr__control--overlaid{background:rgba(0,179,255,.8);border:0;border-radius:100%;color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#00b3ff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr__controls .plyr__controls__item.plyr__volume{padding-right:5px}.plyr__controls .plyr__controls__item.plyr__volume:first-child{padding-right:0}.plyr__controls:empty{display:none}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4a5764;padding:10px}.plyr--video .plyr__controls{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:20px 5px 5px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:35px 10px 10px}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [dataLine truncated
@@ -3,9 +3,9 @@
 <head>
    <meta charset="utf-8">
    <title>hub</title>
-    <link rel="stylesheet" href="css/plyr.css"/>
-    <link rel="stylesheet" href="css/index.css">
-    <link rel="stylesheet" href="css/video.css">
+    <link rel="stylesheet" href="src/css/plyr.css"/>
+    <link rel="stylesheet" href="src/css/index.css">
+    <link rel="stylesheet" href="src/css/video.css">


    <!-- Latest compiled and minified CSS -->
@@ -4216,6 +4216,11 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
      "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w=="
    },
+    "custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
    "cyclist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -7834,6 +7839,11 @@
        }
      }
    },
+    "loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz",
+      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+    },
    "locate-path": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
@@ -9131,6 +9141,18 @@
        "find-up": "^2.1.0"
      }
    },
+    "plyr": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.6.2.tgz",
+      "integrity": "sha512-CjAhRDtzyGqMRte9Phj4FsZFegS9VxW60boOhQsAnZHuiFG3yVBRcodWsGZ79GuXHHelc4DxMHO+z0QggY+9qQ==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.8"
+      }
+    },
    "pn": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
@@ -10326,6 +10348,11 @@
      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
    },
+    "rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+    },
    "raw-body": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
@@ -12810,6 +12837,11 @@
        "requires-port": "^1.0.0"
      }
    },
+    "url-polyfill": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.9.tgz",
+      "integrity": "sha512-q/R5sowGuRfKHm497swkV+s9cPYtZRkHxzpDjRhqLO58FwdWTIkt6Y/fJlznUD/exaKx/XnDzCYXz0V16ND7ow=="
+    },
    "use": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -7,6 +7,7 @@
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.0",
+    "plyr": "^3.6.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
@@ -17,6 +18,7 @@
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
+  "proxy": "http://127.0.0.1:4000",
  "eslintConfig": {
    "extends": "react-app"
  },
@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
-    <meta charset="utf-8">
-    <title>hub</title>
-    <link rel="stylesheet" href="css/plyr.css"/>
-    <link rel="stylesheet" href="css/video.css">
-    <link rel="stylesheet" href="css/random.css">
-
-
-    <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-
-    <!-- jQuery library -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
-    <!-- Popper JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-
-    <!-- Latest compiled JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
-
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
-
-    <script src="js/plyr.js"></script>
-    <script src="js/random.js"></script>
-</head>
-<body>
-<!-- Grey with black text -->
-<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
-    <!-- Brand -->
-    <a class="navbar-brand" href="#">Lukis Tube</a>
-
-    <ul class="navbar-nav">
-        <li class="nav-item">
-            <a class="nav-link" href="index.html">Home</a>
-        </li>
-        <li class="nav-item active">
-            <a class="nav-link" href="random.html">Random Video</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="category.html">Categories</a>
-        </li>
-    </ul>
-</nav>
-
-<div class="videopagewrapper hideit">
-    <div class="row">
-        <div class="col-sm-2">
-            <div class="videoleftbanner">
-                <div class="likefield">Likes: 10</div>
-            </div>
-        </div>
-        <div class="col-sm-8">
-            <div class="videowrapper"></div>
-        </div>
-        <div class="col-sm-2">
-            <div class="closebutton">Close</div>
-            <div class="videorightbanner"></div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-sm-5">
-
-
-        </div>
-        <div class="col-sm-2">
-            <button id="likebtn">Like it!</button>
-            <button id="tagbutton">Tag it!</button>
-
-        </div>
-        <div class="col-sm-5">
-
-
-        </div>
-    </div>
-</div>
-
-
-<div class="previewcontainer">
-</div>
-<div style="width: 100%"><button type="button" id="shufflebtn" class="btn btn-success">Shuffle</button></div>
-
-</body>
-</html>
@@ -1,11 +0,0 @@
-import * as React from "react";
-
-class AlternativeBody extends React.Component{
-    render() {
-        return (
-            <div>Second page!</div>
-        );
-    }
-}
-
-export default AlternativeBody;
@@ -1 +0,0 @@
-
@@ -1,29 +1,12 @@
 import React from 'react';
-import './App.css';
 import MainBody from "./MainBody";
-import AlternativeBody from "./AlternativeBody"
-import ReactDOM from 'react-dom';
+
 import 'bootstrap/dist/css/bootstrap.min.css';

 class App extends React.Component {
-    page1click() {
-        console.log("click page1");
-
-        // rerender mainbody space here
-        ReactDOM.render(
-            <MainBody/>,
-            document.getElementById("mainbody")
-        );
-    }
-
-    page2click() {
-        console.log("click page2");
-
-        // rerender mainbody space here
-        ReactDOM.render(
-            <AlternativeBody/>,
-            document.getElementById("mainbody")
-        );
+    constructor(props, context) {
+        super(props, context);
+        this.state = {page: "default"};
    }

    render() {
@@ -34,36 +17,34 @@ class App extends React.Component {

                    <ul className="navbar-nav">
                        <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.homePageClick()} href="!#">Home</a>
+                            <a className="nav-link" onClick={() => this.loadHomePage()} href="!#">Home</a>
                        </li>
                        <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.homePageClick()} href="!#">Random Video</a>
+                            <a className="nav-link" onClick={() => this.loadRandomPage()} href="!#">Random Video</a>
                        </li>
                        <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.homePageClick()} href="!#">Categories</a>
+                            <a className="nav-link" onClick={() => this.loadCategoriesPage()} href="!#">Categories</a>
                        </li>
                    </ul>
                </nav>
-                <div>
-                    <button onClick={() => this.page1click()}>Page1</button>
-                    <button onClick={() => this.page2click()}>Page2</button>
-                </div>
-                <div id="mainbody">
-                    mimimimimi
-                </div>
-
+                <MainBody page={this.state.page}/>
            </div>
        );
    }

-    homePageClick() {
-        console.log("click page1");
+    loadCategoriesPage() {
+        console.log("click categories");
+        this.setState({page: "categories"});
+    }

-        // rerender mainbody space here
-        ReactDOM.render(
-            <MainBody/>,
-            document.getElementById("mainbody")
-        );
+    loadRandomPage() {
+        console.log("click random");
+        this.setState({page: "random"});
+    }
+
+    loadHomePage() {
+        console.log("click default");
+        this.setState({page: "default"});
    }
 }

@@ -0,0 +1,58 @@
+import React from "react";
+import Preview from "./Preview";
+import './css/video.css'
+
+class HomePage extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            data: null
+        };
+    }
+
+    componentDidMount() {
+        // todo check if better here or in constructor
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getMovies');
+
+        // fetch all videos available
+        fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json())
+            .then((result) => {
+                this.setState({data: result});
+            });
+    }
+
+    componentWillUnmount() {
+        this.setState({});
+    }
+
+    render() {
+        return (
+            <div>
+                <div><h1>Home page</h1></div>
+                {this.state.data ? this.loadPreviewBlock(12) : <div>not loaded yet</div>}
+            </div>
+        );
+    }
+
+    loadPreview(index) {
+        return (
+            <Preview
+                key={index}
+                name={this.state.data[index].movie_name}
+                movie_id={this.state.data[index].movie_id}/>
+            );
+    }
+
+    loadPreviewBlock(nr) {
+        let ret = [];
+        for (let i = 0; i < nr; i++) {
+            ret.push(this.loadPreview(i));
+        }
+        return (ret);
+    }
+}
+
+export default HomePage;
@@ -1,19 +1,21 @@
 import React from "react";
+import HomePage from "./HomePage";

 class MainBody extends React.Component {
+    constructor(props) {
+        super(props);
+        this.props = props;
+    }
+
    render() {
-        const requestOptions = {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ title: 'React POST Request Example' })
-        };
-        fetch('https://jsonplaceholder.typicode.com/posts', requestOptions)
-            .then(response => response.json())
-            .then(data => this.setState({ postId: data.id }));
-        return (
-            <div>Hey from other class</div>
-        );
+        let page;
+        if (this.props.page === "default") {
+            page = <HomePage/>;
+        }else {
+            page = <div>unimplemented yet!</div>;
+        }
+        return (page);
    }
 }

-export default MainBody;
+export default MainBody;
@@ -0,0 +1,54 @@
+import React from "react";
+import "./css/Preview.css"
+
+class Preview extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.props = props;
+
+        this.state = {
+            previewpicture: null,
+            name: null,
+            url: null
+        };
+    }
+
+    componentWillUnmount() {
+        this.setState({});
+    }
+
+    componentDidMount() {
+        this.setState({
+            previewpicture: null,
+            name: this.props.name,
+            url: this.props.url
+        })
+
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'readThumbnail');
+        updateRequest.append('movieid', this.props.movie_id);
+
+        fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.text())
+            .then((result) => {
+                this.setState(prevState => ({
+                    ...prevState.previewpicture, previewpicture: result
+                }));
+            });
+    }
+
+    render() {
+        return (
+            <div className='videopreview'>
+                <div className='previewtitle'>{this.state.name}</div>
+                <div className='previewpic'>
+                    <img className='previewimage'
+                         src={this.state.previewpicture}
+                         alt='no thumbnail found'/>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Preview;
@@ -1,65 +0,0 @@
-import React from 'react';
-
-class TodoApp extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {items: [], text: ''};
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
-
-    render() {
-        return (
-            <div>
-                <h3>TODO</h3>
-                <TodoList items={this.state.items}/>
-                <form onSubmit={this.handleSubmit}>
-                    <label htmlFor="new-todo">
-                        What needs to be done?
-                    </label>
-                    <input
-                        id="new-todo"
-                        onChange={this.handleChange}
-                        value={this.state.text}
-                    />
-                    <button>
-                        Add #{this.state.items.length + 1}
-                    </button>
-                </form>
-            </div>
-        );
-    }
-
-    handleChange(e) {
-        this.setState({text: e.target.value});
-    }
-
-    handleSubmit(e) {
-        e.preventDefault();
-        if (this.state.text.length === 0) {
-            return;
-        }
-        const newItem = {
-            text: this.state.text,
-            id: Date.now()
-        };
-        this.setState(state => ({
-            items: state.items.concat(newItem),
-            text: ''
-        }));
-    }
-}
-
-class TodoList extends React.Component {
-    render() {
-        return (
-            <ul>
-                {this.props.items.map(item => (
-                    <li key={item.id}>{item.text}</li>
-                ))}
-            </ul>
-        );
-    }
-}
-
-export default TodoApp;
@@ -0,0 +1,31 @@
+.previewtitle {
+    height: 10%;
+    color: white;
+    text-align: center;
+}
+
+.previewpic {
+    height: 80%;
+}
+
+.previewimage{
+    width:100%;
+    height:100%;
+}
+
+.videopreview {
+    height: 300px;
+    width: 30%;
+    float: left;
+    margin: 1%;
+    background-color: #7F7F7F;
+    cursor: pointer;
+    opacity: 0.9;
+    border: 10px;
+    border-radius: 20px;
+}
+
+.videopreview:hover {
+    opacity: 1;
+    transition: opacity 0.5s;
+}
@@ -41,30 +41,3 @@
    width: 80%;
    margin-right: 10%;
 }
-
-.videopreview {
-    height: 300px;
-    width: 30%;
-    float: left;
-    margin: 1%;
-    background-color: #7F7F7F;
-    cursor: pointer;
-    opacity: 0.9;
-    border: 10px;
-    border-radius: 20px;
-}
-
-.videopreview:hover {
-    opacity: 1;
-    transition: opacity 0.5s;
-}
-
-.previewtitle {
-    height: 10%;
-    color: white;
-    text-align: center;
-}
-
-.previewpic {
-    height: 80%;
-}
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './css/index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
				`@@ -1 +0,0 @@`
				@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:subpixel-antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4a5764;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:14px;left:0;padding:10px;position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}.plyr__captions .plyr__caption{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions .plyr__caption div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:16px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr--captions-active .plyr__captions{display:block}.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px)}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 5px rgba(0,179,255,.5);outline:0}a.plyr__control{text-decoration:none}a.plyr__control::after,a.plyr__control::before{display:none}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b3ff;color:#fff}.plyr--video .plyr__control.plyr__tab-focus,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b3ff;color:#fff}.plyr__control--overlaid{background:rgba(0,179,255,.8);border:0;border-radius:100%;color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{left:2px;position:relative}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#00b3ff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__progress__container{flex:1;min-width:0}.plyr__controls .plyr__controls__item{margin-left:2.5px}.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px}.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px}.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}.plyr__controls .plyr__controls__item.plyr__volume{padding-right:5px}.plyr__controls .plyr__controls__item.plyr__volume:first-child{padding-right:0}.plyr__controls:empty{display:none}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4a5764;padding:10px}.plyr--video .plyr__controls{background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:20px 5px 5px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}@media (min-width:480px){.plyr--video .plyr__controls{padding:35px 10px 10px}}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [dataLine truncated