react-modern-audio-player 1.0.0 → 1.1.2

package/dist/index.es.js

@@ -8222,7 +8222,8 @@ const AudioPlayerProvider = ({
       volume: 1
     },
     activeUI: {
-      playButton: true
+      playButton: true,
+      volumeSlider: true
     },
     playListPlacement: "bottom",
     interfacePlacement: {
@@ -8242,141 +8243,43 @@ const AudioPlayerProvider = ({
 var vars = "";
 const GlobalStyle = createGlobalStyle`
 
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-button,
-video {
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  border: 0;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
+.rm-audio-player-provider {
+  * {
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 100%;
+  }
 
-button{
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  button {
+    margin: 0;
+    padding: 0;
     background: transparent;
     cursor: pointer;
-}
-
-* {
-  box-sizing: border-box;
-}
-`;
+    vertical-align: baseline;
+    border: 0;
+  }
+}`;
 function $parcel$export$1(e, n2, v, s) {
   Object.defineProperty(e, n2, { get: v, set: s, enumerable: true, configurable: true });
 }
@@ -13076,8 +12979,7 @@ function TbVolume(props) {
 const RepeatTypeBtn = () => {
   const {
     curAudioState,
-    customIcons,
-    activeUI
+    customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   const onClick = useCallback(() => {
@@ -13702,7 +13604,8 @@ const SortableListItem = (props) => {
   });
 };
 const SortableListItemContainer = styled.li`
-  border: 2px solid transparent;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
   transition: all 0.3s ease-in-out;
 
   & * {
@@ -14361,6 +14264,7 @@ const Dropdown = ({
   children,
   isOpen: isOpenProp,
   placement = "bottom",
+  disabled = false,
   onOpenChange
 }) => {
   const dropdownRef = useRef(null);
@@ -14391,7 +14295,7 @@ const Dropdown = ({
         onOpenChange
       },
       children: /* @__PURE__ */ jsxs(Fragment, {
-        children: [trigger, content]
+        children: [trigger, !disabled && content]
       })
     })
   });
@@ -14468,7 +14372,7 @@ const DropdownContent = ({
     onExited,
     onEntered,
     children: Content
-  }) : Content;
+  }) : isOpen ? Content : null;
 };
 const DropdownContentContainer = styled.div`
   ${({
@@ -14496,6 +14400,11 @@ Dropdown.Content = DropdownContent;
 Dropdown.Trigger = DropdownTrigger;
 const Volume = () => {
   const triggerRef = useRef(null);
+  const {
+    activeUI: {
+      volumeSlider
+    }
+  } = useNonNullableContext(audioPlayerStateContext);
   const [volumeSliderPlacement, setVolumeSliderPlacement] = useState("bottom");
   useEffect(() => {
     if (triggerRef.current) {
@@ -14511,6 +14420,7 @@ const Volume = () => {
   return /* @__PURE__ */ jsxs(Dropdown, {
     placement: volumeSliderPlacement,
     triggerType: "hover",
+    disabled: !volumeSlider,
     children: [/* @__PURE__ */ jsx(Dropdown.Trigger, {
       children: /* @__PURE__ */ jsx(VolumeTriggerBtn, {
         ref: triggerRef
@@ -14601,10 +14511,10 @@ const TrackInfoContainer = styled.div`
     overflow: hidden;
   }
   .title {
-    font-size: 1rem;
+    font-size: 16px;
   }
   .writer {
-    font-size: 0.875rem;
+    font-size: 12px;
   }
 `;
 const TrackInfo = () => {
@@ -14685,8 +14595,8 @@ const TrackTimeContainer = styled.div`
   align-items: center;
   justify-content: center;
   min-height: 16px;
