From 1e1bdceb2c10aa10c1844903581d110129a470dd Mon Sep 17 00:00:00 2001
From: kuwsh1n <senya.bogachev@mail.ru>
Date: Sun, 21 Apr 2024 10:37:18 +0300
Subject: [PATCH] added link video parse

---
 .../styles/generatingFormFields.module.scss   | 20 +----
 src/components/AnswerModal.jsx                |  2 +-
 src/components/GeneratingFormFields.jsx       | 25 ++++---
 src/components/MarkDown.jsx                   |  1 +
 src/hooks/sundry/parseLinkVideo.js            | 75 +++++++++++++++++++
 src/pages/NewForm.jsx                         |  4 +-
 6 files changed, 100 insertions(+), 27 deletions(-)
 create mode 100644 src/hooks/sundry/parseLinkVideo.js

diff --git a/src/assets/styles/generatingFormFields.module.scss b/src/assets/styles/generatingFormFields.module.scss
index 16d4e50..500b0b0 100644
--- a/src/assets/styles/generatingFormFields.module.scss
+++ b/src/assets/styles/generatingFormFields.module.scss
@@ -9,14 +9,6 @@
             font-size: 15px;
             font-family: "Montserrat", sans-serif;
             width: 100%;
-            // overflow-x: auto;
-            // &::-webkit-scrollbar {
-            //     height: 7px;
-            //     border: 1px solid rgb(200, 200, 200);
-            // }
-            // &::-webkit-scrollbar-thumb {
-            //     background-color: rgb(200, 200, 200);
-            // }
         }
         &__comment {
             font-size: 11px;
@@ -24,19 +16,15 @@
             font-style: italic;
             color: rgb(200, 200, 200);
             width: 100%;
-            // overflow-x: auto;
-            // &::-webkit-scrollbar {
-            //     height: 7px;
-            //     border: 1px solid rgb(200, 200, 200);
-            // }
-            // &::-webkit-scrollbar-thumb {
-            //     background-color: rgb(200, 200, 200);
-            // }
         }
         &__video {
             iframe {
                 
             }
+            &__error {
+                font-size: 12px;
+                color: rgb(220, 105, 105);
+            }
         }
         &::-webkit-scrollbar {
             height: 7px;
diff --git a/src/components/AnswerModal.jsx b/src/components/AnswerModal.jsx
index 118cb8b..94a86b2 100644
--- a/src/components/AnswerModal.jsx
+++ b/src/components/AnswerModal.jsx
@@ -29,7 +29,7 @@ const AnswerModal = ({
     }) => {
 
     return (
-        <div class="modal fade myModal" className={classes.myModal} id="answerModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
+        <div class="modal fade modal-lg myModal" className={classes.myModal} id="answerModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
             <div class="modal-dialog myModal__dialog" className={classes.myModal__dialog}>
                 <div class="modal-content" className={classes.myModal__dialog__content}>
                     <div class="modal-header" className={classes.myModal__dialog__content__header}>
diff --git a/src/components/GeneratingFormFields.jsx b/src/components/GeneratingFormFields.jsx
index c11e092..8db8a5f 100644
--- a/src/components/GeneratingFormFields.jsx
+++ b/src/components/GeneratingFormFields.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import classes from "../assets/styles/generatingFormFields.module.scss";
 import MarkdownEditor from "@uiw/react-markdown-editor";
+import { parseTotalLinkVideo } from "../hooks/sundry/parseLinkVideo";
 
 const GeneratingFormFields = ({listBlock, listTypeAnswer, answers, updateAnswersForm}) => {
     return (
@@ -10,15 +11,21 @@ const GeneratingFormFields = ({listBlock, listTypeAnswer, answers, updateAnswers
                     <p className={classes.item__question__text}>{i + 1}) <MarkdownEditor.Markdown source={item.question}/></p>
                     <p className={classes.item__question__comment}>{item.comment}</p>
                     <div className={classes.item__question__video}>
-                        {item.video ? <iframe 
-                            width="300" 
-                            height="150" 
-                            src={item.video} 
-                            frameborder="0" 
-                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-                            referrerpolicy="strict-origin-when-cross-origin" 
-                            allowfullscreen
-                        ></iframe> : <span></span>}
+                        {item.video ? 
+                            parseTotalLinkVideo(item.video).check ? 
+                                <iframe 
+                                    width="300" 
+                                    height="150" 
+                                    src={parseTotalLinkVideo(item.video).parseLink} 
+                                    frameborder="0" 
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                                    referrerpolicy="strict-origin-when-cross-origin" 
+                                    allowfullscreen
+                                ></iframe> : 
+                            <span className={classes.item__question__video__error}>
+                                Данный сервис неподдерживает использование их видео.
+                            </span> :
+                        <span></span>}
                     </div>
                 </div>
                 <div className={classes.item__answer}>
diff --git a/src/components/MarkDown.jsx b/src/components/MarkDown.jsx
index e9027e8..b01cc71 100644
--- a/src/components/MarkDown.jsx
+++ b/src/components/MarkDown.jsx
@@ -9,6 +9,7 @@ const MarkDown = ({mkValue, setMkValue}) => {
                 value={mkValue} 
                 onChange={(value, viewUpdate) => setMkValue(value)}
                 enablePreview={false}
+                visibleDragbar={false}
             />
         </div>
         
diff --git a/src/hooks/sundry/parseLinkVideo.js b/src/hooks/sundry/parseLinkVideo.js
new file mode 100644
index 0000000..6240421
--- /dev/null
+++ b/src/hooks/sundry/parseLinkVideo.js
@@ -0,0 +1,75 @@
+const serviceVideo = {
+    "www.youtube.com": parseYTlinkVideo,
+    "youtu.be": parseMobileYTlinkVideo,
+    "vk.com": parseVKlinkVideo,
+    "rutube.ru": parseRTlinkVideo
+}
+
+function parseYTlinkVideo(link) {
+    const startIndexIdVideo = link.indexOf("watch?v=") + 8;
+    const endIndexIdVideo = link.indexOf("&");
+    const idVideo = endIndexIdVideo === -1 ? 
+        link.slice(startIndexIdVideo) : 
+        link.slice(startIndexIdVideo, endIndexIdVideo);
+
+    return `https://www.youtube.com/embed/${idVideo}`
+};
+
+function parseMobileYTlinkVideo(link) {
+    const startIndexIdVideo = 17;
+    const endIndexIdVideo = link.indexOf("?");
+    const idVideo = endIndexIdVideo === -1 ? 
+        link.slice(startIndexIdVideo) : 
+        link.slice(startIndexIdVideo, endIndexIdVideo);
+
+    return `https://www.youtube.com/embed/${idVideo}`
+};
+
+function parseVKlinkVideo(link) {
+    let idVideo = "";
+
+    if (link.indexOf("video?z=video") !== -1) {
+        const startIndexIdVideo = link.indexOf("video?z=video") + 13;
+        const endIndexIdVideo = link.lastIndexOf("%");
+        idVideo = link.slice(startIndexIdVideo, endIndexIdVideo);
+    }
+    else if (link.indexOf("video") !== -1) {
+        const startIndexIdVideo = link.indexOf("video") + 5;
+        idVideo = link.slice(startIndexIdVideo)
+    }
+
+    const oid = idVideo.slice(0, idVideo.indexOf("_"));
+    const id = idVideo.slice(idVideo.indexOf("_") + 1);
+
+    return `https://vk.com/video_ext.php?oid=${oid}&id=${id}&hd=2`
+};
+
+function parseRTlinkVideo(link) {
+    const startIndexIdVideo = link.indexOf("video/") + 6;
+    const endIndexIdVideo = link.lastIndexOf("?r=a");
+    const idVideo = endIndexIdVideo === -1 ?
+        link.slice(startIndexIdVideo) :
+        link.slice(startIndexIdVideo, endIndexIdVideo);
+
+    return `https://rutube.ru/play/embed/${idVideo}`
+};
+
+function parseTotalLinkVideo(link) {
+    const serviceLink = {
+        check: false,
+        parseLink: ""
+    };
+
+    if (link) {
+        for (let key of Object.keys(serviceVideo)) {
+            if (link.indexOf(key) !== -1) {
+                serviceLink.parseLink = serviceVideo[key](link);
+                serviceLink.check = true;
+            }
+        }
+    }   
+
+    return serviceLink
+};
+
+export { parseYTlinkVideo, parseVKlinkVideo, parseTotalLinkVideo }
\ No newline at end of file
diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx
index 0eb4116..46cc9f4 100644
--- a/src/pages/NewForm.jsx
+++ b/src/pages/NewForm.jsx
@@ -9,7 +9,7 @@ import { FormsData, TypeAnswerData } from "../context";
 import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js";
 import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi } from "../hooks/api/formApi.js";
 import { responseDataToListBlock } from "../hooks/sundry/parseListBlock.js";
-import MarkDown from "../components/MarkDown.jsx";
+import { parseVKlinkVideo } from "../hooks/sundry/parseLinkVideo.js";
 
 const NewForm = () => {
     const navigate = useNavigate();
@@ -136,6 +136,8 @@ const NewForm = () => {
             video: video
         }
 
+        console.log(parseVKlinkVideo(video))
+
         const response = await addFormBlockApi(cookies.token, formId, newBlock)
 
         if (response.status === 200) {