Skip to content

Commit

Permalink
Adding explanatory video to both marketing and frontend (#554)
Browse files Browse the repository at this point in the history
  • Loading branch information
antoinejaussoin authored Jul 18, 2023
1 parent ba8efaf commit 5220124
Show file tree
Hide file tree
Showing 30 changed files with 330 additions and 96 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/alpha.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: 'Alpha Build'

on:
push:
branches: [v530/custom-colour]
branches: [v523/video]

jobs:
frontend:
Expand Down
1 change: 1 addition & 0 deletions frontend/src/testing/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export const initialSession: Session = {
id: 'John Doe',
name: 'John Doe',
photo: null,
email: null,
},
options: {
...defaultOptions,
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/ar-SA.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "تسجيل الدخول",
"searchNoMatch": "لم نتمكن من العثور على رجعي يطابق بحثك ({{search}}).",
"proNotSetupWarning": "لقد اشتركت في حساب فريق المحترفين، مما يعني أنه يمكنك منح 19 زميلاً آخر حساب محترف. لإضافتهم إلى اشتراكك حتى يمكنهم أن يصبحوا برو أيضا، الرجاء الذهاب إلى صفحة حسابك وإضافة رسائل البريد الإلكتروني الخاصة بهم (قسم \"فريقك\").",
"proNotSetupWarningAction": "الذهاب إلى صفحة الحساب"
"proNotSetupWarningAction": "الذهاب إلى صفحة الحساب",
"discover": "اكتشف الاستطلاع التراجعي"
},
"PreviousGame": {
"createdBy": "تم إنشاؤها بواسطة",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/de-DE.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Anmelden",
"searchNoMatch": "Wir konnten keine Retrospektive finden, die Ihrer Suche entspricht ({{search}}).",
"proNotSetupWarning": "Sie haben ein Pro-Team-Konto abonniert, was bedeutet, dass Sie 19 anderen Kollegen ein Pro-Konto gewähren können. Um sie Ihrem Abonnement hinzuzufügen, damit sie auch Pro werden können gehen Sie bitte auf Ihre Account-Seite und fügen Sie ihre E-Mails hinzu ('Ihr Team').",
"proNotSetupWarningAction": "Gehe zur Kontoseite"
"proNotSetupWarningAction": "Gehe zur Kontoseite",
"discover": "Entdecke Retrospected"
},
"PreviousGame": {
"createdBy": "Erstellt von",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/en-GB.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Login",
"searchNoMatch": "We could not find a retrospective matching your search ({{search}}).",
"proNotSetupWarning": "You have subscribed to a Pro Team account, which means you can grant 19 other colleagues a Pro account. To add them to your subscription so they can become Pro as well, please go to your Account page and add their emails ('Your Team' section).",
"proNotSetupWarningAction": "Go to Account page"
"proNotSetupWarningAction": "Go to Account page",
"discover": "Discover Retrospected"
},
"PreviousGame": {
"createdBy": "Created by",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/es-ES.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Ingresar",
"searchNoMatch": "No hemos podido encontrar un retrospectivo que coincida con tu búsqueda ({{search}}).",
"proNotSetupWarning": "Te has suscrito a una cuenta Pro Team, lo que significa que puedes conceder a otros 19 colegas una cuenta Pro. Para añadirlos a tu suscripción para que también puedan convertirse en Pro por favor vaya a la página de su cuenta y añada sus correos electrónicos ('Su equipo').",
"proNotSetupWarningAction": "Ir a la página de cuenta"
"proNotSetupWarningAction": "Ir a la página de cuenta",
"discover": "Descubre retrospectivamente"
},
"PreviousGame": {
"createdBy": "Creado por",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/fr-FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Connexion",
"searchNoMatch": "Nous n'avons pu trouver une retrospective correspondant à votre recherche ({{search}}).",
"proNotSetupWarning": "Vous avez souscrit à un compte Pro Team, ce qui signifie que vous pouvez accorder à 19 autres collègues un compte Pro. Pour les ajouter à votre abonnement afin qu'ils puissent bénéficier de ses avantages, veuillez vous rendre sur la page \"Mon compte\" et ajouter leurs e-mails dans la section « Votre équipe ».",
"proNotSetupWarningAction": "Aller à la page \"Mon compte\""
"proNotSetupWarningAction": "Aller à la page \"Mon compte\"",
"discover": "Découvrez Retrospected"
},
"PreviousGame": {
"createdBy": "Créé par",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/hu-HU.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Belépés",
"searchNoMatch": "",
"proNotSetupWarning": "",
"proNotSetupWarningAction": ""
"proNotSetupWarningAction": "",
"discover": ""
},
"PreviousGame": {
"createdBy": "Készítette",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/it-IT.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Accedi",
"searchNoMatch": "Non siamo riusciti a trovare una retrospettiva corrispondente alla tua ricerca ({{search}}).",
"proNotSetupWarning": "Hai sottoscritto un account Pro Team, il che significa che puoi concedere ad altri 19 colleghi un account Pro. Per aggiungerli al tuo abbonamento in modo che possano diventare anche Pro, vai alla pagina del tuo Account e aggiungi le loro email (sezione 'Il tuo Team').",
"proNotSetupWarningAction": "Vai alla pagina Account"
"proNotSetupWarningAction": "Vai alla pagina Account",
"discover": "Scopri Retrospetto"
},
"PreviousGame": {
"createdBy": "Creato da",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "ログイン",
"searchNoMatch": "検索に一致する回顧展が見つかりませんでした ({{search}})。",
"proNotSetupWarning": "Proチームアカウントを購読しているため、19人の同僚にProアカウントを付与することができます。 サブスクリプションに追加することで、Pro版にもなります。 アカウントページに行き、メールアドレス(「チーム」セクション)を追加してください。",
"proNotSetupWarningAction": "アカウントページに移動"
"proNotSetupWarningAction": "アカウントページに移動",
"discover": "後退しているものを発見"
},
"PreviousGame": {
"createdBy": "作成者:",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/nl-NL.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Aanmelden",
"searchNoMatch": "We konden geen terugwerkende kracht vinden die overeenkomt met uw zoekopdracht ({{search}}).",
"proNotSetupWarning": "U heeft zich geabonneerd op een Pro-teamaccount, wat betekent dat u 19 andere collega's een Pro-account kunt geven. Om ze toe te voegen aan uw abonnement zodat ze ook Pro kunnen worden, Ga naar uw accountpagina en voeg hun e-mails toe ('Uw team' sectie).",
"proNotSetupWarningAction": "Ga naar Account pagina"
"proNotSetupWarningAction": "Ga naar Account pagina",
"discover": "Ontdek Retrospecten"
},
"PreviousGame": {
"createdBy": "Aangemaakt door",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/pl-PL.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Logowanie",
"searchNoMatch": "Nie mogliśmy znaleźć retrospektywnego pasującego do Twojego wyszukiwania ({{search}}).",
"proNotSetupWarning": "Zasubskrybowałeś konto Pro Team, co oznacza, że możesz przyznać 19 innym kolegom konto Pro. Aby dodać je do subskrypcji, aby mogli zostać również Pro, przejdź na stronę swojego konta i dodaj ich e-maile (sekcja \"Twój Zespół\").",
"proNotSetupWarningAction": "Przejdź do strony konta"
"proNotSetupWarningAction": "Przejdź do strony konta",
"discover": "Odkryj przekreślone"
},
"PreviousGame": {
"createdBy": "Utworzony przez",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/pt-BR.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Conectar-se",
"searchNoMatch": "Não foi possível encontrar um retrospectivo correspondente à sua pesquisa ({{search}}).",
"proNotSetupWarning": "Você se inscreveu em uma conta de equipe Pro, o que significa que você pode conceder uma conta Pro a 19 outros colegas. Para adicioná-los à sua assinatura para que possam se tornar o Pro. por favor, acesse a página da sua Conta e adicione os e-mails deles (seção 'Sua Equipe').",
"proNotSetupWarningAction": "Ir para a página da Conta"
"proNotSetupWarningAction": "Ir para a página da Conta",
"discover": "Descubra Retrospecionado"
},
"PreviousGame": {
"createdBy": "Criado Por",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/pt-PT.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Conectar-se",
"searchNoMatch": "Não foi possível encontrar um retrospectivo correspondente à sua pesquisa ({{search}}).",
"proNotSetupWarning": "Você se inscreveu em uma conta de equipe Pro, o que significa que você pode conceder uma conta Pro a 19 outros colegas. Para adicioná-los à sua assinatura para que possam se tornar o Pro. por favor, acesse a página da sua Conta e adicione os e-mails deles (seção 'Sua Equipe').",
"proNotSetupWarningAction": "Ir para a página da Conta"
"proNotSetupWarningAction": "Ir para a página da Conta",
"discover": "Descubra Retrospecionado"
},
"PreviousGame": {
"createdBy": "Criado Por",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/uk-UA.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "Логін",
"searchNoMatch": "Ми не змогли знайти ретроспектив, що відповідає вашому запиту ({{search}}).",
"proNotSetupWarning": "Ви підписалися на обліковий запис професійної команди. Це означає, що можна надати 19 інших колег Pro аккаунту. Щоб додати їх у вашу підписку, щоб вони також могли стати Pro. будь ласка, перейдіть на сторінку свого облікового запису та додайте їхні електронні листи ('Розділ «Ваші команди»).",
"proNotSetupWarningAction": "Перейти на сторінку облікового запису"
"proNotSetupWarningAction": "Перейти на сторінку облікового запису",
"discover": "Відкрийте ретроспективу"
},
"PreviousGame": {
"createdBy": "Створено",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "登录",
"searchNoMatch": "我们找不到匹配您搜索的 ({{search}} )的追溯。",
"proNotSetupWarning": "您已经订阅了专业团队账户,这意味着您可以授予其他19位同事专业版账户。 将他们添加到您的订阅,这样他们也可以成为专业版。 请转到您的帐户页面并添加他们的电子邮件('您的团队'部分)。",
"proNotSetupWarningAction": "转到帐户页面"
"proNotSetupWarningAction": "转到帐户页面",
"discover": "发现回顾过的"
},
"PreviousGame": {
"createdBy": "创建者",
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/translations/locales/zh-TW.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"login": "",
"searchNoMatch": "",
"proNotSetupWarning": "",
"proNotSetupWarningAction": ""
"proNotSetupWarningAction": "",
"discover": ""
},
"PreviousGame": {
"createdBy": "由...製作",
Expand Down
31 changes: 30 additions & 1 deletion frontend/src/views/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,23 @@ function Home() {
</Alert>
) : null}
</>
) : null}
) : (
<>
<PreviousContainer>
<SubHeader>{t('Home.discover')}</SubHeader>
</PreviousContainer>
<VideoContainer>
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/SpbAaziAwTY"
title="Discover Retrospected"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
></iframe>
</VideoContainer>
</>
)}
</Page>
</>
);
Expand Down Expand Up @@ -215,4 +231,17 @@ const LaunchButtons = styled.div`
}
`;