-  font-family: monospace;
-  font-size: 1.2rem;
+  font-family: monospace !important;
+  font-size: 16px !important;
 `;
 const TrackTimeCurrentContainer = styled(TrackTimeContainer)`
   ${({
@@ -14811,9 +14721,16 @@ const generateGridTemplateValues = (activeUi, placement) => {
   return { gridAreas, gridColumns };
 };
 const InterfaceContainer = styled.div`
+  .interface-grid {
+    background: var(--rm-audio-player-interface-container);
+  }
   .interface-grid {
     padding: 0.5rem 10px;
   }
+  .sortable-play-list {
+    background: var(--rm-audio-player-sortable-list);
+    box-shadow: -5px 2px 4px 0px rgb(0 0 0 / 4%) inset;
+  }
 `;
 const Interface = () => {
   const {
@@ -14915,9 +14832,9 @@ const AudioPlayerWithProvider = ({
   return /* @__PURE__ */ jsx(AudioPlayerProvider, {
     children: /* @__PURE__ */ jsxs(SpectrumProvider, {
       rootContainerProps,
-      children: [/* @__PURE__ */ jsx(GlobalStyle, {}), /* @__PURE__ */ jsx(AudioPlayer, {
+      children: [/* @__PURE__ */ jsx(AudioPlayer, {
         ...audioPlayProps
-      })]
+      }), /* @__PURE__ */ jsx(GlobalStyle, {})]
     })
   });
 };

package/dist/types/components/AudioPlayer/Context/StateContext/element.d.ts

@@ -10,6 +10,7 @@ export declare type ActiveUI = Partial<{
     playList: PlayListUI;
     prevNnext: boolean;
     volume: boolean;
+    volumeSlider: boolean;
     repeatType: boolean;
     trackTime: TrackTimeUI;
     trackInfo: boolean;

package/dist/types/components/AudioPlayer/Context/StateContext/placement.d.ts

@@ -3,7 +3,7 @@ import { ActiveUI } from "./element";
 export declare type PlayListPlacement = "bottom" | "top";
 export declare type PlayerPlacement = "bottom" | "top" | "bottom-left" | "bottom-right" | "top-left" | "top-right";
 export declare const interfacePlacementMaxLength = 10;
-export declare type InterfacePlacementKey = Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime"> | "trackTimeCurrent" | "trackTimeDuration";
+export declare type InterfacePlacementKey = Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime" | "volumeSlider"> | "trackTimeCurrent" | "trackTimeDuration";
 export declare type InterfaceGridTemplateArea = Partial<Record<InterfacePlacementKey, `row${NumbersToUnionNum<typeof interfacePlacementMaxLength>}-${NumbersToUnionNum<typeof interfacePlacementMaxLength>}`>>;
 export declare type InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
 export declare type InterfacePlacement = {

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -7,6 +7,7 @@ export interface DropdownProps extends Omit<Partial<DropdownContext>, "setIsOpen
     triggerType?: "click" | "hover";
     outboundClickActive?: boolean;
     placement?: DropdownContext["placement"];
+    disabled?: boolean;
 }
 declare const Dropdown: FC<PropsWithChildren<DropdownProps>>;
 declare type DropdownComponent = typeof Dropdown & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modern-audio-player",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "homepage": "https://github.com/slash9494/react-modern-audio-player/",
   "module": "dist/index.es.js",
   "main": "dist/index.cjs",
@@ -9,10 +9,6 @@
   "files": [
     "dist"
   ],
-  "exports": {
-    ".": { 
-    }
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/slash9494/react-modern-audio-player.git"
@@ -20,8 +16,7 @@
   "scripts": {
     "dev": "vite --host",
     "build": "rm -rf dist && tsc && vite build",
-    "preview": "vite preview",
-    "publish": "rm -rf dist && tsc && vite build"
+    "preview": "vite preview"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -48,5 +43,6 @@
     "vite": "^2.9.0",
     "vite-plugin-dts": "^1.1.0",
     "vite-plugin-libcss": "^1.0.5"
-  }
+  },
+  "keywords": ["audio", "player", "react", "react-modern-audio-player"]
 }