better preview mode
This commit is contained in:
jr-k
parent
d862268a32
commit
16d856c7df
@ -103,6 +103,7 @@ jQuery(document).ready(function ($) {
|
||||
const metadata = currentElement.data('content-metadata');
|
||||
const ratio = metadata.height / metadata.width;
|
||||
$('#elem-height').val($('#elem-width').val() * ratio).trigger('input');
|
||||
$('#elem-width').val($('#elem-width').val()).trigger('input');
|
||||
});
|
||||
|
||||
$(document).on('click', '.element-list-item', function(){
|
||||
@ -266,14 +267,18 @@ jQuery(document).ready(function ($) {
|
||||
$(document).on('click', '#presetGrid2x2', function () {
|
||||
const screenWidth = $('#screen').width();
|
||||
const screenHeight = $('#screen').height();
|
||||
|
||||
let elements = $('.element');
|
||||
if (elements.length < 4) {
|
||||
while (elements.length < 4) {
|
||||
createElement();
|
||||
elements = $('.element');
|
||||
}
|
||||
}
|
||||
|
||||
elements = $('.element-list-item').map(function() {
|
||||
return $('.element[data-id='+$(this).attr('data-id')+']');
|
||||
}).slice(0, 4);
|
||||
|
||||
const gridPositions = [
|
||||
{x: 0, y: 0},
|
||||
{x: screenWidth / 2, y: 0},
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
{% set preview_mode = request.args.get('preview') == '1' %}
|
||||
<style>
|
||||
html, body, #screen {
|
||||
margin: 0;
|
||||
@ -12,31 +13,72 @@
|
||||
}
|
||||
iframe {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
{% if preview_mode %}
|
||||
html, body, #screen {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
#screen {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
outline: 5px solid white;
|
||||
}
|
||||
{% endif %}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="screen"></div>
|
||||
<script src="{{ STATIC_PREFIX }}js/lib/jquery.min.js"></script>
|
||||
<script>
|
||||
const base_iframe_route = '{{ url_for('player', preview_content_id='!c!', autoplay=1) }}';
|
||||
const base_iframe_route = '{{ url_for('player', preview_content_id='!c!', autoplay=1, cover=1) }}';
|
||||
|
||||
jQuery(function($) {
|
||||
function setOptimalSize() {
|
||||
const ratio = 16 / 9;
|
||||
const bodyWidth = $('body').width() - 100;
|
||||
const bodyHeight = $('body').height() - 100;
|
||||
|
||||
let width = bodyWidth;
|
||||
let height = bodyWidth / ratio;
|
||||
|
||||
if (height > bodyHeight) {
|
||||
height = bodyHeight;
|
||||
width = bodyHeight * ratio;
|
||||
}
|
||||
|
||||
const screenSizes = {
|
||||
width: Math.floor(width),
|
||||
height: Math.floor(height)
|
||||
};
|
||||
|
||||
$('#screen').css({
|
||||
'width': screenSizes.width,
|
||||
'height': screenSizes.height,
|
||||
});
|
||||
}
|
||||
|
||||
function createElement(config = null) {
|
||||
const screen = $('#screen');
|
||||
const offsetX = screen.position().left;
|
||||
const offsetY = screen.position().top;
|
||||
const screenWidth = screen.width();
|
||||
const screenHeight = screen.height();
|
||||
|
||||
const elementWidth = (config.widthPercent / 100) * screenWidth
|
||||
const elementHeight = (config.heightPercent / 100) * screenHeight;
|
||||
let x = (config.xPercent / 100) * screenWidth;
|
||||
let y = (config.yPercent / 100) * screenHeight;
|
||||
let x = offsetX + (config.xPercent / 100) * screenWidth;
|
||||
let y = offsetY + (config.yPercent / 100) * screenHeight;
|
||||
const zIndex = config.zIndex;
|
||||
|
||||
//x = Math.round(Math.max(0, Math.min(x, screenWidth - elementWidth)));
|
||||
//y = Math.round(Math.max(0, Math.min(y, screenHeight - elementHeight)));
|
||||
|
||||
const element = $('<iframe class="element" id="element-' + zIndex + '" data-id="' + zIndex + '" src="'+base_iframe_route.replace('!c!', config.contentId)+'"></iframe>');
|
||||
const element = $('<iframe class="element" id="element-' + zIndex + '" data-id="' + zIndex + '" src="'+base_iframe_route.replace('!c!', config.contentId)+'" frameborder="0"></iframe>');
|
||||
|
||||
element.css({
|
||||
left: x,
|
||||
@ -64,6 +106,10 @@
|
||||
};
|
||||
|
||||
const main = function() {
|
||||
{% if preview_mode %}
|
||||
setOptimalSize();
|
||||
{% endif %}
|
||||
|
||||
applyElementsFromContent();
|
||||
};
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="google" content="notranslate">
|
||||
<link rel="shortcut icon" href="{{ STATIC_PREFIX }}/favicon.ico">
|
||||
{% set force_cover = request.args.get('cover') == '1' %}
|
||||
{% if slide_animation_enabled %}
|
||||
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/animate.min.css" />
|
||||
{% endif %}
|
||||
@ -13,7 +14,7 @@
|
||||
.slide { display: flex; flex-direction: row; justify-content: center; align-items: center; background: black; }
|
||||
.slide, iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding-top: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
|
||||
.slide iframe { background: white; }
|
||||
.slide img, .slide video { height: 100%; }
|
||||
.slide img, .slide video { {% if force_cover %}width: 100%;{% endif %} height: 100%; }
|
||||
.slide video { width: 100%; height: 100%; }
|
||||
</style>
|
||||
<script type="application/javascript" src="{{ STATIC_PREFIX }}js/utils.js"></script>
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<a href="{{ url_for('serve_content_composition', content_id=content.id, autoplay=1) }}" target="_blank" class="btn btn-naked">
|
||||
<a href="{{ url_for('serve_content_composition', content_id=content.id, autoplay=1, preview=1) }}" target="_blank" class="btn btn-naked">
|
||||
<i class="fa fa-external-link"></i>
|
||||
</a>
|
||||
</div>
|
||||
@ -122,7 +122,7 @@
|
||||
<div class="page-content">
|
||||
<div class="inner">
|
||||
<h3 class="main">
|
||||
{{ l.composition_monitor }}
|
||||
{{ l.composition_monitor }} 16/9
|
||||
</h3>
|
||||
|
||||
<div class="toolbar">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user