From 34f8e696e29683fd8b7113e7997e968869b76473 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 12 Apr 2023 12:44:58 +0200
Subject: [Glitch] Change all components to use the same error page in web UI

Port cee357d5385c66a0217827ba3ceab2e77cd2f649 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/missing_indicator.jsx        | 29 ----------------------
 1 file changed, 29 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/components/missing_indicator.jsx

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/missing_indicator.jsx b/app/javascript/flavours/glitch/components/missing_indicator.jsx
deleted file mode 100644
index 08e39c236..000000000
--- a/app/javascript/flavours/glitch/components/missing_indicator.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import illustration from 'flavours/glitch/images/elephant_ui_disappointed.svg';
-import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
-
-const MissingIndicator = ({ fullPage }) => (
-  <div className={classNames('regeneration-indicator', { 'regeneration-indicator--without-header': fullPage })}>
-    <div className='regeneration-indicator__figure'>
-      <img src={illustration} alt='' />
-    </div>
-
-    <div className='regeneration-indicator__label'>
-      <FormattedMessage id='missing_indicator.label' tagName='strong' defaultMessage='Not found' />
-      <FormattedMessage id='missing_indicator.sublabel' defaultMessage='This resource could not be found' />
-    </div>
-
-    <Helmet>
-      <meta name='robots' content='noindex' />
-    </Helmet>
-  </div>
-);
-
-MissingIndicator.propTypes = {
-  fullPage: PropTypes.bool,
-};
-
-export default MissingIndicator;
-- 
cgit 


From 799e9917e43455405dd510ba50b8f0b0ca1af443 Mon Sep 17 00:00:00 2001
From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com>
Date: Sun, 16 Apr 2023 23:09:04 +0900
Subject: [Glitch] Rewrite GIFV component with React hooks

