1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

Add audio player

This commit is contained in:
vrde 2015-07-02 18:27:09 +02:00
parent 7f8a36b99a
commit c2c0fd3ab8
3 changed files with 46 additions and 2 deletions

View File

@ -59,6 +59,30 @@ let Image = React.createClass({
} }
}); });
let Audio = React.createClass({
propTypes: {
url: React.PropTypes.string.isRequired
},
mixins: [InjectInHeadMixin],
componentDidMount() {
this.inject(AppConstants.baseUrl + 'static/thirdparty/audiojs/audiojs/audio.min.js').then(this.ready);
},
ready() {
window.audiojs.events.ready(function() {
var as = audiojs.createAll();
});
},
render() {
return (
<audio className="ascribe-audio" src={this.props.url} preload="auto" />
);
}
});
let Video = React.createClass({ let Video = React.createClass({
propTypes: { propTypes: {
preview: React.PropTypes.string.isRequired, preview: React.PropTypes.string.isRequired,
@ -111,6 +135,7 @@ let Video = React.createClass({
let resourceMap = { let resourceMap = {
'image': Image, 'image': Image,
'video': Video, 'video': Video,
'audio': Audio,
'other': Other 'other': Other
}; };

View File

@ -39,6 +39,7 @@
}, },
"dependencies": { "dependencies": {
"alt": "^0.16.5", "alt": "^0.16.5",
"audiojs": "vrde/audiojs",
"babelify": "^6.1.2", "babelify": "^6.1.2",
"bootstrap-sass": "^3.3.4", "bootstrap-sass": "^3.3.4",
"browser-sync": "^2.7.5", "browser-sync": "^2.7.5",
@ -72,6 +73,7 @@
"react-datepicker": "~0.8.0", "react-datepicker": "~0.8.0",
"react-progressbar": "^1.1.0", "react-progressbar": "^1.1.0",
"react-router": "^0.13.3", "react-router": "^0.13.3",
"react-router-bootstrap": "~0.16.0",
"react-textarea-autosize": "^2.2.3", "react-textarea-autosize": "^2.2.3",
"reactify": "^1.1.0", "reactify": "^1.1.0",
"shmui": "^0.1.0", "shmui": "^0.1.0",
@ -79,8 +81,7 @@
"vinyl-buffer": "^1.0.0", "vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0", "vinyl-source-stream": "^1.1.0",
"watchify": "^3.1.2", "watchify": "^3.1.2",
"yargs": "^3.10.0", "yargs": "^3.10.0"
"react-router-bootstrap": "~0.16.0"
}, },
"jest": { "jest": {
"scriptPreprocessor": "node_modules/babel-jest", "scriptPreprocessor": "node_modules/babel-jest",

View File

@ -15,6 +15,24 @@
color: #cccccc; color: #cccccc;
} }
.audiojs {
margin: 50px auto;
background-image: none;
}
.audiojs * {
box-sizing: content-box;
}
.audiojs .loaded {
background-color: $ascribe-color-full;
background-image: none;
}
.audiojs .progress {
background-color: rgba(255,255,255,0.8);
background-image: none;
}
.video-js, .video-js,
.vjs-poster { .vjs-poster {
background-color: transparent; background-color: transparent;