Reimplement Qt5 OpacityMask using Qt6 MultiEffect

https://darapsa.org/qessenger.git/commit/?id=5f777bca13beadd0a56d2264225b0c09e49541a2
The mask Rectangle needs to be put outside of the MultiEffect,
and referred to by the Rectangle's ID.
It wouldn't work if it's put directly on MultiEffect's maskSource.

https://forum.qt.io/topic/145956/rounded-image-in-qt6
Enabling layer and invisibility on the mask rectangle are a must.
Take notice on what Jacoco wrote about jagged edges at the end of the
thread. Will test that later.

1 files changed, 15 insertions, 6 deletions

diff --git a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
index e8469fb..5c22f05 100644
--- a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
+++ b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import QtMultimedia
 import Bootstrap
 import Eduport
@@ -28,15 +29,23 @@ ColumnLayout {
 		Layout.maximumHeight: width * 400 / 533
 		source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
 		fillMode: Image.PreserveAspectFit
-		layer.enabled: true
-		layer.effect: OpacityMask {
-			maskSource: Rectangle {
-				width: image.width
-				height: image.height
-				radius: 8
+		layer {
+			enabled: true
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
 			}
 		}
 
+		Rectangle {
+			id: maskRectangle
+			width: image.width
+			height: image.height
+			radius: 8
+			layer.enabled: true
+			visible: false
+		}
+
 		MediaPlayer {
 			id: mediaPlayer
 		}