Merge branch 'video-upload-progress' into 'next'

Convert VideoProgress to TW and TSX

See merge request soapbox-pub/soapbox-fe!1164

app/soapbox/features/compose/components/upload-progress.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { spring } from 'react-motion';
+
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import Motion from '../../ui/util/optional_motion';
+
+const UploadProgress = () => {
+  const active = useAppSelector((state) => state.compose.get('is_uploading'));
+  const progress = useAppSelector((state) => state.compose.get('progress'));
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <HStack alignItems='center' space={2}>
+      <Icon
+        src={require('@tabler/icons/icons/cloud-upload.svg')}
+        className='w-7 h-7 text-gray-500'
+      />
+
+      <Stack space={1}>
+        <Text theme='muted'>
+          <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
+        </Text>
+
+        <div className='w-full h-1.5 rounded-lg bg-gray-200 relative'>
+          <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
+            {({ width }) =>
+              (<div
+                className='absolute left-0 top-0 h-1.5 bg-primary-600 rounded-lg'
+                style={{ width: `${width}%` }}
+              />)
+            }
+          </Motion>
+        </div>
+      </Stack>
+    </HStack>
+  );
+};
+
+export default UploadProgress;

app/soapbox/features/compose/components/upload_form.js

@@ -4,8 +4,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 // import SensitiveButtonContainer from '../containers/sensitive_button_container';
+import UploadProgress from '../components/upload-progress';
 import UploadContainer from '../containers/upload_container';
-import UploadProgressContainer from '../containers/upload_progress_container';
 
 export default class UploadForm extends ImmutablePureComponent {
 
@@ -21,7 +21,7 @@ export default class UploadForm extends ImmutablePureComponent {
 
     return (
       <div className='compose-form__upload-wrapper'>
-        <UploadProgressContainer />
+        <UploadProgress />
 
         <div className={classes}>
           {mediaIds.map(id => (

app/soapbox/features/compose/components/upload_progress.js

@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import spring from 'react-motion/lib/spring';
-
-import Icon from 'soapbox/components/icon';
-
-import Motion from '../../ui/util/optional_motion';
-
-export default class UploadProgress extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    progress: PropTypes.number,
-  };
-
-  render() {
-    const { active, progress } = this.props;
-
-    if (!active) {
-      return null;
-    }
-
-    return (
-      <div className='upload-progress'>
-        <div className='upload-progress__icon'>
-          <Icon id='upload' />
-        </div>
-
-        <div className='upload-progress__message'>
-          <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />
-
-          <div className='upload-progress__backdrop'>
-            <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
-              {({ width }) =>
-                <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
-              }
-            </Motion>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}

app/soapbox/features/compose/containers/upload_progress_container.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import UploadProgress from '../components/upload_progress';
+import UploadProgress from '../components/upload-progress';
 
 const mapStateToProps = state => ({
   active: state.getIn(['compose', 'is_uploading']),