Each in right sidebar has its own file

4 files changed, 211 insertions, 207 deletions

diff --git a/Course/Detail/Classic.ui.qml b/Course/Detail/Classic.ui.qml
index 03d0536..5f5e3fd 100644
--- a/Course/Detail/Classic.ui.qml
+++ b/Course/Detail/Classic.ui.qml
@@ -1,16 +1,19 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
 import Eduport 1.4
+import "../../DropShadow" as DrpShdw
 import "../../Label" as Lbl
 import "Classic/Content" as Content
+import "Classic/Content/Sidebar" as ContentSidebar
 
 Flickable {
 	property alias introBadge: introBadge
 	property alias introTitleHeader: introTitleHeader
 	property alias introTitleParagraph: introTitleParagraph
 	property alias mainContent: mainContent
-	property alias rightSidebar: rightSidebar
+	property alias video: video
 	contentHeight: body.height
 
 	ColumnLayout {
@@ -85,8 +88,49 @@ Flickable {
 					? body.width : body.width / 2
 			}
 
-			Content.Sidebar {
-				id: rightSidebar
+			GridLayout {
+				Layout.topMargin: 48
+				Layout.bottomMargin: 48
+
+				ColumnLayout {
+					Layout.leftMargin: 15
+					Layout.rightMargin: 15
+
+					Item {
+						Layout.fillWidth: true
+						Layout.bottomMargin: 25.6
+						implicitHeight: video.height
+									+ 16
+
+						DrpShdw.Box {
+							source: videoRectangle
+							anchors.fill:
+								videoRectangle
+						}
+
+						Rectangle {
+							id: videoRectangle
+							color: Eduport.bsCardBg
+							radius: 8
+							anchors.fill: parent
+						}
+
+						ContentSidebar.Video {
+							id: video
+							anchors {
+								left: parent
+									.left
+								leftMargin: 8
+								right: parent
+									.right
+								rightMargin: 8
+								verticalCenter:
+								parent
+								.verticalCenter
+							}
+						}
+					}
+				}
 			}
 		}
 	}
diff --git a/Course/Detail/Classic/Content/Sidebar.ui.qml b/Course/Detail/Classic/Content/Sidebar.ui.qml
deleted file mode 100644
index 19e7c6d..0000000
--- a/Course/Detail/Classic/Content/Sidebar.ui.qml
+++ /dev/null
@@ -1,203 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.15
-import QtMultimedia 5.15
-import Eduport 1.4
-import "../../../../DropShadow" as DrpShdw
-import "../../../../Label" as Lbl
-import "../../../../Button" as Btn
-
-ColumnLayout {
-	property alias image: image
-	property alias mediaPlayer: mediaPlayer
-	property alias initialPrice: initialPrice
-	property string priceText: "$150"
-	property alias discount: discount
-	property alias time: time
-	property alias trial: trial
-	property alias buy: buy
-
-	Item {
-		Layout.fillWidth: true
-		implicitHeight: width * 1.2
-
-		DrpShdw.Box {
-			source: rectangle
-			anchors.fill: rectangle
-		}
-
-		Rectangle {
-			id: rectangle
-			radius: 8
-			color: Eduport.bsCardBg
-			anchors {
-				top: parent.top
-				topMargin: 25.6
-				left: parent.left
-				leftMargin: 12.8
-				right: parent.right
-				rightMargin: 12.8
-				bottom: parent.bottom
-			}
-
-			Image {
-				id: image
-				source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
-				width: parent.width - 16
-				height: parent.width * 3 / 4
-				anchors {
-					top: parent.top
-					topMargin: 8
-					horizontalCenter: parent
-							.horizontalCenter
-				}
-				layer.enabled: true
-				layer.effect: OpacityMask {
-					maskSource: Rectangle {
-						width: image.width
-						height: image.height
-						radius: 10
-					}
-				}
-			}
-
-			MediaPlayer {
-				id: mediaPlayer
-			}
-
-			VideoOutput {
-				anchors.fill: image
-				source: mediaPlayer
-			}
-
-			Button {
-				anchors.centerIn: image
-				display: AbstractButton.IconOnly
-				flat: true
-				width: 44
-				height: 44
-				icon {
-					width: 44
-					height: 44
-					color: "#ffffff"
-					source: "../../../../Font-Awesome/svgs/solid/circle-play.svg"
-				}
-				onClicked: mediaPlayer.play()
-			}
-
-			ColumnLayout {
-				width: parent.width - 16
-				anchors {
-					top: image.bottom
-					horizontalCenter: parent
-							.horizontalCenter
-					bottom: parent.bottom
-					bottomMargin: 8
-				}
-
-				RowLayout {
-					Layout.topMargin: 16
-					Layout.bottomMargin: 16
-
-					ColumnLayout {
-						spacing: 8
-
-						RowLayout {
-
-							Lbl.H3 {
-								text: priceText
-							}
-
-							Lbl.Body {
-								id: initialPrice
-								text: "$350"
-								color
-								: "#4d000000"
-								font.strikeout
-									: true
-							}
-
-							Rectangle {
-								id
-								: discountLabel
-								implicitWidth
-								: discount.width
-								implicitHeight
-								: discount
-									.height
-								radius: 6
-								color: "#fd7e14"
-
-								Label {
-									id: discount
-									text: qsTr("60% off")
-									color: "white"
-									font {
-										family: Eduport.bodyFont.family
-										weight: Eduport.bodyFont.weight
-										pointSize: Eduport.bsBadgeFontSize
-									}
-									horizontalAlignment: Text.AlignHCenter
-									verticalAlignment: Text.AlignVCenter
-									topPadding: 4.46
-									leftPadding: 8.29
-									rightPadding: 8.29
-									bottomPadding: 4.46
-								}
-							}
-						}
-
-						RowLayout {
-							id: time
-
-							Lbl.Body {
-								text: qsTr("5 days left at this price")
-								color: "#d6293e"
-							}
-						}
-					}
-				}
-
-				RowLayout {
-					Layout.topMargin: 16
-					Layout.fillWidth: true
-					spacing: 16
-
-					Button {
-						id: trial
-						horizontalPadding: 16
-						verticalPadding: 8
-						text: qsTr("Free trial")
-						font: Eduport.bsBtnFont
-						contentItem: Text {
-							horizontalAlignment
-								: Text
-								.AlignHCenter
-							text: trial.text
-							font: trial.font
-							color: trial.down
-								? "#ffffff"
-								: "#066ac9"
-						}
-						background: Rectangle {
-							radius: 5.2
-							color: trial.down
-								? "#066ac9"
-								: "#ffffff"
-							border {
-								color: "#066ac9"
-								width: 1
-							}
-						}
-					}
-
-					Btn.Success {
-						id: buy
-						text: qsTr("Buy course")
-					}
-				}
-			}
-		}
-	}
-}
diff --git a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
new file mode 100644
index 0000000..b0b4974
--- /dev/null
+++ b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
@@ -0,0 +1,163 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import QtMultimedia 5.15
+import Eduport 1.4
+import "../../../../../Label" as Lbl
+import "../../../../../Button" as Btn
+
+ColumnLayout {
+	property alias image: image
+	property alias play: play
+	property alias mediaPlayer: mediaPlayer
+	property alias initialPrice: initialPrice
+	property string priceText: "$150"
+	property alias discount: discount
+	property alias time: time
+	property alias trial: trial
+	property alias buy: buy
+
+	Image {
+		id: image
+		Layout.fillWidth: true
+		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
+			}
+		}
+
+		MediaPlayer {
+			id: mediaPlayer
+		}
+
+		VideoOutput {
+			anchors.fill: parent
+			source: mediaPlayer
+		}
+
+		Button {
+			id: play
+			anchors.centerIn: parent
+			display: AbstractButton.IconOnly
+			flat: true
+			icon {
+				width: 44
+				height: 44
+				color: "#ffffff"
+				source: "../../../../../Font-Awesome/svgs/solid/circle-play.svg"
+			}
+		}
+	}
+
+	ColumnLayout {
+
+		RowLayout {
+			Layout.topMargin: 16
+			Layout.bottomMargin: 16
+
+			ColumnLayout {
+				spacing: 8
+
+				RowLayout {
+
+					Lbl.H3 {
+						text: priceText
+					}
+
+					Lbl.Body {
+						id: initialPrice
+						text: "$350"
+						color
+						: "#4d000000"
+						font.strikeout
+						: true
+					}
+
+					Rectangle {
+						id
+						: discountLabel
+						implicitWidth
+						: discount.width
+						implicitHeight
+						: discount
+						.height
+						radius: 6
+						color: "#fd7e14"
+
+						Label {
+							id: discount
+							text: qsTr("60% off")
+							color: "white"
+							font {
+								family: Eduport.bodyFont.family
+								weight: Eduport.bodyFont.weight
+								pointSize: Eduport.bsBadgeFontSize
+							}
+							horizontalAlignment: Text.AlignHCenter
+							verticalAlignment: Text.AlignVCenter
+							topPadding: 4.46
+							leftPadding: 8.29
+							rightPadding: 8.29
+							bottomPadding: 4.46
+						}
+					}
+				}
+
+				RowLayout {
+					id: time
+
+					Lbl.Body {
+						text: qsTr("5 days left at this price")
+						color: "#d6293e"
+					}
+				}
+			}
+		}
+
+		RowLayout {
+			Layout.topMargin: 16
+			Layout.fillWidth: true
+			spacing: 16
+
+			Button {
+				id: trial
+				horizontalPadding: 16
+				verticalPadding: 8
+				text: qsTr("Free trial")
+				font: Eduport.bsBtnFont
+				contentItem: Text {
+					horizontalAlignment
+					: Text
+					.AlignHCenter
+					text: trial.text
+					font: trial.font
+					color: trial.down
+					? "#ffffff"
+					: "#066ac9"
+				}
+				background: Rectangle {
+					radius: 5.2
+					color: trial.down
+					? "#066ac9"
+					: "#ffffff"
+					border {
+						color: "#066ac9"
+						width: 1
+					}
+				}
+			}
+
+			Btn.Success {
+				id: buy
+				text: qsTr("Buy course")
+			}
+		}
+	}
+}
diff --git a/CourseDetailClassic.qrc b/CourseDetailClassic.qrc
index 8d3fd5c..93ce2e2 100644
--- a/CourseDetailClassic.qrc
+++ b/CourseDetailClassic.qrc
@@ -4,7 +4,7 @@
 		<file>Course/Detail/Classic/Content/Main/TabContents/Instructor.ui.qml</file>
 		<file>Course/Detail/Classic/Content/Main/TabContents/Instructor/ListInlineItem.ui.qml</file>
 		<file>Course/Detail/Classic/Content/Main.ui.qml</file>
-		<file>Course/Detail/Classic/Content/Sidebar.ui.qml</file>
+		<file>Course/Detail/Classic/Content/Sidebar/Video.ui.qml</file>
 		<file>Course/Detail/Classic.ui.qml</file>
 	</qresource>
 </RCC>