Reimplement Qt5 OpacityMask using Qt6 MultiEffect

Remaining ones.
See 93b25dfa97494184493e02b75766e57bc6fe79bb
https://darapsa.org/qeduport.git/commit/?id=93b25dfa97494184493e02b75766e57bc6fe79bb

6 files changed, 123 insertions, 107 deletions

diff --git a/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml
index 1f34f36..9643916 100644
--- a/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml
+++ b/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 
 Item {
 	width: reviewItem.width
@@ -10,26 +10,29 @@ Item {
 		id:reviewItem
 		spacing: 16
 		RowLayout {
-			id: reviewAvatar
 			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-			Rectangle {
-				id: avatarMask
-				radius: 100
-				Layout.preferredHeight: 82
-				Layout.preferredWidth: 82
-				Layout.minimumHeight: 82
-				Layout.minimumWidth: 82
-				Image{
-					id: avatarImage
-					source: "https://eduport.webestica.com/assets/images/avatar/09.jpg"
-					sourceSize: Qt.size(parent.width, parent.height)
-					visible: false
+			Image {
+				id: avatarImage
+				source: "https://eduport.webestica.com/assets/images/avatar/09.jpg"
+				sourceSize {
+					width: 82
+					height: 82
+				}
+			}
+			layer {
+				enabled: true
+				effect: MultiEffect {
+					maskEnabled: true
+					maskSource: maskRectangle
 				}
 			}
-			OpacityMask {
-				anchors.fill: avatarMask
-				source: avatarImage
-				maskSource: avatarMask
+			Rectangle {
+				id: maskRectangle
+				width: avatarImage.sourceSize.width
+				height: avatarImage.sourceSize.height
+				radius: avatarImage.sourceSize.width
+				layer.enabled: true
+				visible: false
 			}
 		}
 		ColumnLayout {
diff --git a/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml
index 6931522..b3f6e85 100644
--- a/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml
+++ b/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml
@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Effects
 import Qt5Compat.GraphicalEffects
 
 Item {
@@ -38,20 +39,25 @@ Item {
 					id: courseVideoImage
 					source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
 					fillMode: Image.PreserveAspectCrop
-					width: parent.width
-					height: parent.height
-					visible: false
-				}
-				OpacityMask {
-					id: courseVideoMask
-					anchors.fill: courseVideoThumbnail
-					source: courseVideoImage
-					maskSource: courseVideoThumbnail
-				}
-				ColorOverlay {
-					anchors.fill: courseVideoMask
-					source: courseVideoMask
-					color: "#80000000"
+					sourceSize {
+						width: parent.width
+						height: parent.height
+					}
+					layer {
+						enabled: true
+						effect: MultiEffect {
+							maskEnabled: true
+							maskSource: maskRectangle
+						}
+					}
+					Rectangle {
+						id: maskRectangle
+						width: courseVideoImage.sourceSize.width
+						height: courseVideoImage.sourceSize.height
+						radius: 8
+						layer.enabled: true
+						visible: false
+					}
 				}
 				Button {
 					id: playVideoButton
diff --git a/Course/Grid/Card.ui.qml b/Course/Grid/Card.ui.qml
index dbc32ad..a70a05a 100644
--- a/Course/Grid/Card.ui.qml
+++ b/Course/Grid/Card.ui.qml
@@ -2,7 +2,6 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Effects
-import Qt5Compat.GraphicalEffects
 
 Item {
 	id: item1
@@ -24,35 +23,30 @@ Item {
 			id: columnLayout
 			anchors.fill: parent
 			spacing: 0
-			Rectangle {
+			Image {
 				id: cardItemImage
-				radius: 8
 				Layout.fillHeight: true
-				Layout.preferredHeight: 255
 				Layout.fillWidth: true
-				Layout.preferredWidth: 300
-				Image {
-					id: cardItemImageSource
-					source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
-					fillMode: Image.PreserveAspectCrop
-					width: parent.width
-					height: parent.height
-					visible: false
+				source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+				sourceSize {
+					width: 300
+					height: 255
 				}
-				OpacityMask {
-					id: cardItemImageMask
-					anchors.fill: cardItemImage
-					source: cardItemImageSource
-					maskSource: cardItemImage
+				fillMode: Image.PreserveAspectCrop
+				layer {
+					enabled: true
+					effect: MultiEffect {
+						maskEnabled: true
+						maskSource: maskRectangle
+					}
 				}
-
 				Rectangle {
-					id: rectangle
-					width: cardItemImageMask.width
-					height: 5
-					color: "#ffffff"
-					anchors.bottom: cardItemImageMask.bottom
-					anchors.bottomMargin: 0
+					id: maskRectangle
+					width: cardItemImage.sourceSize.width
+					height: cardItemImage.sourceSize.height
+					radius: 8
+					layer.enabled: true
+					visible: false
 				}
 			}
 			ColumnLayout {
diff --git a/Shop/Cart/Table/CourseItem.ui.qml b/Shop/Cart/Table/CourseItem.ui.qml
index a2f5d70..ea88a43 100644
--- a/Shop/Cart/Table/CourseItem.ui.qml
+++ b/Shop/Cart/Table/CourseItem.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 import Eduport
 import "../../../TextField"
@@ -12,29 +12,33 @@ GridLayout {
 	columns: width < 990 ? 1 : 2
 	rowSpacing: 8
 	columnSpacing: 8
-	Rectangle {
+
+	Image {
 		id: courseItemImage
-		width: 100
-		height: 75
-		Layout.maximumWidth: width
-		Layout.maximumHeight: height
-		radius: 8
 		Layout.rightMargin: 8
 		Layout.bottomMargin: 16
 		Layout.topMargin: 16
 		Layout.leftMargin: 8
 		Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-		Image {
-			id: courseItemImageSource
-			anchors.fill: parent
-			visible: false
-			source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+		source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+		sourceSize {
+			width: 100
+			height: 75
 		}
-		OpacityMask {
-			id: coursetemImageMask
-			anchors.fill: courseItemImage
-			source: courseItemImageSource
-			maskSource: courseItemImage
+		layer {
+			enabled: true
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
+			}
+		}
+		Rectangle {
+			id: maskRectangle
+			width: courseItemImage.sourceSize.width
+			height: courseItemImage.sourceSize.height
+			radius: 8
+			layer.enabled: true
+			visible: false
 		}
 	}
 
diff --git a/Shop/ProductDetail/LeftSidebar.ui.qml b/Shop/ProductDetail/LeftSidebar.ui.qml
index be1f47d..6025b8c 100644
--- a/Shop/ProductDetail/LeftSidebar.ui.qml
+++ b/Shop/ProductDetail/LeftSidebar.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Eduport
 import "../../Button"
 import "../../DropShadow"
@@ -11,29 +11,34 @@ Rectangle {
 	id: sidebarCard
 	height: sidebarCardImage.height + cardBody.height
 
-	Rectangle {
+	Image {
 		id: sidebarCardImage
-		width: parent.width
-		height: sidebarCardImage.width
-		radius: 8
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: parent.top
 		anchors.rightMargin: 0
 		anchors.leftMargin: 0
 		anchors.topMargin: 0
-		Image {
-			id: sidebarCardImageSource
-			anchors.fill: parent
-			visible: false
-			source: "https://eduport.webestica.com/assets/images/book/01.jpg"
-			fillMode: Image.PreserveAspectCrop
+		source: "https://eduport.webestica.com/assets/images/book/01.jpg"
+		sourceSize {
+			width: parent.width
+			height: sidebarCardImage.width
+		}
+		fillMode: Image.PreserveAspectCrop
+		layer {
+			enabled: true
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
+			}
 		}
-		OpacityMask {
-			id: sidebarCardImageMask
-			anchors.fill: sidebarCardImage
-			source: sidebarCardImageSource
-			maskSource: sidebarCardImage
+		Rectangle {
+			id: maskRectangle
+			width: sidebarCardImage.sourceSize.width
+			height: sidebarCardImage.sourceSize.height
+			radius: 8
+			layer.enabled: true
+			visible: false
 		}
 	}
 	RowLayout {
diff --git a/Student/Dashboard/CourseListItem.ui.qml b/Student/Dashboard/CourseListItem.ui.qml
index ee5e657..cc2b04e 100644
--- a/Student/Dashboard/CourseListItem.ui.qml
+++ b/Student/Dashboard/CourseListItem.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 
 RowLayout {
@@ -12,29 +12,33 @@ RowLayout {
 	property alias courseListActionButton: courseListActionButton
 	spacing: 16
 
-	Rectangle {
-		id: courseThumbnail
-		radius: 8
-		Layout.preferredHeight: 72
-		Layout.preferredWidth: 100
-		Layout.minimumHeight: 72
-		Layout.minimumWidth: 100
-		Image {
-			id: courseThumb
-			source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
-			sourceSize: Qt.size(parent.width, parent.height)
-			visible: false
+	Image {
+		id: courseThumb
+		source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+		sourceSize {
+			width: 100
+			height: 75
+		}
+		layer {
+			enabled: true
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
+			}
 		}
-		OpacityMask{
-			anchors.fill: courseThumbnail
-			source: courseThumb
-			maskSource: courseThumbnail
+		Rectangle {
+			id: maskRectangle
+			width: courseThumb.sourceSize.width
+			height: courseThumb.sourceSize.height
+			radius: 8
+			layer.enabled: true
+			visible: false
 		}
 	}
 	ColumnLayout{
 		id: courseProgressInfo
 		spacing: 0
-		width: parent.width - image.width - spacing
+		width: parent.width - courseThumb.width - spacing
 
 		Label{
 			id: courseTitle