ESCA111/neochat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MediaSizeHelper

Browse Source 
Create a media size helper and use it to force video and images to be the correct size even in replies.
This commit is contained in:
James Graham
2023-09-02 16:43:05 +00:00
parent 7ba63eb680
commit 56f5ef2611
11 changed files with 386 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/qml/Component/Timeline/ImageDelegate.qml
View File

@@ -57,48 +57,8 @@ TimelineContainer {
innerObject: Item {
id: imageContainer
property var imageWidth: {
if (root.mediaInfo.width > 0) {
return root.mediaInfo.width;
} else {
return root.contentMaxWidth;
}
}
property var imageHeight: {
if (root.mediaInfo.height > 0) {
return root.mediaInfo.height;
} else {
// Default to a 16:9 placeholder
return root.contentMaxWidth / 16 * 9;
}
}
readonly property var aspectRatio: imageWidth / imageHeight
/**
* Whether the image should be limited by height or width.
* We need to prevent excessively tall as well as excessively wide media.
*
* @note In the case of a tie the media is width limited.
*/
readonly property bool limitWidth: imageWidth >= imageHeight
readonly property size maxSize: {
if (limitWidth) {
let width = Math.min(root.contentMaxWidth, root.maxWidth);
let height = width / aspectRatio;
return Qt.size(width, height);
} else {
let height = Math.min(root.maxHeight, root.contentMaxWidth / aspectRatio);
let width = height * aspectRatio;
return Qt.size(width, height);
}
}
Layout.maximumWidth: maxSize.width
Layout.maximumHeight: maxSize.height
Layout.preferredWidth: imageWidth
Layout.preferredHeight: imageHeight
Layout.preferredWidth: mediaSizeHelper.currentSize.width
Layout.preferredHeight: mediaSizeHelper.currentSize.height
property var imageItem: root.mediaInfo.animated ? animatedImageLoader.item : imageLoader.item
@@ -192,5 +152,12 @@ TimelineContainer {
if (UrlHelper.openUrl(root.progressInfo.localPath)) return;
if (UrlHelper.openUrl(root.progressInfo.localDir)) return;
}
MediaSizeHelper {
id: mediaSizeHelper
contentMaxWidth: root.contentMaxWidth
mediaWidth: root.mediaInfo.width
mediaHeight: root.mediaInfo.height
}
}
}

30
src/qml/Component/Timeline/ReplyComponent.qml
View File

@@ -67,6 +67,8 @@ Item {
*/
required property var mediaInfo
required property real contentMaxWidth
/**
* @brief The reply has been clicked.
*/
@@ -167,27 +169,17 @@ Item {
id: imageComponent
Image {
id: image
property var imageWidth: {
if (root.mediaInfo.width > 0) {
return root.mediaInfo.width;
} else {
return sourceSize.width;
}
}
property var imageHeight: {
if (root.mediaInfo.height > 0) {
return root.mediaInfo.height;
} else {
return sourceSize.height;
}
}
readonly property var aspectRatio: imageWidth / imageHeight
height: width / aspectRatio
width: mediaSizeHelper.currentSize.width
height: mediaSizeHelper.currentSize.height
fillMode: Image.PreserveAspectFit
source: root.mediaInfo.source
MediaSizeHelper {
id: mediaSizeHelper
contentMaxWidth: root.contentMaxWidth - verticalBorder.width - mainLayout.columnSpacing
mediaWidth: root.mediaInfo.width
mediaHeight: root.mediaInfo.height
}
}
}
Component {

1
src/qml/Component/Timeline/TimelineContainer.qml
View File

@@ -487,6 +487,7 @@ ColumnLayout {
type: root.reply.type
display: root.reply.display
mediaInfo: root.replyMediaInfo
contentMaxWidth: bubbleSizeHelper.currentWidth
}
Connections {

56
src/qml/Component/Timeline/VideoDelegate.qml
View File

@@ -69,53 +69,8 @@ TimelineContainer {
innerObject: Video {
id: vid
property var videoWidth: {
if (root.mediaInfo.width > 0) {
return root.mediaInfo.width;
} else if (metaData.resolution && metaData.resolution.width) {
return metaData.resolution.width;
} else {
return root.contentMaxWidth;
}
}
property var videoHeight: {
if (root.mediaInfo.height > 0) {
return root.mediaInfo.height;
} else if (metaData.resolution && metaData.resolution.height) {
return metaData.resolution.height;
} else {
// Default to a 16:9 placeholder
return root.contentMaxWidth / 16 * 9;
}
}
readonly property var aspectRatio: videoWidth / videoHeight
/**
* Whether the video should be limited by height or width.
* We need to prevent excessively tall as well as excessively wide media.
*
* @note In the case of a tie the media is width limited.
*/
readonly property bool limitWidth: videoWidth >= videoHeight
readonly property size maxSize: {
if (limitWidth) {
let width = Math.min(root.contentMaxWidth, root.maxWidth);
let height = width / aspectRatio;
return Qt.size(width, height);
} else {
let height = Math.min(root.maxHeight, root.contentMaxWidth / aspectRatio);
let width = height * aspectRatio;
return Qt.size(width, height);
}
}
Layout.maximumWidth: maxSize.width
Layout.maximumHeight: maxSize.height
Layout.preferredWidth: videoWidth
Layout.preferredHeight: videoHeight
Layout.preferredWidth: mediaSizeHelper.currentSize.width
Layout.preferredHeight: mediaSizeHelper.currentSize.height
fillMode: VideoOutput.PreserveAspectFit
@QTMULTIMEDIA_VIDEO_FLUSHMODE@
@@ -383,6 +338,13 @@ TimelineContainer {
root.downloadAndPlay()
}
}
MediaSizeHelper {
id: mediaSizeHelper
contentMaxWidth: root.contentMaxWidth
mediaWidth: root.mediaInfo.width
mediaHeight: root.mediaInfo.height
}
}
function downloadAndPlay() {