Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image widget: Add with default ratio #2811

Merged
merged 2 commits into from
Nov 27, 2024
+61 −7
Merged

Image widget: Add with default ratio #2811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5694784
Image widget: Add with default ratio
maurofmferrao Nov 20, 2024
0bd5cd9
Media: Add default ration for upload
maurofmferrao Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/Controller/Library.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -862,6 +862,8 @@ public function search(Request $request, Response $response): Response
$searchResult->source = 'local';
$searchResult->type = $media->mediaType;
$searchResult->title = $media->name;
$searchResult->width = $media->width;
$searchResult->height = $media->height;
$searchResult->description = '';
$searchResult->duration = $media->duration;

Expand Down
2 changes: 2 additions & 0 deletions lib/Helper/XiboUploadHandler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,6 +431,8 @@ protected function handleFormData($file, $index)
$file->fileSize = $media->fileSize;
$file->md5 = $media->md5;
$file->enableStat = $media->enableStat;
$file->width = $media->width;
$file->height = $media->height;
$file->mediaType = $module->type;
$file->fileName = $fileName;

Expand Down
62 changes: 55 additions & 7 deletions ui/src/layout-editor/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1889,6 +1889,36 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
});
};

const calculateDimensionsWithRatio = function(
startWidth = 250,
startHeight = 250,
originalWidth,
originalHeight,
) {
// Check if media had original dimensions
// and adjust template dimensions to keep the original ratio
if (
originalWidth &&
originalHeight &&
originalWidth != originalHeight
) {
const ratioWH =
originalWidth / originalHeight;

if (
ratioWH > 1
) {
// Landscape
startHeight /= ratioWH;
} else {
// Portrait
startWidth *= ratioWH;
}
}

return [startWidth, startHeight];
};

const createSubplaylistInPlaylist = function(regionId, playlistId) {
lD.addModuleToPlaylist(
regionId,
Expand Down Expand Up @@ -1996,16 +2026,21 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
lD.openPlaylistEditor(res.data.regionPlaylist.playlistId);
});
} else {
// Get dimensions of the draggable
const startWidth = $(draggable).data('startWidth');
const startHeight = $(draggable).data('startHeight');
// Calculate dimensions with original ratio
const [startWidth, startHeight] =
calculateDimensionsWithRatio(
draggableData.templateStartWidth,
draggableData.templateStartHeight,
draggableData.originalWidth,
draggableData.originalHeight,
);

// If both dimensions exist and are not 0
// add them to options
const dimensions = {};
if (startWidth && startHeight) {
dimensions.width = startWidth;
dimensions.height = startHeight;
dimensions.width = Math.round(startWidth);
dimensions.height = Math.round(startHeight);
}

// Add to layout, but create a new region
Expand Down Expand Up @@ -2324,14 +2359,23 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
});
} else {
const addElement = function() {
// Calculate dimensions with original ratio
const [startWidth, startHeight] =
calculateDimensionsWithRatio(
draggableData.templateStartWidth,
draggableData.templateStartHeight,
draggableData.originalWidth,
draggableData.originalHeight,
);

// Element options
const elementOptions = {
id: draggableData.templateId,
type: draggableData.dataType,
left: (dropPosition) ? dropPosition.left : 0,
top: (dropPosition) ? dropPosition.top : 0,
width: draggableData.templateStartWidth,
height: draggableData.templateStartHeight,
width: startWidth,
height: startHeight,
layer: 0,
rotation: 0,
extendsTemplate: draggableData.extendsTemplate,
Expand Down Expand Up @@ -2534,6 +2578,10 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
// Add media id to data
draggableData.mediaId = data.response().result.files[0].mediaId;
draggableData.cardTitle = data.response().result.files[0].name;
draggableData.originalWidth =
data.response().result.files[0].width;
draggableData.originalHeight =
data.response().result.files[0].height;
};

lD.openUploadForm({
Expand Down
2 changes: 2 additions & 0 deletions ui/src/templates/toolbar-card-media.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
data-data-type="{{dataType}}"
data-download="{{download}}"
data-card-title="{{title}}"
data-original-width="{{width}}"
data-original-height="{{height}}"
data-toggle="tooltip" data-title="{{description}}">

<div class="toolbar-card-preview">
Expand Down