Merge pull request #5101 from akvo/5100-bug-project-update-video-link…

…-issue [#5100] Fix Project update video link issue
akvo · Sep 5, 2022 · f09d184 · f09d184
2 parents 83785bb + 86d2820
commit f09d184
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 22 deletions.
diff --git a/akvo/rsr/dir/app/index.html b/akvo/rsr/dir/app/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" id="viewport-meta">
+    <meta name="description" content="Improving the work and efficiency of Planning, Monitoring, Evaluation, and Learning (PMEL) practitioners in the development sector: online results framework, intuitive indicator reporting workflows, easier results monitoring to help NGOs and governments better manage quality data.">
     <title>Akvo RSR</title>
     <link rel="shortcut icon" href="/static-dev/rsr/images/favicon.ico" type="image/x-icon">
 </head>

diff --git a/akvo/rsr/dir/app/modules/project-page/components/Video.jsx b/akvo/rsr/dir/app/modules/project-page/components/Video.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const Video = ({
+  title,
+  youtube = null,
+  url = null,
+  width = '100%',
+  height = 300,
+  ...props
+}) => {
+  const videoUrl = youtube && !url ? `https://www.youtube.com/embed/${youtube}` : url
+  return (
+    <iframe
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      width={width}
+      height={height}
+      src={videoUrl}
+      title={title}
+      allowFullScreen
+      {...props}
+    />
+  )
+}
+
+export default Video
diff --git a/akvo/rsr/dir/app/modules/project-page/views/UpdatePage.jsx b/akvo/rsr/dir/app/modules/project-page/views/UpdatePage.jsx
@@ -7,7 +7,8 @@ import {
   Typography,
   Icon,
   Spin,
-  Divider
+  Divider,
+  Carousel
 } from 'antd'
 import { Link, useLocation } from 'react-router-dom'
 import SimpleMarkdown from 'simple-markdown'
@@ -18,6 +19,8 @@ import Section from '../../components/Section'
 import { prefixUrl } from '../../../utils/config'
 import { queryOtherStories, queryStory } from '../queries'
 import defaultImage from '../../../images/default-image.png'
+import { getQueryFromStringUrl } from '../../../utils/string'
+import Video from '../components/Video'
 
 const { Title, Paragraph, Text } = Typography
 
@@ -50,6 +53,20 @@ const UpdatePage = ({ projectId }) => {
       />
     )
   }
+  const videoUrl = data && data.video ? data.video : null
+  const { v: videoID } = videoUrl ? getQueryFromStringUrl(videoUrl) : {}
+  const notYoutube = videoUrl && !videoID
+  const photos = data
+    ? [data.photo, ...data.photos]
+      .filter((p) => p)
+      .map((p) => ({
+        ...p,
+        id: p.id || data.id,
+        photo: p.photo || p.original || defaultImage,
+        caption: p.caption || data.photoCaption,
+        credit: p.credit || data.photoCredit,
+      }))
+    : []
   return (
     <>
       <Section>
@@ -66,16 +83,30 @@ const UpdatePage = ({ projectId }) => {
       </Section>
       <Section>
         <Row gutter={[8, 32]}>
-          <Col lg={10} md={12} sm={24} xs={24}>
+          <Col lg={10} md={12} sm={24} xs={24} style={{ marginTop: '-60px' }}>
             <Spin indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />} spinning={!data}>
-              <img
-                className="project-image"
-                alt={data ? data.title : ''}
-                src={data ? data.photo ? `${prefixUrl}${data.photo.original}` : defaultImage : defaultImage}
-              />
+              <Carousel>
+                {videoUrl && (
+                  <div>
+                    {videoID && <Video youtube={videoID} title={data.title} />}
+                    {notYoutube && <Video url={videoUrl} title={data.title} />}
+                  </div>
+                )}
+                {photos
+                  .filter((p) => p)
+                  .map((p) => (
+                    <div key={p.id}>
+                      <figure>
+                        <img alt={data.title} src={p.photo} className="project-image" />
+                        <figcaption>
+                          <Text type="secondary">{p.caption}</Text><br />
+                          <Text type="secondary">{p.credit.length ? `(Photo by ${p.credit})` : ''}</Text>
+                        </figcaption>
+                      </figure>
+                    </div>
+                  ))}
+              </Carousel>
             </Spin>
-            <Text type="secondary">{data ? data.photoCaption : ''}</Text><br />
-            <Text type="secondary">{(data && data.photoCredit.length) ? `(Photo by: ${data.photoCredit})` : ''}</Text>
           </Col>
           <Col span={24}>
             <Paragraph className="text-justify full-text">{data ? mdOutput(parse(data.text)) : ''}</Paragraph>

diff --git a/akvo/rsr/dir/app/styles/project-page.scss b/akvo/rsr/dir/app/styles/project-page.scss
@@ -58,11 +58,11 @@
   .ant-carousel {
     .slick-dots {
       li {
-        width: 10px !important;
+        width: 12px !important;
         margin: 0 5px;
         button {
-          width: 10px !important;
-          height: 10px !important;
+          width: 12px !important;
+          height: 12px !important;
           border-radius: 50% !important;
           border: 1px solid $blue-primary;
           box-sizing: border-box;
@@ -223,9 +223,8 @@
   }
   .project-image {
     width: 100%;
-    height: 280px;
+    height: 300px;
     object-fit: cover;
-    margin-top: -60px;
   }
   .full-text {
     .paragraph {
@@ -493,14 +492,6 @@
         }
       }
     }
-    .slick-dots {
-      position: relative;
-      &.slick-dots-bottom {
-        bottom: 0;
-        margin-top: 16px;
-        text-align: left;
-      }
-    }
   }
 }
 .rsr-btn-link {
@@ -562,3 +553,13 @@ hr {
     }
   }
 }
+#rsr-project-page, #rsr-updates-featured {
+  .slick-dots {
+    position: relative;
+    &.slick-dots-bottom {
+      bottom: 0;
+      margin-top: 16px;
+      text-align: left;
+    }
+  }
+}
diff --git a/akvo/rsr/dir/app/utils/string.js b/akvo/rsr/dir/app/utils/string.js
@@ -66,3 +66,13 @@ export const convertToSlug = (Text) => {
     .replace(/ /g, '-')
     .replace(/[^\w-]+/g, '')
 }
+
+export const getQueryFromStringUrl = url => url.substring(url.indexOf('?') + 1)
+  .split('&')
+  .reduce(
+    (memo, param) => ({
+      ...memo,
+      [param.split('=')[0]]: param.split('=')[1]
+    }),
+    {}
+  )