Merge pull request #452 from code4romania/fix/450-youtube-link-issues

fix: 450 - youtube link issues
code4romania · Jan 19, 2024 · 4a99685 · 4a99685
2 parents 8807a2c + 982a873
commit 4a99685
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/frontend/src/pages/application/components/ApplicationDetails.tsx b/frontend/src/pages/application/components/ApplicationDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { GlobeAltIcon, PlusIcon, XIcon } from '@heroicons/react/outline';
 import logo from '../../../assets/images/logo.svg';
 import { useAuthContext } from '../../../contexts/AuthContext';
@@ -25,6 +25,7 @@ const ApplicationDetails = () => {
   const navigate = useNavigate();
   const [isConfirmationModalOpen, setConfirmationModalOpen] = useState(false);
   const [application, refecthApplication] = useOutletContext<any>();
+  const [youtubeLink, setYoutubeLink] = useState<string>();
   const { role } = useAuthContext();
 
   const { t } = useTranslation(['app', 'common']);
@@ -36,6 +37,15 @@ const ApplicationDetails = () => {
 
   const { mutateAsync: removeOngApplication } = useRemovOngApplicationRequest();
 
+  useEffect(() => {
+    if (application.videoLink) {
+      // cleanup some unwanted prefixes
+      const link = (application.videoLink as string).replace('https://', '').replace('http://', '');
+      console.log(`https://${link}`);
+      setYoutubeLink(`https://${link}`);
+    }
+  }, [application]);
+
   // Actions
   const requestApplication = async () => {
     if (application) {
@@ -335,7 +345,7 @@ const ApplicationDetails = () => {
           description={application?.description}
         />
 
-        {application?.videoLink && (
+        {youtubeLink && (
           <div className="w-full h-full bg-white shadow rounded-lg">
             <div className="py-5 lg:px-10 px-5 flex justify-between">
               <span className="font-titilliumBold sm:text-lg lg:text-xl text-md text-gray-800">
@@ -346,19 +356,17 @@ const ApplicationDetails = () => {
             <div className="lg:p-8 p-5">
               <iframe
                 className="sm:h-96 h-48 w-full"
-                src={application?.videoLink}
-                frameBorder="0"
                 allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
                 title={t('details.another_description')}
-                srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=${
-                  application?.videoLink
-                }><img src=https://img.youtube.com/vi/${
-                  application?.videoLink?.split('/')[application?.videoLink?.split('/').length - 1]
+                src={youtubeLink}
+                srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=${youtubeLink}?autoplay><img src=https://img.youtube.com/vi/${
+                  youtubeLink.split('/')[youtubeLink.split('/').length - 1].split('?')[0]
                 }/hqdefault.jpg alt='${t(
                   'details.another_description',
                 )}'><span style="display: flex; flex-direction:column; align-items:center"><button style="background:transparent; border:none; width: 70px; cursor: pointer" class="ytp-large-play-button ytp-button ytp-large-play-button-red-bg" aria-label="Redă"><svg version="1.1" viewBox="0 0 68 48"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></button></span></a>`}
-              />
+                frameBorder="0"
+              ></iframe>
             </div>
           </div>
         )}