reza added home page api

src/Redux/actions/index.js

@@ -2,7 +2,7 @@
 
 export { default as chat } from "./chat.js";
 // export { default as message } from './message.js';
-// export { default as public } from './public.js';
+export { default as publicApi } from "./public.js";
 export { default as user } from "./user.js";
 export { default as qr } from "./qr.js";
 export { default as book } from "./book.js";

src/Redux/actions/public.js

@@ -1,3 +1,7 @@
-import proxy from '../proxy';
+import proxy from "../proxy";
-export const otp = (data) => async (dispatch) =>
+const publicApi = {
-  (await proxy.get('public/otp', data)).dispatch(dispatch);
+  getHomeData: (data, history) => async (dispatch) =>
+    await proxy.get("public/homePage", data, { history, dispatch }),
+};
+
+export default publicApi;

src/Redux/reducers/index.js

@@ -2,7 +2,7 @@
 
 export { default as chat } from "./chat.js";
 export { default as message } from "./message.js";
-export { default as public } from "./public.js";
+export { default as publicApi } from "./public.js";
 export { default as user } from "./user.js";
 export { default as qr } from "./qr.js";
 export { default as book } from "./book.js";

src/Redux/reducers/public.js

@@ -1,11 +1,17 @@
 const initialState = {
-  otp: null,
+  homeData: [],
+  loading: false,
+  error: null,
 };
-export default function publics(state = initialState, action) {
+export default function publicApi(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
-    case 'public/otp':
+    case "public/homePage":
-      return { ...state, ...data };
+      return { ...state, loading: false, error: null, homeData: data };
+    case "loading":
+      return { ...state, loading: true };
+    case "error":
+      return { ...state, loading: false, error: data.message };
     default:
       return state;
   }

src/views/Contact/index.js

@@ -129,7 +129,7 @@ export default class Contact extends Component {
                 </div>
               </div>
               <div className="mobile-contact__address--map d-flex align-items-center mt-3">
-                <Location />
+                {/* <Location /> */}
               </div>
             </div>
           </div>

src/views/Home/HomeScroll/index.scss

@@ -25,6 +25,7 @@
     }
 
     &--more {
+      cursor: pointer;
       span {
         color: #7dc241;
         font-family: numeralMedium;
@@ -47,10 +48,8 @@
       margin: 0px 6px;
     }
   }
-  
 }
 
-
 .mobile-home-scroll {
   margin: 20px 0px;
   width: 100%;
@@ -102,5 +101,4 @@
       margin: 0px 6px;
     }
   }
-  
 }

src/views/Home/HomeSlider/Blog/index.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
 
-import './index.scss';
+import "./index.scss";
 
 const maxDesktopSize = 1250;
 
@@ -11,44 +11,63 @@ const fontSize = {
     h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
     span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 110,
     a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90,
-  }
+  },
-}
+};
 export default class Simple extends Component {
   render() {
     const { height, data } = this.props;
     return (
       <>
-        {
+        {window.innerWidth > 1000 ? (
-          window.innerWidth > 1000 ? 
+          <article
-          <article className="slider-blog d-flex flex-column"  
+            className="slider-blog d-flex flex-column"
             style={{
               height: height,
-            }}>
+            }}
-              <div>
+          >
-                <img src={data.image} alt={data.title} />
+            <Link to={data.link}>
+              <img
+                src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+                alt={data.title}
+              />
               <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
               <h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
               <div className="slider-blog__footer d-flex mt-3">
                 <div className="d-flex">
                   {/* <img src={} /> */}
                   <div className="d-flex flex-column">
-                      <span style={{ fontSize: fontSize.desktop.span }}>مطالعه کامل در {data.duration}</span>
+                    <span style={{ fontSize: fontSize.desktop.span }}>
-                      <span style={{ fontSize: fontSize.desktop.span }}>تاریخ انتشار {data.data}</span>
+                      مطالعه کامل در {data.duration}
+                    </span>
+                    <span style={{ fontSize: fontSize.desktop.span }}>
+                      تاریخ انتشار {data.data}
+                    </span>
                   </div>
                 </div>
-                  <Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>{data.buttonText}</Link>
+                <Link style={{ fontSize: fontSize.desktop.a }} to={data.link}>
+                  {data.buttonText}
+                </Link>
               </div>
-                <span className="slider-blog__category" style={{backgroundColor: data.category.color, fontSize: fontSize.desktop.span}}>{data.category.name}</span>
+              <span
-              </div>
+                className="slider-blog__category"
-            </article> : null
+                style={{
-         }
+                  backgroundColor: data.category.color,
-         {
+                  fontSize: fontSize.desktop.span,
-          window.innerWidth < 1000 ? 
+                }}
-          <article className="mobile-slider-blog d-flex flex-column"  
+              >
+                {data.category.name}
+              </span>
+            </Link>
+          </article>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <article
+            className="mobile-slider-blog d-flex flex-column"
             style={{
               height: height,
-            }}>
+            }}
-              <div>
+          >
+            <Link to={data.link}>
               <img src={data.image} alt={data.title} />
               <h1>{data.title}</h1>
               <h2>{data.subTitle}</h2>
@@ -62,13 +81,16 @@ export default class Simple extends Component {
                 </div>
                 <Link to={data.link}>{data.buttonText}</Link>
               </div>
-                <span className="mobile-slider-blog__category" style={{backgroundColor: data.category.color}}>{data.category.name}</span>
+              <span
-              </div>
+                className="mobile-slider-blog__category"
-            </article> : null
+                style={{ backgroundColor: data.category.color }}
-         }
+              >
+                {data.category.name}
+              </span>
+            </Link>
+          </article>
+        ) : null}
       </>
