added client side throttling

dailyjs/README.md

@@ -12,6 +12,10 @@ Send messages to other participants using sendAppMessage
 
 Broadcast call to a custom RTMP endpoint using a variety of different layout modes
 
+### [🔥 Flying emojis](./flying-emojis)
+
+Send emoji reactions to all clients using sendAppMessage
+
 ---
 
 ## Getting started

dailyjs/flying-emojis/components/Tray/Tray.js

@@ -4,8 +4,11 @@ import Button from '@dailyjs/shared/components/Button';
 import { TrayButton } from '@dailyjs/shared/components/Tray';
 import { ReactComponent as IconStar } from '@dailyjs/shared/icons/star-md.svg';
 
+const COOLDOWN = 1500;
+
 export const Tray = () => {
   const [showEmojis, setShowEmojis] = useState(false);
+  const [isThrottled, setIsThrottled] = useState(false);
 
   function sendEmoji(emoji) {
     // Dispatch custom event here so the local user can see their own emoji
@@ -13,8 +16,18 @@ export const Tray = () => {
       new CustomEvent('reaction_added', { detail: { emoji } })
     );
     setShowEmojis(false);
+    setIsThrottled(true);
   }
 
+  // Pseudo-throttling (should ideally be done serverside)
+  useEffect(() => {
+    if (!isThrottled) {
+      return false;
+    }
+    const t = setTimeout(() => setIsThrottled(false), COOLDOWN);
+    return () => clearTimeout(t);
+  }, [isThrottled]);
+
   return (
     <div>
       {showEmojis && (
@@ -42,7 +55,11 @@ export const Tray = () => {
           </Button>
         </div>
       )}
-      <TrayButton label="Emoji" onClick={() => setShowEmojis(!showEmojis)}>
+      <TrayButton
+        label="Emoji"
+        onClick={() => setShowEmojis(!showEmojis)}
+        disabled={isThrottled}
+      >
         <IconStar />
       </TrayButton>
       <style jsx>{`

dailyjs/shared/components/Button/Button.js

@@ -286,6 +286,9 @@ export const Button = forwardRef(
           .button.dark:focus {
             box-shadow: 0 0 0px 3px rgba(255, 255, 255, 0.15);
           }
+          .button.dark:disabled {
+            opacity: 0.35;
+          }
 
           .button.outline {
             background: transparent;

dailyjs/shared/components/Tray/Tray.js

@@ -9,11 +9,17 @@ export const TrayButton = ({
   onClick,
   bubble = false,
   orange = false,
+  disabled = false,
 }) => {
   const cx = classNames('tray-button', { orange, bubble });
   return (
     <div className={cx}>
-      <Button onClick={() => onClick()} variant="dark" size="large-square">
+      <Button
+        onClick={() => onClick()}
+        variant="dark"
+        size="large-square"
+        disabled={disabled}
+      >
         {children}
       </Button>
       <span>{label}</span>
@@ -57,6 +63,7 @@ TrayButton.propTypes = {
   orange: PropTypes.bool,
   bubble: PropTypes.bool,
   label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
 };
 
 export const Tray = ({ children }) => (