Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add explanatory movie to FAQs #366

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: Add explanatory movie to FAQs #366

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
794d7be
Add dependency to video react
jnnwnk Nov 14, 2020
60f96af
Add explanatory movie to faqs
jnnwnk Nov 14, 2020
85e1bec
Run prettier
jnnwnk Nov 14, 2020
c92be57
Merge branch 'master' into feature/add-explanatory-movie
jnnwnk Nov 18, 2020
99037cc
Move video to top, add poster, add styling
jnnwnk Nov 18, 2020
94091c4
Add border radius for poster
jnnwnk Nov 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions apps/official/components/pages/Faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { RiskBadge } from "../RiskBadge";
import { NavigationTitle } from "app-config/components/NavigationTitle";
import ContactsMediumBackgroundIcon from "../../static/images/contacts-medium-background.svg";
import { Trans, useTranslation } from "react-i18next";
import "video-react/dist/video-react.css";
import { Player } from "video-react";

const useStyles = makeStyles(() => ({
textBlock: {
Expand Down Expand Up @@ -71,6 +73,15 @@ export const Faq: React.FC = () => {
</Typography>
</FaqAccordion>

<FaqAccordion title={t("faq.how-does-it-work-basic.title")}>
<Typography style={{ width: "100%" }} component="div">
<Typography>{t("faq.how-does-it-work-basic.text")}</Typography>
<Player>
<source src="/videos/explanatory-movie.mp4"></source>
</Player>
</Typography>
</FaqAccordion>

<FaqAccordion title={t("faq.how-to-access.title")}>
<Typography style={{ width: "100%" }}>
<Trans i18nKey="faq.how-to-access.text">
Expand Down
4 changes: 4 additions & 0 deletions apps/official/static/locales/de/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@
"current-rules-in-county": "Welche Verhaltensregeln gelten im Landkreis?",
"outro": "Mit der CovMap möchten wir zu einer freiwilligen Reduzierung von Kontakten aufrufen und aufzeigen, wo dies besonders notwendig ist."
},
"how-does-it-work-basic": {
"title": "Wie funktioniert die CovMap?",
"text": "Schau Dir unser kurzes Erklär-Video an, um zu erfahren wie die CovMap funktioniert."
},
"how-to-access": {
"title": "Wie kann ich die CovMap erreichen?",
"text": "Die CovMap ist als WebApp über <1>www.covmap.de</1> und <3>covmap.charite.de</3> und als Android App über den Play Store (bald verfügbar) erreichbar."
Expand Down
Binary file added apps/official/static/videos/explanatory-movie.mp4
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"recharts": "^1.8.5",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"video-react": "^0.14.1",
"webpack-merge": "^4.2.2",
"workbox-webpack-plugin": "3.6.3"
},
Expand Down
22 changes: 20 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -923,6 +923,13 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.4.5":
version "7.12.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
dependencies:
regenerator-runtime "^0.13.4"

"@babel/template@^7.10.4", "@babel/template@^7.3.3":
version "7.10.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
Expand Down Expand Up @@ -4651,7 +4658,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"

classnames@^2.2.5:
classnames@^2.2.5, classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
Expand Down Expand Up @@ -12763,7 +12770,7 @@ redux-thunk@^2.3.0:
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==

redux@^4.0.0, redux@^4.0.5:
redux@^4.0.0, redux@^4.0.1, redux@^4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
Expand Down Expand Up @@ -15345,6 +15352,17 @@ [email protected]:
core-util-is "1.0.2"
extsprintf "^1.2.0"

video-react@^0.14.1:
version "0.14.1"
resolved "https://registry.yarnpkg.com/video-react/-/video-react-0.14.1.tgz#49ac7b19f1d039c0b3ebec82f81224bc2fa8bdf1"
integrity sha512-R5ClJo58iJcQLS+bGNmuAMc/fx9/xcJ6oLrAlbuu7MGI49Jh7b7o79aUdQMZvzuynT1NvhVmD4N/fTOEmWNDlg==
dependencies:
"@babel/runtime" "^7.4.5"
classnames "^2.2.6"
lodash.throttle "^4.1.1"
prop-types "^15.7.2"
redux "^4.0.1"

"viewport-mercator-project@^6.2.3 || ^7.0.1":
version "7.0.1"
resolved "https://registry.yarnpkg.com/viewport-mercator-project/-/viewport-mercator-project-7.0.1.tgz#9d7248072f2cbb122f93b63d2b346a5763b8d79a"
Expand Down