fergalmoran/dss.api
1
0
Fork 0
mirror of https://github.com/fergalmoran/dss.api.git synced 2026-01-03 23:24:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Embed kinda done

Browse Source
This commit is contained in:
Fergal Moran
2015-11-11 00:10:33 +00:00
parent 9153ec8d22
commit 4a98536ddb
12 changed files with 206 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
spa/embedding/views.py
View File

@@ -20,6 +20,7 @@ def mix(request, **args):
payload = {
"description": mix.description.replace('<br />', '\n'),
"title": mix.title,
"theme": "light",
"image_url": image,
"audio_url": audio_url,
"mix_url": 'http://%s%s' % (Site.objects.get_current().domain, mix_url)

0
static/css/audio_player.css
View File

1
static/css/player.css Normal file
View File

@@ -0,0 +1 @@
.webPlayer{display:inline-block;position:relative;font-family:'Segoe UI',Verdana,sans-serif;clear:both;margin-bottom:10px;line-height:1.4;font-size:13px;box-shadow:0 0 1px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.5);text-align:center}.webPlayer a.smooth{transition:all 0.1s linear;-webkit-transition:all 0.1s linear;-moz-transition:all 0.1s linear;-o-transition:all 0.1s linear}.webPlayer *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.webPlayer.jp-video-full>.controls{position:absolute;left:0;right:0;bottom:0;opacity:0.8;z-index:1000}.webPlayer.jp-video-full,.webPlayer.jp-video-full object,.webPlayer.jp-video-full video{position:fixed;top:0;left:0;right:0;bottom:0;display:block;z-index:999}.webPlayer.jp-video-full>.playerScreen,.webPlayer.jp-video-full>.playerScreen>.video-play{z-index:1000}.webPlayer .playerScreen{cursor:pointer}.webPlayer .playerScreen .video-play{display:block;position:absolute;z-index:990;width:100%;top:0;left:0;right:0;bottom:50px;background:url('./../img/preimg.png') no-repeat center center;opacity:0.4;background-color:rgba(0,0,0,0.4)}.webPlayer .controls{display:block;position:relative;height:40px;background:#0b0b0b;color:#969696;padding:5px 10px;z-index:996;border:1px solid #000000}.webPlayer .controls .leftblock{position:absolute;left:3px;width:50px}.webPlayer .controls .leftblock .play{display:block;margin:0 auto;width:40px;height:40px;background:url('./../img/playerUI.png') no-repeat 0 1px;opacity:0.8}.webPlayer .controls .leftblock .play:hover{opacity:1}.webPlayer .controls .leftblock .pause{display:block;margin:0 auto;width:40px;height:40px;background:url('./../img/playerUI.png') no-repeat -40px 1px;opacity:0.8}.webPlayer .controls .leftblock .pause:hover{opacity:1}.webPlayer .controls .play-progress{position:relative;display:block;margin:0 130px 0 50px;text-align:left}.webPlayer .controls .play-progress span{font-size:12px;margin-left:1px;color:#f0f0f0}.webPlayer .controls .play-progress .progressbar{display:block;height:4px;background-color:#3C3C3C;background:rgba(255,255,255,0.05);margin:2.5px 0}.webPlayer .controls .play-progress .progressbar .seekBar{position:relative;display:block;cursor:pointer;padding:1px;background:rgba(255,255,255,0.1)}.webPlayer .controls .play-progress .progressbar .seekBar .playBar{display:block;height:2px;padding:0;background:#FFFFFF}.webPlayer .controls .play-progress .progressbar .seekBar a{display:block;position:absolute;top:-2px;width:8px;height:8px;border-radius:5px;background:#ffffff;margin-left:-3px}.webPlayer .controls .play-progress .progressbar .seekBar a div{width:8px;height:8px}.webPlayer .controls .play-progress .time{display:block;position:absolute;width:50px;font-size:11px}.webPlayer .controls .play-progress .time.current{left:1px;text-align:left;color:#f0f0f0}.webPlayer .controls .play-progress .time.duration{right:0px;text-align:right}.webPlayer .controls .rightblock{position:absolute;right:10px;width:110px;top:5px}.webPlayer .controls .rightblock .volumeText{display:block;position:absolute;bottom:-12px;text-align:center;width:80px;font-size:11px}.webPlayer .controls .rightblock .volumeBar{display:block;position:absolute;height:4px;background-color:#3C3C3C;background:rgba(255,255,255,0.05);width:80px;top:19px;left:0;cursor:pointer}.webPlayer .controls .rightblock .volumeBar .currentVolume{position:relative;height:2px;padding:1px}.webPlayer .controls .rightblock .volumeBar .currentVolume .curvol{display:block;height:2px;padding:0;background:#FFFFFF}.webPlayer .controls .rightblock .volumeBar .currentVolume a{display:block;position:absolute;top:-2px;margin-left:-3px;width:8px;height:8px;border-radius:5px;background:#ffffff}.webPlayer .controls .rightblock .volumeBar .currentVolume a div{display:block;width:8px;height:8px}.webPlayer .controls .rightblock .fullScreen{display:block;float:right;width:16px;height:16px;background:url('./../img/playerUI.png') no-repeat 0 -50px;margin-top:12px;opacity:0.4}.webPlayer .controls .rightblock .fullScreen:hover{opacity:0.8}.webPlayer .controls .rightblock .fullScreenOFF{display:block;float:right;width:16px;height:16px;background:url('./../img/playerUI.png') no-repeat 0 -68px;margin-top:12px;opacity:0.4}.webPlayer .controls .rightblock .fullScreenOFF:hover{opacity:0.8}.webPlayer.audioPlayer .progress{margin-right:100px}.webPlayer.audioPlayer .rightblock{width:85px}.webPlayer.audioPlayer .rightblock .volumeText{bottom:-42px}.webPlayer.audioPlayer .fullScreen{display:none}.webPlayer.audioPlayer .fullScreenOFF{display:none}

1
static/css/player.light.css Normal file
View File

@@ -0,0 +1 @@
.webPlayer.light{display:inline-block;position:relative;font-family:'Segoe UI',Verdana,sans-serif;clear:both;margin-bottom:10px;line-height:1.4;font-size:13px;box-shadow:0 0 1px rgba(255,255,255,0.5);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.5);text-align:center}.webPlayer.light a.smooth{transition:all 0.1s linear;-webkit-transition:all 0.1s linear;-moz-transition:all 0.1s linear;-o-transition:all 0.1s linear}.webPlayer.light *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.webPlayer.light.jp-video-full>.controls{position:absolute;left:0;right:0;bottom:0;opacity:0.8;z-index:1000}.webPlayer.light.jp-video-full,.webPlayer.light.jp-video-full object,.webPlayer.light.jp-video-full video{position:fixed;top:0;left:0;right:0;bottom:0;display:block;z-index:999}.webPlayer.light.jp-video-full>.playerScreen,.webPlayer.light.jp-video-full>.playerScreen>.video-play{z-index:1000}.webPlayer.light .playerScreen{cursor:pointer}.webPlayer.light .playerScreen .video-play{display:block;position:absolute;z-index:990;width:100%;top:0;left:0;right:0;bottom:50px;background:url('./../img/preimg.light.png') no-repeat center center;opacity:0.8;background-color:rgba(255,255,255,0.1)}.webPlayer.light .controls{display:block;position:relative;height:40px;background:#FAFAFA;color:#646464;padding:5px 10px;z-index:996;border:1px solid #e6e6e6}.webPlayer.light .controls .leftblock{position:absolute;left:3px;width:50px}.webPlayer.light .controls .leftblock .play{display:block;margin:0 auto;width:40px;height:40px;background:url('./../img/playerUI.light.png') no-repeat 0 1px;opacity:0.8}.webPlayer.light .controls .leftblock .play:hover{opacity:1}.webPlayer.light .controls .leftblock .pause{display:block;margin:0 auto;width:40px;height:40px;background:url('./../img/playerUI.light.png') no-repeat -40px 1px;opacity:0.8}.webPlayer.light .controls .leftblock .pause:hover{opacity:1}.webPlayer.light .controls .play-progress{position:relative;display:block;margin:0 130px 0 50px;text-align:left}.webPlayer.light .controls .play-progress span{font-size:12px;margin-left:1px;color:#282828}.webPlayer.light .controls .play-progress .progressbar{display:block;height:4px;background-color:#3C3C3C;background:rgba(0,0,0,0.1);margin:2.5px 0}.webPlayer.light .controls .play-progress .progressbar .seekBar{position:relative;display:block;cursor:pointer;padding:1px;background:rgba(0,0,0,0.05)}.webPlayer.light .controls .play-progress .progressbar .seekBar .playBar{display:block;height:2px;padding:0;background:#191919}.webPlayer.light .controls .play-progress .progressbar .seekBar a{display:block;position:absolute;top:-2px;width:8px;height:8px;border-radius:5px;background:#191919;margin-left:-3px}.webPlayer.light .controls .play-progress .progressbar .seekBar a div{width:8px;height:8px}.webPlayer.light .controls .play-progress .time{display:block;position:absolute;width:50px;font-size:11px}.webPlayer.light .controls .play-progress .time.current{left:1px;text-align:left;color:#282828}.webPlayer.light .controls .play-progress .time.duration{right:0px;text-align:right}.webPlayer.light .controls .rightblock{position:absolute;right:10px;width:110px;top:5px}.webPlayer.light .controls .rightblock .volumeText{display:block;position:absolute;bottom:-12px;text-align:center;width:80px;font-size:11px}.webPlayer.light .controls .rightblock .volumeBar{display:block;position:absolute;height:4px;background-color:#EBEBEB;background:rgba(0,0,0,0.1);width:80px;top:19px;left:0;cursor:pointer}.webPlayer.light .controls .rightblock .volumeBar .currentVolume{position:relative;height:2px;padding:1px}.webPlayer.light .controls .rightblock .volumeBar .currentVolume .curvol{display:block;height:2px;padding:0;background:#191919}.webPlayer.light .controls .rightblock .volumeBar .currentVolume a{display:block;position:absolute;top:-2px;margin-left:-3px;width:8px;height:8px;border-radius:5px;background:#191919}.webPlayer.light .controls .rightblock .volumeBar .currentVolume a div{display:block;width:8px;height:8px}.webPlayer.light .controls .rightblock .fullScreen{display:block;float:right;width:16px;height:16px;background:url('./../img/playerUI.light.png') no-repeat 0 -50px;margin-top:12px;opacity:0.4}.webPlayer.light .controls .rightblock .fullScreen:hover{opacity:0.8}.webPlayer.light .controls .rightblock .fullScreenOFF{display:block;float:right;width:16px;height:16px;background:url('./../img/playerUI.light.png') no-repeat 0 -68px;margin-top:12px;opacity:0.4}.webPlayer.light .controls .rightblock .fullScreenOFF:hover{opacity:0.8}.webPlayer.light.audioPlayer .progress{margin-right:100px}.webPlayer.light.audioPlayer .rightblock{width:85px}.webPlayer.light.audioPlayer .rightblock .volumeText{bottom:-42px}.webPlayer.light.audioPlayer .fullScreen{display:none}.webPlayer.light.audioPlayer .fullScreenOFF{display:none}

BIN
static/img/Jplayer.swf Normal file
View File

Binary file not shown.

BIN
static/img/playerUI.light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/img/playerUI.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/img/preimg.light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/img/preimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

172
static/js/jplayer.cleanskin.js Normal file
View File

File diff suppressed because one or more lines are too long

4
templates/embedding/master.html
View File

@@ -4,10 +4,14 @@
<meta charset="UTF-8">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
{% block css %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block scripts %}
{% endblock %}
</body>
</html>

28
templates/embedding/mix.html
View File

@@ -1,4 +1,30 @@
{% extends 'embedding/master.html' %}
{% block css %}
<link rel="stylesheet" href="/assets/css/player.css">
<link rel="stylesheet" href="/assets/css/player.light.css">
{% endblock %}
{% block content %}
<h1>Hello Sailor</h1>
<div id="uniquePlayer-1" class="webPlayer {{ theme }} audioPlayer">
<div id="uniqueContainer-1" class="videoPlayer"></div>
</div>
{% endblock %}
{% block scripts %}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.js"></script>
<script src="/assets/js/jplayer.cleanskin.js"></script>
<script>
$(document).ready(function () {
$('.webPlayer').videoPlayer({
name: '{{ title }}',
media: {
mp3: '{{ audio_url }}'
},
size: {
width: '600px'
}
});
});
</script>
{% endblock %}