feat: youtube videos modal

CONTRIBUTING.md

@@ -102,6 +102,18 @@ Follow these steps to run the project on your local machine:
 - [API documentation and examples (swagger)](https://open-bus-stride-api.hasadna.org.il/docs)
 - [the deployed website](https://open-bus-map-search.hasadna.org.il/dashboard)
 
+## Page Video Descriptions
+
+This section provides video tutorials for some of the key pages in this project.
+
+**Dashboard & Maps Pages**
+
+* **Video:** [How to Use the Dashboard & Maps Pages](https://www.youtube.com/watch?v=MJZrIxjQEH8&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&t=17s)
+
+**Bug Reporting**
+
+* **Video:** [How to Report Bugs](https://www.youtube.com/watch?v=F6sD9Bz4Xj0&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T)
+
 ## Troubleshooting
 
 we're here to help! feel free to join our [Slack channel](https://join.slack.com/t/hasadna/shared_invite/zt-21qipktl1-7yF4FYJVxAqXl0wE4DlMKQ)

README.md

@@ -73,4 +73,4 @@ https://github.com/hasadna/open-bus-map-search/blob/main/src/model/busStop.ts#L4
 The API is backend code that provides us with data and aggregations from the DB
 You can see it's endpoints here:   
 https://open-bus-stride-api.hasadna.org.il/docs     
-[link to repo](https://github.com/hasadna/open-bus-stride-api).
+[link to repo](https://github.com/hasadna/open-bus-stride-api).

src/locale/en.json

@@ -150,5 +150,7 @@
     "viewIssue": "View issue"
   },
   "plannedRoute": "Planned Route",
-  "actualRoute": "Actual Route"
+  "actualRoute": "Actual Route",
+  "youtube_modal_info_title": "Video tutorial (Hebrew)",
+  "open_video_about_this_page": "Open video about this page"
 }

src/locale/he.json

@@ -165,5 +165,7 @@
     "viewIssue": "לצפייה בדיווח"
   },
   "plannedRoute": "מסלול מתוכנן",
-  "actualRoute": "מסלול בפועל"
+  "actualRoute": "מסלול בפועל",
+  "youtube_modal_info_title": "סרטון הסבר",
+  "open_video_about_this_page": "לפתוח סרטון על העמוד הזה"
 }

src/pages/BugReportForm .tsx

@@ -5,6 +5,7 @@ import { UploadOutlined } from '@ant-design/icons'
 import axios from 'axios'
 import './BugReportForm.scss'
 import { UploadChangeParam, UploadFile } from 'antd/lib/upload'
+import InfoYoutubeModal from './components/YoutubeModal'
 const { Option } = Select
 
 interface BugReportFormData {
@@ -64,18 +65,22 @@ const BugReportForm = () => {
 
   return (
     <Card className="bug-report-form-container">
-      <h1 className="logo">דאטאבוס</h1>
-
+      <h1 className="logo">
+        דאטאבוס
+        <InfoYoutubeModal
+          label={t('open_video_about_this_page')}
+          title={t('youtube_modal_info_title')}
+          videoUrl="https://www.youtube-nocookie.com/embed?v=F6sD9Bz4Xj0&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&index=11"
+        />
+      </h1>
       <span> {t('reportBug.description')}</span>
-
       <p>
         {submittedUrl && (
           <a href={submittedUrl} target="_blank" rel="noopener noreferrer">
             {t('reportBug.viewIssue')} (Github)
           </a>
         )}
       </p>
-
       <Form
         form={form}
         name="bug-report"

src/pages/BugReportForm.scss

@@ -39,6 +39,7 @@
     padding-bottom: 0;
     line-height: 25px;
     text-align: center; 
+    display: flex;
   }
 
   .ant-form-item {

src/pages/components/YotubeModal.scss

@@ -0,0 +1,22 @@
+
+.modal-info-ico {
+    margin-right: 12px;
+}
+
+.modal-iframe-container {
+    height: 0;
+    padding-bottom: 56.25%;
+    width: 100%;
+    position: relative;
+
+
+    iframe {
+        border: none;
+        border-radius: 8px;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+}

src/pages/components/YoutubeModal.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { InfoCircleOutlined } from '@ant-design/icons'
+import { Modal } from 'antd'
+import './YotubeModal.scss'
+
+type InfoYoutubeModalProps = {
+  label: string
+  videoUrl: string
+  title: string
+}
+
+const InfoYoutubeModal = ({ videoUrl, label, title }: InfoYoutubeModalProps) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <>
+      <InfoCircleOutlined
+        onClick={() => setVisible(true)}
+        className="modal-info-ico"
+        aria-label={label}
+      />
+      <Modal
+        width={'1000px'}
+        footer={null}
+        title={title}
+        open={visible}
+        destroyOnClose={true}
+        onCancel={() => {
+          setVisible(false)
+        }}>
+        <div className="modal-iframe-container">
+          <iframe allowFullScreen src={videoUrl} />
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+export default InfoYoutubeModal

src/pages/dashboard/DashboardPage.tsx

@@ -18,6 +18,7 @@ import OperatorSelector from 'src/pages/components/OperatorSelector'
 import DayTimeChart from './ArrivalByTimeChart/DayTimeChart'
 import AllLinesChart from './AllLineschart/AllLinesChart'
 import WorstLinesChart from './WorstLinesChart/WorstLinesChart'
+import InfoYoutubeModal from '../components/YoutubeModal'
 
 // Declarations
 const { Title } = Typography
@@ -33,6 +34,11 @@ const DashboardPage = () => {
     <PageContainer>
       <Title className="page-title" level={3}>
         {t('dashboard_page_title')}
+        <InfoYoutubeModal
+          label="Open video about this page"
+          title={t('youtube_modal_info_title')}
+          videoUrl="https://www.youtube-nocookie.com/embed?v=fJT2u1RHA-Q&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T"
+        />
       </Title>
       <Alert message={t('dashboard_page_description')} type="info" />
       {startDate > endDate ? (
@@ -61,7 +67,6 @@ const DashboardPage = () => {
             />
           </Grid>
         </Grid>
-
         <Grid lg={6} xs={12}>
           <OperatorSelector operatorId={operatorId} setOperatorId={setOperatorId} />
         </Grid>

src/pages/gapsPatterns/GapsPatternsPage.tsx

@@ -34,6 +34,7 @@ import { INPUT_SIZE } from 'src/resources/sizes'
 const { Title } = Typography
 import { useTranslation } from 'react-i18next'
 import Widget from 'src/shared/Widget'
+import InfoYoutubeModal from '../components/YoutubeModal'
 // Define prop types for the component
 interface BusLineStatisticsProps {
   lineRef: number
@@ -174,7 +175,14 @@ const GapsPatternsPage = () => {
 
   return (
     <PageContainer>
-      <Title level={3}>{t('gaps_patterns_page_title')}</Title>
+      <Title level={3}>
+        {t('gaps_patterns_page_title')}
+        <InfoYoutubeModal
+          label={t('open_video_about_this_page')}
+          title={t('youtube_modal_info_title')}
+          videoUrl="https://www.youtube-nocookie.com/embed?v=-C_rZlbHBmk&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&index=4"
+        />
+      </Title>
       <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
         <Alert message={t('gaps_patterns_page_description')} type="info" />
       </Space>

src/pages/realtimeMap/index.tsx

@@ -20,6 +20,7 @@ import createClusterCustomIcon from '../components/utils/customCluster/customClu
 import { TimeSelector } from '../components/TimeSelector'
 import { busIcon, busIconPath } from '../components/utils/BusIcon'
 import { BusToolTip } from 'src/pages/components/map-related/MapLayers/BusToolTip'
+import InfoYoutubeModal from '../components/YoutubeModal'
 
 const { Title } = Typography
 
@@ -98,6 +99,11 @@ export default function RealtimeMapPage() {
     <PageContainer className="map-container">
       <Title className="page-title" level={3}>
         {t('realtime_map_page_title')}
+        <InfoYoutubeModal
+          label={t('open_video_about_this_page')}
+          title={t('youtube_modal_info_title')}
+          videoUrl="https://www.youtube-nocookie.com/embed?v=fJT2u1RHA-Q&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T"
+        />
       </Title>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         <Grid xs={12} className="hideOnMobile">

src/pages/singleLineMap/index.tsx

@@ -21,6 +21,7 @@ import { PageContainer } from '../components/PageContainer'
 import { MapWithLocationsAndPath } from '../components/map-related/MapWithLocationsAndPath'
 import Title from 'antd/es/typography/Title'
 import { Space, Alert } from 'antd'
+import InfoYoutubeModal from '../components/YoutubeModal'
 
 const SingleLineMapPage = () => {
   const { search, setSearch } = useContext(SearchContext)
@@ -120,6 +121,11 @@ const SingleLineMapPage = () => {
     <PageContainer className="map-container">
       <Title className="page-title" level={3}>
         {t('singleline_map_page_title')}
+        <InfoYoutubeModal
+          label={t('open_video_about_this_page')}
+          title={t('youtube_modal_info_title')}
+          videoUrl="https://www.youtube-nocookie.com/embed?v=fJT2u1RHA-Q&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T"
+        />
       </Title>
       <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
         <Alert message={t('realtime_map_page_description')} type="info" />