dinocollab-shared 1.2.45 → 1.2.47

package/dist/factory/cart-item/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/factory/cart-item/styled.tsx"],"sourcesContent":["import { Box, styled, alpha } from '@mui/material'\r\nimport { ImageWithFallback } from 'dinocollab-core/components'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps } from '@mui/material'\r\nimport type { IImageWithFallbackProps } from 'dinocollab-core/components'\r\n\r\nexport const ItemRoot: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n  '--height-item': 'auto',\r\n  '--color-bg': theme.palette.mode === 'dark' ? '#1A1A1A' : '#FFFFFF',\r\n  '--color-bg-rgb': theme.palette.mode === 'dark' ? '26, 26, 26' : '255, 255, 255',\r\n  '--color-bg-secondary': theme.palette.mode === 'dark' ? '#0F0F0F' : '#F9FAFB',\r\n  '--color-text': theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black,\r\n  '--color-text-secondary': theme.palette.mode === 'dark' ? '#a1a1aa' : '#64748b',\r\n  '--color-border': theme.palette.mode === 'dark' ? '#27272a' : '#f1f5f9',\r\n  '--border-radius': '6px',\r\n  '--border-radius-lg': '16px',\r\n  '--mui-palette-text-primary': theme.palette.mode === 'dark' ? '#FFFFFF' : '#000000',\r\n\r\n  position: 'relative',\r\n  display: 'flex',\r\n  gap: theme.spacing(1),\r\n  padding: theme.spacing(1),\r\n  background: 'rgba(var(--color-bg-rgb), 0.7)',\r\n  borderRadius: 'var(--border-radius)',\r\n  border: '1px solid var(--color-border)',\r\n  transition: 'all 0.2s ease',\r\n  '& a': { textDecoration: 'none', color: 'var(--color-text)' },\r\n  '&:hover': {\r\n    boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main || '#E11D48', 0.2)}`,\r\n    borderColor: alpha(theme.palette.primary.main || '#E11D48', 0.3)\r\n  },\r\n  '&:hover a': { textDecoration: 'underline' }\r\n}))\r\n\r\nexport const ItemImg: ComponentType<IImageWithFallbackProps> = styled(ImageWithFallback)<{ src?: string }>(({ theme }) => ({\r\n  height: '62px',\r\n  aspectRatio: '1 / 1',\r\n  borderRadius: 'var(--border-radius)',\r\n  objectFit: 'cover',\r\n  flex: '0 0 auto',\r\n  backgroundColor: theme.palette.mode === 'dark' ? '#27272a' : alpha(theme.palette.grey[200], 0.5)\r\n}))\r\n\r\nexport const ItemContent: ComponentType<BoxProps> = styled(Box)({\r\n  flex: 1,\r\n  marginBlock: ' auto',\r\n  alignItems: 'flex-start',\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  justifyContent: 'space-between',\r\n  minWidth: 0\r\n})\r\n\r\nexport const ItemTitle: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n  color: 'var(--color-text)',\r\n  fontWeight: 600,\r\n  fontSize: '0.875rem',\r\n  lineHeight: 1.25,\r\n  marginBlock: theme.spacing(0.5),\r\n  minWidth: 0,\r\n  width: '100%',\r\n  overflow: 'hidden',\r\n  textOverflow: 'ellipsis',\r\n  display: '-webkit-box',\r\n  WebkitLineClamp: 1,\r\n  WebkitBoxOrient: 'vertical'\r\n}))\r\n"],"names":["ItemRoot","styled","Box","_ref","theme","palette","mode","common","white","black","position","display","gap","spacing","padding","background","borderRadius","border","transition","textDecoration","color","boxShadow","concat","alpha","primary","main","borderColor","ItemImg","ImageWithFallback","_ref2","height","aspectRatio","objectFit","flex","backgroundColor","grey","ItemContent","marginBlock","alignItems","flexDirection","justifyContent","minWidth","ItemTitle","_ref3","fontWeight","fontSize","lineHeight","width","overflow","textOverflow","WebkitLineClamp","WebkitBoxOrient"],"mappings":"0HAMO,IAAMA,EAAoCC,EAAOC,EAAPD,CAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CAC3E,gBAAiB,OACjB,aAAqC,SAAvBA,EAAMC,QAAQC,KAAkB,UAAY,UAC1D,iBAAyC,SAAvBF,EAAMC,QAAQC,KAAkB,aAAe,gBACjE,uBAA+C,SAAvBF,EAAMC,QAAQC,KAAkB,UAAY,UACpE,eAAuC,SAAvBF,EAAMC,QAAQC,KAAkBF,EAAMC,QAAQE,OAAOC,MAAQJ,EAAMC,QAAQE,OAAOE,MAClG,yBAAiD,SAAvBL,EAAMC,QAAQC,KAAkB,UAAY,UACtE,iBAAyC,SAAvBF,EAAMC,QAAQC,KAAkB,UAAY,UAC9D,kBAAmB,MACnB,qBAAsB,OACtB,6BAAqD,SAAvBF,EAAMC,QAAQC,KAAkB,UAAY,UAE1EI,SAAU,WACVC,QAAS,OACTC,IAAKR,EAAMS,QAAQ,GACnBC,QAASV,EAAMS,QAAQ,GACvBE,WAAY,iCACZC,aAAc,uBACdC,OAAQ,gCACRC,WAAY,gBACZ,MAAO,CAAEC,eAAgB,OAAQC,MAAO,qBACxC,UAAW,CACTC,uBAASC,OAAeC,EAAMnB,EAAMC,QAAQmB,QAAQC,MAAQ,UAAW,KACvEC,YAAaH,EAAMnB,EAAMC,QAAQmB,QAAQC,MAAQ,UAAW,KAE9D,YAAa,CAAEN,eAAgB,aAChC,GAEYQ,EAAkD1B,EAAO2B,EAAP3B,CAA4C,SAAA4B,GAAA,IAAGzB,EAAKyB,EAALzB,MAAK,MAAQ,CACzH0B,OAAQ,OACRC,YAAa,QACbf,aAAc,uBACdgB,UAAW,QACXC,KAAM,WACNC,gBAAwC,SAAvB9B,EAAMC,QAAQC,KAAkB,UAAYiB,EAAMnB,EAAMC,QAAQ8B,KAAK,KAAM,IAC7F,GAEYC,EAAuCnC,EAAOC,EAAPD,CAAY,CAC9DgC,KAAM,EACNI,YAAa,QACbC,WAAY,aACZ3B,QAAS,OACT4B,cAAe,SACfC,eAAgB,gBAChBC,SAAU,IAGCC,EAAqCzC,EAAOC,EAAPD,CAAY,SAAA0C,GAAQ,MAAQ,CAC5EvB,MAAO,oBACPwB,WAAY,IACZC,SAAU,WACVC,WAAY,KACZT,YALoEM,EAALvC,MAK5CS,QAAQ,IAC3B4B,SAAU,EACVM,MAAO,OACPC,SAAU,SACVC,aAAc,WACdtC,QAAS,cACTuC,gBAAiB,EACjBC,gBAAiB,WAClB"}
+{"version":3,"file":"styled.js","sources":["../../../src/factory/cart-item/styled.tsx"],"sourcesContent":["import { Box, styled, alpha } from '@mui/material'\r\nimport { ImageWithFallback } from 'dinocollab-core/components'\r\nimport type { ComponentType } from 'react'\r\nimport type { BoxProps } from '@mui/material'\r\nimport type { IImageWithFallbackProps } from 'dinocollab-core/components'\r\n\r\nexport const ItemRoot: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n  position: 'relative',\r\n  display: 'flex',\r\n  gap: theme.spacing(1),\r\n  padding: theme.spacing(1),\r\n  background: alpha(theme.palette.background.paper, 0.5),\r\n  borderRadius: theme.spacing(0.5),\r\n  border: `1px solid ${alpha(theme.palette.divider, 0.3)}`,\r\n  transition: 'all 0.2s ease',\r\n  '& a': { textDecoration: 'none', color: theme.palette.text.primary },\r\n  '&:hover': {\r\n    boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main || '#E11D48', 0.2)}`,\r\n    borderColor: alpha(theme.palette.primary.main || '#E11D48', 0.3)\r\n  },\r\n  '&:hover a': { textDecoration: 'underline' }\r\n}))\r\n\r\nexport const ItemImg: ComponentType<IImageWithFallbackProps> = styled(ImageWithFallback)<{ src?: string }>(({ theme }) => ({\r\n  height: '62px',\r\n  aspectRatio: '1 / 1',\r\n  borderRadius: theme.spacing(0.5),\r\n  objectFit: 'cover',\r\n  flex: '0 0 auto',\r\n  backgroundColor: theme.palette.mode === 'dark' ? '#27272a' : alpha(theme.palette.grey[200], 0.5)\r\n}))\r\n\r\nexport const ItemContent: ComponentType<BoxProps> = styled(Box)({\r\n  flex: 1,\r\n  marginBlock: ' auto',\r\n  alignItems: 'flex-start',\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  justifyContent: 'space-between',\r\n  minWidth: 0\r\n})\r\n\r\nexport const ItemTitle: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({\r\n  color: 'var(--color-text)',\r\n  fontWeight: 600,\r\n  fontSize: '0.875rem',\r\n  lineHeight: 1.25,\r\n  marginBlock: theme.spacing(0.5),\r\n  minWidth: 0,\r\n  width: '100%',\r\n  overflow: 'hidden',\r\n  textOverflow: 'ellipsis',\r\n  display: '-webkit-box',\r\n  WebkitLineClamp: 1,\r\n  WebkitBoxOrient: 'vertical'\r\n}))\r\n"],"names":["ItemRoot","styled","Box","_ref","theme","position","display","gap","spacing","padding","background","alpha","palette","paper","borderRadius","border","concat","divider","transition","textDecoration","color","text","primary","boxShadow","main","borderColor","ItemImg","ImageWithFallback","_ref2","height","aspectRatio","objectFit","flex","backgroundColor","mode","grey","ItemContent","marginBlock","alignItems","flexDirection","justifyContent","minWidth","ItemTitle","_ref3","fontWeight","fontSize","lineHeight","width","overflow","textOverflow","WebkitLineClamp","WebkitBoxOrient"],"mappings":"0HAMO,IAAMA,EAAoCC,EAAOC,EAAPD,CAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CAC3EC,SAAU,WACVC,QAAS,OACTC,IAAKH,EAAMI,QAAQ,GACnBC,QAASL,EAAMI,QAAQ,GACvBE,WAAYC,EAAMP,EAAMQ,QAAQF,WAAWG,MAAO,IAClDC,aAAcV,EAAMI,QAAQ,IAC5BO,OAAMC,aAAAA,OAAeL,EAAMP,EAAMQ,QAAQK,QAAS,KAClDC,WAAY,gBACZ,MAAO,CAAEC,eAAgB,OAAQC,MAAOhB,EAAMQ,QAAQS,KAAKC,SAC3D,UAAW,CACTC,uBAASP,OAAeL,EAAMP,EAAMQ,QAAQU,QAAQE,MAAQ,UAAW,KACvEC,YAAad,EAAMP,EAAMQ,QAAQU,QAAQE,MAAQ,UAAW,KAE9D,YAAa,CAAEL,eAAgB,aAChC,GAEYO,EAAkDzB,EAAO0B,EAAP1B,CAA4C,SAAA2B,GAAA,IAAGxB,EAAKwB,EAALxB,MAAK,MAAQ,CACzHyB,OAAQ,OACRC,YAAa,QACbhB,aAAcV,EAAMI,QAAQ,IAC5BuB,UAAW,QACXC,KAAM,WACNC,gBAAwC,SAAvB7B,EAAMQ,QAAQsB,KAAkB,UAAYvB,EAAMP,EAAMQ,QAAQuB,KAAK,KAAM,IAC7F,GAEYC,EAAuCnC,EAAOC,EAAPD,CAAY,CAC9D+B,KAAM,EACNK,YAAa,QACbC,WAAY,aACZhC,QAAS,OACTiC,cAAe,SACfC,eAAgB,gBAChBC,SAAU,IAGCC,EAAqCzC,EAAOC,EAAPD,CAAY,SAAA0C,GAAQ,MAAQ,CAC5EvB,MAAO,oBACPwB,WAAY,IACZC,SAAU,WACVC,WAAY,KACZT,YALoEM,EAALvC,MAK5CI,QAAQ,IAC3BiC,SAAU,EACVM,MAAO,OACPC,SAAU,SACVC,aAAc,WACd3C,QAAS,cACT4C,gBAAiB,EACjBC,gBAAiB,WAClB"}

package/dist/media-player/core/btn.volume.js

