@soul-refiner/design-system 2.4.23 → 2.4.25
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/components/card/video/video.js +3 -1
- package/dist/components/media/video/video.js +1 -1
- package/dist/components/surfaces/comment/comment.js +1 -1
- package/dist/src/components/media/video/video.d.ts +2 -1
- package/dist/src/components/surfaces/comment/comment.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),rate=require("../../actions/rate/rate.js"),cart_filled=require("../../../icons/shopping/cart_filled.js"),styles=require("../styles.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const VideoEpisodeCard=({actions:e,actionDropdown:t,content:a,cta:r,href:l,image:i,logo:o,numRating:d,purchaseText:n,rating:p,subtitle:s,supportLabel:c,sx:u,title:f})=>{var g=!!o;return React__default.default.createElement(Wrapper,{$sx:u,href:l,$hasPurchaseText:!!n},React__default.default.createElement(Figure,null,t&&React__default.default.createElement(DropdownWrapper,null,t),!!n&&React__default.default.createElement(styles.PurchaseTextWrapper,{className:"not-hover"},React__default.default.createElement(cart_filled.CartFilled,{color:"yellow-5",size:24}),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white"},n)),React__default.default.createElement(Image__default.default,{alt:"",className:"thumbnail",height:213,quality:100,src:i,width:379}),React__default.default.createElement(Figcaption,null,React__default.default.createElement(box.Box,{$display:"block",className:"hidden"},r),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:16},o,React__default.default.createElement(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{$color:"grey-2",$semiBold:!0,$fontSize:g?18:16},f),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16},s)),c&&React__default.default.createElement(paragraph.P,{className:"not-hover",$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"},c)),React__default.default.createElement(paragraph.P,{$color:"grey-5",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:4,className:"hidden"},a),React__default.default.createElement(box.Box,{className:"hidden",$align:"center",$dir:"row"},React__default.default.createElement(rate.Rate,{isRateable:!1,percent:p,size:"small"}),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin: 0px auto 0px 4px;"},"(",d,")"),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:8},React__default.default.Children.toArray(e))))))},Wrapper=styled.styled.a`
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),rate=require("../../actions/rate/rate.js"),cart_filled=require("../../../icons/shopping/cart_filled.js"),styles=require("../styles.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const VideoEpisodeCard=({actions:e,actionDropdown:t,content:a,cta:r,href:l,image:i,logo:o,numRating:d,purchaseText:n,rating:p,subtitle:s,supportLabel:c,sx:u,title:f})=>{var g=!!o;return React__default.default.createElement(Wrapper,{$sx:u,href:l,$hasPurchaseText:!!n},React__default.default.createElement(Figure,null,t&&React__default.default.createElement(DropdownWrapper,null,t),!!n&&React__default.default.createElement(styles.PurchaseTextWrapper,{className:"not-hover"},React__default.default.createElement(cart_filled.CartFilled,{color:"yellow-5",size:24}),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white"},n)),React__default.default.createElement(Image__default.default,{alt:"",className:"thumbnail",height:213,quality:100,src:i,width:379}),React__default.default.createElement(Figcaption,null,React__default.default.createElement(box.Box,{$display:"block",className:"hidden"},r),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:16},o,React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:"max-width: 60%;"},React__default.default.createElement(heading.H,{$color:"grey-2",$textClampLines:1,$semiBold:!0,$fontSize:g?18:16},f),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16},s)),c&&React__default.default.createElement(paragraph.P,{className:"not-hover",$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"},c)),React__default.default.createElement(paragraph.P,{$color:"grey-5",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:4,className:"hidden"},a),React__default.default.createElement(box.Box,{className:"hidden",$align:"center",$dir:"row"},React__default.default.createElement(rate.Rate,{isRateable:!1,percent:p,size:"small"}),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin: 0px auto 0px 4px;"},"(",d,")"),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:8},React__default.default.Children.toArray(e))))))},Wrapper=styled.styled.a`
|
|
3
3
|
cursor: pointer;
|
|
4
4
|
display: block;
|
|
5
5
|
position: relative;
|
|
@@ -83,6 +83,8 @@
|
|
|
83
83
|
flex-flow: column nowrap;
|
|
84
84
|
gap: 8px;
|
|
85
85
|
padding: 8px;
|
|
86
|
+
position: relative;
|
|
87
|
+
width: 100%;
|
|
86
88
|
`,DropdownWrapper=styled.styled.div`
|
|
87
89
|
position: absolute;
|
|
88
90
|
top: 8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var React=require("react"),ReactPlayer=require("react-player"),Image=require("next/image");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),ReactPlayer__default=_interopDefaultCompat(ReactPlayer),Image__default=_interopDefaultCompat(Image);const Video=({controls:e=!0,loop:t=!1,muted:a,playsInline:l,src:r,subtitles:i,style:o,thumbnail:u,
|
|
1
|
+
"use strict";var React=require("react"),ReactPlayer=require("react-player"),Image=require("next/image");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),ReactPlayer__default=_interopDefaultCompat(ReactPlayer),Image__default=_interopDefaultCompat(Image);const Video=({controls:e=!0,loop:t=!1,muted:a,playsInline:l,src:r,subtitles:i,style:o,thumbnail:u,thumbnailObjectFit:n="contain",forwardedRef:c,playing:f=!0})=>{var d=React__default.default.useRef(null),c=c||d;return React__default.default.createElement(ReactPlayer__default.default,{config:{file:{attributes:{crossOrigin:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:i?.map(e=>({kind:"subtitles",label:e.label,src:e.src,srcLang:e.locale}))}},controls:e,height:"100%",light:u?React__default.default.createElement(Image__default.default,{alt:"thumbnail for trailer",layout:"fill",priority:!0,quality:100,src:u,style:{objectFit:n}}):void 0,loop:t,muted:a,pip:!1,playsinline:l,playing:f,ref:c,style:{backgroundColor:"var(--color-grey-0)",maxHeight:720,maxWidth:1280,minHeight:480,overflow:"hidden",position:"relative",...o||{}},url:r,width:"100%"})};exports.Video=Video;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),styled=require("styled-components"),Picker=require("@emoji-mart/react"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),text_input=(require("../../input/checkbox/checkbox.js"),require("../../input/date/date.js"),require("../../input/filter/filter.js"),require("../../input/radio/radio.js"),require("../../input/search/search.js"),require("../../input/select/select.js"),require("../../input/text_area/text_area.js"),require("../../input/text_input/text_input.js")),button=(require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField"),require("../../actions/button/button.js")),portal=require("../portal/portal.js"),emojis=require("../../../emoji/emojis.json.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:u,reactionModal:
|
|
2
|
+
"use strict";var React=require("react"),styled=require("styled-components"),Picker=require("@emoji-mart/react"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),text_input=(require("../../input/checkbox/checkbox.js"),require("../../input/date/date.js"),require("../../input/filter/filter.js"),require("../../input/radio/radio.js"),require("../../input/search/search.js"),require("../../input/select/select.js"),require("../../input/text_area/text_area.js"),require("../../input/text_input/text_input.js")),button=(require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("@mui/x-date-pickers/LocalizationProvider"),require("@mui/x-date-pickers/AdapterDateFnsV3"),require("@mui/x-date-pickers/TimeField"),require("../../actions/button/button.js")),portal=require("../portal/portal.js"),emojis=require("../../../emoji/emojis.json.js"),styles=require("../../../common/styles.js"),emoticon_add=require("../../../icons/basic/emoticon_add.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:d,dropdown:u,reactionModal:p,reactions:c,replies:s,userImageUri:f,userName:m,userReactions:_,userProfileUri:x})=>{const[y,R]=React__default.default.useState(!1),[g,b]=React__default.default.useState({x:0,y:0}),[h,$]=React__default.default.useState("up"),[v,E]=React__default.default.useState(!1),[j,q]=React__default.default.useState(!1),[k,C]=React__default.default.useState(""),S=React__default.default.Children.toArray(s);var s=()=>{d&&d(),q(!0)},r=helpers.abbrTimeBeforeDate(r),c=c&&Object.entries(c).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>n(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:_?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),w=!!S?.length&&0<S.length,W=w&&S.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==S.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{id:o},React__default.default.createElement(avatar.Avatar,{href:x,image:f,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:w||!!l},React__default.default.createElement(CommentBox,null,React__default.default.createElement(box.Box,{$dir:"row",$justify:"space-between",$align:"center"},React__default.default.createElement(paragraph.P,{$bold:!0,$color:"grey-2",$fontSize:14,$lineHeight:20},m),u),React__default.default.createElement(paragraph.P,{sx:"letter-spacing: -0.176px;"},a)),React__default.default.createElement(box.Box,{$align:"flex-start",$dir:"row",$display:"flex",$gap:16,sx:"margin: 8px 0px; position: relative;"},React__default.default.createElement(emoticon_add.Emoticon,{color:"primary-blue-2",onClick:e=>{e.stopPropagation(),R(e=>!e),b({y:e.clientY,x:e.clientX}),$(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>E(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},c,p),y&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:h,$top:g.y,$left:g.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),R(!1)},onClickOutside:()=>R(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),w&&j&&React__default.default.createElement(RepliesWrapper,null,W),!j&&!l&&w&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),v&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(k),C("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:"Write a reply",onChange:e=>{C(e.target.value)},value:k}))))},Wrapper=styled.styled.div`
|
|
3
3
|
max-width: 700px;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: row;
|
|
@@ -10,7 +10,8 @@ export interface VideoProps {
|
|
|
10
10
|
subtitles?: Subtitle[];
|
|
11
11
|
style?: React.CSSProperties;
|
|
12
12
|
thumbnail: string;
|
|
13
|
+
thumbnailObjectFit?: 'cover' | 'contain' | 'fill' | 'unset';
|
|
13
14
|
forwardedRef?: React.RefObject<ReactPlayer>;
|
|
14
15
|
playing?: boolean;
|
|
15
16
|
}
|
|
16
|
-
export declare const Video: ({ controls, loop, muted, playsInline, src, subtitles, style, thumbnail, forwardedRef, playing, }: VideoProps) => React.JSX.Element;
|
|
17
|
+
export declare const Video: ({ controls, loop, muted, playsInline, src, subtitles, style, thumbnail, thumbnailObjectFit, forwardedRef, playing, }: VideoProps) => React.JSX.Element;
|
|
@@ -6,6 +6,7 @@ export interface CommentProps {
|
|
|
6
6
|
filterType?: string;
|
|
7
7
|
createdDate: Date;
|
|
8
8
|
hasMoreReplies?: boolean;
|
|
9
|
+
dropdown?: React.ReactElement;
|
|
9
10
|
id?: string;
|
|
10
11
|
onComment: (comment: string, id?: string) => void;
|
|
11
12
|
onReact: (reaction: string) => void;
|
|
@@ -18,4 +19,4 @@ export interface CommentProps {
|
|
|
18
19
|
userReactions?: string[];
|
|
19
20
|
userProfileUri: string;
|
|
20
21
|
}
|
|
21
|
-
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;
|
|
22
|
+
export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, dropdown, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;
|