Port cf3fa1e814c59fd25008b56a976dbc67bfc0efd0 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/components/gifv.jsx | 76 ----------------------
 app/javascript/flavours/glitch/components/gifv.tsx | 68 +++++++++++++++++++
 .../features/ui/components/focal_point_modal.jsx   |  2 +-
 .../glitch/features/ui/components/media_modal.jsx  |  2 +-
 4 files changed, 70 insertions(+), 78 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/components/gifv.jsx
 create mode 100644 app/javascript/flavours/glitch/components/gifv.tsx

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/gifv.jsx b/app/javascript/flavours/glitch/components/gifv.jsx
deleted file mode 100644
index 1ce7e7c29..000000000
--- a/app/javascript/flavours/glitch/components/gifv.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class GIFV extends React.PureComponent {
-
-  static propTypes = {
-    src: PropTypes.string.isRequired,
-    alt: PropTypes.string,
-    lang: PropTypes.string,
-    width: PropTypes.number,
-    height: PropTypes.number,
-    onClick: PropTypes.func,
-  };
-
-  state = {
-    loading: true,
-  };
-
-  handleLoadedData = () => {
-    this.setState({ loading: false });
-  };
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.src !== this.props.src) {
-      this.setState({ loading: true });
-    }
-  }
-
-  handleClick = e => {
-    const { onClick } = this.props;
-
-    if (onClick) {
-      e.stopPropagation();
-      onClick();
-    }
-  };
-
-  render () {
-    const { src, width, height, alt, lang } = this.props;
-    const { loading } = this.state;
-
-    return (
-      <div className='gifv' style={{ position: 'relative' }}>
-        {loading && (
-          <canvas
-            width={width}
-            height={height}
-            role='button'
-            tabIndex={0}
-            aria-label={alt}
-            title={alt}
-            lang={lang}
-            onClick={this.handleClick}
-          />
-        )}
-
-        <video
-          src={src}
-          role='button'
-          tabIndex={0}
-          aria-label={alt}
-          title={alt}
-          lang={lang}
-          muted
-          loop
-          autoPlay
-          playsInline
-          onClick={this.handleClick}
-          onLoadedData={this.handleLoadedData}
-          style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }}
-        />
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/flavours/glitch/components/gifv.tsx b/app/javascript/flavours/glitch/components/gifv.tsx
new file mode 100644
index 000000000..8968170c5
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/gifv.tsx
@@ -0,0 +1,68 @@
+import React, { useCallback, useState } from 'react';
+
+type Props = {
+  src: string;
+  key: string;
+  alt?: string;
+  lang?: string;
+  width: number;
+  height: number;
+  onClick?: () => void;
+}
+
+export const GIFV: React.FC<Props> = ({
+  src,
+  alt,
+  lang,
+  width,
+  height,
+  onClick,
+})=> {
+  const [loading, setLoading] = useState(true);
+
+  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> = useCallback(() => {
+    setLoading(false);
+  }, [setLoading]);
+
+  const handleClick: React.MouseEventHandler = useCallback((e) => {
+    if (onClick) {
+      e.stopPropagation();
+      onClick();
+    }
+  }, [onClick]);
+
+  return (
+    <div className='gifv' style={{ position: 'relative' }}>
+      {loading && (
+        <canvas
+          width={width}
+          height={height}
+          role='button'
+          tabIndex={0}
+          aria-label={alt}
+          title={alt}
+          lang={lang}
+          onClick={handleClick}
+        />
+      )}
+
+      <video
+        src={src}
+        role='button'
+        tabIndex={0}
+        aria-label={alt}
+        title={alt}
+        lang={lang}
+        muted
+        loop
+        autoPlay
+        playsInline
+        onClick={handleClick}
+        onLoadedData={handleLoadedData}
+        style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }}
+      />
+    </div>
+  );
+};
+
+export default GIFV;
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
index a5637d31c..78aee8dfe 100644
--- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
@@ -371,7 +371,7 @@ class FocalPointModal extends ImmutablePureComponent {
             {focals && (
               <div className={classNames('focal-point', { dragging })} ref={this.setRef} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart}>
                 {media.get('type') === 'image' && <ImageLoader src={media.get('url')} width={width} height={height} alt='' />}
-                {media.get('type') === 'gifv' && <GIFV src={media.get('url')} width={width} height={height} />}
+                {media.get('type') === 'gifv' && <GIFV src={media.get('url')} key={media.get('url')} width={width} height={height} />}
 
                 <div className='focal-point__preview'>
                   <strong><FormattedMessage id='upload_modal.preview_label' defaultMessage='Preview ({ratio})' values={{ ratio: '16:9' }} /></strong>
diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
index fd2bd43cf..6ca96b743 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
@@ -188,7 +188,7 @@ class MediaModal extends ImmutablePureComponent {
             src={image.get('url')}
             width={width}
             height={height}
-            key={image.get('preview_url')}
+            key={image.get('url')}
             alt={image.get('description')}
             lang={language}
             onClick={this.toggleNavigation}
-- 
cgit 


From 9ef32ea570fd0db63bd75714cd847abad6833345 Mon Sep 17 00:00:00 2001
From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com>
Date: Mon, 17 Apr 2023 20:25:15 +0900
Subject: [Glitch] Rewrite AnimatedNumber component with React hooks

Port ab740f464a8e5aa6b5f78c0ddab3c8e18698d810 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/animated_number.jsx | 76 ----------------------
 .../flavours/glitch/components/animated_number.tsx | 58 +++++++++++++++++
 2 files changed, 58 insertions(+), 76 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/components/animated_number.jsx
 create mode 100644 app/javascript/flavours/glitch/components/animated_number.tsx

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/animated_number.jsx b/app/javascript/flavours/glitch/components/animated_number.jsx
deleted file mode 100644
index dd21d97f0..000000000
--- a/app/javascript/flavours/glitch/components/animated_number.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ShortNumber from 'mastodon/components/short_number';
-import TransitionMotion from 'react-motion/lib/TransitionMotion';
-import spring from 'react-motion/lib/spring';
-import { reduceMotion } from 'flavours/glitch/initial_state';
-
-const obfuscatedCount = count => {
-  if (count < 0) {
-    return 0;
-  } else if (count <= 1) {
-    return count;
-  } else {
-    return '1+';
-  }
-};
-
-export default class AnimatedNumber extends React.PureComponent {
-
-  static propTypes = {
-    value: PropTypes.number.isRequired,
-    obfuscate: PropTypes.bool,
-  };
-
-  state = {
-    direction: 1,
-  };
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.value > this.props.value) {
-      this.setState({ direction: 1 });
-    } else if (nextProps.value < this.props.value) {
-      this.setState({ direction: -1 });
-    }
-  }
-
-  willEnter = () => {
-    const { direction } = this.state;
-
-    return { y: -1 * direction };
-  };
-
-  willLeave = () => {
-    const { direction } = this.state;
-
-    return { y: spring(1 * direction, { damping: 35, stiffness: 400 }) };
-  };
-
-  render () {
-    const { value, obfuscate } = this.props;
-    const { direction } = this.state;
-
-    if (reduceMotion) {
-      return obfuscate ? obfuscatedCount(value) : <ShortNumber value={value} />;
-    }
-
-    const styles = [{
-      key: `${value}`,
-      data: value,
-      style: { y: spring(0, { damping: 35, stiffness: 400 }) },
-    }];
-
-    return (
-      <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
-        {items => (
-          <span className='animated-number'>
-            {items.map(({ key, data, style }) => (
-              <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span>
-            ))}
-          </span>
-        )}
-      </TransitionMotion>
-    );
-  }
-
-}
diff --git a/app/javascript/flavours/glitch/components/animated_number.tsx b/app/javascript/flavours/glitch/components/animated_number.tsx
new file mode 100644
index 000000000..1673ff41b
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/animated_number.tsx
@@ -0,0 +1,58 @@
+import React, { useCallback, useState } from 'react';
+import ShortNumber from './short_number';
+import { TransitionMotion, spring } from 'react-motion';
+import { reduceMotion } from '../initial_state';
+
+const obfuscatedCount = (count: number) => {
+  if (count < 0) {
+    return 0;
+  } else if (count <= 1) {
+    return count;
+  } else {
+    return '1+';
+  }
+};
+
+type Props = {
+  value: number;
+  obfuscate?: boolean;
+}
+export const AnimatedNumber: React.FC<Props> = ({
+  value,
+  obfuscate,
+})=> {
+  const [previousValue, setPreviousValue] = useState(value);
+  const [direction, setDirection] = useState<1|-1>(1);
+
+  if (previousValue !== value) {
+    setPreviousValue(value);
+    setDirection(value > previousValue ? 1 : -1);
+  }
+
+  const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
+  const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]);
+
+  if (reduceMotion) {
+    return obfuscate ? <>{obfuscatedCount(value)}</> : <ShortNumber value={value} />;
+  }
+
+  const styles = [{
+    key: `${value}`,
+    data: value,
+    style: { y: spring(0, { damping: 35, stiffness: 400 }) },
+  }];
+
+  return (
+    <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
+      {items => (
+        <span className='animated-number'>
+          {items.map(({ key, data, style }) => (
+            <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span>
+          ))}
+        </span>
+      )}
+    </TransitionMotion>
+  );
+};
+
+export default AnimatedNumber;
-- 
cgit