const VideoContainer = styled.div`
display: flex;
justify-content: center;
> iframe {
width: min(800px, 100%);
aspect-ratio: 800/450;
border: none;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
`;

export default Home;
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ function p(id: string, online = true): Participant {
name: id,
online,
photo: '',
email: null,
};
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/game/__tests__/useSession.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function post(id: string): Post {
giphy: null,
group: null,
rank: '0',
user: { id: '1', name: 'danièle', photo: 'bl' },
user: { id: '1', name: 'danièle', photo: 'bl', email: null },
};
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const userBase: User = {
photo: null,
id: '0',
name: 'name',
email: null,
};

const currentUser: User = {
Expand Down
1 change: 1 addition & 0 deletions frontend/src/views/game/board/post/__tests__/Post.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const u = (name: string): User => ({
name,
id: name,
photo: null,
email: null,
});

const renderWithRouter = (children: React.ReactNode) =>
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/views/game/summary/types.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { User } from '@sentry/types';
import { Post, PostGroup } from 'common';
import { Post, PostGroup, User } from 'common';
import { ColumnContent } from '../types';

export interface Stats {
Expand Down
1 change: 1 addition & 0 deletions marketing/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@types/styled-system": "^5.1.16",
"@types/styled-system__theme-get": "^5.0.2",
"@types/url-parse": "^1.4.8",
"@use-it/event-listener": "^0.1.7",
"animate.css": "^4.1.1",
"date-fns": "^2.30.0",
"eslint": "8.41.0",
Expand Down
105 changes: 105 additions & 0 deletions marketing/src/containers/Banner/YouTubePlayer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import useEventListener from '@use-it/event-listener';
import styled from 'styled-components';

type YouTubePlayerProps = {
url: string;
onClose: () => void;
};

export function YouTubePlayer({ onClose, url }: YouTubePlayerProps) {
const handleEsc = (event: KeyboardEvent) => {
if (event.code === 'Escape') onClose();
};
useEventListener('keydown', handleEsc);
return (
<Outer onClick={onClose}>
<Player>
<HeaderContainer>
<PlayerHeader>
<svg
onClick={onClose}
width="50px"
height="50px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z"
fill="#292D32"
/>
</svg>
</PlayerHeader>
</HeaderContainer>
<iframe
width="100%"
height="100%"
src={url}
title="Discover Retrospected"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
allowFullScreen
></iframe>
</Player>
</Outer>
);
}

const Outer = styled.div`
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
backdrop-filter: blur(5px);
`;

const Player = styled.div`
width: min(80%, 800px);
aspect-ratio: 800/450;
padding: 0;
margin: 0;
background-color: black;
iframe {
padding: 0;
margin: 0;
margin-bottom: -10px;
display: block;
border: none;
}
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
`;

const HeaderContainer = styled.div`
height: 0;
display: flex;
justify-content: flex-end;
`;

const PlayerHeader = styled.div`
position: relative;
padding-top: 5px;
padding-right: 5px;
cursor: pointer;
svg {
path {
fill: #673ab7;
}
}
&:hover {
svg {
path {
fill: #ff4361;
}
}
}
`;
4 changes: 4 additions & 0 deletions marketing/src/containers/Banner/close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 5220124

Please sign in to comment.