Git-Mirrors/RetroShare
1
0
Fork 0
mirror of https://github.com/RetroShare/RetroShare.git synced 2025-01-14 17:07:17 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Webui: Added video support into MediaPlayerWidget

Browse Source
This commit is contained in:
hunbernd 2015-11-07 00:33:37 +01:00
parent 88e1dc006b
commit b847eea57e
2 changed files with 70 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
libresapi/src/webfiles/gui.jsx
View File

@ -4,7 +4,15 @@ RS.start();
var api_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/api/v2/"; var api_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/api/v2/";
var filestreamer_url = window.location.protocol + "//" +window.location.hostname + ":" + window.location.port + "/fstream/"; var filestreamer_url = window.location.protocol + "//" +window.location.hostname + ":" + window.location.port + "/fstream/";
var upload_url = window.location.protocol + "//" +window.location.hostname + ":" + window.location.port + "/upload/"; var upload_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/upload/";
var extensions = {
mp3: "audio",
ogg: "audio",
wav: "audio",
webm: "video",
mp4: "video"
};
// livereload // livereload
function start_live_reload() function start_live_reload()
@ -558,7 +566,8 @@ var DownloadsWidget = React.createClass({
widget.emit("play_file", {name: file.name, hash: file.hash}) widget.emit("play_file", {name: file.name, hash: file.hash})
}; };
var playBtn = <div></div>; var playBtn = <div></div>;
if(file.name.slice(-3) === "mp3") var splits = file.name.split(".");
if(splits[splits.length-1].toLowerCase() in extensions)
playBtn = <div className="btn" onClick={playFn}>play</div>; playBtn = <div className="btn" onClick={playFn}>play</div>;
var ctrlBtn = <div></div>; var ctrlBtn = <div></div>;
@ -673,7 +682,7 @@ var SearchWidget = React.createClass({
}, },
}); });
var AudioPlayerWidget = React.createClass({ var MediaPlayerWidget = React.createClass({
mixins: [SignalSlotMixin], mixins: [SignalSlotMixin],
getInitialState: function(){ getInitialState: function(){
return {file: undefined}; return {file: undefined};
@ -691,13 +700,28 @@ var AudioPlayerWidget = React.createClass({
} }
else else
{ {
return( var splits = this.state.file.name.split(".");
<div> var mediatype = extensions[splits[splits.length - 1].toLowerCase()];
<p>{this.state.file.name}</p> if (mediatype == "audio") {
<audio controls src={filestreamer_url+this.state.file.hash} type="audio/mpeg"> return (
</audio> <div>
</div> <p>{this.state.file.name}</p>
); <audio controls autoPlay src={filestreamer_url+this.state.file.hash}>
</audio>
</div>
);
} else if (mediatype == "video") {
return(
<div>
<p>{this.state.file.name}</p>
<video height="300" controls autoPlay src={filestreamer_url+this.state.file.hash}>
Your browser does not support the video tag.
</video>
</div>
);
} else {
return(<div></div>);
}
} }
}, },
}); });
@ -1702,7 +1726,7 @@ var MainWidget = React.createClass({
} }
mainpage = <div> mainpage = <div>
<UnreadChatMsgsCountWidget/> <UnreadChatMsgsCountWidget/>
<AudioPlayerWidget/> <MediaPlayerWidget/>
<IdentitySelectorWidget/> <IdentitySelectorWidget/>
{mainpage} {mainpage}
</div>; </div>;

46
libresapi/src/webui/gui.jsx
View File

@ -4,7 +4,15 @@ RS.start();
var api_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/api/v2/"; var api_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/api/v2/";
var filestreamer_url = window.location.protocol + "//" +window.location.hostname + ":" + window.location.port + "/fstream/"; var filestreamer_url = window.location.protocol + "//" +window.location.hostname + ":" + window.location.port + "/fstream/";
var upload_url = window.location.protocol + "//" +window.location.hostname + ":" + window.location.port + "/upload/"; var upload_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/upload/";
var extensions = {
mp3: "audio",
ogg: "audio",
wav: "audio",
webm: "video",
mp4: "video"
};
// livereload // livereload
function start_live_reload() function start_live_reload()
@ -558,7 +566,8 @@ var DownloadsWidget = React.createClass({
widget.emit("play_file", {name: file.name, hash: file.hash}) widget.emit("play_file", {name: file.name, hash: file.hash})
}; };
var playBtn = <div></div>; var playBtn = <div></div>;
if(file.name.slice(-3) === "mp3") var splits = file.name.split(".");
if(splits[splits.length-1].toLowerCase() in extensions)
playBtn = <div className="btn" onClick={playFn}>play</div>; playBtn = <div className="btn" onClick={playFn}>play</div>;
var ctrlBtn = <div></div>; var ctrlBtn = <div></div>;
@ -673,7 +682,7 @@ var SearchWidget = React.createClass({
}, },
}); });
var AudioPlayerWidget = React.createClass({ var MediaPlayerWidget = React.createClass({
mixins: [SignalSlotMixin], mixins: [SignalSlotMixin],
getInitialState: function(){ getInitialState: function(){
return {file: undefined}; return {file: undefined};
@ -691,13 +700,28 @@ var AudioPlayerWidget = React.createClass({
} }
else else
{ {
return( var splits = this.state.file.name.split(".");
<div> var mediatype = extensions[splits[splits.length - 1].toLowerCase()];
<p>{this.state.file.name}</p> if (mediatype == "audio") {
<audio controls src={filestreamer_url+this.state.file.hash} type="audio/mpeg"> return (
</audio> <div>
</div> <p>{this.state.file.name}</p>
); <audio controls autoPlay src={filestreamer_url+this.state.file.hash}>
</audio>
</div>
);
} else if (mediatype == "video") {
return(
<div>
<p>{this.state.file.name}</p>
<video height="300" controls autoPlay src={filestreamer_url+this.state.file.hash}>
Your browser does not support the video tag.
</video>
</div>
);
} else {
return(<div></div>);
}
} }
}, },
}); });
@ -1702,7 +1726,7 @@ var MainWidget = React.createClass({
} }
mainpage = <div> mainpage = <div>
<UnreadChatMsgsCountWidget/> <UnreadChatMsgsCountWidget/>
<AudioPlayerWidget/> <MediaPlayerWidget/>
<IdentitySelectorWidget/> <IdentitySelectorWidget/>
{mainpage} {mainpage}
</div>; </div>;