KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improvements to look and feel of embedded player

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-06-05 15:26:44 +02:00
parent 946b646822
commit 03e608b1b1
6 changed files with 87 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
server/public/assets/css/embed.css
View File

@@ -3,6 +3,7 @@
width: 100px; width: 100px;
background-position: center; background-position: center;
background-size: 180%; background-size: 180%;
height: 100% !important;
} }
.card{ .card{
@@ -10,6 +11,15 @@
background-color: rgba(255, 255, 255, 0.04) !important; background-color: rgba(255, 255, 255, 0.04) !important;
} }
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.video_only { .video_only {
width:100vw !important; width:100vw !important;
height: 100vh !important; height: 100vh !important;
@@ -132,6 +142,7 @@
-o-transition:height .3s; -o-transition:height .3s;
transition:height .3s; transition:height .3s;
height:66px; height:66px;
width: 100%;
} }
.list-song .card-content{padding:0;} .list-song .card-content{padding:0;}
.list-title{ .list-title{
@@ -144,7 +155,7 @@
} }
.card-image{cursor:pointer} .card-image{cursor:pointer}
.card{ .card{
margin:5px 0 5px 0 !important; margin: 2.5px 0 2.5px 0 !important;
} }
.card:hover{ .card:hover{
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12); box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12);
@@ -347,6 +358,20 @@ html {
float:right; float:right;
} }
.vote-container {
height: 100%;
}
.card-duration {
border-top-right-radius: 4px;
position: absolute;
bottom: 0px;
left: 0px;
background: rgba(0,0,0,.7);
color: white;
padding: 0 5px;
}
.last_page, .last_page_hide, .first_page, .first_page_hide{ .last_page, .last_page_hide, .first_page, .first_page_hide{
display: none !important; display: none !important;
} }

2
server/public/assets/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
server/public/assets/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

53
server/public/assets/html/embed.html
View File

