@soul-refiner/design-system 2.7.25 → 2.7.27
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/media/video-player/video.js +1 -1
- package/dist/components/surfaces/comment/comment.js +2 -2
- package/dist/components/surfaces/discuss_post/discuss_post.js +2 -2
- package/dist/components/surfaces/post/post.js +1 -1
- package/dist/src/components/media/video-player/video.d.ts +14 -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"),ReactPlayer=require("react-player"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),lock_circle=require("../../../icons/security/lock_circle.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),playlistItem=require("./playlist-item.js")
|
|
2
|
+
"use strict";var React=require("react"),Image=require("next/image"),ReactPlayer=require("react-player"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),tabs=(require("../../navigation/breadcrumb/breadcrumb.js"),require("../../navigation/inner/inner.js"),require("../../navigation/tabs/tabs.js")),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),button=require("../../actions/button/button.js"),lock_circle=require("../../../icons/security/lock_circle.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),ReactPlayer__default=_interopDefaultCompat(ReactPlayer);const TrailerListItem=({trailer:e,title:t,handleSetPlayingTrailer:a})=>React__default.default.createElement(playlistItem.PlaylistItem,{onClick:()=>a(!0),playable:!0,thumbnail:e.thumbnail,title:t+" Trailer"}),ButtonViewAll=({showingAll:e,toggleShowingAll:t})=>React__default.default.createElement(ButtonViewAllWrapper,null,React__default.default.createElement(button.Button,{onClick:t,size:"small",type:"text"},e?"Collapse":"View all")),VideoPlayer=({activeIndex:e,pip:t,playable:a,playlist:l,onClickPreview:r,onPipChange:i,onProgress:o,onStart:n,orientation:d,setMediaItem:c,forwardedRef:s,subtitle:u,title:p,trailer:f,volume:g=1})=>{const[b,x]=React__default.default.useState(0),[h,m]=React__default.default.useState(!1),[y,_]=React__default.default.useState(!a),[w,v]=React__default.default.useState(l?.[e].id||null);var R=React__default.default.useRef(null);const $=s||R,k=React__default.default.useRef({});s=React__default.default.useRef(null);const E=y?f:l?.[e];React__default.default.useEffect(()=>{const e=()=>{const e=k.current[w];e&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"center"})},0)};return l?.length&&w&&("undefined"!=typeof window&&window.addEventListener("load",e),e()),()=>{"undefined"!=typeof window&&window.removeEventListener("load",e)}},[l,w]);const I=e=>{_(!1),c(e)};R=()=>m(e=>!e);return E?React__default.default.createElement(Wrapper,{$orientation:d},React__default.default.createElement(InnerWrapper,{$orientation:d,$playable:a||y},"vertical"===d&&React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:"margin: 24px;"},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},p),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},u)),React__default.default.createElement(ReactPlayer__default.default,{className:"player",config:{file:{attributes:{crossOrigin:"true"},forceHLS:!0,hlsOptions:{autoStartLoad:!0},tracks:(E?.subtitles||[]).map(e=>({kind:"subtitles",label:e.label,src:e.src,srcLang:e.locale}))}},controls:!0,height:"100%",light:React__default.default.createElement(Image__default.default,{alt:"thumbnail for "+p,layout:"fill",priority:!0,quality:100,style:{objectFit:"contain"},src:E.thumbnail}),progressInterval:4e3,onDisablePIP:()=>i&&i(!1),onEnablePIP:()=>i&&i(!0),onProgress:o,onStart:n,onClickPreview:r,onReady:()=>{y||0===$?.current?.getCurrentTime()&&0!==E?.progress&&$.current.seekTo(E.progress)},pip:t,playIcon:a||y?React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:24,sx:"position: absolute; width: 54px; height: 54px;"}):React__default.default.createElement(lock_circle.LockCircle,{color:"white",size:24,sx:"position: absolute; width: 54px; height: 54px;"}),playing:a,ref:$,style:{backgroundColor:"var(--color-grey-0)",maxHeight:720,maxWidth:"100%",minHeight:480,overflow:"hidden",position:"relative"},url:E.src,width:"100%",volume:g}),"horizontal"===d&&React__default.default.createElement(Side,null,React__default.default.createElement(ScalableContainerWrapper,{$showingAll:h},React__default.default.createElement(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{as:"h2",$bold:!0,$color:"white",$fontSize:28,$lineHeight:36},p),React__default.default.createElement(paragraph.P,{as:"h3",$bold:!0,$color:"grey-8"},u)),React__default.default.createElement(box.Box,{$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:b,onChange:e=>x(e),items:[{label:"All lessons",color:"dark"},{label:"Trailer",color:"dark"}],size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(ButtonViewAll,{showingAll:h,toggleShowingAll:R})),[React__default.default.createElement(HorizontalPlaylistWrapper,{ref:s,$showingAll:h},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{nowplaying:w,key:t.id,ref:e=>{k.current[t.id]=e},playlistItemId:t.id,duration:t.duration,onClick:()=>{I(e),v(t.id)},playable:!0,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),!!f&&React__default.default.createElement(TrailerListItem,{title:p,handleSetPlayingTrailer:_,trailer:f})][b])),"vertical"===d&&React__default.default.createElement(box.Box,{$dir:"column",$gap:24,sx:h?"z-index: 3; position:relative;":"height: auto"},React__default.default.createElement(ScalableContainerWrapperVertical,{$showingAll:h},React__default.default.createElement(box.Box,{sx:"padding: 0 1.5rem;",$align:"center"},React__default.default.createElement(tabs.Tabs,{activeIndex:b,onChange:e=>x(e),items:[{label:"All lessons",color:"dark"},{label:"Trailer",color:"dark"}],size:"medium",sx:"justify-content: flex-start;"}),React__default.default.createElement(ButtonViewAll,{showingAll:h,toggleShowingAll:R})),[React__default.default.createElement(VerticalPlaylistWrapper,{ref:s,$showingAll:h},l.map((t,e)=>React__default.default.createElement(playlistItem.PlaylistItem,{nowplaying:w,playlistItemId:t.id,duration:t.duration,key:t.id,ref:e=>{k.current[t.id]=e},onClick:()=>{I(e),v(t.id)},playable:a,progress:t.progress,shortDescription:t.shortDescription,thumbnail:t.thumbnail,title:t.title}))),!!f&&React__default.default.createElement(box.Box,{$dir:"column",$gap:8,sx:"margin: 0px 24px;"},React__default.default.createElement(TrailerListItem,{title:p,handleSetPlayingTrailer:_,trailer:f}))][b])))):null},Wrapper=styled.styled.div`
|
|
3
3
|
display: flex;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
background-color: var(--color-grey-0);
|
|
@@ -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"),Link=require("next/link");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker),Link__default=_interopDefaultCompat(Link);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:_,visibilityIcon:x,customPlaceHolder:y,userProfileUri:R,sx:b})=>{const[g,h]=React__default.default.useState(!1),[$,v]=React__default.default.useState({x:0,y:0}),[E,k]=React__default.default.useState("up"),[j,q]=React__default.default.useState(!1),[C,w]=React__default.default.useState(!1),[S,P]=React__default.default.useState(""),W=React__default.default.Children.toArray(s);var s=()=>{d&&d(),w(!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]))),z=!!W?.length&&0<W.length,I=z&&W.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==W.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,{$sx:b,id:"comment-"+o},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:R,image:f,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:z||!!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(),h(e=>!e),v({y:e.clientY,x:e.clientX}),k(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>q(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),g&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:E,$top:$.y,$left:$.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),h(!1)},onClickOutside:()=>h(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),z&&C&&React__default.default.createElement(RepliesWrapper,null,I),!C&&!l&&z&&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))),j&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(S),P("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:y||"Write a reply",onChange:e=>{P(e.target.value)},value:S,placeIconAtTheEnd:!0,icon:x}))))},Wrapper=styled.styled.div`
|
|
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"),Link=require("next/link");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker),Link__default=_interopDefaultCompat(Link);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:_,visibilityIcon:x,customPlaceHolder:y,userProfileUri:R,sx:b})=>{const[g,h]=React__default.default.useState(!1),[$,v]=React__default.default.useState({x:0,y:0}),[E,k]=React__default.default.useState("up"),[j,q]=React__default.default.useState(!1),[C,w]=React__default.default.useState(!1),[S,P]=React__default.default.useState(""),W=React__default.default.Children.toArray(s);var s=()=>{d&&d(),w(!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]))),z=!!W?.length&&0<W.length,I=z&&W.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==W.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,{$sx:b,id:"comment-"+o},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:R,image:f,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:z||!!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; word-break: break-word;"},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(),h(e=>!e),v({y:e.clientY,x:e.clientX}),k(400<e.clientY?"up":"down")},size:24,sx:" cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>q(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),g&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:E,$top:$.y,$left:$.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),h(!1)},onClickOutside:()=>h(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),z&&C&&React__default.default.createElement(RepliesWrapper,null,I),!C&&!l&&z&&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))),j&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(S),P("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:y||"Write a reply",onChange:e=>{P(e.target.value)},value:S,placeIconAtTheEnd:!0,icon:x}))))},Wrapper=styled.styled.div`
|
|
3
3
|
max-width: 700px;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: row;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
${({$sx:e})=>e||""}
|
|
11
11
|
`,ContentWrapper=styled.styled.div`
|
|
12
12
|
display: flex;
|
|
13
|
-
word-break: break-
|
|
13
|
+
word-break: break-word;
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
${({$hasReplies:e})=>e?`
|
|
16
16
|
position: relative;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var React=require("react"),Link=require("next/link"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),hide=require("../../atoms/hide/hide.js"),time_ago=require("../../atoms/time_ago/time_ago.js"),paragraph=require("../../atoms/typography/paragraph.js"),avatar=require("../../iconography/avatar/avatar.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link),styled__default=_interopDefaultCompat(styled);const MAX_REACTIONS_SHOWN=5,DiscussPost=({avatarSx:e,content:t,createdDate:a,editActions:r,editing:l,firstNewPost:o,handleContentChange:i,id:n,onReact:d,popupActions:u,popupSx:c,reactions:p,reactionModal:s,replyContent:f,replyUserHref:x,replyUserImageUri:_,replyUserName:g,sx:m,userHref:h,userImageUri:y,userName:$,isAdmin:b,userReactions:R})=>{const v=React__default.default.useRef(null),[E,w]=React__default.default.useState(!1);React__default.default.useEffect(()=>{v.current&&(v.current.value=t)},[t]),React__default.default.useEffect(()=>{v?.current&&v.current.value!==t&&i&&i(v.current.value)},[E]);var k=React__default.default.useMemo(()=>helpers.isSameDay(new Date,new Date(a))?React__default.default.createElement(time_ago.TimeAgo,{date:a}):new Intl.DateTimeFormat("en-US",{minute:"numeric",hour:"numeric",day:"numeric",month:"long",year:"numeric"}).format(a),[a]),S=React__default.default.useMemo(()=>{if(p){let e=Object.entries(p);return(e=s?e.slice(0,MAX_REACTIONS_SHOWN):e).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:n+e[0],onClick:()=>d(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:R?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1])))}},[p,R]);return React__default.default.createElement(Wrapper,{$editing:l,$firstNewPost:o,$sx:m,id:n},React__default.default.createElement(hide.HideButRender,{show:!l&&!!f},React__default.default.createElement(box.Box,{$align:"center",$gap:4,sx:"margin-left: 56px;"},React__default.default.createElement(ReplyMarker,null),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:x,image:_,size:16,sx:"img { cursor: pointer;}"}),React__default.default.createElement(paragraph.P,{as:Link__default.default,href:x,$color:"primary-blue-2",$fontSize:12,$lineHeight:16,sx:"flex-shrink: 0; text-decoration: none;"},"@",g),React__default.default.createElement(paragraph.P,{
|
|
2
|
+
"use strict";var React=require("react"),Link=require("next/link"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),hide=require("../../atoms/hide/hide.js"),time_ago=require("../../atoms/time_ago/time_ago.js"),paragraph=require("../../atoms/typography/paragraph.js"),avatar=require("../../iconography/avatar/avatar.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link),styled__default=_interopDefaultCompat(styled);const MAX_REACTIONS_SHOWN=5,DiscussPost=({avatarSx:e,content:t,createdDate:a,editActions:r,editing:l,firstNewPost:o,handleContentChange:i,id:n,onReact:d,popupActions:u,popupSx:c,reactions:p,reactionModal:s,replyContent:f,replyUserHref:x,replyUserImageUri:_,replyUserName:g,sx:m,userHref:h,userImageUri:y,userName:$,isAdmin:b,userReactions:R})=>{const v=React__default.default.useRef(null),[E,w]=React__default.default.useState(!1);React__default.default.useEffect(()=>{v.current&&(v.current.value=t)},[t]),React__default.default.useEffect(()=>{v?.current&&v.current.value!==t&&i&&i(v.current.value)},[E]);var k=React__default.default.useMemo(()=>helpers.isSameDay(new Date,new Date(a))?React__default.default.createElement(time_ago.TimeAgo,{date:a}):new Intl.DateTimeFormat("en-US",{minute:"numeric",hour:"numeric",day:"numeric",month:"long",year:"numeric"}).format(a),[a]),S=React__default.default.useMemo(()=>{if(p){let e=Object.entries(p);return(e=s?e.slice(0,MAX_REACTIONS_SHOWN):e).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:n+e[0],onClick:()=>d(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:R?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1])))}},[p,R]);return React__default.default.createElement(Wrapper,{$editing:l,$firstNewPost:o,$sx:m,id:n},React__default.default.createElement(hide.HideButRender,{show:!l&&!!f},React__default.default.createElement(box.Box,{$align:"center",$gap:4,sx:"margin-left: 56px;"},React__default.default.createElement(ReplyMarker,null),React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:x,image:_,size:16,sx:"img { cursor: pointer;}"}),React__default.default.createElement(paragraph.P,{as:Link__default.default,href:x,$color:"primary-blue-2",$fontSize:12,$lineHeight:16,sx:"flex-shrink: 0; text-decoration: none;"},"@",g),React__default.default.createElement(paragraph.P,{sx:"word-break: break-word;",$fontSize:12,$lineHeight:16,$textClampLines:1},f))),React__default.default.createElement(hide.HideButRender,{show:l},React__default.default.createElement(box.Box,{$gap:16,$align:"flex-start",className:"editing"},React__default.default.createElement(avatar.Avatar,{as:Link__default.default,href:h,image:y,size:40,sx:e}),React__default.default.createElement(box.Box,{$gap:10,sx:`
|
|
3
3
|
flex: 1;
|
|
4
4
|
background-color: var(--color-grey-10);
|
|
5
5
|
border-radius: 8px;
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
align-items: flex-start;
|
|
14
14
|
height: 40px;
|
|
15
15
|
gap: 0px;
|
|
16
|
-
}`},React__default.default.createElement(paragraph.P,{$bold:!0,$color:b?"special-orange-1":"primary-blue-2",$fontSize:14,$lineHeight:20},$),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:10,$lineHeight:14},k)),React__default.default.createElement(paragraph.P,{$fontSize:14,$lineHeight:20,sx:"white-space: pre-line;"},t),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"margin-left: auto;"},S,s)))))},Wrapper=styled__default.default.div`
|
|
16
|
+
}`},React__default.default.createElement(paragraph.P,{$bold:!0,$color:b?"special-orange-1":"primary-blue-2",$fontSize:14,$lineHeight:20},$),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:10,$lineHeight:14},k)),React__default.default.createElement(paragraph.P,{$fontSize:14,$lineHeight:20,sx:"white-space: pre-line; word-break: break-word;"},t),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"margin-left: auto;"},S,s)))))},Wrapper=styled__default.default.div`
|
|
17
17
|
position: relative;
|
|
18
18
|
padding: 12px 16px;
|
|
19
19
|
display: flex;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
height: ${v.y};
|
|
5
5
|
width: ${v.x};
|
|
6
6
|
margin: 0 auto;
|
|
7
|
-
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==x,onClick:R},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,onLoad:e=>{var{naturalHeight:e,naturalWidth:t}=e.target;let a=t+"px",l=e+"px";window?.innerHeight<e&&window?.innerWidth<t?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l=Math.round(.95*window.innerWidth*e/t)+"px"):window?.innerHeight<e?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l="95vh"):window?.innerWidth<t&&(a="95vw",l=Math.round(.95*window.innerWidth*e/t)+"px"),w({x:a,y:l})},priority:!0,sizes:"100vw",src:f[x],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:x!==f.length-1,onClick:b},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{isPaidUser:h,as:l?Link__default.default:"button",href:l,image:i,size:64,status:a?"online":void 0,subtitle:React__default.default.createElement(paragraph.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20},React__default.default.createElement(time_ago.TimeAgo,{date:new Date(s)})),title:React__default.default.createElement(heading.H,{as:"span",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:r,tooltipSx:o,sx:l?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},React__default.default.createElement(paragraph.P,{$textClampLines:m?2:void 0,$sx:"white-space: pre-line; word-break: break-
|
|
7
|
+
`},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==x,onClick:R},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,onLoad:e=>{var{naturalHeight:e,naturalWidth:t}=e.target;let a=t+"px",l=e+"px";window?.innerHeight<e&&window?.innerWidth<t?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l=Math.round(.95*window.innerWidth*e/t)+"px"):window?.innerHeight<e?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l="95vh"):window?.innerWidth<t&&(a="95vw",l=Math.round(.95*window.innerWidth*e/t)+"px"),w({x:a,y:l})},priority:!0,sizes:"100vw",src:f[x],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:x!==f.length-1,onClick:b},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{isPaidUser:h,as:l?Link__default.default:"button",href:l,image:i,size:64,status:a?"online":void 0,subtitle:React__default.default.createElement(paragraph.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20},React__default.default.createElement(time_ago.TimeAgo,{date:new Date(s)})),title:React__default.default.createElement(heading.H,{as:"span",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:r,tooltipSx:o,sx:l?"img { cursor: pointer; }":void 0}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},React__default.default.createElement(paragraph.P,{$textClampLines:m?2:void 0,$sx:"white-space: pre-line; word-break: break-word;"},d)),!!f?.length&&React__default.default.createElement(ImagesWrapper,{$numImages:f.length,$isPaywalled:m},f.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+_+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>y(t),quality:100,src:e,style:{cursor:"pointer",objectFit:"cover"}}))),4<f.length&&React__default.default.createElement(heading.H,{as:"p",className:"more-than",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0},"+",f.length-4)),!!f?.length&&m&&React__default.default.createElement(PaywallWrapper,null,React__default.default.createElement(lock.Lock,{size:40,color:"grey-7"}),React__default.default.createElement(paragraph.P,{$fontSize:14,$bold:!0,$lineHeight:20,$color:"white"},"Become a member",React__default.default.createElement("br",null),"to unlock this post"),React__default.default.createElement(button.Button,{onClick:g,size:"small",sx:"width: 213px;",type:"outlined"},"Join now")),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!m&&e),u&&!!n.length&&React__default.default.createElement(CommentWrapper,null,n))},Wrapper=styled.styled.div`
|
|
8
8
|
position: relative;
|
|
9
9
|
max-width: 700px;
|
|
10
10
|
width: 100%;
|
|
@@ -15,6 +15,10 @@ export interface VideoPlayerProps {
|
|
|
15
15
|
* @param orientation the orientation of the player
|
|
16
16
|
*/
|
|
17
17
|
orientation: 'horizontal' | 'vertical';
|
|
18
|
+
/**
|
|
19
|
+
* @param onClickPreview the handler for clicking the preview to play the video
|
|
20
|
+
*/
|
|
21
|
+
onClickPreview?: (event: React.SyntheticEvent) => void;
|
|
18
22
|
/**
|
|
19
23
|
* @param onPipChange when the pip changes
|
|
20
24
|
*/
|
|
@@ -26,6 +30,10 @@ export interface VideoPlayerProps {
|
|
|
26
30
|
playedSeconds: number;
|
|
27
31
|
loadedSeconds: number;
|
|
28
32
|
}) => void;
|
|
33
|
+
/**
|
|
34
|
+
* @param onStart the handler for mounting the video
|
|
35
|
+
*/
|
|
36
|
+
onStart?: () => void;
|
|
29
37
|
/**
|
|
30
38
|
* @param pip picture in picture is enabled
|
|
31
39
|
*/
|
|
@@ -54,6 +62,11 @@ export interface VideoPlayerProps {
|
|
|
54
62
|
* @param trailer if in
|
|
55
63
|
*/
|
|
56
64
|
trailer?: Trailer;
|
|
65
|
+
/**
|
|
66
|
+
* @param volume the volume of the player
|
|
67
|
+
* @default 1 (100%)
|
|
68
|
+
*/
|
|
69
|
+
volume?: number;
|
|
57
70
|
/**
|
|
58
71
|
* @param forwardedRef the reference to the video player
|
|
59
72
|
*/
|
|
@@ -63,5 +76,5 @@ export interface VideoPlayerProps {
|
|
|
63
76
|
* ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
|
|
64
77
|
* HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
|
|
65
78
|
*/
|
|
66
|
-
export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onPipChange, onProgress, orientation, setMediaItem, forwardedRef, subtitle, title, trailer, }: VideoPlayerProps) => React.JSX.Element | null;
|
|
79
|
+
export declare const VideoPlayer: ({ activeIndex, pip, playable, playlist, onClickPreview, onPipChange, onProgress, onStart, orientation, setMediaItem, forwardedRef, subtitle, title, trailer, volume, }: VideoPlayerProps) => React.JSX.Element | null;
|
|
67
80
|
export {};
|