Media page with link to Atlas and CLI

pioneer/packages/apps-routing/src/index.ts

@@ -27,10 +27,12 @@ import proposals from './joy-proposals';
 import roles from './joy-roles';
 import forum from './joy-forum';
 import tokenomics from './joy-tokenomics';
+import media from './joy-media';
 
 export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Routes {
   return appSettings.uiMode === 'light'
     ? [
+      media(t),
       tokenomics(t),
       members(t),
       roles(t),
@@ -47,6 +49,7 @@ export default function create (t: <T = string> (key: string, text: string, opti
       privacyPolicy(t)
     ]
     : [
+      media(t),
       tokenomics(t),
       members(t),
       roles(t),

pioneer/packages/apps-routing/src/joy-media.ts

@@ -0,0 +1,13 @@
+import { Route } from './types';
+
+import Media from '@polkadot/joy-media';
+
+export default function create (t: <T = string> (key: string, text: string, options: { ns: string }) => T): Route {
+  return {
+    Component: Media,
+    display: {},
+    text: t<string>('nav.media', 'Media', { ns: 'apps-routing' }),
+    icon: 'play-circle',
+    name: 'media'
+  };
+}

pioneer/packages/apps/src/wp-jpg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.jpg' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const content: any;
+  export default content;
+}

pioneer/packages/joy-media/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@polkadot/joy-media",
+  "version": "0.1.0",
+  "description": "Pioneer's media page",
+  "main": "index.js",
+  "scripts": {},
+  "author": "Joystream contributors",
+  "maintainers": [],
+  "dependencies": {
+    "@babel/runtime": "^7.10.5",
+    "@polkadot/react-components": "0.51.1"
+  }
+}

pioneer/packages/joy-media/src/index.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { I18nProps } from '@polkadot/react-components/types';
+import _ from 'lodash';
+
+import { RouteProps as AppMainRouteProps } from '@polkadot/apps-routing/types';
+import translate from './translate';
+import { Button, Grid, Message, Icon, Image } from 'semantic-ui-react';
+
+import AtlasScreenShot from './assets/atlas-screenshot.jpg';
+
+const MediaMain = styled.main`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 2em;
+  font-size: 1.2em;
+  p {
+    margin: 0.25em;
+    padding: 0;
+  }
+`;
+
+const Header = styled.header`
+  margin-bottom: 1em;
+  h1 {
+    color: #222 !important;
+  }
+`;
+
+const StyledMessage = styled(Message)`
+  font-size: 1.2em;
+  display: flex;
+  flex-direction: column;
+  background: #fff !important;
+  .header, .content {
+    margin-bottom: 0.5em !important;
+  }
+  .button {
+    margin-top: auto;
+    margin-right: auto !important;
+  }
+`;
+
+const Screenshot = styled(Image)`
+  margin: 0.5em 0;
+  transition: opacity 0.5s;
+  :hover { opacity: 0.7; }
+`;
+
+interface Props extends AppMainRouteProps, I18nProps {}
+
+const App: React.FC<Props> = () => {
+  return (
+    <MediaMain>
+      <Header>
+        <h1>Hello there!</h1>
+        <p>
+          We have now upgraded to the Babylon chain.
+        </p>
+        <p>
+          Pioneer consequently <b>no longer supports</b> media uploads and consumption.
+        </p>
+      </Header>
+      <Grid stackable>
+        <Grid.Row columns={2}>
+          <Grid.Column>
+            <StyledMessage>
+              <Message.Header>Media consumption</Message.Header>
+              <Message.Content>
+                Media consumption has been migrated over to our new consumer interface.
+                <Screenshot
+                  src={AtlasScreenShot as string}
+                  href='https://play.joystream.org'
+                  target='_blank'
+                  rel='noopener noreferrer'/>
+              </Message.Content>
+              <Button
+                size='big'
+                primary
+                icon
+                labelPosition='right'
+                href='https://play.joystream.org'
+                target='_blank'
+                rel='noopener noreferrer'>
+                Launch Atlas
+                <Icon name='arrow right' />
+              </Button>
+            </StyledMessage>
+          </Grid.Column>
+          <Grid.Column>
+            <StyledMessage>
+              <Message.Header>Uploading content</Message.Header>
+              <Message.Content>
+                Uploading has been migrated over to the Joystream CLI.
+                Instructions on how to use the CLI can be found in our helpdesk.
+              </Message.Content>
+              <Button
+                size='big'
+                primary
+                href='https://github.com/Joystream/helpdesk/tree/master/roles/channel-owner'
+                icon
+                labelPosition='right'
+                target='_blank'
+                rel='noopener noreferrer'>
+                Explore Joystream CLI
+                <Icon name='arrow right' />
+              </Button>
+            </StyledMessage>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </MediaMain>
+  );
+};
+
+export default translate(App);

pioneer/packages/joy-media/src/translate.ts

@@ -0,0 +1,3 @@
+import { withTranslation } from 'react-i18next';
+
+export default withTranslation(['media', 'ui']);

pioneer/tsconfig.json

@@ -28,6 +28,10 @@
       "@polkadot/joy-utils/*": [ "packages/joy-utils/src/*" ],
       "@polkadot/joy-forum": [ "packages/joy-forum/src/" ],
       "@polkadot/joy-forum/*": [ "packages/joy-forum/src/*" ],
+      "@polkadot/joy-media": [ "packages/joy-media/src" ],
+      "@polkadot/joy-media/*": [ "packages/joy-media/src/*" ],
+      "@polkadot/joy-tokenomics": [ "packages/joy-tokenomics/src" ],
+      "@polkadot/joy-tokenomics/*": [ "packages/joy-tokenomics/src/*" ],
       "@polkadot/apps/*": ["packages/apps/src/*"],
       "@polkadot/apps": ["packages/apps/src"],
       "@polkadot/apps-config/*": [ "packages/apps-config/src/*" ],
@@ -86,9 +90,7 @@
       "@polkadot/react-query": [ "packages/react-query/src" ],
       "@polkadot/react-query/*": [ "packages/react-query/src/*" ],
       "@polkadot/react-signer": [ "packages/react-signer/src" ],
-      "@polkadot/react-signer/*": [ "packages/react-signer/src/*" ],
-      "@polkadot/joy-tokenomics": [ "packages/joy-tokenomics/src" ],
-      "@polkadot/joy-tokenomics/*": [ "packages/joy-tokenomics/src/*" ]
+      "@polkadot/react-signer/*": [ "packages/react-signer/src/*" ]
     },
     "skipLibCheck": true,
     "typeRoots": [