@@ -14,7 +14,7 @@
<link type="text/css" rel="stylesheet" href="/assets/css/embed.css" /> <link type="text/css" rel="stylesheet" href="/assets/css/embed.css" />
<script src="/assets/dist/embed.min.js"></script> <script src="/assets/dist/embed.min.js"></script>
</head> </head>
<body> <body class="noselect">
<script> <script>
function receiveMessage(event) function receiveMessage(event)
{ {
@@ -40,6 +40,55 @@
<div class="modal-footer"> <div class="modal-footer">
</div> </div>
</div> </div>
<div id="song-title"></div><div id="container" style="display:inline-flex;"><div id="player-container"><div id="player"></div><div id="controls" class="noselect"><div id="zoffbutton" title="Visit the channel!"></div><div id="playpause"><i id="play" class="material-icons hide">play_arrow</i><i id="pause" class="material-icons">pause</i></div><div id="duration">00:00 / 00:00</div><div id="volume-button"><i id="v-mute" class="mdi-av-volume-off"></i><i id="v-low" class="mdi-av-volume-mute"></i><i id="v-medium" class="mdi-av-volume-down"></i><i id="v-full" class="mdi-av-volume-up"></i></div><div id="volume"></div><div id="viewers"></div><div id="bar"></div></div></div><div id="playlist"><div id="wrapper"><div id="preloader" class="progress channel_preloader"><div class="indeterminate"></div></div><div id="list-song-html"><div id="list-song" class="card left-align list-song"><span class="clickable vote-container" title="Vote!"><a class="clickable center-align votebg"><div class="lazy card-image cardbg list-image" style=""></div></a><span class="card-content"><span class="flow-text truncate list-title"></span><span class="vote-span"><span class="list-votes"></span><span class="highlighted vote-text">&nbsp;votes</span></span></span></span></div></div></div></div></div> <div id="song-title"></div>
<div id="container" style="display:inline-flex;">
<div id="player-container">
<div id="player"></div>
<div id="controls" class="noselect">
<div id="zoffbutton" title="Visit the channel!"></div>
<div id="playpause">
<i id="play" class="material-icons hide">play_arrow</i>
<i id="pause" class="material-icons">pause</i>
</div>
<div id="duration">00:00 / 00:00</div>
<div id="volume-button">
<i id="v-mute" class="mdi-av-volume-off"></i>
<i id="v-low" class="mdi-av-volume-mute"></i>
<i id="v-medium" class="mdi-av-volume-down"></i>
<i id="v-full" class="mdi-av-volume-up"></i>
</div>
<div id="volume"></div>
<div id="viewers"></div>
<div id="bar"></div>
</div>
</div>
<div id="playlist">
<div id="wrapper">
<div id="preloader" class="progress channel_preloader">
<div class="indeterminate"></div>
</div>
<div id="list-song-html">
<div id="list-song" class="card left-align list-song waves-effect waves-light playlist-element">
<div class="clickable vote-container" title="Vote!">
<a class="clickable center-align votebg">
<span class="lazy card-image cardbg list-image" style="background-image:url('/assets/images/loading.png');">
</span>
<span class="card-duration">
01:00
</span>
</a>
<span class="card-content">
<span class="flow-text truncate list-title"></span>
<span class="vote-span">
<span class="list-votes"></span>
<span class="highlighted vote-text">&nbsp;votes</span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

10
server/public/assets/js/list.js
View File

@@ -175,7 +175,7 @@ var List = {
if(page > List.page || page < List.page){ if(page > List.page || page < List.page){
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = page; List.page = page;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-block");
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-flex"); $(".prev_page").css("display", "inline-flex");
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
@@ -198,7 +198,7 @@ var List = {
if(way == 1){ if(way == 1){
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = List.page + List.can_fit; List.page = List.page + List.can_fit;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-block");
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-flex"); $(".prev_page").css("display", "inline-flex");
$(".prev_page_hide").css("display", "none"); $(".prev_page_hide").css("display", "none");
@@ -216,7 +216,7 @@ var List = {
} else if(way == 10){ } else if(way == 10){
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = (Math.floor(($("#wrapper").children().length - 1)/ List.can_fit) * List.can_fit); List.page = (Math.floor(($("#wrapper").children().length - 1)/ List.can_fit) * List.can_fit);
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-block");
if(List.page > 0 && $(".prev_page").css("display") == "none"){ if(List.page > 0 && $(".prev_page").css("display") == "none"){
$(".prev_page").css("display", "inline-flex"); $(".prev_page").css("display", "inline-flex");
@@ -234,7 +234,7 @@ var List = {
} else if(way==-10){ } else if(way==-10){
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = 0; List.page = 0;
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).css("display", "inline-block");
if(List.page == 0 && $(".prev_page").css("display") != "none"){ if(List.page == 0 && $(".prev_page").css("display") != "none"){
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".prev_page_hide").css("display", "inline-flex"); $(".prev_page_hide").css("display", "inline-flex");
@@ -254,7 +254,7 @@ var List = {
$(".last_page").css("display", "inline-flex"); $(".last_page").css("display", "inline-flex");
} }
} else { } else {
$("#wrapper").children().slice(List.page - List.can_fit, List.page).show(); $("#wrapper").children().slice(List.page - List.can_fit, List.page).css("display", "inline-block");
$("#wrapper").children().slice(List.page, List.page + List.can_fit).hide(); $("#wrapper").children().slice(List.page, List.page + List.can_fit).hide();
List.page = List.page - List.can_fit < 0 ? 0 : List.page - List.can_fit; List.page = List.page - List.can_fit < 0 ? 0 : List.page - List.can_fit;
if(List.page == 0 && $(".prev_page").css("display") != "none"){ if(List.page == 0 && $(".prev_page").css("display") != "none"){

2
server/public/assets/js/listeners.js
View File

@@ -1515,7 +1515,7 @@ $(window).resize(function(){
List.dynamicContentPage(-10); List.dynamicContentPage(-10);
} }
if(List.can_fit < temp_fit){ if(List.can_fit < temp_fit){
$($("#wrapper").children()[List.page + temp_fit - 1]).css("display", "block"); $($("#wrapper").children()[List.page + temp_fit - 1]).css("display", "inline-block");
} else if(List.can_fit > temp_fit){ } else if(List.can_fit > temp_fit){
$($("#wrapper").children()[List.page + temp_fit]).css("display", "none"); $($("#wrapper").children()[List.page + temp_fit]).css("display", "none");
} }