CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2026-01-20 07:12:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: allow custom width/height in embed options without aspect ratio lock

Browse Source
This commit is contained in:
Yiannis Christodoulou
2026-01-14 10:00:40 +02:00
parent 87ccb1be9c
commit e4db9f1df5
1 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
View File

@@ -121,12 +121,16 @@ export function MediaShareEmbed(props) {
setResponsive(nextResponsive); setResponsive(nextResponsive);
if (!nextResponsive) { if (!nextResponsive) {
const arr = aspectRatio.split(':'); if (aspectRatio !== 'custom') {
const x = arr[0]; const arr = aspectRatio.split(':');
const y = arr[1]; const x = arr[0];
const y = arr[1];
setKeepAspectRatio(true); setKeepAspectRatio(true);
setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10)); setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10));
} else {
setKeepAspectRatio(false);
}
} else { } else {
setKeepAspectRatio(false); setKeepAspectRatio(false);
} }
@@ -143,12 +147,18 @@ export function MediaShareEmbed(props) {
function onAspectRatioChange() { function onAspectRatioChange() {
const newVal = aspectRatioValueRef.current.value; const newVal = aspectRatioValueRef.current.value;
const arr = newVal.split(':'); if (newVal === 'custom') {
const x = arr[0]; setAspectRatio(newVal);
const y = arr[1]; setKeepAspectRatio(false);
} else {
const arr = newVal.split(':');
const x = arr[0];
const y = arr[1];
setAspectRatio(newVal); setAspectRatio(newVal);
setEmbedHeightValue(keepAspectRatio ? parseInt((embedWidthValue * y) / x, 10) : embedHeightValue); setKeepAspectRatio(true);
setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10));
}
} }
function onWindowResize() { function onWindowResize() {
@@ -223,6 +233,12 @@ export function MediaShareEmbed(props) {
const finalUrl = `${links.embed}${mediaId}${separator}${params.toString()}`; const finalUrl = `${links.embed}${mediaId}${separator}${params.toString()}`;
if (responsive) { if (responsive) {
if (aspectRatio === 'custom') {
// Use current width/height values to calculate aspect ratio for custom
const ratio = `${embedWidthValue} / ${embedHeightValue}`;
const maxWidth = `calc(100vh * ${embedWidthValue} / ${embedHeightValue})`;
return `<iframe src="${finalUrl}" style="width:100%;max-width:${maxWidth};aspect-ratio:${ratio};display:block;margin:auto;border:0;" allowFullScreen></iframe>`;
}
const arr = aspectRatio.split(':'); const arr = aspectRatio.split(':');
const ratio = `${arr[0]} / ${arr[1]}`; const ratio = `${arr[0]} / ${arr[1]}`;
const maxWidth = `calc(100vh * ${arr[0]} / ${arr[1]})`; const maxWidth = `calc(100vh * ${arr[0]} / ${arr[1]})`;
@@ -357,6 +373,7 @@ export function MediaShareEmbed(props) {
<option value="3:4">3:4</option> <option value="3:4">3:4</option>
<option value="2:3">2:3</option> <option value="2:3">2:3</option>
</optgroup> </optgroup>
<option value="custom">Custom</option>
</select> </select>
</div> </div>
</div> </div>