From f9089a21954bf4bf298a26166ce9069bb4680e6b Mon Sep 17 00:00:00 2001
From: Zeliha Pala <zelihapala78@gmail.com>
Date: Sun, 26 May 2024 15:31:01 +0100
Subject: [PATCH] Embed Video Updated

---
 client/src/NewVideoForm.css         |  5 ++--
 client/src/VideoRecommendations.css |  4 +++
 client/src/VideoRecommendations.jsx | 46 +++++++++++++++++++----------
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/client/src/NewVideoForm.css b/client/src/NewVideoForm.css
index da935ea7fe..86bd4cfbf4 100644
--- a/client/src/NewVideoForm.css
+++ b/client/src/NewVideoForm.css
@@ -28,8 +28,9 @@
 
 .input-group input {
 	width: 100%;
-	padding: 8px;
-	box-sizing: border-box;
+	padding: 10px;
+	border: 1px solid #ddd;
+	border-radius: 5px;
 }
 
 .submit-button {
diff --git a/client/src/VideoRecommendations.css b/client/src/VideoRecommendations.css
index b701341142..b4149fbb6b 100644
--- a/client/src/VideoRecommendations.css
+++ b/client/src/VideoRecommendations.css
@@ -36,3 +36,7 @@
 .video-title a:hover {
 	text-decoration: underline;
 }
+.video-item iframe {
+	width: 100%; /* İframe'in genişliğini % olarak ayarlayın */
+	height: 100%; /* İframe'in yüksekliğini % olarak ayarlayın */
+}
diff --git a/client/src/VideoRecommendations.jsx b/client/src/VideoRecommendations.jsx
index 5d2abb1d4f..eec1001f0b 100644
--- a/client/src/VideoRecommendations.jsx
+++ b/client/src/VideoRecommendations.jsx
@@ -3,6 +3,7 @@ import "./VideoRecommendations.css";
 import DeleteVideoRecommendation from "./DeleteVideoRecommendation";
 import NewVideoForm from "./NewVideoForm.jsx";
 import RatingDisplay from "./RatingDisplay.jsx";
+
 const VideoList = () => {
 	const [videos, setVideos] = useState([]);
 
@@ -37,25 +38,40 @@ const VideoList = () => {
 		setVideos(updatedVideos);
 	};
 
+	function changeYTLinkToEmbed(watchLink) {
+		return watchLink.replace("watch?v=", "embed/");
+	}
+
 	return (
 		<div className="video-list-container">
 			<div className="video-list">
-				{videos.map((videoData, i) => (
-					<div className="video-item" data-testid="video" key={i}>
-						<div className="video-title">
-							<a href={videoData.src}>{videoData.title}</a>
+				{videos.map((videoData, i) => {
+					const embedLink = changeYTLinkToEmbed(videoData.src);
+					return (
+						<div className="video-item" data-testid="video" key={i}>
+							<div className="video-title">{videoData.title}</div>
+							<div className="video-frame">
+								<iframe
+									title={videoData.title}
+									width="560"
+									height="315"
+									src={embedLink}
+									frameBorder="0"
+									allowFullScreen
+								></iframe>
+							</div>
+							<DeleteVideoRecommendation
+								videoId={videoData.id}
+								onDelete={handleDelete}
+							/>
+							<RatingDisplay
+								videoId={videoData.id}
+								rating={videoData.rating}
+								onUpdate={handleRatingUpdate}
+							/>
 						</div>
-						<DeleteVideoRecommendation
-							videoId={videoData.id}
-							onDelete={handleDelete}
-						/>
-						<RatingDisplay
-							videoId={videoData.id}
-							rating={videoData.rating}
-							onUpdate={handleRatingUpdate}
-						/>
-					</div>
-				))}
+					);
+				})}
 			</div>
 			<NewVideoForm onSubmit={fetchVideos} />
 		</div>