@@ -1,2 +1,2 @@
-import{objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as e}from"react/jsx-runtime";import r from"@mui/material/IconButton";import i from"@mui/material/Slider";import l from"@mui/icons-material/VolumeOff";import a from"@mui/icons-material/VolumeUp";var n=function(n){var m=n.hidden,c=n.sliderPosition,s=void 0===c?"above":c,u=n.sliderHeight,f=void 0===u?60:u,p=n.sliderWidth,d=void 0===p?4:p,v=n.orientation,h=void 0===v?"vertical":v,b=n.volume,x=n.muted,g=n.setVolume,y=n.toggleMute,w={};return"above"===s?w={position:"absolute",left:"50%",bottom:"calc(100%)",transform:"translateX(-50%)",height:f,width:d}:"right"===s?w={opacity:1,height:d,width:f}:"below"===s&&(w={position:"absolute",left:"50%",top:"calc(100% + 8px)",transform:"translateX(-50%)",height:f,width:d}),m?null:t("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},className:"volume-slider-wrapper",children:[e(r,{size:"small",onClick:function(){return y()},children:e(x?l:a,{fontSize:"small",sx:{color:"var(--mp-core1-color-text, #fff)"}})}),e(i,{orientation:h,min:0,max:1,step:.01,value:x?0:b,onChange:function(o,t){return g(Number(t))},sx:o(o({opacity:0},w),{},{color:"var(--mp-core1-color-text, #fff)",pointerEvents:"none",transition:"opacity 0.2s","& .MuiSlider-thumb":{display:"none",width:12,height:12,backgroundColor:"var(--mp-core1-color-text, #fff)",border:"2px solid var(--mp-core1-color-text, #fff)"},"&:hover .MuiSlider-thumb":{display:"block","&::after":{content:"unset"}},".volume-slider-wrapper:hover &":{opacity:1,pointerEvents:"auto"},"& .MuiSlider-rail":{color:"var(--mp-core1-color-text, #fff)",opacity:.3},"& .MuiSlider-track":{color:"var(--mp-core1-color-text, #fff)"}})})]})};export{n as default};
+import{objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as e}from"react/jsx-runtime";import r from"@mui/material/IconButton";import i from"@mui/material/Slider";import l from"@mui/icons-material/VolumeOff";import a from"@mui/icons-material/VolumeUp";var n=function(n){var m=n.sliderPosition,c=void 0===m?"above":m,s=n.sliderHeight,u=void 0===s?60:s,f=n.sliderWidth,p=void 0===f?4:f,d=n.orientation,v=void 0===d?"vertical":d,h=n.volume,b=n.muted,x=n.setVolume,g=n.toggleMute;if(1==n.hidden)return null;var y={};return"above"===c?y={position:"absolute",left:"50%",bottom:"calc(100%)",transform:"translateX(-50%)",height:u,width:p}:"right"===c?y={opacity:1,height:p,width:u}:"below"===c&&(y={position:"absolute",left:"50%",top:"calc(100% + 8px)",transform:"translateX(-50%)",height:u,width:p}),t("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},className:"volume-slider-wrapper",children:[e(r,{size:"small",onClick:function(){return g()},children:e(b?l:a,{fontSize:"small",sx:{color:"var(--mp-core1-color-text, #fff)"}})}),e(i,{orientation:v,min:0,max:1,step:.01,value:b?0:h,onChange:function(o,t){return x(Number(t))},sx:o(o({opacity:0},y),{},{color:"var(--mp-core1-color-text, #fff)",pointerEvents:"none",transition:"opacity 0.2s","& .MuiSlider-thumb":{display:"none",width:12,height:12,backgroundColor:"var(--mp-core1-color-text, #fff)",border:"2px solid var(--mp-core1-color-text, #fff)"},"&:hover .MuiSlider-thumb":{display:"block","&::after":{content:"unset"}},".volume-slider-wrapper:hover &":{opacity:1,pointerEvents:"auto"},"& .MuiSlider-rail":{color:"var(--mp-core1-color-text, #fff)",opacity:.3},"& .MuiSlider-track":{color:"var(--mp-core1-color-text, #fff)"}})})]})};export{n as default};
 //# sourceMappingURL=btn.volume.js.map

package/dist/media-player/core/btn.volume.js.map

@@ -1 +1 @@
-{"version":3,"file":"btn.volume.js","sources":["../../../src/media-player/core/btn.volume.tsx"],"sourcesContent":["import IconButton from '@mui/material/IconButton'\r\nimport Slider from '@mui/material/Slider'\r\nimport VolumeOffIcon from '@mui/icons-material/VolumeOff'\r\nimport VolumeUpIcon from '@mui/icons-material/VolumeUp'\r\n\r\ntype MediaControlProps = {\r\n  hidden?: boolean\r\n  sliderPosition?: 'above' | 'right' | 'below'\r\n  orientation?: 'horizontal' | 'vertical'\r\n  sliderHeight?: number\r\n  sliderWidth?: number\r\n  volume?: number\r\n  muted?: boolean\r\n  setVolume: (value: number) => void\r\n  toggleMute: () => void\r\n}\r\n\r\nconst BtnVolume: React.FC<MediaControlProps> = ({\r\n  hidden,\r\n  sliderPosition = 'above',\r\n  sliderHeight = 60,\r\n  sliderWidth = 4,\r\n  orientation = 'vertical',\r\n  volume,\r\n  muted,\r\n  setVolume,\r\n  toggleMute\r\n}) => {\r\n  const IconComp = muted ? VolumeOffIcon : VolumeUpIcon\r\n  // Xác định style cho slider dựa vào vị trí\r\n  let sliderStyle: React.CSSProperties = {}\r\n  if (sliderPosition === 'above') {\r\n    sliderStyle = {\r\n      position: 'absolute',\r\n      left: '50%',\r\n      bottom: 'calc(100%)',\r\n      transform: 'translateX(-50%)',\r\n      height: sliderHeight,\r\n      width: sliderWidth\r\n    }\r\n  } else if (sliderPosition === 'right') {\r\n    sliderStyle = {\r\n      opacity: 1,\r\n      height: sliderWidth,\r\n      width: sliderHeight\r\n    }\r\n  } else if (sliderPosition === 'below') {\r\n    sliderStyle = {\r\n      position: 'absolute',\r\n      left: '50%',\r\n      top: 'calc(100% + 8px)',\r\n      transform: 'translateX(-50%)',\r\n      height: sliderHeight,\r\n      width: sliderWidth\r\n    }\r\n  }\r\n  if (hidden) return null\r\n  return (\r\n    <div\r\n      style={{\r\n        position: 'relative',\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        justifyContent: 'center'\r\n      }}\r\n      className='volume-slider-wrapper'\r\n    >\r\n      <IconButton size='small' onClick={() => toggleMute()}>\r\n        <IconComp fontSize='small' sx={{ color: 'var(--mp-core1-color-text, #fff)' }} />\r\n      </IconButton>\r\n      <Slider\r\n        orientation={orientation}\r\n        min={0}\r\n        max={1}\r\n        step={0.01}\r\n        value={muted ? 0 : volume}\r\n        onChange={(_, value) => setVolume(Number(value))}\r\n        sx={{\r\n          opacity: 0,\r\n          ...sliderStyle,\r\n          color: 'var(--mp-core1-color-text, #fff)',\r\n          pointerEvents: 'none',\r\n          transition: 'opacity 0.2s',\r\n          '& .MuiSlider-thumb': {\r\n            display: 'none',\r\n            width: 12,\r\n            height: 12,\r\n            backgroundColor: 'var(--mp-core1-color-text, #fff)',\r\n            border: `2px solid var(--mp-core1-color-text, #fff)`\r\n          },\r\n          '&:hover .MuiSlider-thumb': {\r\n            display: 'block',\r\n            '&::after': {\r\n              content: 'unset'\r\n            }\r\n          },\r\n          '.volume-slider-wrapper:hover &': {\r\n            opacity: 1,\r\n            pointerEvents: 'auto'\r\n          },\r\n          '& .MuiSlider-rail': {\r\n            color: 'var(--mp-core1-color-text, #fff)',\r\n            opacity: 0.3\r\n          },\r\n          '& .MuiSlider-track': {\r\n            color: 'var(--mp-core1-color-text, #fff)'\r\n          }\r\n        }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default BtnVolume\r\n"],"names":["BtnVolume","_ref","hidden","_ref$sliderPosition","sliderPosition","_ref$sliderHeight","sliderHeight","_ref$sliderWidth","sliderWidth","_ref$orientation","orientation","volume","muted","setVolume","toggleMute","sliderStyle","position","left","bottom","transform","height","width","opacity","top","_jsxs","style","display","alignItems","justifyContent","className","_jsx","IconButton","size","onClick","children","VolumeOffIcon","VolumeUpIcon","fontSize","sx","color","Slider","min","max","step","value","onChange","_","Number","_objectSpread","pointerEvents","transition","backgroundColor","border","content"],"mappings":"mSAiBA,IAAMA,EAAyC,SAAhCC,GAUV,IATHC,EAAMD,EAANC,OAAMC,EAAAF,EACNG,eAAAA,OAAiB,IAAHD,EAAG,QAAOA,EAAAE,EAAAJ,EACxBK,aAAAA,OAAe,IAAHD,EAAG,GAAEA,EAAAE,EAAAN,EACjBO,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAR,EACfS,YAAAA,OAAc,IAAHD,EAAG,WAAUA,EACxBE,EAAMV,EAANU,OACAC,EAAKX,EAALW,MACAC,EAASZ,EAATY,UACAC,EAAUb,EAAVa,WAIIC,EAAmC,CAAE,EA0BzC,MAzBuB,UAAnBX,EACFW,EAAc,CACZC,SAAU,WACVC,KAAM,MACNC,OAAQ,aACRC,UAAW,mBACXC,OAAQd,EACRe,MAAOb,GAEmB,UAAnBJ,EACTW,EAAc,CACZO,QAAS,EACTF,OAAQZ,EACRa,MAAOf,GAEmB,UAAnBF,IACTW,EAAc,CACZC,SAAU,WACVC,KAAM,MACNM,IAAK,mBACLJ,UAAW,mBACXC,OAAQd,EACRe,MAAOb,IAGPN,EAAe,KAEjBsB,EACE,MAAA,CAAAC,MAAO,CACLT,SAAU,WACVU,QAAS,OACTC,WAAY,SACZC,eAAgB,UAElBC,UAAU,kCAEVC,EAACC,GAAWC,KAAK,QAAQC,QAAS,WAAF,OAAQnB,GAAY,EAClDoB,SAAAJ,EAxCWlB,EAAQuB,EAAgBC,EAwC1B,CAACC,SAAS,QAAQC,GAAI,CAAEC,MAAO,wCAE1CT,EAACU,EAAM,CACL9B,YAAaA,EACb+B,IAAK,EACLC,IAAK,EACLC,KAAM,IACNC,MAAOhC,EAAQ,EAAID,EACnBkC,SAAU,SAACC,EAAGF,GAAK,OAAK/B,EAAUkC,OAAOH,GAAO,EAChDN,GAAEU,EAAAA,EAAA,CACA1B,QAAS,GACNP,GAAW,GAAA,CACdwB,MAAO,mCACPU,cAAe,OACfC,WAAY,eACZ,qBAAsB,CACpBxB,QAAS,OACTL,MAAO,GACPD,OAAQ,GACR+B,gBAAiB,mCACjBC,OAAM,8CAER,2BAA4B,CAC1B1B,QAAS,QACT,WAAY,CACV2B,QAAS,UAGb,iCAAkC,CAChC/B,QAAS,EACT2B,cAAe,QAEjB,oBAAqB,CACnBV,MAAO,mCACPjB,QAAS,IAEX,qBAAsB,CACpBiB,MAAO,0CAMnB"}
+{"version":3,"file":"btn.volume.js","sources":["../../../src/media-player/core/btn.volume.tsx"],"sourcesContent":["import IconButton from '@mui/material/IconButton'\r\nimport Slider from '@mui/material/Slider'\r\nimport VolumeOffIcon from '@mui/icons-material/VolumeOff'\r\nimport VolumeUpIcon from '@mui/icons-material/VolumeUp'\r\n\r\ntype MediaControlProps = {\r\n  hidden?: boolean\r\n  sliderPosition?: 'above' | 'right' | 'below'\r\n  orientation?: 'horizontal' | 'vertical'\r\n  sliderHeight?: number\r\n  sliderWidth?: number\r\n  volume?: number\r\n  muted?: boolean\r\n  setVolume: (value: number) => void\r\n  toggleMute: () => void\r\n}\r\n\r\nconst BtnVolume: React.FC<MediaControlProps> = (props) => {\r\n  const { sliderPosition = 'above', sliderHeight = 60, sliderWidth = 4, orientation = 'vertical', volume, muted } = props\r\n  const { setVolume, toggleMute } = props\r\n\r\n  if (props.hidden == true) return null\r\n\r\n  const IconComp = muted ? VolumeOffIcon : VolumeUpIcon\r\n  // Xác định style cho slider dựa vào vị trí\r\n  let sliderStyle: React.CSSProperties = {}\r\n  if (sliderPosition === 'above') {\r\n    sliderStyle = {\r\n      position: 'absolute',\r\n      left: '50%',\r\n      bottom: 'calc(100%)',\r\n      transform: 'translateX(-50%)',\r\n      height: sliderHeight,\r\n      width: sliderWidth\r\n    }\r\n  } else if (sliderPosition === 'right') {\r\n    sliderStyle = {\r\n      opacity: 1,\r\n      height: sliderWidth,\r\n      width: sliderHeight\r\n    }\r\n  } else if (sliderPosition === 'below') {\r\n    sliderStyle = {\r\n      position: 'absolute',\r\n      left: '50%',\r\n      top: 'calc(100% + 8px)',\r\n      transform: 'translateX(-50%)',\r\n      height: sliderHeight,\r\n      width: sliderWidth\r\n    }\r\n  }\r\n  return (\r\n    <div\r\n      style={{\r\n        position: 'relative',\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        justifyContent: 'center'\r\n      }}\r\n      className='volume-slider-wrapper'\r\n    >\r\n      <IconButton size='small' onClick={() => toggleMute()}>\r\n        <IconComp fontSize='small' sx={{ color: 'var(--mp-core1-color-text, #fff)' }} />\r\n      </IconButton>\r\n      <Slider\r\n        orientation={orientation}\r\n        min={0}\r\n        max={1}\r\n        step={0.01}\r\n        value={muted ? 0 : volume}\r\n        onChange={(_, value) => setVolume(Number(value))}\r\n        sx={{\r\n          opacity: 0,\r\n          ...sliderStyle,\r\n          color: 'var(--mp-core1-color-text, #fff)',\r\n          pointerEvents: 'none',\r\n          transition: 'opacity 0.2s',\r\n          '& .MuiSlider-thumb': {\r\n            display: 'none',\r\n            width: 12,\r\n            height: 12,\r\n            backgroundColor: 'var(--mp-core1-color-text, #fff)',\r\n            border: `2px solid var(--mp-core1-color-text, #fff)`\r\n          },\r\n          '&:hover .MuiSlider-thumb': {\r\n            display: 'block',\r\n            '&::after': {\r\n              content: 'unset'\r\n            }\r\n          },\r\n          '.volume-slider-wrapper:hover &': {\r\n            opacity: 1,\r\n            pointerEvents: 'auto'\r\n          },\r\n          '& .MuiSlider-rail': {\r\n            color: 'var(--mp-core1-color-text, #fff)',\r\n            opacity: 0.3\r\n          },\r\n          '& .MuiSlider-track': {\r\n            color: 'var(--mp-core1-color-text, #fff)'\r\n          }\r\n        }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default BtnVolume\r\n"],"names":["BtnVolume","props","_props$sliderPosition","sliderPosition","_props$sliderHeight","sliderHeight","_props$sliderWidth","sliderWidth","_props$orientation","orientation","volume","muted","setVolume","toggleMute","hidden","sliderStyle","position","left","bottom","transform","height","width","opacity","top","_jsxs","style","display","alignItems","justifyContent","className","_jsx","IconButton","size","onClick","children","VolumeOffIcon","VolumeUpIcon","fontSize","sx","color","Slider","min","max","step","value","onChange","_","Number","_objectSpread","pointerEvents","transition","backgroundColor","border","content"],"mappings":"mSAiBA,IAAMA,EAAyC,SAACC,GAC9C,IAAAC,EAAkHD,EAA1GE,eAAAA,OAAiB,IAAHD,EAAG,QAAOA,EAAAE,EAAkFH,EAAhFI,aAAAA,OAAe,IAAHD,EAAG,GAAEA,EAAAE,EAA+DL,EAA7DM,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAA8CP,EAA5CQ,YAAAA,OAAc,IAAHD,EAAG,WAAUA,EAAEE,EAAkBT,EAAlBS,OAAQC,EAAUV,EAAVU,MAChGC,EAA0BX,EAA1BW,UAAWC,EAAeZ,EAAfY,WAEnB,GAAoB,GAAhBZ,EAAMa,OAAgB,OAAO,KAEjC,IAEIC,EAAmC,CAAE,EA0BzC,MAzBuB,UAAnBZ,EACFY,EAAc,CACZC,SAAU,WACVC,KAAM,MACNC,OAAQ,aACRC,UAAW,mBACXC,OAAQf,EACRgB,MAAOd,GAEmB,UAAnBJ,EACTY,EAAc,CACZO,QAAS,EACTF,OAAQb,EACRc,MAAOhB,GAEmB,UAAnBF,IACTY,EAAc,CACZC,SAAU,WACVC,KAAM,MACNM,IAAK,mBACLJ,UAAW,mBACXC,OAAQf,EACRgB,MAAOd,IAITiB,EACE,MAAA,CAAAC,MAAO,CACLT,SAAU,WACVU,QAAS,OACTC,WAAY,SACZC,eAAgB,UAElBC,UAAU,kCAEVC,EAACC,GAAWC,KAAK,QAAQC,QAAS,WAAF,OAAQpB,GAAY,EAClDqB,SAAAJ,EAvCWnB,EAAQwB,EAAgBC,EAuC1B,CAACC,SAAS,QAAQC,GAAI,CAAEC,MAAO,wCAE1CT,EAACU,EAAM,CACL/B,YAAaA,EACbgC,IAAK,EACLC,IAAK,EACLC,KAAM,IACNC,MAAOjC,EAAQ,EAAID,EACnBmC,SAAU,SAACC,EAAGF,GAAK,OAAKhC,EAAUmC,OAAOH,GAAO,EAChDN,GAAEU,EAAAA,EAAA,CACA1B,QAAS,GACNP,GAAW,GAAA,CACdwB,MAAO,mCACPU,cAAe,OACfC,WAAY,eACZ,qBAAsB,CACpBxB,QAAS,OACTL,MAAO,GACPD,OAAQ,GACR+B,gBAAiB,mCACjBC,OAAM,8CAER,2BAA4B,CAC1B1B,QAAS,QACT,WAAY,CACV2B,QAAS,UAGb,iCAAkC,CAChC/B,QAAS,EACT2B,cAAe,QAEjB,oBAAqB,CACnBV,MAAO,mCACPjB,QAAS,IAEX,qBAAsB,CACpBiB,MAAO,0CAMnB"}

package/dist/media-player/core/progressBar.js

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import{Box as t,Slider as o}from"@mui/material";var i=function(i){var n=i.bufferedSegments,a=i.progress,l=i.isLoading,d=i.onChange;return r(t,{sx:{position:"relative",width:"100%",display:"flex",alignItems:"center"},children:[n.map(function(r,o){return e(t,{sx:{position:"absolute",top:"50%",transform:"translateY(-50%)",left:"".concat(r.left,"%"),width:"".concat(r.width,"%"),height:5,backgroundColor:"rgba(255,255,255,0.4)",pointerEvents:"none",borderRadius:2,zIndex:1}},o)}),l&&e(t,{sx:{position:"absolute",top:"50%",transform:"translateY(-50%)",left:0,height:5,width:"100%",backgroundImage:"repeating-linear-gradient(\n            30deg,\n            rgba(255,255,255,0.2) 0px,\n            rgba(255,255,255,0.2) 6px,\n            rgba(255,255,255,0.08) 6px,\n            rgba(255,255,255,0.08) 12px\n          )",filter:"blur(0.5px)",backgroundSize:"48px 48px",animation:"stripeAnimation 4s linear infinite",pointerEvents:"none",overflow:"hidden",borderRadius:2,zIndex:2}}),e(o,{value:a,min:0,max:100,step:.1,onChange:function(r,e){return null==d?void 0:d(Number(e))},sx:{position:"absolute",top:"50%",left:0,width:"100%",transform:"translateY(-50%)",height:5,color:"var(--mp-core1-color-main, #ed4229)",zIndex:3,padding:0,"& .MuiSlider-thumb":{display:"none",width:12,height:12,backgroundColor:"var(--mp-core1-color-text, #fff)",border:"2px solid var(--mp-core1-color-text, #fff)"},"&:hover .MuiSlider-thumb":{display:"block"},"& .MuiSlider-rail":{color:"var(--mp-core1-color-text, #fff)",opacity:.3},"& .MuiSlider-track":{borderRadius:2}}})]})};export{i as default};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{Box as t,Slider as o}from"@mui/material";var n=function(n){var i=n.bufferedSegments,a=n.progress,l=n.isLoading,d=n.hidden,s=n.onChange;return 1==d?null:r(t,{sx:{position:"relative",width:"100%",display:"flex",alignItems:"center"},children:[i.map(function(r,o){return e(t,{sx:{position:"absolute",top:"50%",transform:"translateY(-50%)",left:"".concat(r.left,"%"),width:"".concat(r.width,"%"),height:5,backgroundColor:"rgba(255,255,255,0.4)",pointerEvents:"none",borderRadius:2,zIndex:1}},o)}),l&&e(t,{sx:{position:"absolute",top:"50%",transform:"translateY(-50%)",left:0,height:5,width:"100%",backgroundImage:"repeating-linear-gradient(\n            30deg,\n            rgba(255,255,255,0.2) 0px,\n            rgba(255,255,255,0.2) 6px,\n            rgba(255,255,255,0.08) 6px,\n            rgba(255,255,255,0.08) 12px\n          )",filter:"blur(0.5px)",backgroundSize:"48px 48px",animation:"stripeAnimation 4s linear infinite",pointerEvents:"none",overflow:"hidden",borderRadius:2,zIndex:2}}),e(o,{value:a,min:0,max:100,step:.1,onChange:function(r,e){return null==s?void 0:s(Number(e))},sx:{position:"absolute",top:"50%",left:0,width:"100%",transform:"translateY(-50%)",height:5,color:"var(--mp-core1-color-main, #ed4229)",zIndex:3,padding:0,"& .MuiSlider-thumb":{display:"none",width:12,height:12,backgroundColor:"var(--mp-core1-color-text, #fff)",border:"2px solid var(--mp-core1-color-text, #fff)"},"&:hover .MuiSlider-thumb":{display:"block"},"& .MuiSlider-rail":{color:"var(--mp-core1-color-text, #fff)",opacity:.3},"& .MuiSlider-track":{borderRadius:2}}})]})};export{n as default};
 //# sourceMappingURL=progressBar.js.map

package/dist/media-player/core/progressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressBar.js","sources":["../../../src/media-player/core/progressBar.tsx"],"sourcesContent":["import React from 'react'\r\nimport { Slider, Box } from '@mui/material'\r\n\r\ninterface Props {\r\n  bufferedSegments: { left: number; width: number }[]\r\n  progress: number\r\n  isLoading: boolean\r\n  onChange?: (value: number) => void\r\n}\r\n\r\nconst ProgressBar: React.FC<Props> = ({\r\n  bufferedSegments,\r\n  progress,\r\n  isLoading,\r\n  onChange,\r\n}) => (\r\n  <Box sx={{ position: 'relative', width: '100%', display: 'flex', alignItems: 'center' }}>\r\n    {bufferedSegments.map((seg, idx) => (\r\n      <Box\r\n        key={idx}\r\n        sx={{\r\n          position: 'absolute',\r\n          top: '50%',\r\n          transform: 'translateY(-50%)',\r\n          left: `${seg.left}%`,\r\n          width: `${seg.width}%`,\r\n          height: 5,\r\n          backgroundColor: 'rgba(255,255,255,0.4)',\r\n          pointerEvents: 'none',\r\n          borderRadius: 2,\r\n          zIndex: 1\r\n        }}\r\n      />\r\n    ))}\r\n    {/* Loading stripe */}\r\n    {isLoading && (\r\n      <Box\r\n        sx={{\r\n          position: 'absolute',\r\n          top: '50%',\r\n          transform: 'translateY(-50%)',\r\n          left: 0,\r\n          height: 5,\r\n          width: '100%',\r\n          backgroundImage: `repeating-linear-gradient(\r\n            30deg,\r\n            rgba(255,255,255,0.2) 0px,\r\n            rgba(255,255,255,0.2) 6px,\r\n            rgba(255,255,255,0.08) 6px,\r\n            rgba(255,255,255,0.08) 12px\r\n          )`,\r\n          filter: 'blur(0.5px)',\r\n          backgroundSize: '48px 48px',\r\n          animation: 'stripeAnimation 4s linear infinite',\r\n          pointerEvents: 'none',\r\n          overflow: 'hidden',\r\n          borderRadius: 2,\r\n          zIndex: 2\r\n        }}\r\n      />\r\n    )}\r\n    {/* Slider */}\r\n    <Slider\r\n      value={progress}\r\n      min={0}\r\n      max={100}\r\n      step={0.1}\r\n      onChange={(_, value) => onChange?.(Number(value))}\r\n      sx={{\r\n        position: 'absolute',\r\n        top: '50%',\r\n        left: 0,\r\n        width: '100%',\r\n        transform: 'translateY(-50%)',\r\n        height: 5,\r\n        color: 'var(--mp-core1-color-main, #ed4229)',\r\n        zIndex: 3,\r\n        padding: 0,\r\n        '& .MuiSlider-thumb': {\r\n          display: 'none',\r\n          width: 12,\r\n          height: 12,\r\n          backgroundColor: 'var(--mp-core1-color-text, #fff)',\r\n          border: `2px solid var(--mp-core1-color-text, #fff)`\r\n        },\r\n        '&:hover .MuiSlider-thumb': {\r\n          display: 'block'\r\n        },\r\n        '& .MuiSlider-rail': {\r\n          color: 'var(--mp-core1-color-text, #fff)',\r\n          opacity: 0.3\r\n        },\r\n        '& .MuiSlider-track': {\r\n          borderRadius: 2\r\n        }\r\n      }}\r\n    />\r\n  </Box>\r\n)\r\n\r\nexport default ProgressBar\r\n"],"names":["ProgressBar","_ref","bufferedSegments","progress","isLoading","onChange","_jsxs","Box","sx","position","width","display","alignItems","children","map","seg","idx","_jsx","top","transform","left","concat","height","backgroundColor","pointerEvents","borderRadius","zIndex","backgroundImage","filter","backgroundSize","animation","overflow","Slider","value","min","max","step","_","Number","color","padding","border","opacity"],"mappings":"kGAUA,IAAMA,EAA+B,SAApBC,GAAA,IACfC,EAAgBD,EAAhBC,iBACAC,EAAQF,EAARE,SACAC,EAASH,EAATG,UACAC,EAAQJ,EAARI,SAAQ,OAERC,EAACC,EAAG,CAACC,GAAI,CAAEC,SAAU,WAAYC,MAAO,OAAQC,QAAS,OAAQC,WAAY,UAC1EC,SAAA,CAAAX,EAAiBY,IAAI,SAACC,EAAKC,GAAG,OAC7BC,EAACV,EAEC,CAAAC,GAAI,CACFC,SAAU,WACVS,IAAK,MACLC,UAAW,mBACXC,QAAIC,OAAKN,EAAIK,KAAO,KACpBV,SAAKW,OAAKN,EAAIL,MAAQ,KACtBY,OAAQ,EACRC,gBAAiB,wBACjBC,cAAe,OACfC,aAAc,EACdC,OAAQ,IAXLV,EAaL,GAGHZ,GACCa,EAACV,EACC,CAAAC,GAAI,CACFC,SAAU,WACVS,IAAK,MACLC,UAAW,mBACXC,KAAM,EACNE,OAAQ,EACRZ,MAAO,OACPiB,gBAME,gOACFC,OAAQ,cACRC,eAAgB,YAChBC,UAAW,qCACXN,cAAe,OACfO,SAAU,SACVN,aAAc,EACdC,OAAQ,KAKdT,EAACe,EACC,CAAAC,MAAO9B,EACP+B,IAAK,EACLC,IAAK,IACLC,KAAM,GACN/B,SAAU,SAACgC,EAAGJ,GAAK,OAAK5B,aAAAA,EAAAA,EAAWiC,OAAOL,GAAO,EACjDzB,GAAI,CACFC,SAAU,WACVS,IAAK,MACLE,KAAM,EACNV,MAAO,OACPS,UAAW,mBACXG,OAAQ,EACRiB,MAAO,sCACPb,OAAQ,EACRc,QAAS,EACT,qBAAsB,CACpB7B,QAAS,OACTD,MAAO,GACPY,OAAQ,GACRC,gBAAiB,mCACjBkB,OAAM,8CAER,2BAA4B,CAC1B9B,QAAS,SAEX,oBAAqB,CACnB4B,MAAO,mCACPG,QAAS,IAEX,qBAAsB,CACpBjB,aAAc,QAIhB"}
+{"version":3,"file":"progressBar.js","sources":["../../../src/media-player/core/progressBar.tsx"],"sourcesContent":["import React from 'react'\r\nimport { Slider, Box } from '@mui/material'\r\n\r\ninterface IProgressBarProps {\r\n  bufferedSegments: { left: number; width: number }[]\r\n  progress: number\r\n  isLoading: boolean\r\n  hidden?: boolean\r\n  onChange?: (value: number) => void\r\n}\r\n\r\nconst ProgressBar: React.FC<IProgressBarProps> = (props) => {\r\n  const { bufferedSegments, progress, isLoading, hidden, onChange } = props\r\n  if (hidden == true) return null\r\n  return (\r\n    <Box sx={{ position: 'relative', width: '100%', display: 'flex', alignItems: 'center' }}>\r\n      {bufferedSegments.map((seg, idx) => (\r\n        <Box\r\n          key={idx}\r\n          sx={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            transform: 'translateY(-50%)',\r\n            left: `${seg.left}%`,\r\n            width: `${seg.width}%`,\r\n            height: 5,\r\n            backgroundColor: 'rgba(255,255,255,0.4)',\r\n            pointerEvents: 'none',\r\n            borderRadius: 2,\r\n            zIndex: 1\r\n          }}\r\n        />\r\n      ))}\r\n      {/* Loading stripe */}\r\n      {isLoading && (\r\n        <Box\r\n          sx={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            transform: 'translateY(-50%)',\r\n            left: 0,\r\n            height: 5,\r\n            width: '100%',\r\n            backgroundImage: `repeating-linear-gradient(\r\n            30deg,\r\n            rgba(255,255,255,0.2) 0px,\r\n            rgba(255,255,255,0.2) 6px,\r\n            rgba(255,255,255,0.08) 6px,\r\n            rgba(255,255,255,0.08) 12px\r\n          )`,\r\n            filter: 'blur(0.5px)',\r\n            backgroundSize: '48px 48px',\r\n            animation: 'stripeAnimation 4s linear infinite',\r\n            pointerEvents: 'none',\r\n            overflow: 'hidden',\r\n            borderRadius: 2,\r\n            zIndex: 2\r\n          }}\r\n        />\r\n      )}\r\n      {/* Slider */}\r\n      <Slider\r\n        value={progress}\r\n        min={0}\r\n        max={100}\r\n        step={0.1}\r\n        onChange={(_, value) => onChange?.(Number(value))}\r\n        sx={{\r\n          position: 'absolute',\r\n          top: '50%',\r\n          left: 0,\r\n          width: '100%',\r\n          transform: 'translateY(-50%)',\r\n          height: 5,\r\n          color: 'var(--mp-core1-color-main, #ed4229)',\r\n          zIndex: 3,\r\n          padding: 0,\r\n          '& .MuiSlider-thumb': {\r\n            display: 'none',\r\n            width: 12,\r\n            height: 12,\r\n            backgroundColor: 'var(--mp-core1-color-text, #fff)',\r\n            border: `2px solid var(--mp-core1-color-text, #fff)`\r\n          },\r\n          '&:hover .MuiSlider-thumb': {\r\n            display: 'block'\r\n          },\r\n          '& .MuiSlider-rail': {\r\n            color: 'var(--mp-core1-color-text, #fff)',\r\n            opacity: 0.3\r\n          },\r\n          '& .MuiSlider-track': {\r\n            borderRadius: 2\r\n          }\r\n        }}\r\n      />\r\n    </Box>\r\n  )\r\n}\r\n\r\nexport default ProgressBar\r\n"],"names":["ProgressBar","props","bufferedSegments","progress","isLoading","hidden","onChange","_jsxs","Box","sx","position","width","display","alignItems","children","map","seg","idx","_jsx","top","transform","left","concat","height","backgroundColor","pointerEvents","borderRadius","zIndex","backgroundImage","filter","backgroundSize","animation","overflow","Slider","value","min","max","step","_","Number","color","padding","border","opacity"],"mappings":"kGAWA,IAAMA,EAA2C,SAACC,GAChD,IAAQC,EAA4DD,EAA5DC,iBAAkBC,EAA0CF,EAA1CE,SAAUC,EAAgCH,EAAhCG,UAAWC,EAAqBJ,EAArBI,OAAQC,EAAaL,EAAbK,SACvD,OAAc,GAAVD,EAAuB,KAEzBE,EAACC,GAAIC,GAAI,CAAEC,SAAU,WAAYC,MAAO,OAAQC,QAAS,OAAQC,WAAY,UAC1EC,SAAA,CAAAZ,EAAiBa,IAAI,SAACC,EAAKC,GAAG,OAC7BC,EAACV,EAAG,CAEFC,GAAI,CACFC,SAAU,WACVS,IAAK,MACLC,UAAW,mBACXC,QAAIC,OAAKN,EAAIK,KAAO,KACpBV,SAAKW,OAAKN,EAAIL,MAAQ,KACtBY,OAAQ,EACRC,gBAAiB,wBACjBC,cAAe,OACfC,aAAc,EACdC,OAAQ,IAXLV,EAaL,GAGHb,GACCc,EAACV,EACC,CAAAC,GAAI,CACFC,SAAU,WACVS,IAAK,MACLC,UAAW,mBACXC,KAAM,EACNE,OAAQ,EACRZ,MAAO,OACPiB,gBAMA,gOACAC,OAAQ,cACRC,eAAgB,YAChBC,UAAW,qCACXN,cAAe,OACfO,SAAU,SACVN,aAAc,EACdC,OAAQ,KAKdT,EAACe,EACC,CAAAC,MAAO/B,EACPgC,IAAK,EACLC,IAAK,IACLC,KAAM,GACN/B,SAAU,SAACgC,EAAGJ,GAAK,OAAK5B,aAAAA,EAAAA,EAAWiC,OAAOL,GAAO,EACjDzB,GAAI,CACFC,SAAU,WACVS,IAAK,MACLE,KAAM,EACNV,MAAO,OACPS,UAAW,mBACXG,OAAQ,EACRiB,MAAO,sCACPb,OAAQ,EACRc,QAAS,EACT,qBAAsB,CACpB7B,QAAS,OACTD,MAAO,GACPY,OAAQ,GACRC,gBAAiB,mCACjBkB,OAAM,8CAER,2BAA4B,CAC1B9B,QAAS,SAEX,oBAAqB,CACnB4B,MAAO,mCACPG,QAAS,IAEX,qBAAsB,CACpBjB,aAAc,QAM1B"}

package/dist/media-player/core/videoplayer.js

@@ -1,2 +1,2 @@
-import{defineProperty as e,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{forwardRef as a,useRef as n,useEffect as i}from"react";import{styled as l,Box as s,useTheme as d,useMediaQuery as c,Stack as m}from"@mui/material";import{useVideoPlayerCore as u}from"./useVideoPlayerCore.js";import p from"./progressBar.js";import f from"./btn.play.js";import g from"./btn.volume.js";import b from"./btn.pip.js";import v from"./btn.fullscreen.js";import y from"./time.js";var h={root:"MediaPlayerCore-root",control:"MediaPlayerCore-control",controlCompact:"MediaPlayerCore-control-compact",overlay:"MediaPlayerCore-overlay",bufferedSegments:"MediaPlayerCore-buffered-segments"},P={autoPlay:!1,muted:!1,pip:!1,fullscreen:!1,volume:!0,preload:"auto"},C=a(function(e,a){var l=n(null),s=n(null),C=d(),k=c(C.breakpoints.down("md")),x=function(){for(var e=arguments.length,o=new Array(e),t=0;t<e;t++)o[t]=arguments[t];return function(e){o.forEach(function(o){o&&("function"==typeof o?o(e):o.current=e)})}}(l,a),S=u(l,s),w=S.state,j=S.controls;i(function(){if("mediaSession"in navigator&&e.mediaMetadata&&l.current)return navigator.mediaSession.metadata=new MediaMetadata({title:e.mediaMetadata.title||"Video",artist:e.mediaMetadata.artist||"Berlin Tomek",album:e.mediaMetadata.album||"Media Album",artwork:e.mediaMetadata.artwork?Array.from(e.mediaMetadata.artwork):void 0}),function(){navigator.mediaSession.setActionHandler("play",null),navigator.mediaSession.setActionHandler("pause",null),navigator.mediaSession.setActionHandler("seekbackward",null),navigator.mediaSession.setActionHandler("seekforward",null),navigator.mediaSession.setActionHandler("seekto",null)}},[e.mediaMetadata]);var A=o(o({},P),e.controls);return t(M,{sx:e.sx,className:[h.root,e.className].filter(function(e){return!!e}).join(" "),ref:s,children:[r("video",{ref:x,controls:!1,width:"100%",height:"100%",src:e.src,autoPlay:A.autoPlay,muted:A.muted,preload:A.preload}),r("div",{className:h.overlay,onClick:j.togglePlay}),t("div",{className:h.control,children:[r(f,{isPlaying:w.isPlaying,onClick:j.togglePlay}),r(p,{bufferedSegments:w.bufferedSegments,progress:w.progress,isLoading:w.isLoading,onChange:j.handleSeek}),r(y,{currentTime:w.currentTime,duration:w.duration}),r(g,{hidden:k||A.muted||!A.volume,sliderPosition:"right",orientation:"horizontal",muted:w.muted,volume:w.volume,setVolume:j.setVolume,toggleMute:j.toggleMute}),t(m,{flexDirection:"row",alignItems:"center",gap:0,children:[e.anotherControls,r(b,{hidden:k||!A.pip,onClick:j.togglePIP}),r(v,{hidden:!A.fullscreen,isFullscreen:w.isFullscreen,onClick:j.toggleFullscreen})]})]}),r("div",{className:h.controlCompact,children:r(p,{bufferedSegments:w.bufferedSegments,progress:w.progress,isLoading:w.isLoading})})]})}),M=l(s)(e(e(e(e(e({"--mp-core1-color-main":"#ed4229","--mp-core1-color-text":"#fff","--mp-core1-icon-size":"34px",width:"640px",height:"360px",position:"relative"},".".concat(h.control),{position:"absolute",bottom:0,left:0,width:"100%",display:"flex",alignItems:"center",padding:"6px 8px",gap:"8px",zIndex:3,transition:"0.3s",transform:"translateY(100%)"}),".".concat(h.controlCompact),{position:"absolute",bottom:0,left:0,width:"100%",transition:"0.3s",zIndex:2,opacity:.5}),".".concat(h.overlay),{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",zIndex:1,opacity:0,transition:"0.3s",cursor:"pointer",background:"linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 20%)"}),".".concat(h.bufferedSegments),{position:"absolute",top:0,height:"100%",backgroundColor:"rgba(255,255,255,0.4)",pointerEvents:"none"}),"&:hover",e(e(e({},".".concat(h.overlay),{opacity:1}),".".concat(h.control),{transform:"translateY(0)"}),".".concat(h.controlCompact),{opacity:0,transform:"translateY(110%)"})));export{C as default,P as defaultControlsConfig};
+import{defineProperty as e,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{forwardRef as a,useRef as n,useEffect as i}from"react";import{styled as l,Box as s,useTheme as d,useMediaQuery as c,Stack as m}from"@mui/material";import{useVideoPlayerCore as u}from"./useVideoPlayerCore.js";import p from"./progressBar.js";import f from"./btn.play.js";import g from"./btn.volume.js";import h from"./btn.pip.js";import v from"./btn.fullscreen.js";import y from"./time.js";var b={autoPlay:!1,muted:!1,pip:!1,fullscreen:!1,volume:!0,preload:"auto"},C=a(function(e,a){var l=n(null),s=n(null),C=d(),x=c(C.breakpoints.down("md")),k=function(){for(var e=arguments.length,o=new Array(e),t=0;t<e;t++)o[t]=arguments[t];return function(e){o.forEach(function(o){o&&("function"==typeof o?o(e):o.current=e)})}}(l,a),S=u(l,s),w=S.state,j=S.controls;i(function(){if("mediaSession"in navigator&&e.mediaMetadata&&l.current)return navigator.mediaSession.metadata=new MediaMetadata({title:e.mediaMetadata.title||"Video",artist:e.mediaMetadata.artist||"Berlin Tomek",album:e.mediaMetadata.album||"Media Album",artwork:e.mediaMetadata.artwork?Array.from(e.mediaMetadata.artwork):void 0}),function(){navigator.mediaSession.setActionHandler("play",null),navigator.mediaSession.setActionHandler("pause",null),navigator.mediaSession.setActionHandler("seekbackward",null),navigator.mediaSession.setActionHandler("seekforward",null),navigator.mediaSession.setActionHandler("seekto",null)}},[e.mediaMetadata]);var A=!0===e.readonly;i(function(){if(A){var e=l.current;e&&e.play().catch(function(){})}},[A]);var H=o(o({},b),e.controls);return t(M,{sx:e.sx,className:[P.root,e.className].filter(function(e){return!!e}).join(" "),ref:s,children:[r("video",{ref:k,controls:!1,width:"100%",height:"100%",src:e.src,autoPlay:H.autoPlay,muted:H.muted,preload:H.preload}),r("div",o({className:P.overlay},A?{}:{onClick:j.togglePlay})),t("div",{className:P.control,children:[r(f,{hidden:A,isPlaying:w.isPlaying,onClick:j.togglePlay}),r(p,{hidden:A,bufferedSegments:w.bufferedSegments,progress:w.progress,isLoading:w.isLoading,onChange:j.handleSeek}),r(y,{currentTime:w.currentTime,duration:w.duration}),r(g,{hidden:A||x||H.muted||!H.volume,sliderPosition:"right",orientation:"horizontal",muted:w.muted,volume:w.volume,setVolume:j.setVolume,toggleMute:j.toggleMute}),t(m,{flexDirection:"row",alignItems:"center",gap:0,children:[e.anotherControls,r(h,{hidden:x||!H.pip,onClick:j.togglePIP}),r(v,{hidden:!H.fullscreen,isFullscreen:w.isFullscreen,onClick:j.toggleFullscreen})]})]}),r("div",{className:P.controlCompact,children:r(p,{hidden:A,bufferedSegments:w.bufferedSegments,progress:w.progress,isLoading:w.isLoading})})]})}),P={root:"MediaPlayerCore-root",control:"MediaPlayerCore-control",controlCompact:"MediaPlayerCore-control-compact",overlay:"MediaPlayerCore-overlay",bufferedSegments:"MediaPlayerCore-buffered-segments"},x=P,M=l(s)(e(e(e(e(e({"--mp-core1-color-main":"#ed4229","--mp-core1-color-text":"#fff","--mp-core1-icon-size":"34px",width:"640px",height:"360px",position:"relative"},".".concat(x.control),{position:"absolute",bottom:0,left:0,width:"100%",display:"flex",alignItems:"center",justifyContent:"flex-end",padding:"6px 8px",gap:"8px",zIndex:3,transition:"0.3s",transform:"translateY(100%)"}),".".concat(x.controlCompact),{position:"absolute",bottom:0,left:0,width:"100%",transition:"0.3s",zIndex:2,opacity:.5}),".".concat(x.overlay),{position:"absolute",bottom:0,left:0,width:"100%",height:"100%",zIndex:1,opacity:0,transition:"0.3s",cursor:"pointer",background:"linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 20%)"}),".".concat(x.bufferedSegments),{position:"absolute",top:0,height:"100%",backgroundColor:"rgba(255,255,255,0.4)",pointerEvents:"none"}),"&:hover",e(e(e({},".".concat(x.overlay),{opacity:1}),".".concat(x.control),{transform:"translateY(0)"}),".".concat(x.controlCompact),{opacity:0,transform:"translateY(110%)"})));export{C as default,b as defaultControlsConfig};
 //# sourceMappingURL=videoplayer.js.map

package/dist/media-player/core/videoplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"videoplayer.js","sources":["../../../src/media-player/core/videoplayer.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from 'react'\r\nimport { Box, Stack, styled, SxProps, Theme, useMediaQuery, useTheme } from '@mui/material'\r\nimport { useVideoPlayerCore } from './useVideoPlayerCore'\r\nimport VideoProgressBar from './progressBar'\r\nimport PlayButton from './btn.play'\r\nimport BtnVolume from './btn.volume'\r\nimport BtnPIP from './btn.pip'\r\nimport FullscreenButton from './btn.fullscreen'\r\nimport MediaTime from './time'\r\n\r\nconst MPCoreClasses = {\r\n  root: 'MediaPlayerCore-root',\r\n  control: 'MediaPlayerCore-control',\r\n  controlCompact: 'MediaPlayerCore-control-compact',\r\n  overlay: 'MediaPlayerCore-overlay',\r\n  playButton: 'MediaPlayerCore-play-button',\r\n  timer: 'MediaPlayerCore-timer',\r\n  progressBar: 'MediaPlayerCore-progress-bar',\r\n  loading: 'MediaPlayerCore-loading',\r\n  timeline: 'MediaPlayerCore-timeline',\r\n  bufferedSegments: 'MediaPlayerCore-buffered-segments'\r\n}\r\n\r\nexport interface IControlsConfig {\r\n  autoPlay?: boolean\r\n  muted?: boolean\r\n  volume?: boolean\r\n  pip?: boolean\r\n  fullscreen?: boolean\r\n  preload?: 'auto' | 'metadata' | 'none'\r\n}\r\n\r\n// Giá trị mặc định cho MediaPlayerCore2Slots\r\nexport const defaultControlsConfig: IControlsConfig = {\r\n  autoPlay: false,\r\n  muted: false,\r\n  pip: false,\r\n  fullscreen: false,\r\n  volume: true,\r\n  preload: 'auto'\r\n}\r\n\r\nexport interface MediaPlayerSlot {\r\n  controls?: IControlsConfig\r\n  anotherControls?: React.ReactNode\r\n  mediaMetadata?: MediaMetadata\r\n}\r\ninterface IProps extends MediaPlayerSlot {\r\n  src?: string\r\n  sx?: SxProps<Theme>\r\n  className?: string\r\n}\r\n\r\nconst MediaPlayerCore = forwardRef<HTMLVideoElement, IProps>((props, ref) => {\r\n  const videoRef = useRef<HTMLVideoElement | null>(null)\r\n  const videoContainerRef = useRef<HTMLDivElement>(null)\r\n  const theme = useTheme()\r\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\r\n  const combinedRef = mergeRefs(videoRef, ref)\r\n  const { state, controls } = useVideoPlayerCore(videoRef, videoContainerRef)\r\n\r\n  function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {\r\n    return (value: T) => {\r\n      refs.forEach((ref) => {\r\n        if (!ref) return\r\n        if (typeof ref === 'function') {\r\n          ref(value)\r\n        } else {\r\n          ;(ref as React.MutableRefObject<T | null>).current = value\r\n        }\r\n      })\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (!('mediaSession' in navigator) || !props.mediaMetadata) return\r\n    const video = videoRef.current\r\n    if (!video) return\r\n    // Set metadata\r\n    navigator.mediaSession.metadata = new MediaMetadata({\r\n      title: props.mediaMetadata.title || 'Video',\r\n      artist: props.mediaMetadata.artist || 'Berlin Tomek',\r\n      album: props.mediaMetadata.album || 'Media Album',\r\n      artwork: props.mediaMetadata.artwork ? Array.from(props.mediaMetadata.artwork) : undefined\r\n    })\r\n    return () => {\r\n      navigator.mediaSession.setActionHandler('play', null)\r\n      navigator.mediaSession.setActionHandler('pause', null)\r\n      navigator.mediaSession.setActionHandler('seekbackward', null)\r\n      navigator.mediaSession.setActionHandler('seekforward', null)\r\n      navigator.mediaSession.setActionHandler('seekto', null)\r\n    }\r\n  }, [props.mediaMetadata])\r\n\r\n  const controlsConfig = { ...defaultControlsConfig, ...props.controls }\r\n\r\n  const getClasses = () => {\r\n    return [MPCoreClasses.root, props.className].filter((x) => !!x).join(' ')\r\n  }\r\n\r\n  return (\r\n    <Wrap sx={props.sx} className={getClasses()} ref={videoContainerRef}>\r\n      <video\r\n        ref={combinedRef}\r\n        controls={false}\r\n        width='100%'\r\n        height='100%'\r\n        src={props.src}\r\n        autoPlay={controlsConfig.autoPlay}\r\n        muted={controlsConfig.muted}\r\n        preload={controlsConfig.preload}\r\n      />\r\n      <div className={MPCoreClasses.overlay} onClick={controls.togglePlay} />\r\n      <div className={MPCoreClasses.control}>\r\n        <PlayButton isPlaying={state.isPlaying} onClick={controls.togglePlay} />\r\n        <VideoProgressBar\r\n          bufferedSegments={state.bufferedSegments}\r\n          progress={state.progress}\r\n          isLoading={state.isLoading}\r\n          onChange={controls.handleSeek}\r\n        />\r\n        <MediaTime currentTime={state.currentTime} duration={state.duration} />\r\n        <BtnVolume\r\n          hidden={isMobile || controlsConfig.muted || !controlsConfig.volume}\r\n          sliderPosition='right'\r\n          orientation='horizontal'\r\n          muted={state.muted}\r\n          volume={state.volume}\r\n          setVolume={controls.setVolume}\r\n          toggleMute={controls.toggleMute}\r\n        />\r\n        <Stack flexDirection='row' alignItems='center' gap={0}>\r\n          {props.anotherControls}\r\n          <BtnPIP hidden={isMobile || !controlsConfig.pip} onClick={controls.togglePIP} />\r\n          <FullscreenButton hidden={!controlsConfig.fullscreen} isFullscreen={state.isFullscreen} onClick={controls.toggleFullscreen} />\r\n        </Stack>\r\n      </div>\r\n      <div className={MPCoreClasses.controlCompact}>\r\n        <VideoProgressBar bufferedSegments={state.bufferedSegments} progress={state.progress} isLoading={state.isLoading} />\r\n      </div>\r\n    </Wrap>\r\n  )\r\n})\r\n\r\nexport default MediaPlayerCore\r\n\r\nconst Wrap = styled(Box)({\r\n  '--mp-core1-color-main': '#ed4229',\r\n  '--mp-core1-color-text': '#fff',\r\n  '--mp-core1-icon-size': '34px',\r\n  width: '640px',\r\n  height: '360px',\r\n  position: 'relative',\r\n  [`.${MPCoreClasses.control}`]: {\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    padding: '6px 8px',\r\n    gap: '8px',\r\n    zIndex: 3,\r\n    transition: '0.3s',\r\n    transform: 'translateY(100%)'\r\n  },\r\n  [`.${MPCoreClasses.controlCompact}`]: {\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    transition: '0.3s',\r\n    zIndex: 2,\r\n    opacity: 0.5\r\n  },\r\n  [`.${MPCoreClasses.overlay}`]: {\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    zIndex: 1,\r\n    opacity: 0,\r\n    transition: '0.3s',\r\n    cursor: 'pointer',\r\n    background: 'linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 20%)'\r\n  },\r\n  [`.${MPCoreClasses.bufferedSegments}`]: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    height: '100%',\r\n    backgroundColor: 'rgba(255,255,255,0.4)',\r\n    pointerEvents: 'none'\r\n  },\r\n  '&:hover': {\r\n    [`.${MPCoreClasses.overlay}`]: {\r\n      opacity: 1\r\n    },\r\n    [`.${MPCoreClasses.control}`]: {\r\n      transform: 'translateY(0)'\r\n    },\r\n    [`.${MPCoreClasses.controlCompact}`]: {\r\n      opacity: 0,\r\n      transform: 'translateY(110%)'\r\n    }\r\n  }\r\n})\r\n"],"names":["MPCoreClasses","root","control","controlCompact","overlay","bufferedSegments","defaultControlsConfig","autoPlay","muted","pip","fullscreen","volume","preload","MediaPlayerCore","forwardRef","props","ref","videoRef","useRef","videoContainerRef","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","combinedRef","_len","arguments","length","refs","Array","_key","value","forEach","current","mergeRefs","_useVideoPlayerCore","useVideoPlayerCore","state","controls","useEffect","navigator","mediaMetadata","mediaSession","metadata","MediaMetadata","title","artist","album","artwork","from","undefined","setActionHandler","controlsConfig","_objectSpread","_jsxs","Wrap","sx","className","filter","x","join","children","_jsx","width","height","src","onClick","togglePlay","PlayButton","isPlaying","VideoProgressBar","progress","isLoading","onChange","handleSeek","MediaTime","currentTime","duration","BtnVolume","hidden","sliderPosition","orientation","setVolume","toggleMute","Stack","flexDirection","alignItems","gap","anotherControls","BtnPIP","togglePIP","FullscreenButton","isFullscreen","toggleFullscreen","styled","Box","_defineProperty","position","concat","bottom","left","display","padding","zIndex","transition","transform","opacity","cursor","background","top","backgroundColor","pointerEvents"],"mappings":"6hBAUA,IAAMA,EAAgB,CACpBC,KAAM,uBACNC,QAAS,0BACTC,eAAgB,kCAChBC,QAAS,0BAMTC,iBAAkB,qCAaPC,EAAyC,CACpDC,UAAU,EACVC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,QAAS,QAcLC,EAAkBC,EAAqC,SAACC,EAAOC,GACnE,IAAMC,EAAWC,EAAgC,MAC3CC,EAAoBD,EAAuB,MAC3CE,EAAQC,IACRC,EAAWC,EAAcH,EAAMI,YAAYC,KAAK,OAChDC,EAGN,WAA2D,IAAA,IAAAC,EAAAC,UAAAC,OAAlCC,EAAkCC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAlCF,EAAkCE,GAAAJ,UAAAI,GACzD,OAAO,SAACC,GACNH,EAAKI,QAAQ,SAAClB,GACPA,IACc,mBAARA,EACTA,EAAIiB,GAEFjB,EAAyCmB,QAAUF,EAEzD,EACD,CACH,CAdoBG,CAAUnB,EAAUD,GACxCqB,EAA4BC,EAAmBrB,EAAUE,GAAjDoB,EAAKF,EAALE,MAAOC,EAAQH,EAARG,SAefC,EAAU,WACR,GAAM,iBAAkBC,WAAe3B,EAAM4B,eAC/B1B,EAASkB,QASvB,OANAO,UAAUE,aAAaC,SAAW,IAAIC,cAAc,CAClDC,MAAOhC,EAAM4B,cAAcI,OAAS,QACpCC,OAAQjC,EAAM4B,cAAcK,QAAU,eACtCC,MAAOlC,EAAM4B,cAAcM,OAAS,cACpCC,QAASnC,EAAM4B,cAAcO,QAAUnB,MAAMoB,KAAKpC,EAAM4B,cAAcO,cAAWE,IAE5E,WACLV,UAAUE,aAAaS,iBAAiB,OAAQ,MAChDX,UAAUE,aAAaS,iBAAiB,QAAS,MACjDX,UAAUE,aAAaS,iBAAiB,eAAgB,MACxDX,UAAUE,aAAaS,iBAAiB,cAAe,MACvDX,UAAUE,aAAaS,iBAAiB,SAAU,KACnD,CACH,EAAG,CAACtC,EAAM4B,gBAEV,IAAMW,EAAcC,EAAAA,EAAQjD,CAAAA,EAAAA,GAA0BS,EAAMyB,UAM5D,OACEgB,EAACC,EAAI,CAACC,GAAI3C,EAAM2C,GAAIC,UAJb,CAAC3D,EAAcC,KAAMc,EAAM4C,WAAWC,OAAO,SAACC,GAAC,QAAOA,CAAC,GAAEC,KAAK,KAIxB9C,IAAKG,EAChD4C,SAAA,CAAAC,EAAA,QAAA,CACEhD,IAAKU,EACLc,UAAU,EACVyB,MAAM,OACNC,OAAO,OACPC,IAAKpD,EAAMoD,IACX5D,SAAU+C,EAAe/C,SACzBC,MAAO8C,EAAe9C,MACtBI,QAAS0C,EAAe1C,UAE1BoD,EAAK,MAAA,CAAAL,UAAW3D,EAAcI,QAASgE,QAAS5B,EAAS6B,aACzDb,EAAA,MAAA,CAAKG,UAAW3D,EAAcE,QAC5B6D,SAAA,CAAAC,EAACM,EAAU,CAACC,UAAWhC,EAAMgC,UAAWH,QAAS5B,EAAS6B,aAC1DL,EAACQ,EAAgB,CACfnE,iBAAkBkC,EAAMlC,iBACxBoE,SAAUlC,EAAMkC,SAChBC,UAAWnC,EAAMmC,UACjBC,SAAUnC,EAASoC,aAErBZ,EAACa,EAAU,CAAAC,YAAavC,EAAMuC,YAAaC,SAAUxC,EAAMwC,WAC3Df,EAACgB,EACC,CAAAC,OAAQ3D,GAAYgC,EAAe9C,QAAU8C,EAAe3C,OAC5DuE,eAAe,QACfC,YAAY,aACZ3E,MAAO+B,EAAM/B,MACbG,OAAQ4B,EAAM5B,OACdyE,UAAW5C,EAAS4C,UACpBC,WAAY7C,EAAS6C,aAEvB7B,EAAC8B,GAAMC,cAAc,MAAMC,WAAW,SAASC,IAAK,EACjD1B,SAAA,CAAAhD,EAAM2E,gBACP1B,EAAC2B,EAAO,CAAAV,OAAQ3D,IAAagC,EAAe7C,IAAK2D,QAAS5B,EAASoD,YACnE5B,EAAC6B,EAAgB,CAACZ,QAAS3B,EAAe5C,WAAYoF,aAAcvD,EAAMuD,aAAc1B,QAAS5B,EAASuD,yBAG9G/B,EAAK,MAAA,CAAAL,UAAW3D,EAAcG,eAAc4D,SAC1CC,EAACQ,EAAiB,CAAAnE,iBAAkBkC,EAAMlC,iBAAkBoE,SAAUlC,EAAMkC,SAAUC,UAAWnC,EAAMmC,gBAI/G,GAIMjB,EAAOuC,EAAOC,EAAPD,CAAWE,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACtB,wBAAyB,UACzB,wBAAyB,OACzB,uBAAwB,OACxBjC,MAAO,QACPC,OAAQ,QACRiC,SAAU,YAAU,IAAAC,OACfpG,EAAcE,SAAY,CAC7BiG,SAAU,WACVE,OAAQ,EACRC,KAAM,EACNrC,MAAO,OACPsC,QAAS,OACTf,WAAY,SACZgB,QAAS,UACTf,IAAK,MACLgB,OAAQ,EACRC,WAAY,OACZC,UAAW,yBACZP,OACIpG,EAAcG,gBAAmB,CACpCgG,SAAU,WACVE,OAAQ,EACRC,KAAM,EACNrC,MAAO,OACPyC,WAAY,OACZD,OAAQ,EACRG,QAAS,SACVR,OACIpG,EAAcI,SAAY,CAC7B+F,SAAU,WACVE,OAAQ,EACRC,KAAM,EACNrC,MAAO,OACPC,OAAQ,OACRuC,OAAQ,EACRG,QAAS,EACTF,WAAY,OACZG,OAAQ,UACRC,WAAY,6EACbV,OACIpG,EAAcK,kBAAqB,CACtC8F,SAAU,WACVY,IAAK,EACL7C,OAAQ,OACR8C,gBAAiB,wBACjBC,cAAe,SAEjB,UAASf,EAAAA,EAAAA,EAAA,GAAA,IAAAE,OACFpG,EAAcI,SAAY,CAC7BwG,QAAS,QACVR,OACIpG,EAAcE,SAAY,CAC7ByG,UAAW,sBACZP,OACIpG,EAAcG,gBAAmB,CACpCyG,QAAS,EACTD,UAAW"}
+{"version":3,"file":"videoplayer.js","sources":["../../../src/media-player/core/videoplayer.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from 'react'\r\nimport { Box, Stack, styled, SxProps, Theme, useMediaQuery, useTheme } from '@mui/material'\r\nimport { useVideoPlayerCore } from './useVideoPlayerCore'\r\nimport VideoProgressBar from './progressBar'\r\nimport PlayButton from './btn.play'\r\nimport BtnVolume from './btn.volume'\r\nimport BtnPIP from './btn.pip'\r\nimport FullscreenButton from './btn.fullscreen'\r\nimport MediaTime from './time'\r\n\r\nexport interface IControlsConfig {\r\n  autoPlay?: boolean\r\n  muted?: boolean\r\n  volume?: boolean\r\n  pip?: boolean\r\n  fullscreen?: boolean\r\n  preload?: 'auto' | 'metadata' | 'none'\r\n}\r\n\r\n// Giá trị mặc định cho MediaPlayerCore2Slots\r\nexport const defaultControlsConfig: IControlsConfig = {\r\n  autoPlay: false,\r\n  muted: false,\r\n  pip: false,\r\n  fullscreen: false,\r\n  volume: true,\r\n  preload: 'auto'\r\n}\r\n\r\nexport interface IVideoPlayerSlots {\r\n  controls?: IControlsConfig\r\n  anotherControls?: React.ReactNode\r\n  mediaMetadata?: MediaMetadata\r\n}\r\n\r\nexport interface IVideoPlayerProps extends IVideoPlayerSlots {\r\n  src?: string\r\n  sx?: SxProps<Theme>\r\n  className?: string\r\n  readonly?: boolean\r\n}\r\n\r\nconst VideoPlayerCore = forwardRef<HTMLVideoElement, IVideoPlayerProps>((props, ref) => {\r\n  const videoRef = useRef<HTMLVideoElement | null>(null)\r\n  const videoContainerRef = useRef<HTMLDivElement>(null)\r\n  const theme = useTheme()\r\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\r\n  const combinedRef = mergeRefs(videoRef, ref)\r\n  const { state, controls } = useVideoPlayerCore(videoRef, videoContainerRef)\r\n\r\n  function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {\r\n    return (value: T) => {\r\n      refs.forEach((ref) => {\r\n        if (!ref) return\r\n        if (typeof ref === 'function') {\r\n          ref(value)\r\n        } else {\r\n          ;(ref as React.MutableRefObject<T | null>).current = value\r\n        }\r\n      })\r\n    }\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (!('mediaSession' in navigator) || !props.mediaMetadata) return\r\n    const video = videoRef.current\r\n    if (!video) return\r\n    // Set metadata\r\n    navigator.mediaSession.metadata = new MediaMetadata({\r\n      title: props.mediaMetadata.title || 'Video',\r\n      artist: props.mediaMetadata.artist || 'Berlin Tomek',\r\n      album: props.mediaMetadata.album || 'Media Album',\r\n      artwork: props.mediaMetadata.artwork ? Array.from(props.mediaMetadata.artwork) : undefined\r\n    })\r\n    return () => {\r\n      navigator.mediaSession.setActionHandler('play', null)\r\n      navigator.mediaSession.setActionHandler('pause', null)\r\n      navigator.mediaSession.setActionHandler('seekbackward', null)\r\n      navigator.mediaSession.setActionHandler('seekforward', null)\r\n      navigator.mediaSession.setActionHandler('seekto', null)\r\n    }\r\n  }, [props.mediaMetadata])\r\n\r\n  const isReadOnly = props.readonly === true\r\n  useEffect(() => {\r\n    if (!isReadOnly) return\r\n    const v = videoRef.current\r\n    if (!v) return\r\n    // đảm bảo play (bỏ qua interaction)\r\n    v.play().catch(() => {\r\n      // nếu trình duyệt chặn autoplay, giữ im lặng\r\n    })\r\n  }, [isReadOnly])\r\n\r\n  const controlsConfig = { ...defaultControlsConfig, ...props.controls }\r\n\r\n  const getClasses = () => {\r\n    return [MPCoreClasses.root, props.className].filter((x) => !!x).join(' ')\r\n  }\r\n\r\n  return (\r\n    <RootStyled sx={props.sx} className={getClasses()} ref={videoContainerRef}>\r\n      <video\r\n        ref={combinedRef}\r\n        controls={false}\r\n        width='100%'\r\n        height='100%'\r\n        src={props.src}\r\n        autoPlay={controlsConfig.autoPlay}\r\n        muted={controlsConfig.muted}\r\n        preload={controlsConfig.preload}\r\n      />\r\n      <div className={MPCoreClasses.overlay} {...(!isReadOnly ? { onClick: controls.togglePlay } : {})} />\r\n      <div className={MPCoreClasses.control}>\r\n        <PlayButton hidden={isReadOnly} isPlaying={state.isPlaying} onClick={controls.togglePlay} />\r\n        <VideoProgressBar\r\n          hidden={isReadOnly}\r\n          bufferedSegments={state.bufferedSegments}\r\n          progress={state.progress}\r\n          isLoading={state.isLoading}\r\n          onChange={controls.handleSeek}\r\n        />\r\n        <MediaTime currentTime={state.currentTime} duration={state.duration} />\r\n        <BtnVolume\r\n          hidden={isReadOnly || isMobile || controlsConfig.muted || !controlsConfig.volume}\r\n          sliderPosition='right'\r\n          orientation='horizontal'\r\n          muted={state.muted}\r\n          volume={state.volume}\r\n          setVolume={controls.setVolume}\r\n          toggleMute={controls.toggleMute}\r\n        />\r\n        <Stack flexDirection='row' alignItems='center' gap={0}>\r\n          {props.anotherControls}\r\n          <BtnPIP hidden={isMobile || !controlsConfig.pip} onClick={controls.togglePIP} />\r\n          <FullscreenButton hidden={!controlsConfig.fullscreen} isFullscreen={state.isFullscreen} onClick={controls.toggleFullscreen} />\r\n        </Stack>\r\n      </div>\r\n      <div className={MPCoreClasses.controlCompact}>\r\n        <VideoProgressBar hidden={isReadOnly} bufferedSegments={state.bufferedSegments} progress={state.progress} isLoading={state.isLoading} />\r\n      </div>\r\n    </RootStyled>\r\n  )\r\n})\r\n\r\nexport default VideoPlayerCore\r\n\r\nconst MPCoreClasses = {\r\n  root: 'MediaPlayerCore-root',\r\n  control: 'MediaPlayerCore-control',\r\n  controlCompact: 'MediaPlayerCore-control-compact',\r\n  overlay: 'MediaPlayerCore-overlay',\r\n  playButton: 'MediaPlayerCore-play-button',\r\n  timer: 'MediaPlayerCore-timer',\r\n  progressBar: 'MediaPlayerCore-progress-bar',\r\n  loading: 'MediaPlayerCore-loading',\r\n  timeline: 'MediaPlayerCore-timeline',\r\n  bufferedSegments: 'MediaPlayerCore-buffered-segments'\r\n}\r\n\r\nconst classes = MPCoreClasses\r\n\r\nconst RootStyled = styled(Box)({\r\n  '--mp-core1-color-main': '#ed4229',\r\n  '--mp-core1-color-text': '#fff',\r\n  '--mp-core1-icon-size': '34px',\r\n  width: '640px',\r\n  height: '360px',\r\n  position: 'relative',\r\n  [`.${classes.control}`]: {\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'flex-end',\r\n    padding: '6px 8px',\r\n    gap: '8px',\r\n    zIndex: 3,\r\n    transition: '0.3s',\r\n    transform: 'translateY(100%)'\r\n  },\r\n  [`.${classes.controlCompact}`]: {\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    transition: '0.3s',\r\n    zIndex: 2,\r\n    opacity: 0.5\r\n  },\r\n  [`.${classes.overlay}`]: {\r\n    position: 'absolute',\r\n    bottom: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    zIndex: 1,\r\n    opacity: 0,\r\n    transition: '0.3s',\r\n    cursor: 'pointer',\r\n    background: 'linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 20%)'\r\n  },\r\n  [`.${classes.bufferedSegments}`]: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    height: '100%',\r\n    backgroundColor: 'rgba(255,255,255,0.4)',\r\n    pointerEvents: 'none'\r\n  },\r\n  '&:hover': {\r\n    [`.${classes.overlay}`]: { opacity: 1 },\r\n    [`.${classes.control}`]: { transform: 'translateY(0)' },\r\n    [`.${classes.controlCompact}`]: { opacity: 0, transform: 'translateY(110%)' }\r\n  }\r\n})\r\n"],"names":["defaultControlsConfig","autoPlay","muted","pip","fullscreen","volume","preload","VideoPlayerCore","forwardRef","props","ref","videoRef","useRef","videoContainerRef","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","combinedRef","_len","arguments","length","refs","Array","_key","value","forEach","current","mergeRefs","_useVideoPlayerCore","useVideoPlayerCore","state","controls","useEffect","navigator","mediaMetadata","mediaSession","metadata","MediaMetadata","title","artist","album","artwork","from","undefined","setActionHandler","isReadOnly","readonly","v","play","controlsConfig","_objectSpread","_jsxs","RootStyled","sx","className","MPCoreClasses","root","filter","x","join","children","_jsx","width","height","src","overlay","onClick","togglePlay","control","PlayButton","hidden","isPlaying","VideoProgressBar","bufferedSegments","progress","isLoading","onChange","handleSeek","MediaTime","currentTime","duration","BtnVolume","sliderPosition","orientation","setVolume","toggleMute","Stack","flexDirection","alignItems","gap","anotherControls","BtnPIP","togglePIP","FullscreenButton","isFullscreen","toggleFullscreen","controlCompact","classes","styled","Box","_defineProperty","position","concat","bottom","left","display","justifyContent","padding","zIndex","transition","transform","opacity","cursor","background","top","backgroundColor","pointerEvents"],"mappings":"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"}

package/dist/media-player/muted.js

@@ -1,2 +1,2 @@
-import{objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{styled as e,Box as t,Fade as a,Skeleton as l}from"@mui/material";import{useStreamUrl as n,getAspectRatioStyled as d}from"./helpers.js";import{EMediaPlayerStatus as s}from"./types.js";import m from"./core/videoplayer.js";var u=function(e){var t,u,h=n(e.resourceId,e.fetchDataStream),v=h.status,f=h.streamUrl;return r(p,{className:v===s.Loaded?"loaded":"",sx:d(null===(t=e.slots)||void 0===t?void 0:t.aspectRatio),children:[i(c,{children:f&&i(m,o({className:"player",src:f,anotherControls:!0,controls:{autoPlay:!0,muted:!0}},null===(u=e.slots)||void 0===u?void 0:u.coreProps))}),i(a,{in:v===s.Loading||e.loading,unmountOnExit:!0,children:i(c,{children:function(){var o,r,t;if(null!==(o=e.slots)&&void 0!==o&&o.loading)return e.slots.loading;var a=null!==(r=null===(t=e.slots)||void 0===t||null===(t=t.loadingProps)||void 0===t?void 0:t.animationDuration)&&void 0!==r?r:"1s";return i(l,{animation:"wave",variant:"rounded",sx:{width:"100%",height:"100%","&::after":{animationDuration:a}}})}()})}),i(a,{in:v===s.Error&&!e.loading,unmountOnExit:!0,children:i(c,{children:i("img",{src:"images/video-error.webp",alt:"video-error",style:{width:"100%",height:"100%"}})})})]})},p=e(t)({"--mp-core1-color-main":"#ed4229","--mp-core1-color-text":"#fff","--mp-core1-icon-size":"34px",position:"relative",paddingBottom:"56.25%",borderRadius:"6px",overflow:"hidden","&.loaded":{background:"#000"}}),c=e(t)({position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:2,".player":{width:"100%",height:"100%"}});export{u as MediaPlayerMuted,u as default};
+import{objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{styled as e,Box as t,Fade as l,Skeleton as a}from"@mui/material";import{EMediaPlayerStatus as n}from"./types.js";import{useStreamUrl as d,getAspectRatioStyled as s}from"./helpers.js";import u from"./core/videoplayer.js";var m=function(e){var t,m,v,h=d(e.resourceId,e.fetchDataStream),f=h.status,g=h.streamUrl;return r(c,{className:f===n.Loaded?"loaded":"",sx:s(null===(t=e.slots)||void 0===t?void 0:t.aspectRatio),children:[i(p,{children:g&&i(u,o(o({className:"player",src:g,anotherControls:!0},null===(m=e.slots)||void 0===m?void 0:m.coreProps),{},{controls:o({autoPlay:!0,muted:!0},null===(v=e.slots)||void 0===v||null===(v=v.coreProps)||void 0===v?void 0:v.controls)}))}),i(l,{in:f===n.Loading||e.loading,unmountOnExit:!0,children:i(p,{children:function(){var o,r,t;if(null!==(o=e.slots)&&void 0!==o&&o.loading)return e.slots.loading;var l=null!==(r=null===(t=e.slots)||void 0===t||null===(t=t.loadingProps)||void 0===t?void 0:t.animationDuration)&&void 0!==r?r:"1s";return i(a,{animation:"wave",variant:"rounded",sx:{width:"100%",height:"100%","&::after":{animationDuration:l}}})}()})}),i(l,{in:f===n.Error&&!e.loading,unmountOnExit:!0,children:i(p,{children:i("img",{src:"images/video-error.webp",alt:"video-error",style:{width:"100%",height:"100%"}})})})]})},c=e(t)({"--mp-core1-color-main":"#ed4229","--mp-core1-color-text":"#fff","--mp-core1-icon-size":"34px",position:"relative",paddingBottom:"56.25%",borderRadius:"6px",overflow:"hidden","&.loaded":{background:"#000"}}),p=e(t)({position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:2,".player":{width:"100%",height:"100%"}});export{m as MediaPlayerMuted,m as default};
 //# sourceMappingURL=muted.js.map

package/dist/media-player/muted.js.map

@@ -1 +1 @@
-{"version":3,"file":"muted.js","sources":["../../src/media-player/muted.tsx"],"sourcesContent":["import type { FC } from 'react'\r\nimport type { MediaPlayerBaseProps, MediaPlayerBaseSlots } from './types'\r\nimport { Box, Fade, Skeleton, styled } from '@mui/material'\r\nimport { getAspectRatioStyled, useStreamUrl } from './helpers'\r\nimport { EMediaPlayerStatus } from './types'\r\nimport MediaPlayerCore, { MediaPlayerSlot } from './core/videoplayer'\r\n\r\nexport interface SlotMediaPlayerMutedProps extends MediaPlayerBaseSlots {\r\n  coreProps?: MediaPlayerSlot\r\n}\r\nexport interface IMediaPlayerMutedProps extends MediaPlayerBaseProps {\r\n  slots?: SlotMediaPlayerMutedProps\r\n}\r\n\r\nexport const MediaPlayerMuted: FC<IMediaPlayerMutedProps> = (props) => {\r\n  const { status, streamUrl } = useStreamUrl(props.resourceId, props.fetchDataStream)\r\n\r\n  const renderLoading = () => {\r\n    if (props.slots?.loading) return props.slots.loading\r\n    const duration = props.slots?.loadingProps?.animationDuration ?? '1s'\r\n    return <Skeleton animation='wave' variant='rounded' sx={{ width: '100%', height: '100%', '&::after': { animationDuration: duration } }} />\r\n  }\r\n\r\n  return (\r\n    <WrapPlayer className={status === EMediaPlayerStatus.Loaded ? 'loaded' : ''} sx={getAspectRatioStyled(props.slots?.aspectRatio)}>\r\n      <WrapVideo>\r\n        {streamUrl && (\r\n          // <MediaPlayerCore1 className='player' src={streamUrl} slots={props.slots?.core1Props} />\r\n          <MediaPlayerCore\r\n            className='player'\r\n            src={streamUrl}\r\n            anotherControls\r\n            controls={{ autoPlay: true, muted: true }}\r\n            {...props.slots?.coreProps}\r\n          />\r\n        )}\r\n      </WrapVideo>\r\n      <Fade in={status === EMediaPlayerStatus.Loading || props.loading} unmountOnExit>\r\n        <WrapVideo>{renderLoading()}</WrapVideo>\r\n      </Fade>\r\n      <Fade in={status === EMediaPlayerStatus.Error && !props.loading} unmountOnExit>\r\n        <WrapVideo>\r\n          <img src='images/video-error.webp' alt='video-error' style={{ width: '100%', height: '100%' }} />\r\n        </WrapVideo>\r\n      </Fade>\r\n    </WrapPlayer>\r\n  )\r\n}\r\n\r\nexport default MediaPlayerMuted\r\n\r\nconst WrapPlayer = styled(Box)({\r\n  '--mp-core1-color-main': '#ed4229',\r\n  '--mp-core1-color-text': '#fff',\r\n  '--mp-core1-icon-size': '34px',\r\n  position: 'relative',\r\n  paddingBottom: '56.25%',\r\n  borderRadius: '6px',\r\n  overflow: 'hidden',\r\n  '&.loaded': {\r\n    background: '#000'\r\n  }\r\n})\r\n\r\nconst WrapVideo = styled(Box)({\r\n  position: 'absolute',\r\n  top: 0,\r\n  left: 0,\r\n  width: '100%',\r\n  height: '100%',\r\n  zIndex: 2,\r\n  '.player': {\r\n    width: '100%',\r\n    height: '100%'\r\n  }\r\n})\r\n"],"names":["MediaPlayerMuted","props","_props$slots3","_props$slots4","_useStreamUrl","useStreamUrl","resourceId","fetchDataStream","status","streamUrl","_jsxs","WrapPlayer","className","EMediaPlayerStatus","Loaded","sx","getAspectRatioStyled","slots","aspectRatio","children","_jsx","WrapVideo","MediaPlayerCore","_objectSpread","src","anotherControls","controls","autoPlay","muted","coreProps","Fade","in","Loading","loading","unmountOnExit","_props$slots","_props$slots$loadingP","_props$slots2","duration","loadingProps","animationDuration","Skeleton","animation","variant","width","height","renderLoading","Error","alt","style","styled","Box","position","paddingBottom","borderRadius","overflow","background","top","left","zIndex"],"mappings":"kWAcaA,EAA+C,SAACC,GAAS,IAAAC,EAAAC,EACpEC,EAA8BC,EAAaJ,EAAMK,WAAYL,EAAMM,iBAA3DC,EAAMJ,EAANI,OAAQC,EAASL,EAATK,UAQhB,OACEC,EAACC,EAAU,CAACC,UAAWJ,IAAWK,EAAmBC,OAAS,SAAW,GAAIC,GAAIC,EAAgC,QAAZd,EAACD,EAAMgB,aAAK,IAAAf,OAAA,EAAXA,EAAagB,aACjHC,SAAA,CAAAC,EAACC,EAAS,CAAAF,SACPV,GAECW,EAACE,EAAeC,EAAA,CACdX,UAAU,SACVY,IAAKf,EACLgB,mBACAC,SAAU,CAAEC,UAAU,EAAMC,OAAO,IACpBzB,QAD0BA,EACrCF,EAAMgB,aAANd,IAAWA,OAAXA,EAAAA,EAAa0B,cAIvBT,EAACU,EAAI,CAACC,GAAIvB,IAAWK,EAAmBmB,SAAW/B,EAAMgC,QAASC,eAAa,EAAAf,SAC7EC,EAACC,YArBe,WAAK,IAAAc,EAAAC,EAAAC,EACzB,WAAAF,EAAIlC,EAAMgB,aAAK,IAAAkB,GAAXA,EAAaF,QAAS,OAAOhC,EAAMgB,MAAMgB,QAC7C,IAAMK,EAAuD,QAA/CF,EAAc,QAAdC,EAAGpC,EAAMgB,aAAK,IAAAoB,GAAc,QAAdA,EAAXA,EAAaE,oBAAY,IAAAF,OAAA,EAAzBA,EAA2BG,yBAAiB,IAAAJ,EAAAA,EAAI,KACjE,OAAOhB,EAACqB,EAAS,CAAAC,UAAU,OAAOC,QAAQ,UAAU5B,GAAI,CAAE6B,MAAO,OAAQC,OAAQ,OAAQ,WAAY,CAAEL,kBAAmBF,KAC3H,CAiBiBQ,OAEd1B,EAACU,EAAI,CAACC,GAAIvB,IAAWK,EAAmBkC,QAAU9C,EAAMgC,QAASC,eAC/D,EAAAf,SAAAC,EAACC,EAAS,CAAAF,SACRC,SAAKI,IAAI,0BAA0BwB,IAAI,cAAcC,MAAO,CAAEL,MAAO,OAAQC,OAAQ,gBAK/F,EAIMlC,EAAauC,EAAOC,EAAPD,CAAY,CAC7B,wBAAyB,UACzB,wBAAyB,OACzB,uBAAwB,OACxBE,SAAU,WACVC,cAAe,SACfC,aAAc,MACdC,SAAU,SACV,WAAY,CACVC,WAAY,UAIVnC,EAAY6B,EAAOC,EAAPD,CAAY,CAC5BE,SAAU,WACVK,IAAK,EACLC,KAAM,EACNd,MAAO,OACPC,OAAQ,OACRc,OAAQ,EACR,UAAW,CACTf,MAAO,OACPC,OAAQ"}
+{"version":3,"file":"muted.js","sources":["../../src/media-player/muted.tsx"],"sourcesContent":["// imports\r\nimport { Box, Fade, Skeleton, styled } from '@mui/material'\r\nimport { EMediaPlayerStatus } from './types'\r\nimport { getAspectRatioStyled, useStreamUrl } from './helpers'\r\nimport VideoPlayerCore from './core/videoplayer'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IVideoPlayerProps } from './core/videoplayer'\r\nimport type { MediaPlayerBaseProps, MediaPlayerBaseSlots } from './types'\r\n\r\nexport interface SlotMediaPlayerMutedProps extends MediaPlayerBaseSlots {\r\n  coreProps?: IVideoPlayerProps\r\n}\r\n\r\nexport interface IMediaPlayerMutedProps extends MediaPlayerBaseProps {\r\n  slots?: SlotMediaPlayerMutedProps\r\n}\r\n\r\nexport const MediaPlayerMuted: FC<IMediaPlayerMutedProps> = (props) => {\r\n  const { status, streamUrl } = useStreamUrl(props.resourceId, props.fetchDataStream)\r\n\r\n  const renderLoading = () => {\r\n    if (props.slots?.loading) return props.slots.loading\r\n    const duration = props.slots?.loadingProps?.animationDuration ?? '1s'\r\n    return <Skeleton animation='wave' variant='rounded' sx={{ width: '100%', height: '100%', '&::after': { animationDuration: duration } }} />\r\n  }\r\n\r\n  return (\r\n    <WrapPlayer className={status === EMediaPlayerStatus.Loaded ? 'loaded' : ''} sx={getAspectRatioStyled(props.slots?.aspectRatio)}>\r\n      <WrapVideo>\r\n        {streamUrl && (\r\n          // <MediaPlayerCore1 className='player' src={streamUrl} slots={props.slots?.core1Props} />\r\n          <VideoPlayerCore\r\n            className='player'\r\n            src={streamUrl}\r\n            anotherControls\r\n            {...props.slots?.coreProps}\r\n            controls={{ autoPlay: true, muted: true, ...props.slots?.coreProps?.controls }}\r\n          />\r\n        )}\r\n      </WrapVideo>\r\n      <Fade in={status === EMediaPlayerStatus.Loading || props.loading} unmountOnExit>\r\n        <WrapVideo>{renderLoading()}</WrapVideo>\r\n      </Fade>\r\n      <Fade in={status === EMediaPlayerStatus.Error && !props.loading} unmountOnExit>\r\n        <WrapVideo>\r\n          <img src='images/video-error.webp' alt='video-error' style={{ width: '100%', height: '100%' }} />\r\n        </WrapVideo>\r\n      </Fade>\r\n    </WrapPlayer>\r\n  )\r\n}\r\n\r\nexport default MediaPlayerMuted\r\n\r\nconst WrapPlayer = styled(Box)({\r\n  '--mp-core1-color-main': '#ed4229',\r\n  '--mp-core1-color-text': '#fff',\r\n  '--mp-core1-icon-size': '34px',\r\n  position: 'relative',\r\n  paddingBottom: '56.25%',\r\n  borderRadius: '6px',\r\n  overflow: 'hidden',\r\n  '&.loaded': {\r\n    background: '#000'\r\n  }\r\n})\r\n\r\nconst WrapVideo = styled(Box)({\r\n  position: 'absolute',\r\n  top: 0,\r\n  left: 0,\r\n  width: '100%',\r\n  height: '100%',\r\n  zIndex: 2,\r\n  '.player': {\r\n    width: '100%',\r\n    height: '100%'\r\n  }\r\n})\r\n"],"names":["MediaPlayerMuted","props","_props$slots3","_props$slots4","_props$slots5","_useStreamUrl","useStreamUrl","resourceId","fetchDataStream","status","streamUrl","_jsxs","WrapPlayer","className","EMediaPlayerStatus","Loaded","sx","getAspectRatioStyled","slots","aspectRatio","children","_jsx","WrapVideo","VideoPlayerCore","_objectSpread","src","anotherControls","coreProps","controls","autoPlay","muted","Fade","in","Loading","loading","unmountOnExit","_props$slots","_props$slots$loadingP","_props$slots2","duration","loadingProps","animationDuration","Skeleton","animation","variant","width","height","renderLoading","Error","alt","style","styled","Box","position","paddingBottom","borderRadius","overflow","background","top","left","zIndex"],"mappings":"kWAkBaA,EAA+C,SAACC,GAAS,IAAAC,EAAAC,EAAAC,EACpEC,EAA8BC,EAAaL,EAAMM,WAAYN,EAAMO,iBAA3DC,EAAMJ,EAANI,OAAQC,EAASL,EAATK,UAQhB,OACEC,EAACC,EAAU,CAACC,UAAWJ,IAAWK,EAAmBC,OAAS,SAAW,GAAIC,GAAIC,EAAgC,QAAZf,EAACD,EAAMiB,aAAK,IAAAhB,OAAA,EAAXA,EAAaiB,aACjHC,SAAA,CAAAC,EAACC,EAAS,CAAAF,SACPV,GAECW,EAACE,EAAeC,EAAAA,EAAA,CACdX,UAAU,SACVY,IAAKf,EACLgB,iBAAe,WAAAvB,EACXF,EAAMiB,aAAK,IAAAf,OAAA,EAAXA,EAAawB,WAAS,CAAA,EAAA,CAC1BC,SAAQJ,EAAA,CAAIK,UAAU,EAAMC,OAAO,GAAoB,QAAhB1B,EAAKH,EAAMiB,aAAKd,IAAAA,GAAW,QAAXA,EAAXA,EAAauB,iBAAbvB,IAAsBA,OAAtBA,EAAAA,EAAwBwB,eAI1EP,EAACU,EAAK,CAAAC,GAAIvB,IAAWK,EAAmBmB,SAAWhC,EAAMiC,QAASC,eAAa,EAAAf,SAC7EC,EAACC,EAAW,CAAAF,SArBI,WAAK,IAAAgB,EAAAC,EAAAC,EACzB,WAAAF,EAAInC,EAAMiB,aAAK,IAAAkB,GAAXA,EAAaF,QAAS,OAAOjC,EAAMiB,MAAMgB,QAC7C,IAAMK,EAAuD,QAA/CF,EAAc,QAAdC,EAAGrC,EAAMiB,aAAK,IAAAoB,GAAc,QAAdA,EAAXA,EAAaE,oBAAY,IAAAF,OAAA,EAAzBA,EAA2BG,yBAAiB,IAAAJ,EAAAA,EAAI,KACjE,OAAOhB,EAACqB,EAAS,CAAAC,UAAU,OAAOC,QAAQ,UAAU5B,GAAI,CAAE6B,MAAO,OAAQC,OAAQ,OAAQ,WAAY,CAAEL,kBAAmBF,KAC3H,CAiBiBQ,OAEd1B,EAACU,EAAI,CAACC,GAAIvB,IAAWK,EAAmBkC,QAAU/C,EAAMiC,QAASC,eAAa,EAAAf,SAC5EC,EAACC,EAAS,CAAAF,SACRC,EAAK,MAAA,CAAAI,IAAI,0BAA0BwB,IAAI,cAAcC,MAAO,CAAEL,MAAO,OAAQC,OAAQ,gBAK/F,EAIMlC,EAAauC,EAAOC,EAAPD,CAAY,CAC7B,wBAAyB,UACzB,wBAAyB,OACzB,uBAAwB,OACxBE,SAAU,WACVC,cAAe,SACfC,aAAc,MACdC,SAAU,SACV,WAAY,CACVC,WAAY,UAIVnC,EAAY6B,EAAOC,EAAPD,CAAY,CAC5BE,SAAU,WACVK,IAAK,EACLC,KAAM,EACNd,MAAO,OACPC,OAAQ,OACRc,OAAQ,EACR,UAAW,CACTf,MAAO,OACPC,OAAQ"}

package/dist/media-player/player.video-stream.js.map

@@ -1 +1 @@
-{"version":3,"file":"player.video-stream.js","sources":["../../src/media-player/player.video-stream.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\r\nimport { Box, Fade, Skeleton, styled } from '@mui/material'\r\nimport { useStreamUrl } from './helpers'\r\nimport MediaPlayerCore, { MediaPlayerSlot } from './core/videoplayer'\r\nimport { EMediaPlayerStatus } from './types'\r\nimport type { MediaPlayerBaseProps, MediaPlayerBaseSlots } from './types'\r\n\r\nexport interface MediaPlayerSlotsProps extends MediaPlayerBaseSlots {\r\n  disabledBackground?: boolean\r\n  keepTabActive?: boolean\r\n}\r\n\r\ninterface IProps extends MediaPlayerBaseProps {\r\n  slots?: MediaPlayerSlotsProps\r\n  slotMedia?: MediaPlayerSlot\r\n  mediaMetadata?: MediaMetadata\r\n}\r\n\r\nconst mediaPlayerClasses = {\r\n  disabledLoading: 'disabled-loading',\r\n  disabledBackground: 'disabled-background'\r\n}\r\n\r\nconst MediaPlayerVideo = React.forwardRef<HTMLVideoElement, IProps>((props, ref) => {\r\n  const { status, streamUrl } = useStreamUrl(props.resourceId, props.fetchDataStream)\r\n\r\n  useEffect(() => {\r\n    const keepActive = () => requestAnimationFrame(keepActive)\r\n    const rafId = requestAnimationFrame(keepActive)\r\n    return () => cancelAnimationFrame(rafId)\r\n  }, [])\r\n\r\n  const renderLoading = () => {\r\n    if (props.slots?.loading) return props.slots.loading\r\n    const duration = props.slots?.loadingProps?.animationDuration ?? '1s'\r\n    return <Skeleton animation='wave' variant='rounded' sx={{ width: '100%', height: '100%', '&::after': { animationDuration: duration } }} />\r\n  }\r\n\r\n  const getClasses = (): string | undefined => {\r\n    const classes: string[] = []\r\n    if (props.slots?.loadingProps?.disabled) classes.push(mediaPlayerClasses.disabledLoading)\r\n    if (props.slots?.disabledBackground) classes.push(mediaPlayerClasses.disabledBackground)\r\n    if (status !== EMediaPlayerStatus.Loading && !props.loading && streamUrl) {\r\n      classes.push('loaded')\r\n    }\r\n    return classes.length > 0 ? classes.join(' ') : undefined\r\n  }\r\n\r\n  return (\r\n    <WrapPlayer className={getClasses()}>\r\n      <WrapVideo sx={{ zIndex: 3 }}>\r\n        {streamUrl && (\r\n          <MediaPlayerCore\r\n            ref={ref}\r\n            className='player'\r\n            src={streamUrl}\r\n            mediaMetadata={props.mediaMetadata}\r\n            {...props.slotMedia}\r\n            controls={props.slotMedia?.controls}\r\n          />\r\n        )}\r\n      </WrapVideo>\r\n      <Fade in={(status === EMediaPlayerStatus.Loading || props.loading) && props.slots?.loadingProps?.disabled !== true}>\r\n        <WrapVideo>{renderLoading()}</WrapVideo>\r\n      </Fade>\r\n      <Fade in={status === EMediaPlayerStatus.Error && !props.loading} unmountOnExit>\r\n        <WrapVideo>\r\n          <img src='images/video-error.webp' alt='video-error' style={{ width: '100%', height: '100%' }} />\r\n        </WrapVideo>\r\n      </Fade>\r\n    </WrapPlayer>\r\n  )\r\n})\r\n\r\nexport default React.memo(MediaPlayerVideo)\r\n\r\nconst WrapPlayer = styled(Box)({\r\n  '--mp-core1-color-main': '#ed4229',\r\n  '--mp-core1-color-text': '#fff',\r\n  '--mp-core1-icon-size': '34px',\r\n  position: 'relative',\r\n  aspectRatio: '16/9',\r\n  borderRadius: '6px',\r\n  overflow: 'hidden',\r\n  '&.loaded': {\r\n    background: '#000',\r\n    boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px'\r\n  },\r\n  [`&.${mediaPlayerClasses.disabledBackground}`]: {\r\n    background: 'unset'\r\n  }\r\n})\r\n\r\nconst WrapVideo = styled(Box)({\r\n  '--plyr-color-main': '#ed4229',\r\n  position: 'absolute',\r\n  top: 0,\r\n  left: 0,\r\n  width: '100%',\r\n  height: '100%',\r\n  zIndex: 2,\r\n  '.MPCore1-root': {\r\n    width: '100%',\r\n    height: '100%'\r\n  }\r\n})\r\n"],"names":["styled","Box","_defineProperty","position","aspectRatio","borderRadius","overflow","background","boxShadow","concat","top","left","width","height","zIndex"],"mappings":"mNA4EmBA,EAAOC,EAAPD,CAAWE,EAAA,CAC5B,wBAAyB,UACzB,wBAAyB,OACzB,uBAAwB,OACxBC,SAAU,WACVC,YAAa,OACbC,aAAc,MACdC,SAAU,SACV,WAAY,CACVC,WAAY,OACZC,UAAW,oCACZ,KAAAC,OAnEmB,uBAoE4B,CAC9CF,WAAY,WAIEP,EAAOC,EAAPD,CAAY,CAC5B,oBAAqB,UACrBG,SAAU,WACVO,IAAK,EACLC,KAAM,EACNC,MAAO,OACPC,OAAQ,OACRC,OAAQ,EACR,gBAAiB,CACfF,MAAO,OACPC,OAAQ"}
+{"version":3,"file":"player.video-stream.js","sources":["../../src/media-player/player.video-stream.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\r\nimport { Box, Fade, Skeleton, styled } from '@mui/material'\r\nimport { useStreamUrl } from './helpers'\r\nimport VideoPlayerCore, { IVideoPlayerSlots } from './core/videoplayer'\r\nimport { EMediaPlayerStatus } from './types'\r\nimport type { MediaPlayerBaseProps, MediaPlayerBaseSlots } from './types'\r\n\r\nexport interface MediaPlayerSlotsProps extends MediaPlayerBaseSlots {\r\n  disabledBackground?: boolean\r\n  keepTabActive?: boolean\r\n}\r\n\r\ninterface IProps extends MediaPlayerBaseProps {\r\n  slots?: MediaPlayerSlotsProps\r\n  slotMedia?: IVideoPlayerSlots\r\n  mediaMetadata?: MediaMetadata\r\n}\r\n\r\nconst mediaPlayerClasses = {\r\n  disabledLoading: 'disabled-loading',\r\n  disabledBackground: 'disabled-background'\r\n}\r\n\r\nconst MediaPlayerVideo = React.forwardRef<HTMLVideoElement, IProps>((props, ref) => {\r\n  const { status, streamUrl } = useStreamUrl(props.resourceId, props.fetchDataStream)\r\n\r\n  useEffect(() => {\r\n    const keepActive = () => requestAnimationFrame(keepActive)\r\n    const rafId = requestAnimationFrame(keepActive)\r\n    return () => cancelAnimationFrame(rafId)\r\n  }, [])\r\n\r\n  const renderLoading = () => {\r\n    if (props.slots?.loading) return props.slots.loading\r\n    const duration = props.slots?.loadingProps?.animationDuration ?? '1s'\r\n    return <Skeleton animation='wave' variant='rounded' sx={{ width: '100%', height: '100%', '&::after': { animationDuration: duration } }} />\r\n  }\r\n\r\n  const getClasses = (): string | undefined => {\r\n    const classes: string[] = []\r\n    if (props.slots?.loadingProps?.disabled) classes.push(mediaPlayerClasses.disabledLoading)\r\n    if (props.slots?.disabledBackground) classes.push(mediaPlayerClasses.disabledBackground)\r\n    if (status !== EMediaPlayerStatus.Loading && !props.loading && streamUrl) {\r\n      classes.push('loaded')\r\n    }\r\n    return classes.length > 0 ? classes.join(' ') : undefined\r\n  }\r\n\r\n  return (\r\n    <WrapPlayer className={getClasses()}>\r\n      <WrapVideo sx={{ zIndex: 3 }}>\r\n        {streamUrl && (\r\n          <VideoPlayerCore\r\n            ref={ref}\r\n            className='player'\r\n            src={streamUrl}\r\n            mediaMetadata={props.mediaMetadata}\r\n            {...props.slotMedia}\r\n            controls={props.slotMedia?.controls}\r\n          />\r\n        )}\r\n      </WrapVideo>\r\n      <Fade in={(status === EMediaPlayerStatus.Loading || props.loading) && props.slots?.loadingProps?.disabled !== true}>\r\n        <WrapVideo>{renderLoading()}</WrapVideo>\r\n      </Fade>\r\n      <Fade in={status === EMediaPlayerStatus.Error && !props.loading} unmountOnExit>\r\n        <WrapVideo>\r\n          <img src='images/video-error.webp' alt='video-error' style={{ width: '100%', height: '100%' }} />\r\n        </WrapVideo>\r\n      </Fade>\r\n    </WrapPlayer>\r\n  )\r\n})\r\n\r\nexport default React.memo(MediaPlayerVideo)\r\n\r\nconst WrapPlayer = styled(Box)({\r\n  '--mp-core1-color-main': '#ed4229',\r\n  '--mp-core1-color-text': '#fff',\r\n  '--mp-core1-icon-size': '34px',\r\n  position: 'relative',\r\n  aspectRatio: '16/9',\r\n  borderRadius: '6px',\r\n  overflow: 'hidden',\r\n  '&.loaded': {\r\n    background: '#000',\r\n    boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px'\r\n  },\r\n  [`&.${mediaPlayerClasses.disabledBackground}`]: {\r\n    background: 'unset'\r\n  }\r\n})\r\n\r\nconst WrapVideo = styled(Box)({\r\n  '--plyr-color-main': '#ed4229',\r\n  position: 'absolute',\r\n  top: 0,\r\n  left: 0,\r\n  width: '100%',\r\n  height: '100%',\r\n  zIndex: 2,\r\n  '.MPCore1-root': {\r\n    width: '100%',\r\n    height: '100%'\r\n  }\r\n})\r\n"],"names":["styled","Box","_defineProperty","position","aspectRatio","borderRadius","overflow","background","boxShadow","concat","top","left","width","height","zIndex"],"mappings":"mNA4EmBA,EAAOC,EAAPD,CAAWE,EAAA,CAC5B,wBAAyB,UACzB,wBAAyB,OACzB,uBAAwB,OACxBC,SAAU,WACVC,YAAa,OACbC,aAAc,MACdC,SAAU,SACV,WAAY,CACVC,WAAY,OACZC,UAAW,oCACZ,KAAAC,OAnEmB,uBAoE4B,CAC9CF,WAAY,WAIEP,EAAOC,EAAPD,CAAY,CAC5B,oBAAqB,UACrBG,SAAU,WACVO,IAAK,EACLC,KAAM,EACNC,MAAO,OACPC,OAAQ,OACRC,OAAQ,EACR,gBAAiB,CACfF,MAAO,OACPC,OAAQ"}

package/dist/media-right/configs.js

@@ -1,2 +1,2 @@
-var _={MAX_ITEMS_PER_GROUP:100,MAX_GROUP:5,MAX_NAME_GROUP:50,MAX_CHANNELS:20};export{_ as mediaRightStoreOptions};
+var _={MAX_ITEMS_PER_GROUP:100,MAX_GROUP:5,MAX_NAME_GROUP:50,MAX_CHANNELS:20};export{_ as mediaRightDefaultOptions};
 //# sourceMappingURL=configs.js.map

package/dist/media-right/configs.js.map

@@ -1 +1 @@
-{"version":3,"file":"configs.js","sources":["../../src/media-right/configs.ts"],"sourcesContent":["export const mediaRightStoreOptions = {\r\n  MAX_ITEMS_PER_GROUP: 100,\r\n  MAX_GROUP: 5,\r\n  MAX_NAME_GROUP: 50,\r\n  MAX_CHANNELS: 20\r\n  // CHANNEL_TYPES: ['Youtube']\r\n}\r\n"],"names":["mediaRightStoreOptions","MAX_ITEMS_PER_GROUP","MAX_GROUP","MAX_NAME_GROUP","MAX_CHANNELS"],"mappings":"AAAO,IAAMA,EAAyB,CACpCC,oBAAqB,IACrBC,UAAW,EACXC,eAAgB,GAChBC,aAAc"}
+{"version":3,"file":"configs.js","sources":["../../src/media-right/configs.ts"],"sourcesContent":["export const mediaRightDefaultOptions = {\r\n  MAX_ITEMS_PER_GROUP: 100,\r\n  MAX_GROUP: 5,\r\n  MAX_NAME_GROUP: 50,\r\n  MAX_CHANNELS: 20\r\n  // CHANNEL_TYPES: ['Youtube']\r\n}\r\n"],"names":["mediaRightDefaultOptions","MAX_ITEMS_PER_GROUP","MAX_GROUP","MAX_NAME_GROUP","MAX_CHANNELS"],"mappings":"AAAO,IAAMA,EAA2B,CACtCC,oBAAqB,IACrBC,UAAW,EACXC,eAAgB,GAChBC,aAAc"}

package/dist/media-right/group-selector/index.js

@@ -1,2 +1,2 @@
-import{slicedToArray as r,toConsumableArray as t,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as o,jsx as n}from"react/jsx-runtime";import{createRoot as i}from"react-dom/client";import{useMemo as u,useState as l,useEffect as c}from"react";import{Dialog as d,Box as a,DialogContent as m,Typography as s,DialogActions as f,Button as p}from"@mui/material";import{CollectionsList as h}from"./units.js";import{GuideSteps as v}from"../guide-steps/index.js";import{ModalHeader as g}from"./modal-header.js";import{canAddGroup as C,generateGroupId as b}from"../helpers.js";import{NewCollectionButton as I,NewCollectionInput as x}from"../unit.control.js";var P=function(i){var b=i.open,P=i.onClose,y=i.onConfirm,S=i.groups,j=i.guideStepsProps,G=i.cartItem,k=u(function(){return null!=G&&G.ProductId?S.filter(function(r){var t;return null===(t=r.items)||void 0===t?void 0:t.some(function(r){return r.ProductId===G.ProductId})}).map(function(r){return r.id}).sort():[]},[S,G]),W=k.length>0?k:S.length>0?[S[0].id]:[],A=l(W),E=r(A,2),B=E[0],_=E[1],D=l(!1),H=r(D,2),K=H[0],L=H[1],M=l(""),O=r(M,2),T=O[0],Y=O[1];c(function(){if(b){var r=k.length>0?k:S.length>0?[S[0].id]:[];_(r),L(!1),Y("")}},[b,k,S.length]);var q=u(function(){if(K&&T.trim())return!0;var r=t(B).sort();return k.length!==r.length||k.some(function(t,e){return t!==r[e]})},[K,T,B,k]),w=function(){_([]),L(!1),Y(""),P()};return o(d,{open:b,onClose:w,maxWidth:"xs",fullWidth:!0,disableScrollLock:!0,keepMounted:!1,scroll:"paper",children:[n(g,{cartItem:G,onClose:w}),o(a,{component:"form",onSubmit:function(r){if(r.preventDefault(),q)if(K&&T.trim())y([],[],T.trim());else{var t=B.filter(function(r){return!k.includes(r)}),e=k.filter(function(r){return!B.includes(r)});y(t,e)}else w()},children:[o(m,{children:[n(s,{variant:"subtitle1",sx:{mb:1,fontWeight:600},children:"Your Playlist"}),C(S)&&(K?n(x,{value:T,onChange:Y}):n(I,{onClick:function(){L(!0)}})),n(h,{groups:S,selectedGroupIds:B,onGroupSelect:function(r){_(function(e){return e.includes(r)?e.filter(function(t){return t!==r}):[].concat(t(e),[r])}),L(!1)}})]}),o(f,{sx:{px:3,pb:3},children:[j&&n(v,e({iconButtonProps:{color:"primary",sx:{mr:"auto"}}},j)),n(p,{onClick:w,variant:"text",type:"button",color:"inherit",children:"Cancel"}),n(p,{type:"submit",variant:q?"contained":"outlined",disabled:!!K&&!T.trim(),color:"primary",sx:{minWidth:100},children:K?"Create & Add":k.length>0?q?"Save Changes":"OK":"Save"})]})]})]})},y=function(r){var t=r.cartItem,o=r.groups,u=r.guideStepsProps,l=r.addGroup,c=r.addItem,d=r.removeItem,a=document.createElement("div");document.body.appendChild(a);var m=i(a);m.render(n(P,{open:!0,onClose:function(){m.unmount(),document.body.removeChild(a)},onConfirm:function(r,o,n){if(t){if(n){var i=b();l({id:i,name:n});var u=e(e({},t),{},{GroupId:i});c(u)}else o.forEach(function(r){t.ProductId&&d(r,t.ProductId)}),r.forEach(function(r){var o=e(e({},t),{},{GroupId:r});c(o)});m.unmount(),document.body.removeChild(a)}},guideStepsProps:u,groups:o,cartItem:t}))};export{P as GroupSelectorModal,y as showGroupSelectorModal};
+import{slicedToArray as r,toConsumableArray as t,objectSpread2 as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as o,jsx as n}from"react/jsx-runtime";import{useMemo as i,useState as u}from"react";import{Dialog as a,Box as l,Alert as c,DialogContent as s,Typography as m,DialogActions as d,Button as p}from"@mui/material";import{CollectionsList as f}from"./units.js";import{GuideSteps as h}from"../guide-steps/index.js";import{ModalHeader as v}from"./modal-header.js";import{NewCollectionButton as g,NewCollectionInput as x}from"../unit.control.js";import{useMediaRightStore as I,useMediaRightActions as P}from"../hooks.js";var b=function(b){var y=b.open,C=b.onClose,G=b.guideStepsProps,j=b.cartItem,S=I(),k=S.groups,E=S.options,W=P(),A=i(function(){return null!=j&&j.ProductId?k.filter(function(r){var t;return(null===(t=r.items)||void 0===t?void 0:t.some(function(r){return r.ProductId===j.ProductId}))||r.items.length<E.maxItemsPerGroup}).map(function(r){return r.id}):[]},[k,j,E.maxItemsPerGroup]),B=i(function(){return null!=j&&j.ProductId?k.filter(function(r){var t;return null===(t=r.items)||void 0===t?void 0:t.some(function(r){return r.ProductId===j.ProductId})}).map(function(r){return r.id}).sort():[]},[k,j]),D=B.length>0?B:A.length>0?[A[0]]:[],L=u(D),M=r(L,2),_=M[0],F=M[1],H=u(!1),K=r(H,2),N=K[0],O=K[1],T=u(""),Y=r(T,2),q=Y[0],w=Y[1],z=u(""),J=r(z,2),Q=J[0],R=J[1],U=i(function(){if(N&&q.trim())return!0;var r=t(_).sort();return B.length!==r.length||B.some(function(t,e){return t!==r[e]})},[N,q,_,B]),V=function(){F([]),O(!1),w(""),R(""),C()};return o(a,{open:y,onClose:V,maxWidth:"xs",fullWidth:!0,disableScrollLock:!0,keepMounted:!1,scroll:"paper",children:[n(v,{cartItem:j,onClose:V}),o(l,{component:"form",onSubmit:function(r){if(r.preventDefault(),j)if(U)try{if(N&&q.trim()){var t=W.addGroup({name:q.trim()}),o=e(e({},j),{},{GroupId:t.id});W.addItem(o)}else{var n=_.filter(function(r){return!B.includes(r)});B.filter(function(r){return!_.includes(r)}).forEach(function(r){j.ProductId&&W.removeItem(r,j.ProductId)}),n.forEach(function(r){var t=e(e({},j),{},{GroupId:r});W.addItem(t)})}V()}catch(r){console.error("Error saving group changes8678888:",r),R(r instanceof Error?r.message:"Failed to save changes. Please try again.")}else V()},children:[Q&&n(c,{onClose:function(){return R("")},severity:"error",sx:{m:1},children:Q}),o(s,{sx:{py:0},children:[n(m,{variant:"subtitle1",sx:{mb:1,fontWeight:600},children:"Your Playlist"}),k.length<E.maxGroup&&(N?n(x,{value:q,onChange:w,inputProps:{maxLength:E.maxNameGroup}}):n(g,{onClick:function(){O(!0)}})),n(f,{groups:k,selectedGroupIds:_,activeGroupIds:A,onGroupSelect:function(r){F(function(e){return e.includes(r)?e.filter(function(t){return t!==r}):[].concat(t(e),[r])}),O(!1)},tooltipDisabled:"Maximum items per playlist (".concat(E.maxItemsPerGroup," items)")})]}),o(d,{sx:{px:3,pb:3},children:[G&&n(h,e({iconButtonProps:{color:"primary",sx:{mr:"auto"}}},G)),n(p,{onClick:V,variant:"text",type:"button",color:"inherit",children:"Cancel"}),n(p,{type:"submit",variant:U?"contained":"outlined",disabled:!!N&&!q.trim(),color:"primary",sx:{minWidth:100},children:N?"Create & Add":B.length>0?U?"Save Changes":"OK":"Save"})]})]})]})};export{b as ModalAddMediaRight};
 //# sourceMappingURL=index.js.map

package/dist/media-right/group-selector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/media-right/group-selector/index.tsx"],"sourcesContent":["import { createRoot } from 'react-dom/client'\r\nimport { useState, useEffect, useMemo } from 'react'\r\nimport { Dialog, DialogContent, DialogActions, Button, Typography, Box } from '@mui/material'\r\nimport type { FC, FormEvent } from 'react'\r\nimport { CollectionsList } from './units'\r\nimport { GuideSteps } from '../guide-steps'\r\nimport { ModalHeader } from './modal-header'\r\nimport { canAddGroup, generateGroupId } from '../helpers'\r\nimport { NewCollectionButton, NewCollectionInput } from '../unit.control'\r\nimport type { IGuideStepsProps } from '../guide-steps'\r\nimport type { IMediaRightGroup, IMediaRightItem } from '../types'\r\n\r\nexport interface IGroupSelectorModalProps {\r\n  open: boolean\r\n  guideStepsProps?: IGuideStepsProps\r\n  onClose: () => void\r\n  onConfirm: (groupIdsToAdd: string[], groupIdsToRemove: string[], newGroupName?: string) => void\r\n  groups: IMediaRightGroup[]\r\n  cartItem: IMediaRightItem | null\r\n}\r\n\r\nexport const GroupSelectorModal: FC<IGroupSelectorModalProps> = ({ open, onClose, onConfirm, groups, guideStepsProps, cartItem }) => {\r\n  // Find all groups that contain this item\r\n  const currentGroupIds = useMemo(() => {\r\n    if (!cartItem?.ProductId) return []\r\n    const l = groups.filter((g) => g.items?.some((item) => item.ProductId === cartItem.ProductId))\r\n    return l.map((g) => g.id).sort()\r\n  }, [groups, cartItem])\r\n\r\n  // Auto-select: all current groups if exists, otherwise first group if available\r\n  const initialGroupIds = currentGroupIds.length > 0 ? currentGroupIds : groups.length > 0 ? [groups[0].id] : []\r\n\r\n  const [selectedGroupIds, setSelectedGroupIds] = useState<string[]>(initialGroupIds)\r\n  const [showNewGroupInput, setShowNewGroupInput] = useState(false)\r\n  const [newName, setNewName] = useState<string>('')\r\n\r\n  // Update selection when modal opens or groups/cartItem changes\r\n  useEffect(() => {\r\n    if (open) {\r\n      const newInitialGroupIds = currentGroupIds.length > 0 ? currentGroupIds : groups.length > 0 ? [groups[0].id] : []\r\n      setSelectedGroupIds(newInitialGroupIds)\r\n      setShowNewGroupInput(false)\r\n      setNewName('')\r\n    }\r\n  }, [open, currentGroupIds, groups.length])\r\n\r\n  // Check if there's any change\r\n  // const hasChanges = () => {\r\n  //   if (showNewGroupInput && newName.trim()) return true\r\n\r\n  //   // Sort and compare arrays (currentGroupIds is already sorted)\r\n  //   const sortedSelected = [...selectedGroupIds].sort()\r\n\r\n  //   // Check if arrays are different\r\n  //   if (currentGroupIds.length !== sortedSelected.length) return true\r\n\r\n  //   return currentGroupIds.some((id, index) => id !== sortedSelected[index])\r\n  // }\r\n\r\n  const isChanged = useMemo(() => {\r\n    if (showNewGroupInput && newName.trim()) return true\r\n\r\n    // Sort and compare arrays (currentGroupIds is already sorted)\r\n    const sortedSelected = [...selectedGroupIds].sort()\r\n\r\n    // Check if arrays are different\r\n    if (currentGroupIds.length !== sortedSelected.length) return true\r\n    return currentGroupIds.some((id, index) => id !== sortedSelected[index])\r\n  }, [showNewGroupInput, newName, selectedGroupIds, currentGroupIds])\r\n\r\n  const handleSubmit = (e: FormEvent) => {\r\n    e.preventDefault()\r\n\r\n    // Only proceed if there are changes\r\n    if (!isChanged) {\r\n      handleClose()\r\n      return\r\n    }\r\n\r\n    if (showNewGroupInput && newName.trim()) {\r\n      // Create new group and add item to it\r\n      onConfirm([], [], newName.trim())\r\n    } else {\r\n      // Calculate changes\r\n      const groupIdsToAdd = selectedGroupIds.filter((id) => !currentGroupIds.includes(id))\r\n      const groupIdsToRemove = currentGroupIds.filter((id) => !selectedGroupIds.includes(id))\r\n      onConfirm(groupIdsToAdd, groupIdsToRemove)\r\n    }\r\n  }\r\n\r\n  const handleClose = () => {\r\n    setSelectedGroupIds([])\r\n    setShowNewGroupInput(false)\r\n    setNewName('')\r\n    onClose()\r\n  }\r\n\r\n  const handleNewGroupClick = () => {\r\n    setShowNewGroupInput(true)\r\n  }\r\n\r\n  const handleGroupSelect = (groupId: string) => {\r\n    setSelectedGroupIds((prev) => {\r\n      if (prev.includes(groupId)) {\r\n        // Uncheck: remove from selection\r\n        return prev.filter((id) => id !== groupId)\r\n      } else {\r\n        // Check: add to selection\r\n        return [...prev, groupId]\r\n      }\r\n    })\r\n    setShowNewGroupInput(false)\r\n  }\r\n\r\n  const isConfirmDisabled = () => {\r\n    if (showNewGroupInput) return !newName.trim()\r\n    // Allow unchecking all groups (to remove item from all groups)\r\n    return false\r\n  }\r\n\r\n  const getButtonText = () => {\r\n    if (showNewGroupInput) return 'Create & Add'\r\n\r\n    // Case 1: Item already exists in some groups\r\n    if (currentGroupIds.length > 0) {\r\n      return isChanged ? 'Save Changes' : 'OK'\r\n    }\r\n\r\n    // Case 2: Item doesn't exist in any group yet\r\n    return 'Save'\r\n  }\r\n\r\n  return (\r\n    <Dialog open={open} onClose={handleClose} maxWidth='xs' fullWidth disableScrollLock={true} keepMounted={false} scroll='paper'>\r\n      <ModalHeader cartItem={cartItem} onClose={handleClose} />\r\n      <Box component='form' onSubmit={handleSubmit}>\r\n        <DialogContent>\r\n          <Typography variant='subtitle1' sx={{ mb: 1, fontWeight: 600 }}>\r\n            Your Playlist\r\n          </Typography>\r\n          {canAddGroup(groups) &&\r\n            (!showNewGroupInput ? (\r\n              <NewCollectionButton onClick={handleNewGroupClick} />\r\n            ) : (\r\n              <NewCollectionInput value={newName} onChange={setNewName} />\r\n            ))}\r\n          <CollectionsList groups={groups} selectedGroupIds={selectedGroupIds} onGroupSelect={handleGroupSelect} />\r\n        </DialogContent>\r\n\r\n        <DialogActions sx={{ px: 3, pb: 3 }}>\r\n          {guideStepsProps && <GuideSteps iconButtonProps={{ color: 'primary', sx: { mr: 'auto' } }} {...guideStepsProps} />}\r\n          <Button onClick={handleClose} variant='text' type='button' color='inherit'>\r\n            Cancel\r\n          </Button>\r\n          <Button type='submit' variant={isChanged ? 'contained' : 'outlined'} disabled={isConfirmDisabled()} color='primary' sx={{ minWidth: 100 }}>\r\n            {getButtonText()}\r\n          </Button>\r\n        </DialogActions>\r\n      </Box>\r\n    </Dialog>\r\n  )\r\n}\r\n\r\nexport interface IShowGroupSelectorModalProps {\r\n  cartItem: IMediaRightItem | null\r\n  groups: IMediaRightGroup[]\r\n  guideStepsProps?: IGuideStepsProps\r\n  addGroup: (group: Omit<IMediaRightGroup, 'createdAt' | 'items' | 'channels'>) => void\r\n  addItem: (item: IMediaRightItem) => void\r\n  removeItem: (groupId: string, productId: string) => void\r\n}\r\n\r\nexport const showGroupSelectorModal = ({ cartItem, groups, guideStepsProps, addGroup, addItem, removeItem }: IShowGroupSelectorModalProps) => {\r\n  const modalContainer = document.createElement('div')\r\n  document.body.appendChild(modalContainer)\r\n  const root = createRoot(modalContainer)\r\n\r\n  const handleModalConfirmInModal = (groupIdsToAdd: string[], groupIdsToRemove: string[], newGroupName?: string) => {\r\n    if (!cartItem) return\r\n\r\n    // Create new group if needed\r\n    if (newGroupName) {\r\n      const newGroupId = generateGroupId()\r\n      addGroup({ id: newGroupId, name: newGroupName })\r\n      // Add item to the new group\r\n      const cartItemWithGroup: IMediaRightItem = { ...cartItem, GroupId: newGroupId }\r\n      addItem(cartItemWithGroup)\r\n    } else {\r\n      // Remove from groups\r\n      groupIdsToRemove.forEach((groupId) => {\r\n        if (cartItem.ProductId) {\r\n          removeItem(groupId, cartItem.ProductId)\r\n        }\r\n      })\r\n\r\n      // Add to groups\r\n      groupIdsToAdd.forEach((groupId) => {\r\n        const cartItemWithGroup: IMediaRightItem = { ...cartItem, GroupId: groupId }\r\n        addItem(cartItemWithGroup)\r\n      })\r\n    }\r\n\r\n    root.unmount()\r\n    document.body.removeChild(modalContainer)\r\n  }\r\n  root.render(\r\n    <GroupSelectorModal\r\n      open={true}\r\n      onClose={() => {\r\n        root.unmount()\r\n        document.body.removeChild(modalContainer)\r\n      }}\r\n      onConfirm={handleModalConfirmInModal}\r\n      guideStepsProps={guideStepsProps}\r\n      groups={groups}\r\n      cartItem={cartItem}\r\n    />\r\n  )\r\n}\r\n"],"names":["GroupSelectorModal","_ref","open","onClose","onConfirm","groups","guideStepsProps","cartItem","currentGroupIds","useMemo","ProductId","filter","g","_g$items","items","some","item","map","id","sort","initialGroupIds","length","_useState","useState","_useState2","_slicedToArray","selectedGroupIds","setSelectedGroupIds","_useState3","_useState4","showNewGroupInput","setShowNewGroupInput","_useState5","_useState6","newName","setNewName","useEffect","newInitialGroupIds","isChanged","trim","sortedSelected","_toConsumableArray","index","handleClose","_jsxs","Dialog","maxWidth","fullWidth","disableScrollLock","keepMounted","scroll","children","_jsx","ModalHeader","Box","component","onSubmit","e","preventDefault","groupIdsToAdd","includes","groupIdsToRemove","DialogContent","Typography","variant","sx","mb","fontWeight","canAddGroup","NewCollectionInput","value","onChange","NewCollectionButton","onClick","CollectionsList","onGroupSelect","groupId","prev","concat","DialogActions","px","pb","GuideSteps","_objectSpread","iconButtonProps","color","mr","Button","type","disabled","minWidth","showGroupSelectorModal","_ref2","addGroup","addItem","removeItem","modalContainer","document","createElement","body","appendChild","root","createRoot","render","unmount","removeChild","newGroupName","newGroupId","generateGroupId","name","cartItemWithGroup","GroupId","forEach"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/media-right/group-selector/index.tsx"],"sourcesContent":["import { useState, useMemo } from 'react'\r\nimport { Dialog, DialogContent, DialogActions, Button, Typography, Box, Alert } from '@mui/material'\r\nimport type { FC, FormEvent } from 'react'\r\nimport { CollectionsList } from './units'\r\nimport { GuideSteps } from '../guide-steps'\r\nimport { ModalHeader } from './modal-header'\r\nimport { NewCollectionButton, NewCollectionInput } from '../unit.control'\r\nimport { useMediaRightActions, useMediaRightStore } from '../hooks'\r\nimport type { IGuideStepsProps } from '../guide-steps'\r\nimport type { IMediaRightItem } from '../types'\r\n\r\nexport interface IGroupSelectorModalProps {\r\n  open: boolean\r\n  guideStepsProps?: IGuideStepsProps\r\n  onClose: () => void\r\n  cartItem: IMediaRightItem | null\r\n}\r\n\r\nexport const ModalAddMediaRight: FC<IGroupSelectorModalProps> = ({ open, onClose, guideStepsProps, cartItem }) => {\r\n  const { groups, options } = useMediaRightStore()\r\n  const actions = useMediaRightActions()\r\n  // Determine which groups can be selected (active) based on maxItemsPerGroup limit and which groups currently contain the item\r\n  const activeGroupIds = useMemo(() => {\r\n    if (!cartItem?.ProductId) return []\r\n    const ids = groups\r\n      .filter((g) => g.items?.some((item) => item.ProductId === cartItem.ProductId) || g.items.length < options.maxItemsPerGroup)\r\n      .map((g) => g.id)\r\n    return ids\r\n  }, [groups, cartItem, options.maxItemsPerGroup])\r\n\r\n  // Find all groups that contain this item\r\n  const currentGroupIds = useMemo(() => {\r\n    if (!cartItem?.ProductId) return []\r\n    const l = groups.filter((g) => g.items?.some((item) => item.ProductId === cartItem.ProductId))\r\n    return l.map((g) => g.id).sort()\r\n  }, [groups, cartItem])\r\n\r\n  // Auto-select: all current groups if exists, otherwise first group if available\r\n  const initialGroupIds = currentGroupIds.length > 0 ? currentGroupIds : activeGroupIds.length > 0 ? [activeGroupIds[0]] : []\r\n\r\n  const [selectedGroupIds, setSelectedGroupIds] = useState<string[]>(initialGroupIds)\r\n  const [showNewGroupInput, setShowNewGroupInput] = useState(false)\r\n  const [newName, setNewName] = useState<string>('')\r\n  const [errorMessage, setErrorMessage] = useState<string>('')\r\n\r\n  const isChanged = useMemo(() => {\r\n    if (showNewGroupInput && newName.trim()) return true\r\n\r\n    // Sort and compare arrays (currentGroupIds is already sorted)\r\n    const sortedSelected = [...selectedGroupIds].sort()\r\n\r\n    // Check if arrays are different\r\n    if (currentGroupIds.length !== sortedSelected.length) return true\r\n    return currentGroupIds.some((id, index) => id !== sortedSelected[index])\r\n  }, [showNewGroupInput, newName, selectedGroupIds, currentGroupIds])\r\n\r\n  const handleSubmit = (e: FormEvent) => {\r\n    e.preventDefault()\r\n    if (!cartItem) return\r\n\r\n    // Only proceed if there are changes\r\n    if (!isChanged) {\r\n      handleClose()\r\n      return\r\n    }\r\n    try {\r\n      if (showNewGroupInput && newName.trim()) {\r\n        // Create new group and add item to it\r\n        const newGroup = actions.addGroup({ name: newName.trim() })\r\n        const cartItemWithGroup: IMediaRightItem = { ...cartItem, GroupId: newGroup.id }\r\n        actions.addItem(cartItemWithGroup)\r\n      } else {\r\n        // Calculate changes\r\n        const groupIdsToAdd = selectedGroupIds.filter((id) => !currentGroupIds.includes(id))\r\n        const groupIdsToRemove = currentGroupIds.filter((id) => !selectedGroupIds.includes(id))\r\n\r\n        // Remove from groups\r\n        groupIdsToRemove.forEach((groupId) => {\r\n          if (cartItem.ProductId) {\r\n            actions.removeItem(groupId, cartItem.ProductId)\r\n          }\r\n        })\r\n\r\n        // Add to groups\r\n        groupIdsToAdd.forEach((groupId) => {\r\n          const cartItemWithGroup: IMediaRightItem = { ...cartItem, GroupId: groupId }\r\n          actions.addItem(cartItemWithGroup)\r\n        })\r\n      }\r\n\r\n      handleClose()\r\n    } catch (error) {\r\n      console.error('Error saving group changes8678888:', error)\r\n      setErrorMessage(error instanceof Error ? error.message : 'Failed to save changes. Please try again.')\r\n    }\r\n  }\r\n\r\n  const handleClose = () => {\r\n    setSelectedGroupIds([])\r\n    setShowNewGroupInput(false)\r\n    setNewName('')\r\n    setErrorMessage('')\r\n    onClose()\r\n  }\r\n\r\n  const handleNewGroupClick = () => {\r\n    setShowNewGroupInput(true)\r\n  }\r\n\r\n  const handleGroupSelect = (groupId: string) => {\r\n    setSelectedGroupIds((prev) => {\r\n      if (prev.includes(groupId)) {\r\n        // Uncheck: remove from selection\r\n        return prev.filter((id) => id !== groupId)\r\n      } else {\r\n        // Check: add to selection\r\n        return [...prev, groupId]\r\n      }\r\n    })\r\n    setShowNewGroupInput(false)\r\n  }\r\n\r\n  const isConfirmDisabled = () => {\r\n    if (showNewGroupInput) return !newName.trim()\r\n    // Allow unchecking all groups (to remove item from all groups)\r\n    return false\r\n  }\r\n\r\n  const getButtonText = () => {\r\n    if (showNewGroupInput) return 'Create & Add'\r\n\r\n    // Case 1: Item already exists in some groups\r\n    if (currentGroupIds.length > 0) {\r\n      return isChanged ? 'Save Changes' : 'OK'\r\n    }\r\n\r\n    // Case 2: Item doesn't exist in any group yet\r\n    return 'Save'\r\n  }\r\n\r\n  return (\r\n    <Dialog open={open} onClose={handleClose} maxWidth='xs' fullWidth disableScrollLock={true} keepMounted={false} scroll='paper'>\r\n      <ModalHeader cartItem={cartItem} onClose={handleClose} />\r\n      <Box component='form' onSubmit={handleSubmit}>\r\n        {errorMessage && (\r\n          <Alert onClose={() => setErrorMessage('')} severity='error' sx={{ m: 1 }}>\r\n            {errorMessage}\r\n          </Alert>\r\n        )}\r\n        <DialogContent sx={{ py: 0 }}>\r\n          <Typography variant='subtitle1' sx={{ mb: 1, fontWeight: 600 }}>\r\n            Your Playlist\r\n          </Typography>\r\n          {groups.length < options.maxGroup &&\r\n            (!showNewGroupInput ? (\r\n              <NewCollectionButton onClick={handleNewGroupClick} />\r\n            ) : (\r\n              <NewCollectionInput value={newName} onChange={setNewName} inputProps={{ maxLength: options.maxNameGroup }} />\r\n            ))}\r\n          <CollectionsList\r\n            groups={groups}\r\n            selectedGroupIds={selectedGroupIds}\r\n            activeGroupIds={activeGroupIds}\r\n            onGroupSelect={handleGroupSelect}\r\n            tooltipDisabled={`Maximum items per playlist (${options.maxItemsPerGroup} items)`}\r\n          />\r\n        </DialogContent>\r\n        <DialogActions sx={{ px: 3, pb: 3 }}>\r\n          {guideStepsProps && <GuideSteps iconButtonProps={{ color: 'primary', sx: { mr: 'auto' } }} {...guideStepsProps} />}\r\n          <Button onClick={handleClose} variant='text' type='button' color='inherit'>\r\n            Cancel\r\n          </Button>\r\n          <Button type='submit' variant={isChanged ? 'contained' : 'outlined'} disabled={isConfirmDisabled()} color='primary' sx={{ minWidth: 100 }}>\r\n            {getButtonText()}\r\n          </Button>\r\n        </DialogActions>\r\n      </Box>\r\n    </Dialog>\r\n  )\r\n}\r\n"],"names":["ModalAddMediaRight","_ref","open","onClose","guideStepsProps","cartItem","_useMediaRightStore","useMediaRightStore","groups","options","actions","useMediaRightActions","activeGroupIds","useMemo","ProductId","filter","g","_g$items","items","some","item","length","maxItemsPerGroup","map","id","currentGroupIds","_g$items2","sort","initialGroupIds","_useState","useState","_useState2","_slicedToArray","selectedGroupIds","setSelectedGroupIds","_useState3","_useState4","showNewGroupInput","setShowNewGroupInput","_useState5","_useState6","newName","setNewName","_useState7","_useState8","errorMessage","setErrorMessage","isChanged","trim","sortedSelected","_toConsumableArray","index","handleClose","_jsxs","Dialog","maxWidth","fullWidth","disableScrollLock","keepMounted","scroll","children","_jsx","ModalHeader","Box","component","onSubmit","e","preventDefault","newGroup","addGroup","name","cartItemWithGroup","_objectSpread","GroupId","addItem","groupIdsToAdd","includes","forEach","groupId","removeItem","error","console","Error","message","Alert","severity","sx","m","DialogContent","py","Typography","variant","mb","fontWeight","maxGroup","NewCollectionInput","value","onChange","inputProps","maxLength","maxNameGroup","NewCollectionButton","onClick","CollectionsList","onGroupSelect","prev","concat","tooltipDisabled","DialogActions","px","pb","GuideSteps","iconButtonProps","color","mr","Button","type","disabled","minWidth"],"mappings":"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"}

package/dist/media-right/group-selector/modal-header.js

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{DialogTitle as i,Box as t,Avatar as l,Typography as a,IconButton as n}from"@mui/material";import o from"@mui/icons-material/VideoLibraryOutlined";import c from"@mui/icons-material/Close";var d=function(d){var m=d.cartItem,s=d.onClose;return r(i,{children:e(t,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e(t,{sx:{display:"flex",alignItems:"center",gap:1},children:[null!=m&&m.PictureUrl?r(l,{src:m.PictureUrl,alt:m.ProductName||"Product",sx:{width:60,height:60,borderRadius:2}}):r(o,{}),e(t,{children:[r(a,{variant:"h6",children:"Add to Playlist"}),r(a,{variant:"body2",color:"text.secondary",children:null==m?void 0:m.ProductName})]})]}),r(n,{onClick:s,size:"small",children:r(c,{})})]})})};export{d as ModalHeader};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{DialogTitle as i,Box as t,Avatar as o,Typography as a,IconButton as n}from"@mui/material";import l from"@mui/icons-material/VideoLibraryOutlined";import c from"@mui/icons-material/Close";var d=function(d){var s=d.cartItem,m=d.onClose;return r(i,{sx:{position:"sticky",top:0,zIndex:2,backgroundColor:function(r){return r.palette.background.paper},backgroundImage:"var(--Paper-overlay)"},children:e(t,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e(t,{sx:{display:"flex",alignItems:"center",gap:1},children:[null!=s&&s.PictureUrl?r(o,{src:s.PictureUrl,alt:s.ProductName||"Product",sx:{width:60,height:60,borderRadius:2}}):r(l,{}),e(t,{children:[r(a,{variant:"h6",children:"Add to Playlist"}),r(a,{variant:"body2",color:"text.secondary",children:null==s?void 0:s.ProductName})]})]}),r(n,{onClick:m,size:"small",children:r(c,{})})]})})};export{d as ModalHeader};
 //# sourceMappingURL=modal-header.js.map

package/dist/media-right/group-selector/modal-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-header.js","sources":["../../../src/media-right/group-selector/modal-header.tsx"],"sourcesContent":["import type { FC } from 'react'\r\nimport { DialogTitle, Box, Typography, IconButton, Avatar } from '@mui/material'\r\nimport VideoLibraryOutlinedIcon from '@mui/icons-material/VideoLibraryOutlined'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport type { IMediaRightItem } from '../types'\r\n\r\nexport interface ModalHeaderProps {\r\n  cartItem: IMediaRightItem | null\r\n  onClose: () => void\r\n}\r\n\r\nexport const ModalHeader: FC<ModalHeaderProps> = ({ cartItem, onClose }) => {\r\n  return (\r\n    <DialogTitle>\r\n      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\r\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\r\n          {cartItem?.PictureUrl ? (\r\n            <Avatar src={cartItem.PictureUrl} alt={cartItem.ProductName || 'Product'} sx={{ width: 60, height: 60, borderRadius: 2 }} />\r\n          ) : (\r\n            <VideoLibraryOutlinedIcon />\r\n          )}\r\n          <Box>\r\n            <Typography variant='h6'>Add to Playlist</Typography>\r\n            <Typography variant='body2' color='text.secondary'>\r\n              {cartItem?.ProductName}\r\n            </Typography>\r\n          </Box>\r\n        </Box>\r\n        <IconButton onClick={onClose} size='small'>\r\n          <CloseIcon />\r\n        </IconButton>\r\n      </Box>\r\n    </DialogTitle>\r\n  )\r\n}\r\n"],"names":["ModalHeader","_ref","cartItem","onClose","_jsx","DialogTitle","children","_jsxs","Box","sx","display","alignItems","justifyContent","gap","PictureUrl","Avatar","src","alt","ProductName","width","height","borderRadius","VideoLibraryOutlinedIcon","Typography","variant","color","IconButton","onClick","size","CloseIcon"],"mappings":"wPAWaA,EAAoC,SAAzBC,GAAmD,IAAvBC,EAAQD,EAARC,SAAUC,EAAOF,EAAPE,QAC5D,OACEC,EAACC,EAAW,CAAAC,SACVC,EAACC,EAAI,CAAAC,GAAI,CAAEC,QAAS,OAAQC,WAAY,SAAUC,eAAgB,iBAChEN,SAAA,CAAAC,EAACC,EAAG,CAACC,GAAI,CAAEC,QAAS,OAAQC,WAAY,SAAUE,IAAK,GAAGP,SAAA,CACvDJ,SAAAA,EAAUY,WACTV,EAACW,EAAO,CAAAC,IAAKd,EAASY,WAAYG,IAAKf,EAASgB,aAAe,UAAWT,GAAI,CAAEU,MAAO,GAAIC,OAAQ,GAAIC,aAAc,KAErHjB,EAACkB,EAA2B,CAAA,GAE9Bf,EAACC,EACC,CAAAF,SAAA,CAAAF,EAACmB,EAAU,CAACC,QAAQ,KAAIlB,SAAA,oBACxBF,EAACmB,EAAW,CAAAC,QAAQ,QAAQC,MAAM,iBAAgBnB,SAC/CJ,aAAQ,EAARA,EAAUgB,oBAIjBd,EAACsB,EAAW,CAAAC,QAASxB,EAASyB,KAAK,QAAOtB,SACxCF,EAACyB,EAAY,CAAA,SAKvB"}
+{"version":3,"file":"modal-header.js","sources":["../../../src/media-right/group-selector/modal-header.tsx"],"sourcesContent":["import type { FC } from 'react'\r\nimport { DialogTitle, Box, Typography, IconButton, Avatar } from '@mui/material'\r\nimport VideoLibraryOutlinedIcon from '@mui/icons-material/VideoLibraryOutlined'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport type { IMediaRightItem } from '../types'\r\n\r\nexport interface ModalHeaderProps {\r\n  cartItem: IMediaRightItem | null\r\n  onClose: () => void\r\n}\r\n\r\nexport const ModalHeader: FC<ModalHeaderProps> = ({ cartItem, onClose }) => {\r\n  return (\r\n    <DialogTitle\r\n      sx={{\r\n        position: 'sticky',\r\n        top: 0,\r\n        zIndex: 2,\r\n        backgroundColor: (theme) => theme.palette.background.paper,\r\n        backgroundImage: 'var(--Paper-overlay)'\r\n      }}\r\n    >\r\n      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>\r\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\r\n          {cartItem?.PictureUrl ? (\r\n            <Avatar src={cartItem.PictureUrl} alt={cartItem.ProductName || 'Product'} sx={{ width: 60, height: 60, borderRadius: 2 }} />\r\n          ) : (\r\n            <VideoLibraryOutlinedIcon />\r\n          )}\r\n          <Box>\r\n            <Typography variant='h6'>Add to Playlist</Typography>\r\n            <Typography variant='body2' color='text.secondary'>\r\n              {cartItem?.ProductName}\r\n            </Typography>\r\n          </Box>\r\n        </Box>\r\n        <IconButton onClick={onClose} size='small'>\r\n          <CloseIcon />\r\n        </IconButton>\r\n      </Box>\r\n    </DialogTitle>\r\n  )\r\n}\r\n"],"names":["ModalHeader","_ref","cartItem","onClose","_jsx","DialogTitle","sx","position","top","zIndex","backgroundColor","theme","palette","background","paper","backgroundImage","children","_jsxs","Box","display","alignItems","justifyContent","gap","PictureUrl","Avatar","src","alt","ProductName","width","height","borderRadius","VideoLibraryOutlinedIcon","Typography","variant","color","IconButton","onClick","size","CloseIcon"],"mappings":"wPAWaA,EAAoC,SAAzBC,GAAmD,IAAvBC,EAAQD,EAARC,SAAUC,EAAOF,EAAPE,QAC5D,OACEC,EAACC,EAAW,CACVC,GAAI,CACFC,SAAU,SACVC,IAAK,EACLC,OAAQ,EACRC,gBAAiB,SAACC,GAAK,OAAKA,EAAMC,QAAQC,WAAWC,KAAK,EAC1DC,gBAAiB,wBAClBC,SAEDC,EAACC,EAAI,CAAAZ,GAAI,CAAEa,QAAS,OAAQC,WAAY,SAAUC,eAAgB,iBAAiBL,SAAA,CACjFC,EAACC,EAAI,CAAAZ,GAAI,CAAEa,QAAS,OAAQC,WAAY,SAAUE,IAAK,GAAGN,SAAA,CACvDd,SAAAA,EAAUqB,WACTnB,EAACoB,EAAO,CAAAC,IAAKvB,EAASqB,WAAYG,IAAKxB,EAASyB,aAAe,UAAWrB,GAAI,CAAEsB,MAAO,GAAIC,OAAQ,GAAIC,aAAc,KAErH1B,EAAC2B,EAAwB,CAAA,GAE3Bd,EAACC,aACCd,EAAC4B,EAAW,CAAAC,QAAQ,KAAiCjB,SAAA,oBACrDZ,EAAC4B,EAAU,CAACC,QAAQ,QAAQC,MAAM,iBAAgBlB,SAC/Cd,aAAQ,EAARA,EAAUyB,oBAIjBvB,EAAC+B,EAAW,CAAAC,QAASjC,EAASkC,KAAK,QAAOrB,SACxCZ,EAACkC,EAAY,CAAA,SAKvB"}

package/dist/media-right/group-selector/units.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{Box as t,Typography as i,List as n,ListItem as o,ListItemButton as l,Checkbox as a,Stack as c,Chip as s}from"@mui/material";import d from"@mui/icons-material/FolderOutlined";var m=function(t){var n=t.group,m=t.isSelected,u=t.onSelect;return r(o,{disablePadding:!0,children:e(l,{selected:m,onClick:function(){return u(n.id)},sx:{gap:1,borderRadius:1,"&.Mui-selected":{bgcolor:"primary.50","&:hover":{bgcolor:"primary.100"}}},children:[r(a,{checked:m,size:"small"}),r(d,{fontSize:"small"}),e(c,{direction:"row",gap:1,sx:{minWidth:0,flexGrow:1,alignItems:"center",justifyContent:"space-between"},children:[r(i,{variant:"body2",noWrap:!0,children:n.name}),r(s,{label:"".concat(n.items.length," items"),size:"small"})]})]})})},u=function(o){var l=o.groups,a=o.selectedGroupIds,c=o.onGroupSelect;return 0===l.length?e(t,{sx:{textAlign:"center",py:2,color:"text.secondary"},children:[r(d,{sx:{fontSize:48,mb:1,opacity:.5}}),r(i,{variant:"body2",children:"No playlist yet. Create your first playlist!"})]}):r(n,{sx:{maxHeight:300,overflow:"auto"},children:l.map(function(e){return r(m,{group:e,isSelected:a.includes(e.id),onSelect:c},e.id)})})};export{u as CollectionsList};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{Box as i,Typography as t,List as n,Tooltip as o,ListItem as l,ListItemButton as a,Checkbox as d,Badge as c,Stack as s}from"@mui/material";import p from"@mui/icons-material/FolderOutlined";var u=function(i){var n=i.group,o=i.isSelected,u=i.disabled,m=i.onSelect;return r(l,{disablePadding:!0,children:e(a,{onClick:function(){return m(n.id)},disabled:u,sx:{gap:1,borderRadius:1,"&:hover":{bgcolor:"rgba(255, 255, 255, 0.08)"}},children:[r(d,{checked:o,disabled:u,size:"small"}),r(c,{badgeContent:n.items.length,color:"primary",children:r(p,{fontSize:"small"})}),r(s,{direction:"row",gap:1,sx:{minWidth:0,flexGrow:1,alignItems:"center",justifyContent:"space-between"},children:r(t,{variant:"body2",noWrap:!0,children:n.name})})]})})},m=function(l){var a=l.groups,d=l.selectedGroupIds,c=l.activeGroupIds,s=l.onGroupSelect,m=l.tooltipDisabled;return 0===a.length?e(i,{sx:{textAlign:"center",py:2,color:"text.secondary"},children:[r(p,{sx:{fontSize:48,mb:1,opacity:.5}}),r(t,{variant:"body2",children:"No playlist yet. Create your first playlist!"})]}):r(n,{sx:{maxHeight:300,overflow:"auto"},children:a.map(function(e){var i=c.includes(e.id);return r(o,{title:i?"":m,placement:"top",arrow:!0,children:r("span",{children:r(u,{group:e,isSelected:d.includes(e.id),disabled:!i,onSelect:s})})},e.id)})})};export{m as CollectionsList};
 //# sourceMappingURL=units.js.map

package/dist/media-right/group-selector/units.js.map

@@ -1 +1 @@
-{"version":3,"file":"units.js","sources":["../../../src/media-right/group-selector/units.tsx"],"sourcesContent":["import type { FC } from 'react'\r\nimport { List, Box, Typography, ListItem, ListItemButton, Checkbox, Stack, Chip } from '@mui/material'\r\nimport FolderOutlinedIcon from '@mui/icons-material/FolderOutlined'\r\nimport type { IMediaRightGroup } from '../types'\r\n\r\nexport interface CollectionItemProps {\r\n  group: IMediaRightGroup\r\n  isSelected: boolean\r\n  onSelect: (groupId: string) => void\r\n}\r\n\r\nconst CollectionItem: FC<CollectionItemProps> = ({ group, isSelected, onSelect }) => {\r\n  return (\r\n    <ListItem disablePadding>\r\n      <ListItemButton\r\n        selected={isSelected}\r\n        onClick={() => onSelect(group.id)}\r\n        sx={{\r\n          gap: 1,\r\n          borderRadius: 1,\r\n          '&.Mui-selected': {\r\n            bgcolor: 'primary.50',\r\n            '&:hover': {\r\n              bgcolor: 'primary.100'\r\n            }\r\n          }\r\n        }}\r\n      >\r\n        <Checkbox checked={isSelected} size='small' />\r\n        <FolderOutlinedIcon fontSize='small' />\r\n        <Stack direction='row' gap={1} sx={{ minWidth: 0, flexGrow: 1, alignItems: 'center', justifyContent: 'space-between' }}>\r\n          <Typography variant='body2' noWrap>\r\n            {group.name}\r\n          </Typography>\r\n          <Chip label={`${group.items.length} items`} size='small' />\r\n        </Stack>\r\n      </ListItemButton>\r\n    </ListItem>\r\n  )\r\n}\r\n\r\nexport interface CollectionsListProps {\r\n  groups: IMediaRightGroup[]\r\n  selectedGroupIds: string[]\r\n  onGroupSelect: (groupId: string) => void\r\n}\r\n\r\nexport const CollectionsList: FC<CollectionsListProps> = ({ groups, selectedGroupIds, onGroupSelect }) => {\r\n  if (groups.length === 0) {\r\n    return (\r\n      <Box sx={{ textAlign: 'center', py: 2, color: 'text.secondary' }}>\r\n        <FolderOutlinedIcon sx={{ fontSize: 48, mb: 1, opacity: 0.5 }} />\r\n        <Typography variant='body2'>No playlist yet. Create your first playlist!</Typography>\r\n      </Box>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <List sx={{ maxHeight: 300, overflow: 'auto' }}>\r\n      {groups.map((group) => (\r\n        <CollectionItem key={group.id} group={group} isSelected={selectedGroupIds.includes(group.id)} onSelect={onGroupSelect} />\r\n      ))}\r\n    </List>\r\n  )\r\n}\r\n"],"names":["CollectionItem","_ref","group","isSelected","onSelect","_jsx","ListItem","disablePadding","children","_jsxs","ListItemButton","selected","onClick","id","sx","gap","borderRadius","bgcolor","Checkbox","checked","size","FolderOutlinedIcon","fontSize","Stack","direction","minWidth","flexGrow","alignItems","justifyContent","Typography","variant","noWrap","name","Chip","label","concat","items","length","CollectionsList","_ref2","groups","selectedGroupIds","onGroupSelect","Box","textAlign","py","color","mb","opacity","List","maxHeight","overflow","map","includes"],"mappings":"uOAWA,IAAMA,EAA0C,SAA5BC,GAAgE,IAAjCC,EAAKD,EAALC,MAAOC,EAAUF,EAAVE,WAAYC,EAAQH,EAARG,SACpE,OACEC,EAACC,EAAS,CAAAC,gBACR,EAAAC,SAAAC,EAACC,EAAc,CACbC,SAAUR,EACVS,QAAS,WAAF,OAAQR,EAASF,EAAMW,GAAG,EACjCC,GAAI,CACFC,IAAK,EACLC,aAAc,EACd,iBAAkB,CAChBC,QAAS,aACT,UAAW,CACTA,QAAS,iBAGdT,SAAA,CAEDH,EAACa,EAAQ,CAACC,QAAShB,EAAYiB,KAAK,UACpCf,EAACgB,GAAmBC,SAAS,UAC7Bb,EAACc,GAAMC,UAAU,MAAMT,IAAK,EAAGD,GAAI,CAAEW,SAAU,EAAGC,SAAU,EAAGC,WAAY,SAAUC,eAAgB,iBAAiBpB,SAAA,CACpHH,EAACwB,EAAU,CAACC,QAAQ,QAAQC,mBACzB7B,EAAM8B,OAET3B,EAAC4B,GAAKC,MAAK,GAAAC,OAAKjC,EAAMkC,MAAMC,OAAc,UAAEjB,KAAK,iBAK3D,EAQakB,EAA4C,SAA7BC,GAA6E,IAA7CC,EAAMD,EAANC,OAAQC,EAAgBF,EAAhBE,iBAAkBC,EAAaH,EAAbG,cACpF,OAAsB,IAAlBF,EAAOH,OAEP5B,EAACkC,EAAG,CAAC7B,GAAI,CAAE8B,UAAW,SAAUC,GAAI,EAAGC,MAAO,kBAAkBtC,SAAA,CAC9DH,EAACgB,EAAmB,CAAAP,GAAI,CAAEQ,SAAU,GAAIyB,GAAI,EAAGC,QAAS,MACxD3C,EAACwB,EAAW,CAAAC,QAAQ,QAAOtB,SAAA,oDAM/BH,EAAC4C,EAAK,CAAAnC,GAAI,CAAEoC,UAAW,IAAKC,SAAU,QAAQ3C,SAC3CgC,EAAOY,IAAI,SAAClD,GAAK,OAChBG,EAACL,GAA8BE,MAAOA,EAAOC,WAAYsC,EAAiBY,SAASnD,EAAMW,IAAKT,SAAUsC,GAAnFxC,EAAMW,GAC5B,IAGP"}
+{"version":3,"file":"units.js","sources":["../../../src/media-right/group-selector/units.tsx"],"sourcesContent":["import type { FC } from 'react'\r\nimport { List, Box, Typography, ListItem, ListItemButton, Checkbox, Stack, Badge, Tooltip } from '@mui/material'\r\nimport FolderOutlinedIcon from '@mui/icons-material/FolderOutlined'\r\nimport type { IMediaRightGroup } from '../types'\r\n\r\nexport interface CollectionItemProps {\r\n  group: IMediaRightGroup\r\n  isSelected: boolean\r\n  disabled?: boolean\r\n  onSelect: (groupId: string) => void\r\n}\r\n\r\nconst CollectionItem: FC<CollectionItemProps> = ({ group, isSelected, disabled, onSelect }) => {\r\n  return (\r\n    <ListItem disablePadding>\r\n      <ListItemButton\r\n        onClick={() => onSelect(group.id)}\r\n        disabled={disabled}\r\n        sx={{\r\n          gap: 1,\r\n          borderRadius: 1,\r\n          '&:hover': {\r\n            bgcolor: `rgba(255, 255, 255, 0.08)`\r\n          }\r\n        }}\r\n      >\r\n        <Checkbox checked={isSelected} disabled={disabled} size='small' />\r\n        <Badge badgeContent={group.items.length} color='primary'>\r\n          <FolderOutlinedIcon fontSize='small' />\r\n        </Badge>\r\n        <Stack direction='row' gap={1} sx={{ minWidth: 0, flexGrow: 1, alignItems: 'center', justifyContent: 'space-between' }}>\r\n          <Typography variant='body2' noWrap>\r\n            {group.name}\r\n          </Typography>\r\n        </Stack>\r\n      </ListItemButton>\r\n    </ListItem>\r\n  )\r\n}\r\n\r\nexport interface CollectionsListProps {\r\n  groups: IMediaRightGroup[]\r\n  selectedGroupIds: string[]\r\n  activeGroupIds: string[]\r\n  onGroupSelect: (groupId: string) => void\r\n  tooltipDisabled?: string\r\n}\r\n\r\nexport const CollectionsList: FC<CollectionsListProps> = ({ groups, selectedGroupIds, activeGroupIds, onGroupSelect, tooltipDisabled }) => {\r\n  if (groups.length === 0) {\r\n    return (\r\n      <Box sx={{ textAlign: 'center', py: 2, color: 'text.secondary' }}>\r\n        <FolderOutlinedIcon sx={{ fontSize: 48, mb: 1, opacity: 0.5 }} />\r\n        <Typography variant='body2'>No playlist yet. Create your first playlist!</Typography>\r\n      </Box>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <List sx={{ maxHeight: 300, overflow: 'auto' }}>\r\n      {groups.map((group) => {\r\n        const canSelect = activeGroupIds.includes(group.id)\r\n        return (\r\n          <Tooltip key={group.id} title={canSelect ? '' : tooltipDisabled} placement='top' arrow>\r\n            <span>\r\n              <CollectionItem group={group} isSelected={selectedGroupIds.includes(group.id)} disabled={!canSelect} onSelect={onGroupSelect} />\r\n            </span>\r\n          </Tooltip>\r\n        )\r\n      })}\r\n    </List>\r\n  )\r\n}\r\n"],"names":["CollectionItem","_ref","group","isSelected","disabled","onSelect","_jsx","ListItem","disablePadding","children","_jsxs","ListItemButton","onClick","id","sx","gap","borderRadius","bgcolor","Checkbox","checked","size","Badge","badgeContent","items","length","color","FolderOutlinedIcon","fontSize","Stack","direction","minWidth","flexGrow","alignItems","justifyContent","Typography","variant","noWrap","name","CollectionsList","_ref2","groups","selectedGroupIds","activeGroupIds","onGroupSelect","tooltipDisabled","Box","textAlign","py","mb","opacity","List","maxHeight","overflow","map","canSelect","includes","Tooltip","title","placement","arrow"],"mappings":"qPAYA,IAAMA,EAA0C,SAA5BC,GAA0E,IAA3CC,EAAKD,EAALC,MAAOC,EAAUF,EAAVE,WAAYC,EAAQH,EAARG,SAAUC,EAAQJ,EAARI,SAC9E,OACEC,EAACC,EAAS,CAAAC,gBACR,EAAAC,SAAAC,EAACC,EAAc,CACbC,QAAS,WAAF,OAAQP,EAASH,EAAMW,GAAG,EACjCT,SAAUA,EACVU,GAAI,CACFC,IAAK,EACLC,aAAc,EACd,UAAW,CACTC,QAAO,8BAEVR,SAAA,CAEDH,EAACY,EAAQ,CAACC,QAAShB,EAAYC,SAAUA,EAAUgB,KAAK,UACxDd,EAACe,GAAMC,aAAcpB,EAAMqB,MAAMC,OAAQC,MAAM,UAC7ChB,SAAAH,EAACoB,EAAmB,CAAAC,SAAS,YAE/BrB,EAACsB,EAAM,CAAAC,UAAU,MAAMd,IAAK,EAAGD,GAAI,CAAEgB,SAAU,EAAGC,SAAU,EAAGC,WAAY,SAAUC,eAAgB,iBACnGxB,SAAAH,EAAC4B,EAAW,CAAAC,QAAQ,QAAQC,QACzB,EAAA3B,SAAAP,EAAMmC,aAMnB,EAUaC,EAA4C,SAA7BC,GAA8G,IAA9EC,EAAMD,EAANC,OAAQC,EAAgBF,EAAhBE,iBAAkBC,EAAcH,EAAdG,eAAgBC,EAAaJ,EAAbI,cAAeC,EAAeL,EAAfK,gBACnH,OAAsB,IAAlBJ,EAAOhB,OAEPd,EAACmC,EAAG,CAAC/B,GAAI,CAAEgC,UAAW,SAAUC,GAAI,EAAGtB,MAAO,kBAAkBhB,SAAA,CAC9DH,EAACoB,EAAmB,CAAAZ,GAAI,CAAEa,SAAU,GAAIqB,GAAI,EAAGC,QAAS,MACxD3C,EAAC4B,EAAW,CAAAC,QAAQ,QAAO1B,SAAA,oDAM/BH,EAAC4C,EAAI,CAACpC,GAAI,CAAEqC,UAAW,IAAKC,SAAU,QAAQ3C,SAC3C+B,EAAOa,IAAI,SAACnD,GACX,IAAMoD,EAAYZ,EAAea,SAASrD,EAAMW,IAChD,OACEP,EAACkD,EAAuB,CAAAC,MAAOH,EAAY,GAAKV,EAAiBc,UAAU,MAAMC,OAAK,EAAAlD,SACpFH,EACE,OAAA,CAAAG,SAAAH,EAACN,EAAc,CAACE,MAAOA,EAAOC,WAAYsC,EAAiBc,SAASrD,EAAMW,IAAKT,UAAWkD,EAAWjD,SAAUsC,OAFrGzC,EAAMW,GAMvB,IAGP"}

package/dist/media-right/guide-steps/index.js

@@ -1,2 +1,2 @@
-import{slicedToArray as t,objectSpread2 as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as i,Fragment as r,jsx as e}from"react/jsx-runtime";import{useState as o,useRef as l,useEffect as a}from"react";import{IconButton as c,Dialog as s,DialogTitle as u,DialogContent as m,Box as d,Stack as p,Typography as h,DialogActions as f,MobileStepper as x,Button as g}from"@mui/material";import b from"@mui/icons-material/HelpOutline";import v from"@mui/icons-material/Close";var k=function(k){var z=k.title,C=k.iconButtonProps,w=k.dialogProps,y=k.contentProps,B=k.steps,I=o(!1),S=t(I,2),j=S[0],H=S[1],P=o(0),W=t(P,2),T=W[0],X=W[1],_=l(0),A=l(null),D=function(){H(!1),X(0),_.current=0};return a(function(){A.current&&(A.current.scrollTop=0)},[T]),i(r,{children:[e(c,n(n({onClick:function(){return H(!0)},size:"small"},C),{},{children:e(b,{})})),i(s,n(n({open:j,onClose:D,maxWidth:"sm",fullWidth:!0},w),{},{children:[i(u,{py:2,sx:{position:"relative",boxShadow:"0 2px 8px -4px rgba(0,0,0,0.25)",zIndex:2,background:"#fff"},children:[z,e(c,{"aria-label":"close",onClick:D,sx:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",color:function(t){return t.palette.grey[500]},zIndex:1},size:"small",children:e(v,{})})]}),e(m,{ref:A,sx:{p:2,position:"relative",overflowX:"hidden",minHeight:260},children:e(d,{sx:{display:"flex",flexDirection:"row",width:"".concat(100*B.length,"%"),transform:"translateX(-".concat(T*(100/B.length),"%)"),transition:"transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)"},children:B.map(function(t,r){var o;return i(p,n(n({alignItems:"start",width:"".concat(100/B.length,"%"),flexShrink:0,px:2},y),{},{children:[e("img",{src:t.img,alt:t.label,style:{maxWidth:"100%",marginInline:"auto",maxHeight:120,marginBottom:16}}),e(h,{variant:"h6",fontWeight:600,gutterBottom:!0,children:t.label}),null===(o=t.text)||void 0===o?void 0:o.split("\n").map(function(t,n){return e(h,{variant:0===n?"subtitle1":"body2",children:t},n)}),t.content&&e(d,{sx:{mt:1,width:"100%"},children:t.content})]}),r)})})}),i(f,{sx:{px:3,pb:2,boxShadow:"0 -2px 8px -4px rgba(0,0,0,0.25)",zIndex:2,background:"#fff"},children:[e(x,{variant:"dots",steps:B.length,position:"static",activeStep:T,sx:{background:"transparent",justifyContent:"center",mr:"auto"},nextButton:null,backButton:null}),T>0&&e(g,{onClick:function(){_.current=T,X(function(t){return t-1})},size:"small",children:"Back"}),T===B.length-1?e(g,{onClick:D,size:"small",variant:"contained",children:"Finish"}):e(g,{onClick:function(){_.current=T,X(function(t){return t+1})},size:"small",variant:"contained",children:"Next"})]})]}))]})};export{k as GuideSteps};
+import{slicedToArray as i,objectSpread2 as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,Fragment as o,jsx as e}from"react/jsx-runtime";import{useState as r,useRef as l,useEffect as a}from"react";import{IconButton as c,Dialog as s,DialogTitle as d,DialogContent as u,Slide as m,Stack as p,Typography as h,Box as x,DialogActions as f,Button as v}from"@mui/material";import g from"@mui/icons-material/HelpOutline";import b from"@mui/icons-material/Close";var z=function(z){var k,C,w,y,B=z.title,I=z.iconButtonProps,j=z.dialogProps,P=z.contentProps,W=z.steps,O=r(!1),S=i(O,2),E=S[0],F=S[1],H=r(0),T=i(H,2),_=T[0],A=T[1],D=r("next"),M=i(D,2),N=M[0],R=M[1],X=l(null),Y=function(){F(!1)};return a(function(){X.current&&(X.current.scrollTop=0)},[_]),t(o,{children:[e(c,n(n({onClick:function(){F(!0),A(0),R("next")},size:"small"},I),{},{children:e(g,{})})),t(s,n(n({open:E,scroll:"paper",onClose:Y,maxWidth:"sm",fullWidth:!0,sx:{"& .MuiDialog-paper":{width:"80%",height:700}}},j),{},{children:[t(d,{py:2,sx:{position:"relative",boxShadow:"0 2px 8px -4px rgba(0,0,0,0.25)",zIndex:2},children:[B,e(c,{"aria-label":"close",onClick:Y,sx:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",color:function(i){return i.palette.grey[500]},zIndex:1},size:"small",children:e(b,{})})]}),e(u,{ref:X,sx:{position:"relative",overflowX:"hidden"},children:e(m,{in:!0,direction:"next"===N?"left":"right",timeout:320,mountOnEnter:!0,unmountOnExit:!0,children:t(p,n(n({alignItems:"start",px:2},P),{},{children:[(null===(k=W[_])||void 0===k?void 0:k.img)&&e("img",{src:W[_].img,alt:W[_].label,style:{maxWidth:"100%",objectFit:"contain",marginInline:"auto",marginBottom:16,borderRadius:8}}),e(h,{variant:"h6",fontWeight:600,gutterBottom:!0,children:null===(C=W[_])||void 0===C?void 0:C.label}),null===(w=W[_])||void 0===w||null===(w=w.text)||void 0===w?void 0:w.split("\n").map(function(i,n){return e(h,{variant:0===n?"subtitle1":"body2",children:i},n)}),(null===(y=W[_])||void 0===y?void 0:y.content)&&e(x,{sx:{mt:1,width:"100%"},children:W[_].content})]}))},"".concat(_,"-").concat(N))}),t(f,{sx:{px:3,pb:2,boxShadow:"0 -2px 8px -4px rgba(0,0,0,0.25)",zIndex:2},children:[e(x,{sx:{mr:"auto"}}),_>0&&e(v,{onClick:function(){R("back"),A(function(i){return i-1})},size:"small",children:"Back"}),_===W.length-1?e(v,{onClick:Y,size:"small",variant:"contained",children:"Finish"}):e(v,{onClick:function(){R("next"),A(function(i){return i+1})},size:"small",variant:"contained",children:"Next"})]})]}))]})};export{z as GuideSteps};
 //# sourceMappingURL=index.js.map