-      
-
     );
   }
 }

src/views/Home/HomeSlider/Blog/index.scss

@@ -1,4 +1,5 @@
 .slider-blog {
+  cursor: pointer;
   margin: 10px;
   padding: 10px 15px;
   box-shadow: 0px 0px 5px rgb(200, 200, 200);
@@ -7,6 +8,10 @@
   text-decoration: none;
   position: relative;
   max-width: 300px;
+  a {
+    text-decoration: none;
+    color: #4e4e4e;
+  }
   img {
     width: 100%;
     height: 200px;
@@ -55,7 +60,6 @@
   }
 }
 
-
 .mobile-slider-blog {
   margin: 10px;
   padding: 5px 8px;
@@ -64,6 +68,7 @@
   width: 100%;
   text-decoration: none;
   position: relative;
+  cursor: pointer;
   img {
     width: 100%;
     height: 150px;

src/views/Home/HomeSlider/Header/index.js

@@ -1,14 +1,13 @@
 import React, { Component } from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
 
-import './index.scss';
+import "./index.scss";
 export default class Header extends Component {
   render() {
     const { height, data } = this.props;
     return (
       <>
-        {
+        {window.innerWidth > 1000 ? (
-          window.innerWidth > 1000 ? 
           <div
             style={{
               minWidth: `${data.width}`,
@@ -16,8 +15,14 @@ export default class Header extends Component {
             }}
             className="slider-header d-flex"
           >
-            <div className="slider-header__right d-flex" style={{ backgroundColor: data.backgroundColor }}>
+            <div
-              <img src={data.image} alt={data.title} />
+              className="slider-header__right d-flex"
+              style={{ backgroundColor: data.backgroundColor }}
+            >
+              <img
+                src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+                alt={data.title}
+              />
             </div>
             <div
               style={{ backgroundColor: data.backgroundColor }}
@@ -27,10 +32,9 @@ export default class Header extends Component {
               <h2>{data.subTitle}</h2>
               <Link to={data.link}>{data.buttonText}</Link>
             </div>
-          </div> : null
+          </div>
-        }
+        ) : null}
-        {
+        {window.innerWidth < 1000 ? (
-          window.innerWidth < 1000 ? 
           <div
             style={{
               minWidth: `${data.width}`,
@@ -38,8 +42,14 @@ export default class Header extends Component {
             }}
             className="mobile-slider-header d-flex"
           >
-            <div className="mobile-slider-header__right d-flex" style={{ backgroundColor: data.backgroundColor }}>
+            <div
-              <img src={data.image} alt={data.title} />
+              className="mobile-slider-header__right d-flex"
+              style={{ backgroundColor: data.backgroundColor }}
+            >
+              <img
+                src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+                alt={data.title}
+              />
             </div>
             <div
               style={{ backgroundColor: data.backgroundColor }}
@@ -49,11 +59,9 @@ export default class Header extends Component {
               <h2>{data.subTitle}</h2>
               <Link to={data.link}>{data.buttonText}</Link>
             </div>
-          </div> : null
+          </div>
-        }
+        ) : null}
       </>
-      
-      
     );
   }
 }

src/views/Home/HomeSlider/Simple/index.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
 
-import './index.scss';
+import "./index.scss";
 
 const maxDesktopSize = 1250;
 
@@ -9,7 +9,8 @@ const fontSize = {
   desktop: {
     h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65,
     h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
-    notAvailable: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
+    notAvailable:
+      window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
     available: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
   },
 };
@@ -18,38 +19,53 @@ export default class Simple extends Component {
   render() {
     const { height, data } = this.props;
     return (
-      <article className="slider-simple d-flex flex-column"  
+      <article
-      style={{
+        className="slider-simple d-flex flex-column"
-      height: height,
+        style={
-    }}>
+          {
+            // height: height,
+          }
+        }
+      >
         <Link to={`/products/${data.id}`}>
-          <img src={data.image} alt={data.title} />
+          <img
+            src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+            alt={data.title}
+          />
           <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
           <h2 style={{ fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
-          {
+          {data.price !== undefined ? (
-            data.price !== undefined ? 
+            data.price ? (
-            
-              data.price ? 
               <div className="slider-simple__price d-flex justify-content-center">
-                {
+                {data.oldPrice ? (
-                  data.oldPrice ? 
                   <div>
-                    <div style={{fontSize: fontSize.desktop.available }}  className="slider-simple__price--old d-flex">
+                    <div
+                      style={{ fontSize: fontSize.desktop.available }}
+                      className="slider-simple__price--old d-flex"
+                    >
                       {data.oldPrice} تومان
                       <span></span>
                     </div>
-                    
+                  </div>
-                  </div> : null
+                ) : null}
-                }
+                <div
-                <div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div>
+                  style={{ fontSize: fontSize.desktop.available }}
-              </div> : 
+                  className="slider-simple__price--price"
-              <div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div>
+                >
-             : null
+                  {data.price} تومان
-          }
+                </div>
-          
+              </div>
+            ) : (
+              <div
+                style={{ fontSize: fontSize.desktop.notAvailable }}
+                className="slider-simple__notAvailabe"
+              >
+                ناموجود
+              </div>
+            )
+          ) : null}
         </Link>
       </article>
-
     );
   }
 }

src/views/Home/HomeStatic/Flex/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 const maxMobileSize = 550;
 
@@ -16,22 +16,33 @@ export default function Flex(props){
     margin: 5,
     borderRadius: 10,
     color: data.color,
-
+  };
-  }
   return (
-    <Link to={data.link} className="mobile-home-static__flex d-flex align-items-center" style={style}>
+    <Link
+      to={data.link}
+      className="mobile-home-static__flex d-flex align-items-center"
+      style={style}
+    >
       <div className="mobile-home-static__flex--right d-flex flex-column">
         <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
-        {
+        {data.badge ? (
-          data.badge ? 
+          <span
-          <span className="d-flex justify-content-center" style={{ fontSize: fontSize.span, backgroundColor: '#F1F907', color: '#4D4D4F'}}>{data.badge}</span> : null
+            className="d-flex justify-content-center"
-        }
+            style={{
+              fontSize: fontSize.span,
+              backgroundColor: "#F1F907",
+              color: "#4D4D4F",
+            }}
+          >
+            {data.badge}
+          </span>
+        ) : null}
         <span style={{ fontSize: fontSize.span }}>{data.subTitle}</span>
       </div>
-      <img src={data.imageUrl} alt={data.title} />
+      <img
+        src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+        alt={data.title}
+      />
     </Link>
   );
 }
-
-
-

src/views/Home/HomeStatic/Simple/index.js

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 const maxMobileSize = 550;
 
@@ -9,34 +9,34 @@ const fontSize = {
 };
 
 export default function Simple(props) {
-
   const { data } = props;
   const parentStyle = {
     // backgroundImage: `url('${data.imageUrl}')`,
-    background: `url('${data.imageUrl}')`,
+    background: `url('${`https://dnvn.ir/api/v1/file/${data.fileId}`}')`,
     flex: data.flex,
-    backgroundRepeat: 'no-repeat',
+    backgroundRepeat: "no-repeat",
-    backgroundSize: '100% 100%',
+    backgroundSize: "100% 100%",
     margin: 5,
     borderRadius: 10,
     color: data.color,
-    textAlign: 'center',
+    textAlign: "center",
   };
 
   const childStyle = {
     background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
     borderRadius: 10,
     justifyContent: data.justifyContent,
-    alignItems: data.alignItems
+    alignItems: data.alignItems,
   };
   return (
-    <Link to={data.link} className="mobile-home-static__simple d-flex" style={parentStyle}>
+    <Link
+      to={data.link}
+      className="mobile-home-static__simple d-flex"
+      style={parentStyle}
+    >
       <div style={childStyle} className="d-flex">
         <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
       </div>
     </Link>
   );
 }
-
-
-

src/views/Home/HomeStatic/Vitrin/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { Link } from "react-router-dom";
 
 const maxMobileSize = 550;
@@ -9,46 +9,48 @@ const fontSize = {
 };
 
 export default function Vitrin(props) {
-
   const { data } = props;
   const style = {
     // backgroundImage: `url('${data.imageUrl}')`,
     background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`,
     flex: data.flex,
-    backgroundRepeat: 'no-repeat',
+    backgroundRepeat: "no-repeat",
-    backgroundSize: '100%',
+    backgroundSize: "100%",
-    backgroundOpacity: '60%',
+    backgroundOpacity: "60%",
     margin: 5,
     borderRadius: 10,
     color: data.color,
   };
 
   return (
-    <div className="mobile-home-static__vitrin d-flex flex-column" style={style}>
+    <div
+      className="mobile-home-static__vitrin d-flex flex-column"
+      style={style}
+    >
       <h1 style={{ fontSize: fontSize.h1 }}>{data.title}</h1>
       <div className="d-flex align-items-end">
-        {
+        {data.books.map((item, i) => (
-          data.books.map((item,i) => (
           <Item data={item} key={i} />
-          ))
+        ))}
-        }
+        <Link to={data.link} style={{ fontSize: fontSize.span }}>
-        <Link to={data.link} style={{fontSize: fontSize.span }}>مشاهده بیشتر</Link>
+          مشاهده بیشتر
+        </Link>
       </div>
     </div>
   );
 }
 
-
 const Item = (props) => {
   const { data } = props;
   return (
-    <Link to={'/products/'+ data.id} className="mobile-home-static__vitrin--product d-flex">
+    <Link
-      <img src={data.imageUrl} alt={'عکس محصول'} />
+      to={"/products/" + data.id}
+      className="mobile-home-static__vitrin--product d-flex"
+    >
+      <img
+        src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
+        alt={"عکس محصول"}
+      />
     </Link>
   );
-}
+};
-
-
-
-
-

src/views/Home/HomeStatic/index.js

@@ -17,8 +17,7 @@ export default class HomeStatic extends Component {
     const { data, height, title, designType } = this.props;
     return (
       <>
-        {
+        {window.innerWidth > 1000 ? (
-          window.innerWidth > 1000 ?
           <section
             className={
               title ? "home-static d-flex flex-column" : "home-static d-flex"
@@ -45,23 +44,15 @@ export default class HomeStatic extends Component {
                 <Item data={item} height={height} key={i} />
               ))}
             </div>
-          </section> : null
+          </section>
-        }
+        ) : null}
-        {
+        {window.innerWidth < 1000 ? (
-          window.innerWidth < 1000 ?
+          <section className="mobile-home-static d-flex">
-          <section
+            {data.map((item, i) => (
-            className="mobile-home-static d-flex"
+              <Identifier data={item} key={i} />
-          >
+            ))}
-            {
+          </section>
-              data.map((item,i) => (
+        ) : null}
-                <Identifier 
-                  data={item} 
-                  key={i}
-                />
-              ))
-            }
-          </section> : null
-        }
       </>
     );
   }
@@ -79,13 +70,19 @@ const Item = (props) => {
           className="home-static__list--item d-flex"
         >
           <div className="d-flex flex-column">
-            <h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}>{props.data.topText}</h2>
+            <h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}>
-            <h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}>{props.data.bottomText}</h2>
+              {props.data.topText}
+            </h2>
+            <h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}>
+              {props.data.bottomText}
+            </h2>
           </div>
-          <img src={props.data.image} alt="عکس" />
+          <img
+            src={`https://dnvn.ir/api/v1/file/${props.data.fileId}`}
+            alt="عکس"
+          />
         </div>
       ) : null}
     </>
   );
 };
-

src/views/Home/Membership/index.scss

@@ -57,6 +57,7 @@
     background-color: white;
     text-align: center;
     font-size: 14px !important;
+    width: fit-content !important;
   }
 
   &__submit {

src/views/Home/SingleBlog/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 import "./index.scss";
 
@@ -17,10 +17,7 @@ export default class SingleBlog extends Component {
   render() {
     const { height, data, direction } = this.props;
     return (
-      <div
+      <div style={{ height: height }} className="single-blog d-flex">
-        style={{ height: height }}
-        className="single-blog d-flex"
-      >
         <div className="single-blog__right d-flex flex-column justify-content-center">
           <h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
           <p style={{ fontSize: fontSize.desktop.p }}>{data.subTitle}</p>
@@ -29,14 +26,13 @@ export default class SingleBlog extends Component {
           </Link>
         </div>
         <div className="single-blog__left d-flex">
-          {
+          {data.fileId ? (
-            data.image ? 
+            <img
-            <img src={data.image} alt={data.title} /> : null
+              src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
-          }
+              alt={data.title}
-          {
+            />
-            data.video ? 
+          ) : null}
-            <video sourcce={data.video} /> : null
+          {data.video ? <video sourcce={data.video} /> : null}
-          }
         </div>
       </div>
     );

src/views/Home/index.js

@@ -1,4 +1,6 @@
 import React, { Component } from "react";
+import { connect } from "react-redux";
+import { publicApi } from "~/Redux/actions";
 
 import Navbar from "./Navbar";
 import HomeHeader from "./HomeHeader/index";
@@ -9,40 +11,46 @@ import HomeSlider from "./HomeSlider/index";
 import HomeSearch from "./HomeSearch/index";
 import Membership from "./Membership/index";
 import SingleBlog from "./SingleBlog/index";
+import Loader from "~/components/Loader/index";
 
-import pic1 from "~/assets/images/pic1.png";
+// import pic1 from "~/assets/images/pic1.png";
-import pic from "~/assets/images/pic.png";
+// import pic from "~/assets/images/pic.png";
-import online from "~/assets/icons/online-education.png";
+// import online from "~/assets/icons/online-education.png";
-import chemistry from "~/assets/icons/chemistry.png";
+// import chemistry from "~/assets/icons/chemistry.png";
-import calculator from "~/assets/icons/calculator.png";
+// import calculator from "~/assets/icons/calculator.png";
-import homework from "~/assets/icons/homework.png";
+// import homework from "~/assets/icons/homework.png";
-import sciense_6 from "~/assets/images/sciense-6.png";
+// import sciense_6 from "~/assets/images/sciense-6.png";
-import chemistry_10 from "~/assets/images/chemistry-10.png";
+// import chemistry_10 from "~/assets/images/chemistry-10.png";
-import sciense_8 from "~/assets/images/sciense-8.png";
+// import sciense_8 from "~/assets/images/sciense-8.png";
-import sciense_9 from "~/assets/images/sciense-9.png";
+// import sciense_9 from "~/assets/images/sciense-9.png";
-import zist_10 from "~/assets/images/zist-10.png";
+// import zist_10 from "~/assets/images/zist-10.png";
-import blog1 from "~/assets/images/blog1.png";
+// import blog1 from "~/assets/images/blog1.png";
-import blog2 from "~/assets/images/blog2.png";
+// import blog2 from "~/assets/images/blog2.png";
-import blog3 from "~/assets/images/blog3.png";
+// import blog3 from "~/assets/images/blog3.png";
-import ar from "~/assets/icons/qr.svg";
+// import ar from "~/assets/icons/qr.svg";
-import qr from "~/assets/icons/qr.svg";
+// import qr from "~/assets/icons/qr.svg";
-import myBook from "~/assets/images/myBook.png";
+// import myBook from "~/assets/images/myBook.png";
-import homeBlog from "~/assets/images/homeBlog.png";
+// import homeBlog from "~/assets/images/homeBlog.png";
-import bookActivation from "~/assets/images/bookActivating.png";
+// import bookActivation from "~/assets/images/bookActivating.png";
-import home_chat from "~/assets/icons/home_chat.png";
+// import home_chat from "~/assets/icons/home_chat.png";
-import home_ar from "~/assets/icons/home_ar(2).png";
+// import home_ar from "~/assets/icons/home_ar(2).png";
 
 import "./index.scss";
-export default class Home extends Component {
+class Home extends Component {
-  constructor(props) {
+  componentDidMount() {
-    super(props);
+    if (window.innerWidth < 1000) {
-    this.state = {};
+      this.props.getHomeData({ device: 2 });
+    } else {
+      this.props.getHomeData({ device: 1 });
     }
+  }
+
   render() {
-    const { homeData, mobileData } = this.props;
+    const { homeData, loading } = this.props;
     return (
       <>
         {window.innerWidth > 1000 ? (
+          !loading ? (
             <>
               <div className="home d-flex flex-column">
                 <Navbar page={"home"} />
@@ -52,22 +60,47 @@ export default class Home extends Component {
               </div>
               <Footer />
             </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
         ) : null}
         {window.innerWidth < 1000 ? (
+          !loading ? (
             <>
               <div className="mobile-home d-flex flex-column">
                 <Navbar page={"home"} />
-              {mobileData.map((item, i) => (
+                {homeData.map((item, i) => (
                   <Identifier item={item} key={i} />
                 ))}
               </div>
             </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
         ) : null}
       </>
     );
   }
 }
 
+export default connect(
+  (state) => ({
+    homeData: state.publicApi.homeData,
+    loading: state.publicApi.loading,
+  }),
+  { getHomeData: publicApi.getHomeData }
+)(Home);
+
 const Identifier = (props) => {
   return (
     <>
@@ -121,702 +154,3 @@ const Identifier = (props) => {
     </>
   );
 };
-
-Home.defaultProps = {
-  mobileData: [
-    {
-      type: "slider",
-      title: "",
-      height: window.innerWidth > 1000 ? 370 : 203,
-      design: "header",
-      number: 1,
-      data: [
-        {
-          id: 0,
-          image: pic1,
-          width: "100%",
-          backgroundColor: "rgba(18, 159, 253,0.6)",
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
-          link: "",
-          buttonText: "اطلاعات بیشتر",
-        },
-        {
-          id: 1,
-          image: pic1,
-          width: "100%",
-          backgroundColor: "rgba(18, 159, 253,0.6)",
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
-          link: "",
-          buttonText: "اطلاعات بیشتر",
-        },
-        {
-          id: 2,
-          image: pic1,
-          width: "100%",
-          backgroundColor: "rgba(18, 159, 253,0.6)",
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
-          link: "",
-          buttonText: "اطلاعات بیشتر",
-        },
-      ],
-    },
-    {
-      type: "static",
-      title: "",
-      height: 160,
-      data: [
-        {
-          id: 0,
-          imageUrl: qr,
-          backgroundColor: {
-            first: "#2070CBED",
-            second: "#2070CBED",
-            angle: "180deg",
-          },
-          design: "flex",
-          title: "QR خوان",
-          subTitle: "در صفحات کتاب هوشمند",
-          link: "/qr-scan",
-          badge: "",
-          flex: 1,
-          fontSize: "large",
-          color: "white",
-        },
-        {
-          id: 1,
-          imageUrl: home_ar,
-          backgroundColor: {
-            first: "#09DA76",
-            second: "#056D3B",
-            angle: "230deg",
-          },
-          design: "flex",
-          title: "واقعیت افزوده",
-          subTitle: "توضیحات مختصر در این رابطه",
-          link: "/ar",
-          badge: "",
-          flex: 1,
-          fontSize: "large",
-          color: "white",
-        },
-      ],
-    },
-    {
-      type: "static",
-      title: "",
-      height: 160,
-      data: [
-        {
-          id: 0,
-          imageUrl: home_chat,
-          backgroundColor: {
-            first: "#0AB81B",
-            second: "#6CFF61",
-            angle: "110deg",
-          },
-          design: "flex",
-          title: "دانوینی ها",
-          subTitle: "",
-          link: "/chatroom",
-          badge: "5 پیام جدید",
-          flex: 1.6,
-          fontSize: "normal",
-          color: "white",
-        },
-        {
-          id: 1,
-          imageUrl: myBook,
-          backgroundColor: {
-            first: "#9446FCaa",
-            second: "#9446FCaa",
-            angle: "180deg",
-          },
-          design: "simple",
-          title: "کتابهای من",
-          subTitle: "",
-          justifyContent: "flex-start",
-          alignItems: "center",
-          link: "/mybooks",
-          badge: "",
-          flex: 1,
-          fontSize: "large",
-          color: "white",
-        },
-      ],
-    },
-    {
-      type: "static",
-      title: "",
-      height: 160,
-      data: [
-        {
-          id: 0,
-          imageUrl: homeBlog,
-          backgroundColor: {
-            first: "#39BF55",
-            second: "#39BF4B55",
-            angle: "110deg",
-          },
-          design: "simple",
-          title: "بلاگ",
-          subTitle: "",
-          justifyContent: "center",
-          alignItems: "center",
-          link: "/blog",
-          badge: "",
-          flex: 1.2,
-          fontSize: "normal",
-          color: "white",
-        },
-        {
-          id: 1,
-          backgroundColor: {
-            first: "#5DBEFF",
-            second: "#0483D9",
-            angle: "180deg",
-          },
-          design: "vitrin",
-          title: "فروشگاه",
-          subTitle: "",
-          justifyContent: "flex-start",
-          alignItems: "center",
-          books: [
-            { id: 0, imageUrl: sciense_6 },
-            { id: 1, imageUrl: chemistry_10 },
-            { id: 2, imageUrl: sciense_8 },
-          ],
-          link: "/products",
-          badge: "",
-          flex: 2,
-          fontSize: "large",
-          color: "white",
-        },
-      ],
-    },
-
-    {
-      type: "static",
-      title: "",
-      data: [
-        {
-          id: 0,
-          design: "3d",
-          flex: 1,
-          subData: [
-            {
-              id: 0,
-              imageUrl: "",
-              backgroundColor: {
-                first: "#FC365F",
-                second: "#7E1B30",
-                angle: "254deg",
-              },
-              design: "simple",
-              title: "پیشتیبانی",
-              subTitle: "",
-              justifyContent: "center",
-              alignItems: "center",
-              link: "/contact",
-              badge: "",
-              flex: 1,
-              fontSize: "normal",
-              color: "white",
-            },
-            {
-              id: 1,
-              imageUrl: "",
-              backgroundColor: {
-                first: "#FFCC00",
-                second: "#FF9800",
-                angle: "105deg",
-              },
-              design: "simple",
-              title: "پروفایل",
-              subTitle: "",
-              justifyContent: "center",
-              alignItems: "center",
-              link: "/profile",
-              badge: "",
-              flex: 1,
-              fontSize: "normal",
-              color: "white",
-            },
-          ],
-        },
-        {
-          id: 1,
-          imageUrl: bookActivation,
-          backgroundColor: {
-            first: "#03FCDA7F",
-            second: "#03FCDA7F",
-            angle: "180deg",
-          },
-          design: "simple",
-          title: "فعال سازی کتاب",
-          subTitle: "",
-          justifyContent: "center",
-          alignItems: "center",
-          link: "/activation",
-          badge: "",
-          flex: 1,
-          fontSize: "large",
-          color: "white",
-        },
-      ],
-    },
-  ],
-  homeData: [
-    {
-      type: "slider",
-      title: "",
-      height: window.innerWidth > 1000 ? 370 : 233,
-      design: "header",
-      number: 1,
-      data: [
-        {
-          id: 0,
-          image: pic1,
-          width: "100%",
-          backgroundColor: "rgba(18, 159, 253,0.6)",
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
-          link: "",
-          buttonText: "اطلاعات بیشتر",
-        },
-        {
-          id: 1,
-          image: pic1,
-          width: "100%",
-          backgroundColor: "rgba(18, 159, 253,0.6)",
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
-          link: "",
-          buttonText: "اطلاعات بیشتر",
-        },
-        {
-          id: 2,
-          image: pic1,
-          width: "100%",
-          backgroundColor: "rgba(18, 159, 253,0.6)",
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
-          link: "",
-          buttonText: "اطلاعات بیشتر",
-        },
-      ],
-    },
-    {
-      type: window.innerWidth > 1000 ? "" : "static",
-      title: "",
-      height: 150,
-      data: [
-        {
-          image: qr,
-          width: 48,
-          link: "",
-          topText: "QR خوان",
-          bottomText: "توضیحات مختصر در این رابطه",
-        },
-        {
-          image: ar,
-          width: 48,
-          link: "",
-          topText: "واقعیت افزوده",
-          bottomText: "توضیحات مختصر در این رابطه",
-        },
-      ],
-    },
-    {
-      type: window.innerWidth > 1000 ? "static" : "",
-      title: "",
-      height: 150,
-      data: [
-        {
-          image: online,
-          width: 24,
-          link: "",
-          topText: "دسترسی به محتوای آموزشی",
-          bottomText: "از تمامی دستگاهها",
-        },
-        {
-          image: chemistry,
-          width: 24,
-          link: "",
-          topText: " به صورت زنده و جالب انگیز",
-          bottomText: "آزمایش انجام دهید",
-        },
-        {
-          image: calculator,
-          width: 24,
-          link: "",
-          topText: "به صرفه تر هزینه کنید",
-          bottomText: "با خرید یکی دوتا ببرید",
-        },
-        {
-          image: homework,
-          width: 24,
-          link: "",
-          topText: "به صورت کاملا تعاملی",
-          bottomText: "درسهای خود را یاد بگیرید",
-        },
-      ],
-    },
-    {
-      type: "search",
-      data: ["همه", "پرفروش"],
-    },
-    {
-      type: window.innerWidth > 1000 ? "slider" : "scroll",
-      title: "کتاب‌های من",
-      moreText: "لیست کتاب‌ها",
-      height: window.innerWidth > 1000 ? 340 : 270,
-      design: window.innerWidth > 1000 ? "simple" : "myProduct",
-      number: window.innerWidth > 1000 ? 4 : 2.8,
-      data: [
-        {
-          id: 0,
-          image: sciense_6,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-        },
-        {
-          id: 1,
-          image: chemistry_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-        },
-        {
-          id: 2,
-          image: sciense_8,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-        },
-        {
-          id: 3,
-          image: sciense_9,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-        },
-        {
-          id: 4,
-          image: zist_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه هفتم ابتدایی",
-        },
-        {
-          id: 5,
-          image: sciense_6,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-        },
-        {
-          id: 6,
-          image: chemistry_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-        },
-        {
-          id: 7,
-          image: sciense_8,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-        },
-        {
-          id: 8,
-          image: sciense_9,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-        },
-        {
-          id: 9,
-          image: zist_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه هفتم ابتدایی",
-        },
-      ],
-    },
-    {
-      type: window.innerWidth < 1000 ? "scroll" : "",
-      title: "موضوعات",
-      moreText: "تمام موضوعات",
-      design: "subjects",
-      number: 4,
-      data: [
-        { id: 0, name: "علوم طبیعی", backgroundColor: "yellow" },
-        { id: 1, name: "شیمی الی", backgroundColor: "red" },
-        { id: 2, name: "زمین شناسی", backgroundColor: "blue" },
-        { id: 3, name: "ریاضیات", backgroundColor: "purple" },
-      ],
-    },
-    {
-      type: window.innerWidth > 1000 ? "slider" : "scroll",
-      title: "پرفروش‌ترین کتاب‌های دانوین",
-      moreText: "لیست کتاب‌ها",
-      height: window.innerWidth > 1000 ? 420 : 320,
-      design: window.innerWidth > 1000 ? "simple" : "product",
-      number: window.innerWidth > 1000 ? 4 : 2.8,
-      data: [
-        {
-          id: 0,
-          image: sciense_6,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-          price: "78.000",
-          oldPrice: "",
-          date: new Date(),
-        },
-        {
-          id: 1,
-          image: chemistry_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-          price: "39.000",
-          oldPrice: "59.000",
-          date: new Date(),
-        },
-        {
-          id: 2,
-          image: sciense_8,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-          price: "21.000",
-          oldPrice: "",
-        },
-        {
-          id: 3,
-          image: sciense_9,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-          price: "",
-          oldPrice: "",
-        },
-        {
-          id: 4,
-          image: zist_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه هفتم ابتدایی",
-          price: "59.000",
-          oldPrice: "",
-        },
-        {
-          id: 5,
-          image: sciense_6,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-          price: "78.000",
-          oldPrice: "",
-          date: new Date(),
-        },
-        {
-          id: 6,
-          image: chemistry_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-          price: "39.000",
-          oldPrice: "59.000",
-          date: new Date(),
-        },
-        {
-          id: 7,
-          image: sciense_8,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-          price: "21.000",
-          oldPrice: "",
-          date: new Date(),
-        },
-        {
-          id: 8,
-          image: sciense_9,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-          price: "",
-          oldPrice: "",
-          date: new Date(),
-        },
-        {
-          id: 9,
-          image: zist_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه هفتم ابتدایی",
-          price: "59.000",
-          oldPrice: "",
-          date: new Date(),
-        },
-      ],
-    },
-    {
-      type: window.innerWidth > 1000 ? "slider" : "scroll",
-      title: "جدیدترین کتاب‌های دانوین",
-      height: window.innerWidth > 1000 ? 420 : 320,
-      design: window.innerWidth > 1000 ? "tab" : "product",
-      number: window.innerWidth > 1000 ? 4 : 3.5,
-      moreText: "لیست کتاب‌ها",
-      data: [
-        {
-          id: 0,
-          image: sciense_6,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-          price: "78.000",
-          oldPrice: "",
-          date: new Date(),
-        },
-        {
-          id: 1,
-          image: chemistry_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-          price: "39.000",
-          oldPrice: "59.000",
-          date: new Date(),
-        },
-        {
-          id: 2,
-          image: sciense_8,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-          price: "21.000",
-          oldPrice: "",
-        },
-        {
-          id: 3,
-          image: sciense_9,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-          price: "",
-          oldPrice: "",
-        },
-        {
-          id: 4,
-          image: zist_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه هفتم ابتدایی",
-          price: "59.000",
-          oldPrice: "",
-        },
-        {
-          id: 5,
-          image: sciense_6,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-          price: "78.000",
-          oldPrice: "",
-          date: new Date(),
-        },
-        {
-          id: 6,
-          image: chemistry_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-          price: "39.000",
-          oldPrice: "59.000",
-          date: new Date(),
-        },
-        {
-          id: 7,
-          image: sciense_8,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه ششم ابتدایی",
-          price: "21.000",
-          oldPrice: "",
-          date: new Date(),
-        },
-        {
-          id: 8,
-          image: sciense_9,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه دهم ابتدایی",
-          price: "",
-          oldPrice: "",
-          date: new Date(),
-        },
-        {
-          id: 9,
-          image: zist_10,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle: "پایه هفتم ابتدایی",
-          price: "59.000",
-          oldPrice: "",
-          date: new Date(),
-        },
-      ],
-    },
-    {
-      type: "singleBlog",
-      height: 350,
-      direction: "rtl",
-      data: {
-        id: 0,
-        image: pic,
-        video: null,
-        title: "منفجر کردن مغز خود را به ما بسپارید",
-        subTitle:
-          "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
-        link: "",
-        buttonText: "اطلاعات بیشتر",
-      },
-    },
-    {
-      type: "slider",
-      title: "بلاگ",
-      height: "",
-      design: "blog",
-      number: window.innerWidth > 1000 ? 3 : 2,
-      data: [
-        {
-          id: 0,
-          image: blog1,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle:
-            "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
-          date: new Date(),
-          link: "",
-          buttonText: "ادامه مطلب",
-          category: { name: "علمی تخیلی", color: "red" },
-          duration: "۲۰ دقیقه",
-        },
-        {
-          id: 1,
-          image: blog2,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle:
-            "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
-          date: new Date(),
-          link: "",
-          buttonText: "ادامه مطلب",
-          category: { name: "تاریخی", color: "blue" },
-          duration: "۲۰ دقیقه",
-        },
-        {
-          id: 2,
-          image: blog3,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle:
-            "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
-          link: "",
-          buttonText: "ادامه مطلب",
-          category: { name: "ورزشی", color: "green" },
-          duration: "۲۰ دقیقه",
-        },
-        {
-          id: 3,
-          image: pic,
-          title: "منفجر کردن مغز خود را به ما بسپارید",
-          subTitle:
-            "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
-          link: "",
-          buttonText: "ادامه مطلب",
-          category: { name: "سیاسی", color: "purple" },
-          duration: "۲۰ دقیقه",
-        },
-      ],
-    },
-    {
-      type: "membership",
-    },
-  ],
-};

src/views/QR/Image/index.js

@@ -3,7 +3,6 @@ import React, { Component } from "react";
 import "./index.scss";
 export default function QRImage(props) {
   const list = props.data.fileIds.split(",");
-  console.log(list);
   return (
     <>
       {window.innerWidth < 1000 ? (

src/views/QR/VideoBox/React-video-js-player/index.js

@@ -7,7 +7,7 @@ class VideoApp extends Component {
   player = {};
   state = {
     video: {
-      src: film,
+      src: `https://dnvn.ir/api/v1/file/${this.props.fileId}`,
     },
   };
 
@@ -42,8 +42,8 @@ class VideoApp extends Component {
 
   render() {
     return (
-      <div style={{ width: '100%', height: '100%' }}>
+      // <div style={{ width: "100%", height: "100%" }}>
-        <VideoPlayer
+      <video
         controls={true}
         src={this.state.video.src}
         onReady={this.onPlayerReady.bind(this)}
@@ -53,8 +53,9 @@ class VideoApp extends Component {
         onSeeking={this.onVideoSeeking.bind(this)}
         onSeeked={this.onVideoSeeked.bind(this)}
         onEnd={this.onVideoEnd.bind(this)}
+        type="video/mp4"
       />
-      </div>
+      // </div>
     );
   }
 }

src/views/QR/VideoBox/index.js

@@ -5,6 +5,7 @@ import ReactVideoJsPlayer from "./React-video-js-player/index";
 import "./index.scss";
 
 export default function VideoBox(props) {
+  const { data } = props;
   return (
     <>
       {window.innerWidth > 1000 ? (
@@ -14,18 +15,18 @@ export default function VideoBox(props) {
             className="d-flex align-items-center"
           >
             <span></span>
-            {props.data.title}
+            {data.title}
           </h2>
-          <ReactVideoJsPlayer />
+          <ReactVideoJsPlayer fileId={data.fileIds} />
         </div>
       ) : null}
       {window.innerWidth < 1000 ? (
         <div className="mobile-video-box d-flex flex-column" id="video">
           <h2 className="d-flex align-items-center">
             <span></span>
-            {props.data.title}
+            {data.title}
           </h2>
-          <ReactVideoJsPlayer />
+          <ReactVideoJsPlayer fileId={data.fileIds} />
         </div>
       ) : null}
     </>