@xhub-short/ui 0.1.0-beta.14 → 0.1.0-beta.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{CommentSheet.css-DXNT65EI.d.ts → CommentSheet.css-DuBy01rU.d.ts} +1 -1
- package/dist/{chunk-4TUBNA2X.js → chunk-CLJA73DV.js} +15 -3
- package/dist/{chunk-H2VNH5NM.js → chunk-ZDJA2T66.js} +11 -3
- package/dist/components/CommentSheet/index.d.ts +1 -1
- package/dist/components/DetailView/index.d.ts +2 -1
- package/dist/components/DetailView/index.js +1 -1
- package/dist/components/VideoFeed/index.d.ts +16 -1
- package/dist/components/VideoFeed/index.js +1 -1
- package/dist/index.d.ts +15 -15
- package/dist/index.js +2 -2
- package/package.json +2 -2
|
@@ -216,4 +216,4 @@ declare const CommentSheet: react.NamedExoticComponent<CommentSheetHeadlessProps
|
|
|
216
216
|
*/
|
|
217
217
|
declare const COMMENT_SHEET_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CSS VARIABLES (Light Theme)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n:root {\n /* Primary colors */\n --sv-comment-primary: #164d8e;\n --sv-comment-primary-light: #1354ae;\n --sv-comment-primary-dark: #003477;\n \n /* Contrast colors */\n --sv-comment-bg: #ffffff;\n --sv-comment-text: #121212;\n --sv-comment-text-secondary: #6b7271;\n --sv-comment-border: rgba(18, 18, 18, 0.08);\n \n /* Accent colors */\n --sv-comment-like-color: #ff434e;\n --sv-comment-verified-color: #1ea031;\n --sv-comment-mention-color: #164d8e;\n \n /* Component specific */\n --sv-comment-avatar-bg: #e5e6e6;\n --sv-comment-input-border: #a3a3a3;\n --sv-comment-reply-line: #e5e6e6;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n OVERRIDE BOTTOMSHEET STYLES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet {\n /* Override BottomSheet theming */\n --sv-sheet-bg: var(--sv-comment-bg, #ffffff);\n --sv-sheet-border-radius: var(--sv-comment-sheet-radius, 24px);\n --sv-sheet-animation-duration: var(--sv-comment-animation-duration, 400ms);\n --sv-sheet-animation-easing: var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1));\n \n /* Add margin for rounded corners effect */\n margin: 16px;\n border-radius: var(--sv-comment-sheet-radius, 24px);\n}\n\n.sv-comment-sheet-backdrop {\n --sv-sheet-backdrop-bg: var(--sv-comment-backdrop-bg, rgba(0, 0, 0, 0.5));\n}\n\n/* Inner content wrapper */\n.sv-comment-sheet__inner {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Content wrapper - remove BottomSheet default scroll */\n.sv-comment-sheet .sv-bottom-sheet__content {\n overflow: visible;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HEADER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n border-bottom: 1px solid var(--sv-comment-border);\n flex-shrink: 0;\n position: relative;\n cursor: grab;\n touch-action: none;\n}\n\n.sv-comment-sheet__header:active {\n cursor: grabbing;\n}\n\n.sv-comment-sheet__header-handle {\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 36px;\n height: 4px;\n background: var(--sv-comment-text-secondary);\n border-radius: 2px;\n opacity: 0.3;\n}\n\n.sv-comment-sheet__header-left {\n display: flex;\n align-items: center;\n gap: 2px;\n}\n\n.sv-comment-sheet__title {\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 18px;\n font-weight: 600;\n line-height: 1.4;\n color: var(--sv-comment-text);\n opacity: 0.9;\n margin: 0;\n}\n\n.sv-comment-sheet__sort-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: var(--sv-comment-text);\n}\n\n.sv-comment-sheet__sort-btn svg {\n width: 20px;\n height: 20px;\n}\n\n.sv-comment-sheet__close-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border: none;\n border-radius: 100px;\n background: linear-gradient(180deg, var(--sv-comment-primary-light) 0%, var(--sv-comment-primary-dark) 100%);\n cursor: pointer;\n transition: opacity 0.15s ease;\n}\n\n.sv-comment-sheet__close-btn:hover {\n opacity: 0.9;\n}\n\n.sv-comment-sheet__close-btn svg {\n width: 20px;\n height: 20px;\n color: #ffffff;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n COMMENT LIST\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet__list {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 8px 16px 28px 16px;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n touch-action: pan-y;\n}\n\n.sv-comment-sheet__list::-webkit-scrollbar {\n width: 0px;\n}\n\n.sv-comment-sheet__list::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.0);\n border-radius: 0px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n COMMENT ITEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-item {\n display: flex;\n gap: 6px;\n padding: 16px 0;\n position: relative;\n}\n\n.sv-comment-item--pending {\n opacity: 0.6;\n}\n\n.sv-comment-item--pinned {\n background: var(--sv-comment-bg);\n}\n\n.sv-comment-item__avatar {\n width: 40px;\n height: 40px;\n border-radius: 120px;\n flex-shrink: 0;\n object-fit: cover;\n background: var(--sv-comment-avatar-bg);\n}\n\n.sv-comment-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.sv-comment-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 4px;\n}\n\n.sv-comment-item__header-left {\n display: flex;\n align-items: center;\n gap: 4px;\n min-width: 0;\n}\n\n.sv-comment-item__pin-icon {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: var(--sv-comment-primary);\n}\n\n.sv-comment-item__author {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.4;\n color: var(--sv-comment-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sv-comment-item__verified {\n width: 12px;\n height: 12px;\n flex-shrink: 0;\n color: var(--sv-comment-verified-color);\n}\n\n.sv-comment-item__badge {\n font-size: 10px;\n padding: 2px 6px;\n background: var(--sv-comment-primary);\n color: #ffffff;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.sv-comment-item__menu-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-item__menu-btn svg {\n width: 20px;\n height: 20px;\n}\n\n.sv-comment-item__text {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 1.4;\n color: var(--sv-comment-text);\n word-break: break-word;\n margin: 0;\n padding-right: 16px;\n}\n\n/* Text collapse */\n.sv-comment-item__text--collapsed {\n display: -webkit-box;\n -webkit-line-clamp: var(--sv-comment-max-lines, 3);\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.sv-comment-item__expand-btn {\n background: none;\n border: none;\n padding: 0;\n font-size: 12px;\n color: var(--sv-comment-text-secondary);\n cursor: pointer;\n margin-top: 4px;\n}\n\n.sv-comment-item__expand-btn:hover {\n color: var(--sv-comment-text);\n}\n\n/* Actions row */\n.sv-comment-item__actions {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.sv-comment-item__time {\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n font-weight: 500;\n line-height: 1.2;\n color: var(--sv-comment-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.sv-comment-item__action-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n background: none;\n border: none;\n padding: 0;\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n font-weight: 500;\n line-height: 1.2;\n color: var(--sv-comment-text-secondary);\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n.sv-comment-item__action-btn:hover {\n color: var(--sv-comment-text);\n}\n\n.sv-comment-item__action-btn--active {\n color: var(--sv-comment-like-color);\n}\n\n.sv-comment-item__action-btn--active:hover {\n color: var(--sv-comment-like-color);\n}\n\n.sv-comment-item__action-icon {\n width: 20px;\n height: 20px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n REPLIES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-replies {\n margin-top: 12px;\n position: relative;\n}\n\n/* Vertical connecting line */\n.sv-comment-item--has-replies::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 56px;\n bottom: 0;\n width: 1px;\n background: var(--sv-comment-reply-line);\n}\n\n.sv-comment-replies__toggle {\n display: flex;\n align-items: center;\n gap: 0;\n background: none;\n border: none;\n padding: 4px 0;\n cursor: pointer;\n}\n\n.sv-comment-replies__toggle-line {\n width: 24px;\n height: 1px;\n background: #a3a3a3;\n margin-right: 0;\n}\n\n.sv-comment-replies__toggle-text {\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.4;\n color: var(--sv-comment-text-secondary);\n white-space: nowrap;\n}\n\n.sv-comment-replies__toggle-icon {\n width: 20px;\n height: 20px;\n color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-replies__list {\n margin-top: 12px;\n}\n\n.sv-comment-reply {\n display: flex;\n gap: 6px;\n padding: 0 0 12px 0;\n position: relative;\n}\n\n.sv-comment-reply__avatar {\n width: 24px;\n height: 24px;\n border-radius: 100px;\n flex-shrink: 0;\n object-fit: cover;\n background: var(--sv-comment-avatar-bg);\n}\n\n.sv-comment-reply__mention {\n color: var(--sv-comment-mention-color);\n font-weight: 500;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n INPUT AREA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet__input-area {\n padding: 0 16px 36px 16px;\n flex-shrink: 0;\n}\n\n/* Guest mode - login prompt instead of input */\n.sv-comment-input-guest {\n padding: 16px;\n border-top: 1px solid var(--sv-comment-border);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background: var(--sv-comment-bg);\n color: var(--sv-comment-primary);\n font-weight: 600;\n font-size: 14px;\n width: 100%;\n transition: background 0.15s ease;\n}\n\n.sv-comment-input-guest:hover {\n background: rgba(22, 77, 142, 0.05);\n}\n\n.sv-comment-input-guest:active {\n background: rgba(22, 77, 142, 0.1);\n}\n\n.sv-comment-sheet__reply-to {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 0;\n margin-bottom: 8px;\n font-size: 12px;\n color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__reply-to-author-name {\n font-size: 12px;\n color: var(--sv-comment-text);\n font-weight: 500;\n}\n\n.sv-comment-sheet__reply-to-clear {\n background: none;\n border: none;\n padding: 4px;\n color: var(--sv-comment-text-secondary);\n cursor: pointer;\n font-size: 12px;\n}\n\n.sv-comment-sheet__input-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n height: 44px;\n padding: 16px;\n background: var(--sv-comment-bg);\n border: 1px solid var(--sv-comment-input-border);\n border-radius: 12px;\n backdrop-filter: blur(50px);\n}\n\n.sv-comment-sheet__input-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 0;\n}\n\n.sv-comment-sheet__media-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n flex-shrink: 0;\n}\n\n.sv-comment-sheet__media-btn svg {\n width: 20px;\n height: 20px;\n}\n\n.sv-comment-sheet__input {\n flex: 1;\n background: none;\n border: none;\n outline: none;\n resize: none;\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.4;\n color: var(--sv-comment-text);\n padding: 0;\n min-width: 0;\n}\n\n.sv-comment-sheet__input::placeholder {\n color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__input:not(:placeholder-shown) {\n font-style: normal;\n}\n\n.sv-comment-sheet__emoji-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n flex-shrink: 0;\n}\n\n.sv-comment-sheet__emoji-btn svg {\n width: 20px;\n height: 20px;\n color: var(--sv-comment-primary);\n}\n\n/* Hidden emoji bar (can be toggled) */\n.sv-comment-sheet__emoji-bar {\n display: none;\n gap: 8px;\n padding: 8px 0;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.sv-comment-sheet__emoji-bar--visible {\n display: flex;\n}\n\n.sv-comment-sheet__emoji-bar::-webkit-scrollbar {\n display: none;\n}\n\n.sv-comment-sheet__emoji-bar-btn {\n background: none;\n border: none;\n padding: 4px;\n font-size: 20px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.sv-comment-sheet__emoji-bar-btn:hover {\n background: rgba(0, 0, 0, 0.05);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n STATES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-sheet__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid rgba(0, 0, 0, 0.1);\n border-top-color: var(--sv-comment-primary);\n border-radius: 50%;\n animation: sv-comment-spin 0.8s linear infinite;\n}\n\n@keyframes sv-comment-spin {\n to { transform: rotate(360deg); }\n}\n\n.sv-comment-sheet__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n text-align: center;\n}\n\n.sv-comment-sheet__empty-icon {\n font-size: 48px;\n margin-bottom: 12px;\n}\n\n.sv-comment-sheet__empty-text {\n color: var(--sv-comment-text-secondary);\n font-size: 14px;\n}\n\n.sv-comment-sheet__error {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 32px;\n text-align: center;\n color: var(--sv-comment-like-color);\n}\n\n.sv-comment-sheet__error-btn {\n margin-top: 12px;\n padding: 8px 16px;\n background: rgba(0, 0, 0, 0.05);\n border: none;\n border-radius: 8px;\n color: var(--sv-comment-text);\n cursor: pointer;\n}\n\n/* Load more */\n.sv-comment-sheet__load-more {\n display: flex;\n justify-content: center;\n padding: 12px;\n}\n\n.sv-comment-sheet__load-more-btn {\n background: none;\n border: none;\n padding: 8px 16px;\n color: var(--sv-comment-text-secondary);\n cursor: pointer;\n font-size: 13px;\n}\n\n.sv-comment-sheet__load-more-btn:hover {\n color: var(--sv-comment-text);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n COMMENT MENU (Dropdown)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-menu {\n position: relative;\n}\n\n.sv-comment-menu__trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: var(--sv-comment-text-secondary);\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.sv-comment-menu__trigger:hover {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.sv-comment-menu__icon {\n width: 20px;\n height: 20px;\n}\n\n.sv-comment-menu__dropdown {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 4px;\n min-width: 140px;\n background: var(--sv-comment-bg);\n border: 1px solid var(--sv-comment-border);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n z-index: 10;\n overflow: hidden;\n animation: sv-menu-fade-in 0.15s ease;\n}\n\n@keyframes sv-menu-fade-in {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.sv-comment-menu__item {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n background: none;\n border: none;\n cursor: pointer;\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 14px;\n font-weight: 500;\n color: var(--sv-comment-text);\n text-align: left;\n transition: background 0.15s ease;\n}\n\n.sv-comment-menu__item:hover {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.sv-comment-menu__item--danger {\n color: var(--sv-comment-like-color);\n}\n\n.sv-comment-menu__item--danger:hover {\n background: rgba(255, 67, 78, 0.08);\n}\n\n.sv-comment-menu__item-icon {\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DELETE CONFIRMATION DIALOG\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-comment-dialog-overlay {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.5);\n z-index: var(--sv-comment-modal-z-index, 1100);\n animation: sv-dialog-overlay-fade-in 0.2s ease;\n}\n\n@keyframes sv-dialog-overlay-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.sv-comment-dialog {\n background: var(--sv-comment-bg);\n border-radius: 16px;\n padding: 24px;\n max-width: 300px;\n width: calc(100% - 48px);\n text-align: center;\n animation: sv-dialog-scale-in 0.2s ease;\n}\n\n@keyframes sv-dialog-scale-in {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n}\n\n.sv-comment-dialog__title {\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 17px;\n font-weight: 600;\n color: var(--sv-comment-text);\n margin: 0 0 8px 0;\n}\n\n.sv-comment-dialog__message {\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 14px;\n color: var(--sv-comment-text-secondary);\n margin: 0 0 20px 0;\n line-height: 1.4;\n}\n\n.sv-comment-dialog__actions {\n display: flex;\n gap: 12px;\n}\n\n.sv-comment-dialog__btn {\n flex: 1;\n padding: 12px 16px;\n border: none;\n border-radius: 10px;\n font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: opacity 0.15s ease;\n}\n\n.sv-comment-dialog__btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.sv-comment-dialog__btn--cancel {\n background: rgba(0, 0, 0, 0.06);\n color: var(--sv-comment-text);\n}\n\n.sv-comment-dialog__btn--cancel:hover:not(:disabled) {\n background: rgba(0, 0, 0, 0.1);\n}\n\n.sv-comment-dialog__btn--danger {\n background: var(--sv-comment-like-color);\n color: #ffffff;\n}\n\n.sv-comment-dialog__btn--danger:hover:not(:disabled) {\n opacity: 0.9;\n}\n\n/* Legacy classes (keep for backwards compatibility) */\n.sv-comment-delete-confirm {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.5);\n z-index: var(--sv-comment-modal-z-index, 1100);\n}\n\n.sv-comment-delete-confirm__dialog {\n background: var(--sv-comment-bg);\n border-radius: 12px;\n padding: 16px;\n max-width: 280px;\n text-align: center;\n}\n\n.sv-comment-delete-confirm__title {\n font-size: 16px;\n font-weight: 600;\n color: var(--sv-comment-text);\n margin-bottom: 8px;\n}\n\n.sv-comment-delete-confirm__text {\n font-size: 14px;\n color: var(--sv-comment-text-secondary);\n margin-bottom: 16px;\n}\n\n.sv-comment-delete-confirm__actions {\n display: flex;\n gap: 8px;\n}\n\n.sv-comment-delete-confirm__btn {\n flex: 1;\n padding: 8px 12px;\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n}\n\n.sv-comment-delete-confirm__btn--cancel {\n background: rgba(0, 0, 0, 0.05);\n color: var(--sv-comment-text);\n}\n\n.sv-comment-delete-confirm__btn--delete {\n background: var(--sv-comment-like-color);\n color: #ffffff;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SKELETON LOADING\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@keyframes sv-skeleton-shimmer {\n 0% { background-position: -200% 0; }\n 100% { background-position: 200% 0; }\n}\n\n.sv-comment-skeleton-list {\n display: flex;\n flex-direction: column;\n}\n\n.sv-comment-skeleton {\n animation: sv-skeleton-fade-in 0.3s ease;\n}\n\n@keyframes sv-skeleton-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.sv-comment-skeleton__avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.04) 25%,\n rgba(0, 0, 0, 0.08) 50%,\n rgba(0, 0, 0, 0.04) 75%\n );\n background-size: 200% 100%;\n animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.sv-comment-skeleton__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.sv-comment-skeleton__header {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.sv-comment-skeleton__author {\n width: 80px;\n height: 14px;\n border-radius: 4px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.04) 25%,\n rgba(0, 0, 0, 0.08) 50%,\n rgba(0, 0, 0, 0.04) 75%\n );\n background-size: 200% 100%;\n animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n animation-delay: 0.1s;\n}\n\n.sv-comment-skeleton__time {\n width: 40px;\n height: 12px;\n border-radius: 4px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.04) 25%,\n rgba(0, 0, 0, 0.08) 50%,\n rgba(0, 0, 0, 0.04) 75%\n );\n background-size: 200% 100%;\n animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n animation-delay: 0.15s;\n}\n\n.sv-comment-skeleton__text {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.sv-comment-skeleton__line {\n height: 14px;\n border-radius: 4px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.04) 25%,\n rgba(0, 0, 0, 0.08) 50%,\n rgba(0, 0, 0, 0.04) 75%\n );\n background-size: 200% 100%;\n animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.sv-comment-skeleton__line--full {\n width: 100%;\n animation-delay: 0.2s;\n}\n\n.sv-comment-skeleton__line--medium {\n width: 65%;\n animation-delay: 0.25s;\n}\n\n.sv-comment-skeleton__actions {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-top: 4px;\n}\n\n.sv-comment-skeleton__action {\n width: 50px;\n height: 12px;\n border-radius: 4px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0.04) 25%,\n rgba(0, 0, 0, 0.08) 50%,\n rgba(0, 0, 0, 0.04) 75%\n );\n background-size: 200% 100%;\n animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n animation-delay: 0.3s;\n}\n";
|
|
218
218
|
|
|
219
|
-
export {
|
|
219
|
+
export { COMMENT_SHEET_CSS as C, type ReplyTarget as R, SheetHeader as S, CommentInput as a, type CommentInputProps as b, CommentItemComponent as c, type CommentItemProps as d, CommentList as e, type CommentListProps as f, CommentSheet as g, CommentSheetContext as h, type CommentSheetContextValue as i, CommentSheetHeadless as j, type CommentSheetHeadlessProps as k, type CommentSheetI18n as l, type SheetHeaderProps as m, useOptionalCommentSheetContext as n, useCommentSheetContext as u };
|
|
@@ -42,6 +42,9 @@ function VideoFeedHeadless({
|
|
|
42
42
|
onEndReached,
|
|
43
43
|
endReachedThreshold = 2,
|
|
44
44
|
bufferSize = 1,
|
|
45
|
+
renderEmpty,
|
|
46
|
+
renderLoading,
|
|
47
|
+
renderEnd,
|
|
45
48
|
loadingText = "Loading...",
|
|
46
49
|
emptyText = "No videos",
|
|
47
50
|
endText = "You've reached the end",
|
|
@@ -74,9 +77,18 @@ function VideoFeedHeadless({
|
|
|
74
77
|
},
|
|
75
78
|
[renderSlot]
|
|
76
79
|
);
|
|
77
|
-
const loadingComponent = useMemo(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
+
const loadingComponent = useMemo(
|
|
81
|
+
() => renderLoading?.(loadingText) || /* @__PURE__ */ jsx(VideoFeedLoading, { text: loadingText }),
|
|
82
|
+
[loadingText]
|
|
83
|
+
);
|
|
84
|
+
const emptyComponent = useMemo(
|
|
85
|
+
() => renderEmpty?.(emptyText) || /* @__PURE__ */ jsx(VideoFeedEmpty, { text: emptyText }),
|
|
86
|
+
[emptyText]
|
|
87
|
+
);
|
|
88
|
+
const endComponent = useMemo(
|
|
89
|
+
() => renderEnd?.(endText) || /* @__PURE__ */ jsx(VideoFeedEnd, { text: endText }),
|
|
90
|
+
[endText]
|
|
91
|
+
);
|
|
80
92
|
const sliderProps = {
|
|
81
93
|
// Required
|
|
82
94
|
items: videos,
|
|
@@ -139,6 +139,7 @@ function DetailViewHeadlessBase({
|
|
|
139
139
|
time: Date.now()
|
|
140
140
|
};
|
|
141
141
|
setIsDragging(true);
|
|
142
|
+
onGestureLockRef.current?.(true);
|
|
142
143
|
},
|
|
143
144
|
[enableSwipeToClose]
|
|
144
145
|
);
|
|
@@ -196,7 +197,8 @@ function DetailViewHeadlessBase({
|
|
|
196
197
|
onComment,
|
|
197
198
|
onShare,
|
|
198
199
|
onBookmark,
|
|
199
|
-
onFollow
|
|
200
|
+
onFollow,
|
|
201
|
+
onGestureLock
|
|
200
202
|
},
|
|
201
203
|
states: {
|
|
202
204
|
isLiked,
|
|
@@ -214,6 +216,7 @@ function DetailViewHeadlessBase({
|
|
|
214
216
|
onShare,
|
|
215
217
|
onBookmark,
|
|
216
218
|
onFollow,
|
|
219
|
+
onGestureLock,
|
|
217
220
|
isLiked,
|
|
218
221
|
isBookmarked,
|
|
219
222
|
isFollowing
|
|
@@ -304,7 +307,7 @@ function DetailViewGallery({
|
|
|
304
307
|
enableZoom = true,
|
|
305
308
|
className
|
|
306
309
|
}) {
|
|
307
|
-
const { imagePost, currentImageIndex, setCurrentImageIndex } = useDetailViewContext();
|
|
310
|
+
const { imagePost, currentImageIndex, setCurrentImageIndex, actions } = useDetailViewContext();
|
|
308
311
|
return /* @__PURE__ */ jsx("div", { className: clsx2("sv-detail-view__gallery", className), children: /* @__PURE__ */ jsx(
|
|
309
312
|
ImageCarouselHeadless,
|
|
310
313
|
{
|
|
@@ -314,7 +317,12 @@ function DetailViewGallery({
|
|
|
314
317
|
showIndicators: imagePost.images.length > 1,
|
|
315
318
|
indicatorStyle: "dots",
|
|
316
319
|
enableZoom,
|
|
317
|
-
lazyLoad: false
|
|
320
|
+
lazyLoad: false,
|
|
321
|
+
onSwipeDirectionChange: (direction) => {
|
|
322
|
+
if (direction === "horizontal") {
|
|
323
|
+
actions.onGestureLock?.(true);
|
|
324
|
+
}
|
|
325
|
+
}
|
|
318
326
|
}
|
|
319
327
|
) });
|
|
320
328
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { C as COMMENT_SHEET_CSS, a as CommentInput, b as CommentInputProps, c as CommentItemComponent, d as CommentItemProps, e as CommentList, f as CommentListProps, g as CommentSheet, h as CommentSheetContext, i as CommentSheetContextValue, j as CommentSheetHeadless, k as CommentSheetHeadlessProps, l as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, m as SheetHeaderProps, u as useCommentSheetContext, n as useOptionalCommentSheetContext } from '../../CommentSheet.css-DuBy01rU.js';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import { ReactNode, ReactElement } from 'react';
|
|
4
4
|
import { CommentItem, ReplyItem } from '@xhub-short/contracts';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ReactElement, ReactNode } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { ImagePost, MusicInfo } from '@xhub-short/contracts';
|
|
5
5
|
|
|
@@ -21,6 +21,7 @@ interface DetailViewContextValue {
|
|
|
21
21
|
onShare?: () => void;
|
|
22
22
|
onBookmark?: () => void;
|
|
23
23
|
onFollow?: () => void;
|
|
24
|
+
onGestureLock?: (isLocked: boolean) => void;
|
|
24
25
|
};
|
|
25
26
|
/** States */
|
|
26
27
|
states: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { DETAIL_VIEW_CSS, DetailViewActionButton, DetailViewActions, DetailViewAuthor, DetailViewBottomBar, DetailViewCaption, DetailViewCommentInput, DetailViewGallery, DetailViewHeadless, DetailViewIcons, DetailViewMusic, DetailViewStats, formatCount as formatDetailViewCount, useDetailViewContext } from '../../chunk-
|
|
1
|
+
export { DETAIL_VIEW_CSS, DetailViewActionButton, DetailViewActions, DetailViewAuthor, DetailViewBottomBar, DetailViewCaption, DetailViewCommentInput, DetailViewGallery, DetailViewHeadless, DetailViewIcons, DetailViewMusic, DetailViewStats, formatCount as formatDetailViewCount, useDetailViewContext } from '../../chunk-ZDJA2T66.js';
|
|
@@ -71,6 +71,21 @@ interface VideoFeedHeadlessProps {
|
|
|
71
71
|
* @default false
|
|
72
72
|
*/
|
|
73
73
|
disableInlineTransforms?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Custom empty state component.
|
|
76
|
+
* Receives `text` prop (localized empty text).
|
|
77
|
+
*/
|
|
78
|
+
renderEmpty?: (text: string) => ReactNode;
|
|
79
|
+
/**
|
|
80
|
+
* Custom loading state component.
|
|
81
|
+
* Receives `text` prop (localized loading text).
|
|
82
|
+
*/
|
|
83
|
+
renderLoading?: (text: string) => ReactNode;
|
|
84
|
+
/**
|
|
85
|
+
* Custom end of feed component.
|
|
86
|
+
* Receives `text` prop (localized end text).
|
|
87
|
+
*/
|
|
88
|
+
renderEnd?: (text: string) => ReactNode;
|
|
74
89
|
}
|
|
75
90
|
/**
|
|
76
91
|
* VideoFeed Headless Component
|
|
@@ -81,7 +96,7 @@ interface VideoFeedHeadlessProps {
|
|
|
81
96
|
* Internally uses VirtualSlider<VideoItem> for the core slider logic,
|
|
82
97
|
* adding video-specific context and styling.
|
|
83
98
|
*/
|
|
84
|
-
declare function VideoFeedHeadless({ feedState, swipeState, height, className, renderSlot, onIndexChange, onEndReached, endReachedThreshold, bufferSize, loadingText, emptyText, endText, disableInlineTransforms, }: VideoFeedHeadlessProps): React.ReactElement;
|
|
99
|
+
declare function VideoFeedHeadless({ feedState, swipeState, height, className, renderSlot, onIndexChange, onEndReached, endReachedThreshold, bufferSize, renderEmpty, renderLoading, renderEnd, loadingText, emptyText, endText, disableInlineTransforms, }: VideoFeedHeadlessProps): React.ReactElement;
|
|
85
100
|
declare namespace VideoFeedHeadless {
|
|
86
101
|
var displayName: string;
|
|
87
102
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from '../../chunk-
|
|
1
|
+
export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from '../../chunk-CLJA73DV.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -2,28 +2,28 @@ import { VideoItem, UIPlayerState, UIPlayerControls, UIInteractionState, UIInter
|
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import { ReactNode, ReactElement } from 'react';
|
|
4
4
|
export { clsx, clsx as cn } from 'clsx';
|
|
5
|
-
export {
|
|
6
|
-
export {
|
|
5
|
+
export { ACTION_BAR_CSS, ActionBarBookmark, ActionBarComment, ActionBarHeadless, ActionBarHeadlessExtendedProps, ActionBarLike, ActionBarShare, ActionButton, ActionButtonExtendedProps, BookmarkButton, BookmarkButtonProps, CommentButton, CommentButtonProps, LikeButton, LikeButtonProps, ShareButton, ShareButtonProps } from './components/ActionBar/index.js';
|
|
6
|
+
export { ADVANCE_MENU_CSS, AdvanceMenuHeadless, AdvanceMenuHeadlessProps, AdvanceMenuItemProps, AdvanceMenuSectionTitleProps, AdvanceMenuSeparatorProps } from './components/AdvanceMenu/index.js';
|
|
7
|
+
export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorAvatarProps, AuthorDescription, AuthorDescriptionProps, AuthorInfoContext, AuthorInfoContextValue, AuthorInfoHeadless, AuthorInfoHeadlessExtendedProps, AuthorInfoVariant, AuthorName, AuthorNameProps, AvatarSize, FollowButton, FollowButtonProps, FollowButtonSize, useAuthorInfoContext, useOptionalAuthorInfoContext } from './components/AuthorInfo/index.js';
|
|
8
|
+
export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, UseAutoFirstFrameCaptureConfig, UseFirstFrameCaptureConfig, UseFirstFrameCaptureReturn, UseVideoElementConfig, UseVideoElementReturn, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoErrorOrigin, VideoPlayerHeadless, VideoPlayerHeadlessExtendedProps, VideoSourceType, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './components/VideoPlayer/index.js';
|
|
7
9
|
export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, IconProps, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './components/icons/index.js';
|
|
10
|
+
export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, CleanModeOverlayHeadlessProps, injectCleanModeOverlayCSS } from './components/CleanModeOverlay/index.js';
|
|
11
|
+
export { C as COMMENT_SHEET_CSS, a as CommentInput, b as CommentInputProps, c as CommentItemComponent, d as CommentItemProps, e as CommentList, f as CommentListProps, g as CommentSheet, h as CommentSheetContext, i as CommentSheetContextValue, j as CommentSheetHeadless, k as CommentSheetHeadlessProps, l as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, m as SheetHeaderProps, u as useCommentSheetContext, n as useOptionalCommentSheetContext } from './CommentSheet.css-DuBy01rU.js';
|
|
8
12
|
export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, SlotPosition as SliderSlotPosition, UseSliderPositionOptions, UseSliderPositionReturn, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, VirtualSliderContextValue, VirtualSliderProps, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './components/VirtualSlider/index.js';
|
|
9
|
-
export {
|
|
10
|
-
export { IMAGE_POST_ACTIVE_ATTR, IMAGE_POST_ID_ATTR, IMAGE_POST_SLOT_ACTIVE_CLASS, IMAGE_POST_SLOT_CLASS, IMAGE_POST_SLOT_CLEAN_MODE_CLASS, IMAGE_POST_SLOT_CSS, ImagePostSlotActions, ImagePostSlotActionsProps, ImagePostSlotBottom, ImagePostSlotBottomProps, ImagePostSlotCaption, ImagePostSlotCaptionProps, ImagePostSlotContextValue, ImagePostSlotHeadless, ImagePostSlotHeadlessProps, ImagePostSlotMusic, ImagePostSlotMusicProps, ImagePostSlotOverlay, ImagePostSlotOverlayProps, ImagePostSlotPlayIndicator, ImagePostSlotPlayIndicatorProps, ImagePostSlotReadMore, ImagePostSlotReadMoreProps, useImagePostSlotContext, useOptionalImagePostSlotContext } from './components/ImagePostSlot/index.js';
|
|
13
|
+
export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless, SpeedPickerHeadlessProps } from './components/SpeedPicker/index.js';
|
|
11
14
|
export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewAuthorProps, DetailViewCaption, DetailViewCaptionProps, DetailViewContextValue, DetailViewGallery, DetailViewGalleryProps, DetailViewHeadless, DetailViewHeadlessProps, DetailViewMusic, DetailViewMusicProps, DetailViewStats, DetailViewStatsProps, useDetailViewContext } from './components/DetailView/index.js';
|
|
12
|
-
export {
|
|
15
|
+
export { ErrorBoundary, ErrorBoundaryProps, ErrorMode } from './components/ErrorBoundary/index.js';
|
|
13
16
|
export { HeartInstance, LOADING_ATTR, LOADING_DATASET_KEY, LikeAnimationStyle, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, ReportedVideoOverlayProps, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotContextValue, VideoSlotHeadless, VideoSlotHeadlessExtendedProps, VideoSlotLikeAnimation, VideoSlotLikeAnimationProps, VideoSlotLikeAnimationRef, VideoSlotOverlay, VideoSlotOverlayProps, VideoSlotOverlayRegionProps, VideoSlotPoster, VideoSlotPosterProps, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './components/VideoSlot/index.js';
|
|
14
|
-
export {
|
|
15
|
-
export {
|
|
17
|
+
export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless, ImageCarouselProps } from './components/ImageCarousel/index.js';
|
|
18
|
+
export { IMAGE_POST_ACTIVE_ATTR, IMAGE_POST_ID_ATTR, IMAGE_POST_SLOT_ACTIVE_CLASS, IMAGE_POST_SLOT_CLASS, IMAGE_POST_SLOT_CLEAN_MODE_CLASS, IMAGE_POST_SLOT_CSS, ImagePostSlotActions, ImagePostSlotActionsProps, ImagePostSlotBottom, ImagePostSlotBottomProps, ImagePostSlotCaption, ImagePostSlotCaptionProps, ImagePostSlotContextValue, ImagePostSlotHeadless, ImagePostSlotHeadlessProps, ImagePostSlotMusic, ImagePostSlotMusicProps, ImagePostSlotOverlay, ImagePostSlotOverlayProps, ImagePostSlotPlayIndicator, ImagePostSlotPlayIndicatorProps, ImagePostSlotReadMore, ImagePostSlotReadMoreProps, useImagePostSlotContext, useOptionalImagePostSlotContext } from './components/ImagePostSlot/index.js';
|
|
16
19
|
export { PROGRESS_BAR_CSS, ProgressBarHeadless, ProgressBarHeadlessExtendedProps, calculateProgress, formatTime } from './components/ProgressBar/index.js';
|
|
17
|
-
export {
|
|
18
|
-
export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorAvatarProps, AuthorDescription, AuthorDescriptionProps, AuthorInfoContext, AuthorInfoContextValue, AuthorInfoHeadless, AuthorInfoHeadlessExtendedProps, AuthorInfoVariant, AuthorName, AuthorNameProps, AvatarSize, FollowButton, FollowButtonProps, FollowButtonSize, useAuthorInfoContext, useOptionalAuthorInfoContext } from './components/AuthorInfo/index.js';
|
|
19
|
-
export { VIDEO_INFO_CSS, VideoAuthorName, VideoAuthorNameProps, VideoCaption, VideoCaptionProps, VideoHashtags, VideoHashtagsProps, VideoInfoContext, VideoInfoContextValue, VideoInfoHeadless, VideoInfoHeadlessExtendedProps, VideoLocation, VideoLocationProps, VideoMusic, VideoMusicProps, useOptionalVideoInfoContext, useVideoInfoContext } from './components/VideoInfo/index.js';
|
|
20
|
-
export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from './CommentSheet.css-DXNT65EI.js';
|
|
21
|
-
export { ADVANCE_MENU_CSS, AdvanceMenuHeadless, AdvanceMenuHeadlessProps, AdvanceMenuItemProps, AdvanceMenuSectionTitleProps, AdvanceMenuSeparatorProps } from './components/AdvanceMenu/index.js';
|
|
22
|
-
export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless, SpeedPickerHeadlessProps } from './components/SpeedPicker/index.js';
|
|
20
|
+
export { PlaylistBarHeadless, PlaylistBarHeadlessProps, PlaylistCollectionHeadless, PlaylistCollectionHeadlessProps, PlaylistCollectionItem, PlaylistSheetHeadless, PlaylistSheetHeadlessProps } from './components/Playlist/index.js';
|
|
23
21
|
export { QUALITY_PICKER_CSS, QualityPickerHeadless, QualityPickerHeadlessProps } from './components/QualityPicker/index.js';
|
|
24
|
-
export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, CleanModeOverlayHeadlessProps, injectCleanModeOverlayCSS } from './components/CleanModeOverlay/index.js';
|
|
25
22
|
export { REPORT_SHEET_CSS, ReportSheetHeadless, ReportSheetHeadlessProps, ReportSheetState, injectReportSheetCSS } from './components/ReportSheet/index.js';
|
|
26
|
-
export {
|
|
23
|
+
export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, SlotPosition, UseVideoFeedPositionOptions, UseVideoFeedPositionReturn, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedContextValue, VideoFeedHeadless, VideoFeedHeadlessProps, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from './components/VideoFeed/index.js';
|
|
24
|
+
export { Skeleton, SkeletonAnimation, SkeletonAvatar, SkeletonProps, SkeletonText, SkeletonVideo } from './components/Skeleton/index.js';
|
|
25
|
+
export { VIDEO_INFO_CSS, VideoAuthorName, VideoAuthorNameProps, VideoCaption, VideoCaptionProps, VideoHashtags, VideoHashtagsProps, VideoInfoContext, VideoInfoContextValue, VideoInfoHeadless, VideoInfoHeadlessExtendedProps, VideoLocation, VideoLocationProps, VideoMusic, VideoMusicProps, useOptionalVideoInfoContext, useVideoInfoContext } from './components/VideoInfo/index.js';
|
|
26
|
+
export { V as VideoSlotPlayIndicator, a as VideoSlotPlayIndicatorProps } from './VideoSlotPlayIndicator-DPs8Xt5C.js';
|
|
27
27
|
import 'react/jsx-runtime';
|
|
28
28
|
|
|
29
29
|
/**
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless } from './chunk-QCRRF76W.js';
|
|
2
|
-
export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from './chunk-
|
|
2
|
+
export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from './chunk-CLJA73DV.js';
|
|
3
3
|
export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-7WXAQHJI.js';
|
|
4
4
|
export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './chunk-OM4L7RE5.js';
|
|
5
5
|
export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS } from './chunk-VJ744W5N.js';
|
|
@@ -18,7 +18,7 @@ export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, Au
|
|
|
18
18
|
export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './chunk-ANCP53F3.js';
|
|
19
19
|
export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, injectCleanModeOverlayCSS } from './chunk-QUEJHA24.js';
|
|
20
20
|
export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentList, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from './chunk-IC2KUU4V.js';
|
|
21
|
-
export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewCaption, DetailViewGallery, DetailViewHeadless, DetailViewMusic, DetailViewStats, useDetailViewContext } from './chunk-
|
|
21
|
+
export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewCaption, DetailViewGallery, DetailViewHeadless, DetailViewMusic, DetailViewStats, useDetailViewContext } from './chunk-ZDJA2T66.js';
|
|
22
22
|
export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless } from './chunk-GSNIZ6DF.js';
|
|
23
23
|
export { clsx, clsx2 as cn } from './chunk-EDWS2IPH.js';
|
|
24
24
|
export { formatCount, formatCountWithSeparators, parseFormattedCount } from './chunk-3XPJHUYL.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xhub-short/ui",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.16",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
],
|
|
70
70
|
"dependencies": {
|
|
71
71
|
"clsx": "^2.1.0",
|
|
72
|
-
"@xhub-short/contracts": "0.1.0-beta.
|
|
72
|
+
"@xhub-short/contracts": "0.1.0-beta.16"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"react": "^19.0.0",
|