csmith1865/obscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

better preview mode

Browse Source
This commit is contained in:
jr-k 2024-08-24 21:48:18 +02:00
parent d862268a32
commit 16d856c7df
4 changed files with 60 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
data/www/js/slideshow/content-composition.js
View File

@ -103,6 +103,7 @@ jQuery(document).ready(function ($) {
const metadata = currentElement.data('content-metadata'); const metadata = currentElement.data('content-metadata');
const ratio = metadata.height / metadata.width; const ratio = metadata.height / metadata.width;
$('#elem-height').val($('#elem-width').val() * ratio).trigger('input'); $('#elem-height').val($('#elem-width').val() * ratio).trigger('input');
$('#elem-width').val($('#elem-width').val()).trigger('input');
}); });
$(document).on('click', '.element-list-item', function(){ $(document).on('click', '.element-list-item', function(){
@ -266,14 +267,18 @@ jQuery(document).ready(function ($) {
$(document).on('click', '#presetGrid2x2', function () { $(document).on('click', '#presetGrid2x2', function () {
const screenWidth = $('#screen').width(); const screenWidth = $('#screen').width();
const screenHeight = $('#screen').height(); const screenHeight = $('#screen').height();
let elements = $('.element'); let elements = $('.element');
if (elements.length < 4) { if (elements.length < 4) {
while (elements.length < 4) { while (elements.length < 4) {
createElement(); createElement();
elements = $('.element');
} }
} }
elements = $('.element-list-item').map(function() {
return $('.element[data-id='+$(this).attr('data-id')+']');
}).slice(0, 4);
const gridPositions = [ const gridPositions = [
{x: 0, y: 0}, {x: 0, y: 0},
{x: screenWidth / 2, y: 0}, {x: screenWidth / 2, y: 0},

54
views/player/content/composition.jinja.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{% set preview_mode = request.args.get('preview') == '1' %}
<style> <style>
html, body, #screen { html, body, #screen {
margin: 0; margin: 0;
@ -12,31 +13,72 @@
} }
iframe { iframe {
border: none; 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> </style>
</head> </head>
<body> <body>
<div id="screen"></div> <div id="screen"></div>
<script src="{{ STATIC_PREFIX }}js/lib/jquery.min.js"></script> <script src="{{ STATIC_PREFIX }}js/lib/jquery.min.js"></script>
<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($) { 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) { function createElement(config = null) {
const screen = $('#screen'); const screen = $('#screen');
const offsetX = screen.position().left;
const offsetY = screen.position().top;
const screenWidth = screen.width(); const screenWidth = screen.width();
const screenHeight = screen.height(); const screenHeight = screen.height();
const elementWidth = (config.widthPercent / 100) * screenWidth const elementWidth = (config.widthPercent / 100) * screenWidth
const elementHeight = (config.heightPercent / 100) * screenHeight; const elementHeight = (config.heightPercent / 100) * screenHeight;
let x = (config.xPercent / 100) * screenWidth; let x = offsetX + (config.xPercent / 100) * screenWidth;
let y = (config.yPercent / 100) * screenHeight; let y = offsetY + (config.yPercent / 100) * screenHeight;
const zIndex = config.zIndex; const zIndex = config.zIndex;
//x = Math.round(Math.max(0, Math.min(x, screenWidth - elementWidth))); //x = Math.round(Math.max(0, Math.min(x, screenWidth - elementWidth)));
//y = Math.round(Math.max(0, Math.min(y, screenHeight - elementHeight))); //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({ element.css({
left: x, left: x,
@ -64,6 +106,10 @@
}; };
const main = function() { const main = function() {
{% if preview_mode %}
setOptimalSize();
{% endif %}
applyElementsFromContent(); applyElementsFromContent();
}; };

3
views/player/player.jinja.html
View File

@ -5,6 +5,7 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="google" content="notranslate"> <meta name="google" content="notranslate">
<link rel="shortcut icon" href="{{ STATIC_PREFIX }}/favicon.ico"> <link rel="shortcut icon" href="{{ STATIC_PREFIX }}/favicon.ico">
{% set force_cover = request.args.get('cover') == '1' %}
{% if slide_animation_enabled %} {% if slide_animation_enabled %}
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/animate.min.css" /> <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/animate.min.css" />
{% endif %} {% endif %}
@ -13,7 +14,7 @@
.slide { display: flex; flex-direction: row; justify-content: center; align-items: center; background: black; } .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 { 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 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%; } .slide video { width: 100%; height: 100%; }
</style> </style>
<script type="application/javascript" src="{{ STATIC_PREFIX }}js/utils.js"></script> <script type="application/javascript" src="{{ STATIC_PREFIX }}js/utils.js"></script>

4
views/slideshow/contents/edit-composition.jinja.html
View File

@ -45,7 +45,7 @@
</span> </span>
</h3> </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> <i class="fa fa-external-link"></i>
</a> </a>
</div> </div>
@ -122,7 +122,7 @@
<div class="page-content"> <div class="page-content">
<div class="inner"> <div class="inner">
<h3 class="main"> <h3 class="main">
{{ l.composition_monitor }} {{ l.composition_monitor }} 16/9
</h3> </h3>
<div class="toolbar"> <div class="toolbar">