@sqaitech/recorder 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# Rslib project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```

package/dist/Button.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "./button.css";
+const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props })=>{
+    const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: [
+            'demo-button',
+            `demo-button--${size}`,
+            mode
+        ].join(' '),
+        style: {
+            backgroundColor
+        },
+        ...props,
+        children: label
+    });
+};
+export { Button };

package/dist/RecordTimeline.css

@@ -0,0 +1,27 @@
+.record-timeline-screenshot-thumbnail {
+  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
+}
+
+.record-timeline-screenshot-thumbnail:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px #00000026;
+}
+
+.record-timeline-screenshot-popover {
+  max-width: 600px;
+}
+
+.record-timeline-screenshot-popover .ant-popover-inner {
+  padding: 8px;
+}
+
+.record-timeline-screenshot-full {
+  border-radius: 4px;
+  box-shadow: 0 2px 8px #0000001a;
+}
+
+.timeline-scrollable > div {
+  max-height: 500px;
+  overflow-y: auto;
+}
+

package/dist/RecordTimeline.js

@@ -0,0 +1,452 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AimOutlined, CompassOutlined, CopyOutlined, EditOutlined, KeyOutlined, VerticalAlignTopOutlined } from "@ant-design/icons";
+import { Button, Card, Image, Space, Timeline, Typography, message } from "antd";
+import { useEffect, useState } from "react";
+import { ShinyText } from "./components/shiny-text.js";
+import "./RecordTimeline.css";
+const { Text } = Typography;
+const RecordTimeline = ({ events, onEventClick })=>{
+    const [expandedEvents, setExpandedEvents] = useState(new Set());
+    console.log('events', events);
+    useEffect(()=>{
+        if (events.length > 0) {
+            const timeline = document.querySelector('.ant-timeline');
+            if (timeline) timeline.scrollIntoView({
+                behavior: 'smooth',
+                block: 'end'
+            });
+        }
+    }, [
+        events.length
+    ]);
+    const toggleEventExpansion = (index)=>{
+        const newExpanded = new Set(expandedEvents);
+        if (newExpanded.has(index)) newExpanded.delete(index);
+        else newExpanded.add(index);
+        setExpandedEvents(newExpanded);
+    };
+    const truncateJsonStrings = (obj, maxLength = 30)=>{
+        if ('string' == typeof obj) return obj.length > maxLength ? `${obj.substring(0, maxLength)}...` : obj;
+        if (Array.isArray(obj)) return obj.map((item)=>truncateJsonStrings(item, maxLength));
+        if (obj && 'object' == typeof obj) {
+            const truncated = {};
+            for(const key in obj)if (Object.prototype.hasOwnProperty.call(obj, key)) truncated[key] = truncateJsonStrings(obj[key], maxLength);
+            return truncated;
+        }
+        return obj;
+    };
+    const copyToClipboard = (text)=>{
+        navigator.clipboard.writeText(text).then(()=>{
+            message.success('JSON copied to clipboard');
+        }).catch(()=>{
+            message.error('Copy failed');
+        });
+    };
+    const getEventIcon = (type)=>{
+        switch(type){
+            case 'click':
+                return /*#__PURE__*/ jsx(AimOutlined, {
+                    style: {
+                        color: '#1890ff'
+                    }
+                });
+            case 'input':
+                return /*#__PURE__*/ jsx(EditOutlined, {
+                    style: {
+                        color: '#52c41a'
+                    }
+                });
+            case 'scroll':
+                return /*#__PURE__*/ jsx(VerticalAlignTopOutlined, {
+                    style: {
+                        color: '#faad14'
+                    }
+                });
+            case 'navigation':
+                return /*#__PURE__*/ jsx(CompassOutlined, {
+                    style: {
+                        color: '#722ed1'
+                    }
+                });
+            case 'setViewport':
+                return /*#__PURE__*/ jsx(CompassOutlined, {
+                    style: {
+                        color: '#eb2f96'
+                    }
+                });
+            case 'keydown':
+                return /*#__PURE__*/ jsx(KeyOutlined, {
+                    style: {
+                        color: '#fa8c16'
+                    }
+                });
+            default:
+                return /*#__PURE__*/ jsx(AimOutlined, {
+                    style: {
+                        color: '#d9d9d9'
+                    }
+                });
+        }
+    };
+    const getEventColor = (type)=>{
+        switch(type){
+            case 'click':
+                return '#1890ff';
+            case 'input':
+                return '#52c41a';
+            case 'scroll':
+                return '#faad14';
+            case 'navigation':
+                return '#722ed1';
+            case 'setViewport':
+                return '#eb2f96';
+            case 'keydown':
+                return '#fa8c16';
+            default:
+                return '#d9d9d9';
+        }
+    };
+    const getEventTitle = (event)=>{
+        switch(event.type){
+            case 'click':
+                if ('BUTTON' === event.targetTagName) return 'Click Button';
+                if (event.value) return `Click Element "${event.value}"`;
+                return 'Click';
+            case 'input':
+                return 'Input';
+            case 'scroll':
+                return 'Scroll';
+            case 'navigation':
+                return 'Navigate';
+            case 'setViewport':
+                return 'Set viewport';
+            case 'keydown':
+                return 'Key down';
+            default:
+                return event.type;
+        }
+    };
+    const getEventDescription = (event)=>{
+        const eventTitle = getEventTitle(event);
+        switch(event.type){
+            case 'click':
+                if (true === event.descriptionLoading && event.elementRect?.x !== void 0 && event.elementRect?.y !== void 0) return /*#__PURE__*/ jsxs("span", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '4px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Text, {
+                            children: [
+                                eventTitle,
+                                " - "
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(ShinyText, {
+                            text: `(${event.elementRect.x}, ${event.elementRect.y})`,
+                            disabled: false,
+                            speed: 3,
+                            className: "step-title-shiny"
+                        })
+                    ]
+                });
+                if (false === event.descriptionLoading && event.elementDescription) return /*#__PURE__*/ jsxs(Text, {
+                    className: "",
+                    children: [
+                        eventTitle,
+                        " - ",
+                        event.elementDescription
+                    ]
+                });
+                return /*#__PURE__*/ jsx(Text, {
+                    children: eventTitle
+                });
+            case 'input':
+                if (false === event.descriptionLoading && event.elementDescription) return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - ",
+                        event.elementDescription
+                    ]
+                });
+                return /*#__PURE__*/ jsxs("span", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '4px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Text, {
+                            children: [
+                                eventTitle,
+                                " - "
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(ShinyText, {
+                            text: event.value ? `"${event.value}"` : '',
+                            disabled: false,
+                            speed: 3,
+                            className: "step-title-shiny"
+                        })
+                    ]
+                });
+            case 'scroll':
+                if (event.elementDescription) return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - ",
+                        event.value?.split(' ')[0] || ''
+                    ]
+                });
+                return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - Position: (",
+                        event.elementRect?.x || 0,
+                        ",",
+                        ' ',
+                        event.elementRect?.y || 0,
+                        ")"
+                    ]
+                });
+            case 'navigation':
+                {
+                    const truncatedUrl = event.url && event.url.length > 50 ? `${event.url.substring(0, 50)}...` : event.url;
+                    return /*#__PURE__*/ jsxs(Text, {
+                        children: [
+                            eventTitle,
+                            " - ",
+                            truncatedUrl
+                        ]
+                    });
+                }
+            case 'setViewport':
+                return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - Desktop 964x992 px"
+                    ]
+                });
+            case 'keydown':
+                return /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        eventTitle,
+                        " - Key: ",
+                        event.value || 'Unknown'
+                    ]
+                });
+            default:
+                return /*#__PURE__*/ jsx(Text, {
+                    children: eventTitle
+                });
+        }
+    };
+    const timelineItems = events.map((event, index)=>{
+        const boxedImage = event.screenshotWithBox;
+        const afterImage = event.screenshotAfter;
+        const isExpanded = expandedEvents.has(index);
+        return {
+            dot: getEventIcon(event.type),
+            color: getEventColor(event.type),
+            children: /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsxs(Card, {
+                    size: "small",
+                    bordered: false,
+                    style: {
+                        marginBottom: isExpanded ? 8 : 8,
+                        cursor: 'pointer'
+                    },
+                    onClick: ()=>{
+                        toggleEventExpansion(index);
+                        onEventClick?.(event, index);
+                    },
+                    styles: {
+                        body: {
+                            padding: '8px 12px',
+                            backgroundColor: '#F2F4F7',
+                            borderRadius: '8px'
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Space, {
+                            style: {
+                                width: '100%',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                color: 'rgba(0, 0, 0, 0.85)'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx(Space, {
+                                    style: {
+                                        flex: 1,
+                                        minWidth: 0
+                                    },
+                                    children: getEventDescription(event)
+                                }),
+                                /*#__PURE__*/ jsx(Space, {
+                                    children: (boxedImage || afterImage) && /*#__PURE__*/ jsxs("div", {
+                                        style: {
+                                            display: 'flex',
+                                            alignItems: 'center'
+                                        },
+                                        children: [
+                                            boxedImage && /*#__PURE__*/ jsx("div", {
+                                                style: {
+                                                    width: '24px',
+                                                    height: '24px',
+                                                    borderRadius: '4px',
+                                                    overflow: 'hidden',
+                                                    boxShadow: '1px 1px 1px 1px #00000014',
+                                                    cursor: 'pointer',
+                                                    transition: 'all 0.2s ease-in-out',
+                                                    zIndex: 2
+                                                },
+                                                onMouseEnter: (e)=>{
+                                                    const target = e.currentTarget;
+                                                    target.style.transform = 'scale(1.2)';
+                                                    target.style.boxShadow = `0 2px 8px ${getEventColor(event.type)}60`;
+                                                },
+                                                onMouseLeave: (e)=>{
+                                                    const target = e.currentTarget;
+                                                    target.style.transform = 'scale(1)';
+                                                    target.style.boxShadow = '1px 1px 1px 1px #00000014';
+                                                },
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                },
+                                                children: /*#__PURE__*/ jsx(Image, {
+                                                    src: boxedImage,
+                                                    width: "100%",
+                                                    height: "100%",
+                                                    style: {
+                                                        objectFit: 'cover',
+                                                        display: 'block'
+                                                    },
+                                                    preview: {
+                                                        mask: false
+                                                    }
+                                                })
+                                            }),
+                                            afterImage && /*#__PURE__*/ jsx("div", {
+                                                style: {
+                                                    width: '24px',
+                                                    height: '24px',
+                                                    borderRadius: '4px',
+                                                    overflow: 'hidden',
+                                                    boxShadow: '1px 1px 1px 1px #00000014',
+                                                    cursor: 'pointer',
+                                                    transition: 'all 0.2s ease-in-out',
+                                                    marginLeft: boxedImage ? '-8px' : '0',
+                                                    zIndex: 1
+                                                },
+                                                onMouseEnter: (e)=>{
+                                                    const target = e.currentTarget;
+                                                    target.style.transform = 'scale(1.2)';
+                                                    target.style.boxShadow = '0 2px 8px #52c41a60';
+                                                },
+                                                onMouseLeave: (e)=>{
+                                                    const target = e.currentTarget;
+                                                    target.style.transform = 'scale(1)';
+                                                    target.style.boxShadow = '1px 1px 1px 1px #00000014';
+                                                },
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                },
+                                                children: /*#__PURE__*/ jsx(Image, {
+                                                    src: afterImage,
+                                                    width: "100%",
+                                                    height: "100%",
+                                                    style: {
+                                                        objectFit: 'cover',
+                                                        display: 'block'
+                                                    },
+                                                    preview: {
+                                                        mask: false
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }),
+                        isExpanded && /*#__PURE__*/ jsx("div", {
+                            style: {
+                                marginTop: 8,
+                                marginBottom: 8
+                            },
+                            children: /*#__PURE__*/ jsx(Card, {
+                                size: "small",
+                                style: {
+                                    backgroundColor: '#f5f5f5'
+                                },
+                                bodyStyle: {
+                                    padding: '0px'
+                                },
+                                children: /*#__PURE__*/ jsxs("div", {
+                                    style: {
+                                        position: 'relative'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ jsx("pre", {
+                                            style: {
+                                                fontSize: '12px',
+                                                margin: 0,
+                                                whiteSpace: 'pre-wrap',
+                                                backgroundColor: '#ffffff',
+                                                padding: '12px',
+                                                borderRadius: '8px',
+                                                maxHeight: '250px',
+                                                overflow: 'auto'
+                                            },
+                                            children: JSON.stringify(truncateJsonStrings(event), null, 2)
+                                        }),
+                                        /*#__PURE__*/ jsx(Button, {
+                                            type: "text",
+                                            size: "small",
+                                            icon: /*#__PURE__*/ jsx(CopyOutlined, {}),
+                                            onClick: (e)=>{
+                                                e.stopPropagation();
+                                                copyToClipboard(JSON.stringify(event, null, 2));
+                                            },
+                                            style: {
+                                                position: 'absolute',
+                                                top: '8px',
+                                                right: '8px',
+                                                background: 'rgba(255, 255, 255, 0.9)',
+                                                border: '1px solid #d9d9d9'
+                                            },
+                                            title: "Copy JSON"
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        };
+    });
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            padding: '3px'
+        },
+        children: /*#__PURE__*/ jsx(Space, {
+            direction: "vertical",
+            size: "large",
+            style: {
+                width: '100%'
+            },
+            children: /*#__PURE__*/ jsx(Timeline, {
+                mode: "left",
+                className: "timeline-scrollable",
+                items: timelineItems,
+                style: {
+                    paddingTop: 16
+                }
+            })
+        })
+    });
+};
+export { RecordTimeline };

package/dist/button.css

@@ -0,0 +1,35 @@
+.demo-button {
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-block;
+}
+
+.demo-button--primary {
+  color: #fff;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: #0000;
+  box-shadow: inset 0 0 0 1px #00000026;
+}
+
+.demo-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+
+.demo-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+
+.demo-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+

package/dist/components/shiny-text.css

@@ -0,0 +1,73 @@
+.shiny-text {
+  color: #0000;
+  letter-spacing: .5px;
+  text-shadow: 0 1px 2px #0000000d;
+  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+  background-size: 300%;
+  background-clip: text;
+  font-weight: 600;
+  animation: 8s infinite textGradient;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+.shiny-text:after {
+  content: "";
+  width: 120%;
+  height: 120%;
+  animation: shine var(--animation-duration, 5s) cubic-bezier(.25, .1, .25, 1) infinite;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(90deg, #fff0 0%, #ffffff1a 10%, #fff9 50%, #ffffff1a 90%, #fff0 100%);
+  position: absolute;
+  top: -10%;
+  left: -150%;
+  transform: skewX(-20deg)translateY(0);
+}
+
+.shiny-text.disabled {
+  background: #2b83ff;
+  background-clip: text;
+  animation: none;
+}
+
+.shiny-text.disabled:after {
+  animation: none;
+  display: none;
+}
+
+@keyframes shine {
+  0% {
+    opacity: .7;
+    left: -150%;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: .7;
+    left: 250%;
+  }
+}
+
+@keyframes textGradient {
+  0% {
+    background-position: 0%;
+  }
+
+  50% {
+    background-position: 100%;
+  }
+
+  100% {
+    background-position: 0%;
+  }
+}
+

package/dist/components/shiny-text.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import "./shiny-text.css";
+const ShinyText = ({ text, disabled = false, speed = 5, className = '' })=>{
+    const style = {
+        '--animation-duration': `${speed}s`
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: `shiny-text ${disabled ? 'disabled' : ''} ${className}`,
+        style: style,
+        children: text
+    });
+};
+export { ShinyText };

package/dist/index.js

@@ -0,0 +1,4 @@
+import { Button } from "./Button.js";
+import { EventRecorder, convertToChromeEvents } from "./recorder.js";
+import { RecordTimeline } from "./RecordTimeline.js";
+export { Button, EventRecorder, RecordTimeline, convertToChromeEvents };

package/dist/recorder-iife-index.js

@@ -0,0 +1,2 @@
+import { EventRecorder } from "./recorder.js";
+window.EventRecorder = EventRecorder;