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

Added option to preview embedded element

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-10-24 13:10:56 +02:00
parent 9229fc07cf
commit 67b98d12ad
6 changed files with 30 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -642,7 +642,7 @@ display: none !important;
}
}
@media only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px) and (orientation: landscape){
@media only screen and (max-width: 736px) and (max-width:500px), only screen and (max-device-width: 736px) and (orientation: landscape){
#player-container{
/*display: none;*/
position: absolute;

4
server/public/assets/css/style.css
View File

@@ -221,6 +221,10 @@ background: transparent !important;
box-shadow: none;
}
#embed {
max-height: max-content !important;
}
.chan.tap-target-origin {
display: none;
}

6
server/public/assets/js/channel.js
View File

@@ -130,7 +130,11 @@ var Channel = {
});
if(!client) {
M.Modal.init(document.getElementById("embed"));
M.Modal.init(document.getElementById("embed"), {
onCloseStart: function() {
document.querySelector(".embed-preview").innerHTML = "";
}
});
} else {
Helper.removeElement("#embed");
Helper.removeElement(".embed-button-footer");

4
server/public/assets/js/functions.js
View File

@@ -40,13 +40,13 @@ function resizeFunction() {
if(chan && !Helper.mobilecheck()){
if(document.querySelector("#wrapper") == null) return;
if(!client && !embed) document.querySelector("#hide-playlist").style.left = (document.querySelector("#video-container").offsetWidth - document.querySelector("#hide-playlist").offsetWidth) + "px";
if(window.innerWidth > 600 && document.querySelector("#wrapper").style.height != "") {
if(((window.innerWidth > 600 && !embed) || (window.innerWidth > 500 && !embed)) && document.querySelector("#wrapper").style.height != "") {
document.querySelector("#wrapper").style.height = "";
document.querySelector("#chat-bar").style.height = "";
document.querySelector("#channelchat").style.height = "";
document.querySelector("#all_chat").style.height = "";
document.querySelector("#chat-container").style.height = "";
} else if(window.innerWidth < 601) {
} else if(((window.innerWidth < 601 && !embed) || (window.innerWidth < 501 && !embed))) {
if(!client && !embed) {
var scPlaying = false;
var ytPlaying = false;

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

@@ -88,7 +88,7 @@ var access_token_data = {};
var spotify_authenticated = false;
var not_import_html = "";
var not_export_html = "";
var embed_height = 300;
var embed_height = 400;
var embed_width = 600;
var embed_videoonly = "&videoonly=false";
var embed_localmode = "&localmode=false";
@@ -430,6 +430,15 @@ initializeCastApi = function() {
};
function addDynamicListeners() {
addListener("click", ".preview-embed", function(event) {
this.preventDefault();
if(document.querySelector(".embed-preview").innerHTML == "") {
document.querySelector(".embed-preview").innerHTML = embed_code(embed_autoplay, embed_width, embed_height, color, embed_videoonly, embed_localmode);
} else {
document.querySelector(".embed-preview").innerHTML = "";
}
});
addListener("click", "#player_overlay", function(event) {
if(chromecastAvailable) {
Player.playPauseVideo();
@@ -1236,7 +1245,11 @@ function addDynamicListeners() {
addListener("click", "#embed-button", function() {
this.preventDefault();
M.Modal.init(document.getElementById("embed"));
M.Modal.init(document.getElementById("embed"), {
onCloseStart: function() {
document.querySelector(".embed-preview").innerHTML = "";
}
});
ga('send', 'event', "button-click", "embed-channel", "channel-name", chan.toLowerCase());
M.Modal.getInstance(document.getElementById("embed")).open();
});

4
server/public/partials/channel/modal.handlebars
View File

@@ -11,7 +11,7 @@
<label for="width_embed" class="embed-label">Width</label>
<input type="number" value="600" id="width_embed" class="settings_embed" min="1" />
<label for="height_embed" class="padding_left_6 embed-label">Height</label>
<input type="number" value="300" id="height_embed" class="settings_embed" min="1" />
<input type="number" value="400" id="height_embed" class="settings_embed" min="1" />
<label for="color_embed" class="padding_left_6 embed-label">Color</label>
<input type="color" id="color_embed" class="settings_embed" value="#2d2d2d" />
<label>
@@ -24,8 +24,10 @@
</label>
</p>
<textarea id="embed-area"></textarea>
<div class="embed-preview"></div>
</div>
<div class="modal-footer">
<a href="#!" class="waves-effect waves-green btn-flat preview-embed">Preview</a>
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>