Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2026-01-02 13:57:00 +01:00
Code Issues Projects Releases Wiki Activity

improvement (video): improve UI of the video player

Browse source
This commit is contained in:
Mickael KERJEAN 2018-05-29 22:36:01 +10:00
parent ab280f38b6
commit 8fae0a3ee6
3 changed files with 49 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
client/pages/viewerpage/videoplayer.js
View file

@ -1,7 +1,10 @@
import React from 'react';
import { MenuBar } from './menubar';
import videojs from 'video.js';
import 'videojs-contrib-hls';
import 'video.js/dist/video-js.css';
import './videoplayer.scss';
export class VideoPlayer extends React.Component {
constructor(props){
@ -21,20 +24,20 @@ export class VideoPlayer extends React.Component {
componentWillUnmount() {
if (this.player) {
this.player.dispose()
this.player.dispose();
}
}
render(){
return (
<div style={{background: '#525659', height: '100%'}}>
<div className="component_videoplayer">
<MenuBar title={this.props.filename} download={this.props.data} />
<div style={{padding: '20px'}}>
<div style={{maxWidth: '800px', width: '100%', margin: '0 auto'}}>
<video ref={ node => this.videoNode = node } className="video-js my-skin" style={{boxShadow: 'rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px'}}></video>
<div className="video_container">
<div>
<video ref={ node => this.videoNode = node } className="video-js vjs-default-skin vjs-big-play-centered" style={{boxShadow: 'rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px'}}></video>
</div>
</div>
</div>
)
);
}
}

39
client/pages/viewerpage/videoplayer.scss Normal file
View file

@ -0,0 +1,39 @@
.component_videoplayer{
background: #525659;
height: 100%;
.video_container{
padding: 20px;
> div{
max-width: 800px;
width: 100%;
margin: 0 auto;
video{
outline: none;
boxShadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
}
}
}
}
/* SKIN FOR VIDEOJS: */
.video-js{
font-size: 14px; /* Chromium bug */
.vjs-control-bar{
background: rgba(255,255,255,0.15);
}
.vjs-load-progress div{
background: var(--primary);
}
.vjs-big-play-button{
background-color: var(--primary)!important;
border-color: var(--emphasis-primary)!important;
border-width: 2px;
margin-top: -40px;
border-radius: 10px;
&:before{ font-size: 45px; color: var(--bg-color); }
}
}

1
package.json
View file

@ -91,6 +91,7 @@
"style-loader": "^0.20.2",
"url-loader": "^0.6.2",
"video.js": "^5.19.2",
"videojs-contrib-hls": "^5.14.1",
"videojs-sublime-skin": "^1.0.3",
"watchify": "^3.11.0",
"wavesurfer.js": "^1.4.0",