Add audio and video player for media datatypes

This commit is contained in:
Anup Kumar
2020-09-16 18:31:11 +02:00
committed by mvdbeek
parent 130ca6bc6f
commit 9787daf279
10 changed files with 96 additions and 0 deletions
@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
<visualization name="Audio player">
<description>Audio player</description>
<data_sources>
<data_source>
<model_class>HistoryDatasetAssociation</model_class>
<test test_attr="ext" result_type="datatype">wav</test>
<test test_attr="ext" result_type="datatype">mp3</test>
<to_param param_attr="id">dataset_id</to_param>
</data_source>
</data_sources>
<params>
<param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
</params>
<template>audio_player.mako</template>
</visualization>
@@ -0,0 +1,5 @@
#audio-container {
width: 80%;
margin-left: 10%;
margin-top: 5%;
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,21 @@
<%
app_root = h.url_for("/static/plugins/visualizations/audio_player/static/")
%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/>
<title>Audio player</title>
${h.stylesheet_link(app_root + 'css/plyr.css')}
${h.stylesheet_link(app_root + 'css/audio_player.css')}
</head>
<body class="body-audio-player">
${h.javascript_link( app_root + "js/plyr.js")}
<audio id="audio-container" controls>
<source src="${h.url_for( controller='/datasets', action='index')}/${hda.id}/display" type='audio/wav' />
<source src="${h.url_for( controller='/datasets', action='index')}/${hda.id}/display" type='audio/mp3' />
</audio>
</body>
</html>
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
<visualization name="Video player">
<description>Video player</description>
<data_sources>
<data_source>
<model_class>HistoryDatasetAssociation</model_class>
<test test_attr="ext" result_type="datatype">mp4</test>
<test test_attr="ext" result_type="datatype">mkv</test>
<test test_attr="ext" result_type="datatype">flv</test>
<test test_attr="ext" result_type="datatype">mpg</test>
<to_param param_attr="id">dataset_id</to_param>
</data_source>
</data_sources>
<params>
<param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
</params>
<template>video_player.mako</template>
</visualization>
File diff suppressed because one or more lines are too long
@@ -0,0 +1,5 @@
#video-container {
width: 90%;
margin-left: 5%;
margin-top: 2%;
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,23 @@
<%
app_root = h.url_for("/static/plugins/visualizations/video_player/static/")
%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/>
<title>Video player</title>
${h.stylesheet_link(app_root + 'css/plyr.css')}
${h.stylesheet_link(app_root + 'css/video_player.css')}
</head>
<body class="body-video-player">
${h.javascript_link( app_root + "js/plyr.js")}
<video id="video-container" playsinline controls>
<source src="${h.url_for( controller='/datasets', action='index')}/${hda.id}/display" type='video/mp4' />
<source src="${h.url_for( controller='/datasets', action='index')}/${hda.id}/display" type='video/mkv' />
<source src="${h.url_for( controller='/datasets', action='index')}/${hda.id}/display" type='video/flv' />
<source src="${h.url_for( controller='/datasets', action='index')}/${hda.id}/display" type='video/mpg' />
</video>
</body>
</html>