@livepeer-frameworks/player-react 0.1.0 → 0.1.2

package/src/ui/context-menu.tsx

@@ -1,40 +1,36 @@
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-import { cn } from "@livepeer-frameworks/player-core"
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "@livepeer-frameworks/player-core";
 
-const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenu = ContextMenuPrimitive.Root;
 
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
-const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuGroup = ContextMenuPrimitive.Group;
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
 
-const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuSub = ContextMenuPrimitive.Sub;
 
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
-    className={cn(
-      "fw-context-menu-item",
-      inset && "fw-context-menu-item--inset",
-      className
-    )}
+    className={cn("fw-context-menu-item", inset && "fw-context-menu-item--inset", className)}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
@@ -45,8 +41,8 @@ const ContextMenuSubContent = React.forwardRef<
     className={cn("fw-player-surface fw-context-menu", className)}
     {...props}
   />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -59,34 +55,30 @@ const ContextMenuContent = React.forwardRef<
       style={{
         // Inline styles for portal elements (rendered outside .fw-player-root)
         // These ensure styles work even without CSS variable inheritance
-        backgroundColor: 'hsl(235 19% 13%)',
-        color: 'hsl(229 35% 75%)',
-        border: '1px solid rgba(90, 96, 127, 0.3)',
-        ...style
+        backgroundColor: "hsl(235 19% 13%)",
+        color: "hsl(229 35% 75%)",
+        border: "1px solid rgba(90, 96, 127, 0.3)",
+        ...style,
       }}
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
     ref={ref}
-    className={cn(
-      "fw-context-menu-item",
-      inset && "fw-context-menu-item--inset",
-      className
-    )}
+    className={cn("fw-context-menu-item", inset && "fw-context-menu-item--inset", className)}
     {...props}
   />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
@@ -105,9 +97,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -125,26 +116,22 @@ const ContextMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "fw-context-menu-label",
-      inset && "fw-context-menu-item--inset",
-      className
-    )}
+    className={cn("fw-context-menu-label", inset && "fw-context-menu-item--inset", className)}
     {...props}
   />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
@@ -155,24 +142,18 @@ const ContextMenuSeparator = React.forwardRef<
     className={cn("fw-context-menu-separator", className)}
     {...props}
   />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
   ContextMenu,
@@ -190,4 +171,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};

package/src/ui/select.tsx

@@ -41,13 +41,11 @@ const SelectContent = React.forwardRef<
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
         className
       )}
-      style={{ backgroundColor: '#1a1b26' }} // Inline fallback for opaque background
+      style={{ backgroundColor: "#1a1b26" }} // Inline fallback for opaque background
       position={position}
       {...props}
     >
-      <SelectPrimitive.Viewport className="p-1">
-        {children}
-      </SelectPrimitive.Viewport>
+      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ));
@@ -82,7 +80,11 @@ const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)} {...props} />
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)}
+    {...props}
+  />
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
@@ -90,7 +92,11 @@ const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
@@ -101,5 +107,5 @@ export {
   SelectLabel,
   SelectSeparator,
   SelectTrigger,
-  SelectValue
+  SelectValue,
 };

package/src/ui/slider.tsx

@@ -13,48 +13,37 @@ export interface SliderProps extends React.ComponentPropsWithoutRef<typeof Slide
 }
 
 const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
-  ({ className, trackClassName, thumbClassName, showTrack = true, hoverThumb: _hoverThumb = false, accentColor = false, orientation = "horizontal", ...props }, ref) => {
-    // Colors based on accentColor prop
-    const rangeColorClass = accentColor ? "bg-[hsl(var(--tn-cyan,195_100%_50%))]" : "bg-white/90";
-    const thumbColorClass = accentColor ? "bg-[hsl(var(--tn-cyan,195_100%_50%))]" : "bg-white";
-
+  (
+    {
+      className,
+      trackClassName,
+      thumbClassName,
+      showTrack = true,
+      hoverThumb: _hoverThumb = false,
+      accentColor = false,
+      orientation = "horizontal",
+      ...props
+    },
+    ref
+  ) => {
     return (
       <SliderPrimitive.Root
         ref={ref}
         orientation={orientation}
-        className={cn(
-          "group relative flex touch-none select-none items-center cursor-pointer",
-          orientation === "horizontal" ? "w-full h-5" : "h-full flex-col w-5",
-          className
-        )}
+        className={cn("fw-slider", orientation === "vertical" && "fw-slider--vertical", className)}
         {...props}
       >
         {showTrack && (
-          <SliderPrimitive.Track
-            className={cn(
-              "absolute rounded-full bg-white/30 transition-all duration-150",
-              orientation === "horizontal"
-                ? "inset-x-0 h-1 group-hover:h-1.5"
-                : "inset-y-0 w-1 group-hover:w-1.5",
-              trackClassName
-            )}
-          >
+          <SliderPrimitive.Track className={cn("fw-slider-track", trackClassName)}>
             <SliderPrimitive.Range
-              className={cn(
-                "absolute rounded-full transition-all duration-150",
-                orientation === "horizontal" ? "h-full" : "w-full bottom-0",
-                rangeColorClass
-              )}
+              className={cn("fw-slider-range", accentColor && "fw-slider-range--accent")}
             />
           </SliderPrimitive.Track>
         )}
         <SliderPrimitive.Thumb
           className={cn(
-            "block rounded-full border-0 cursor-pointer shadow-md transition-all duration-150",
-            "w-2.5 h-2.5 group-hover:w-3.5 group-hover:h-3.5",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
-            "disabled:pointer-events-none disabled:opacity-50",
-            thumbColorClass,
+            "fw-slider-thumb",
+            accentColor && "fw-slider-thumb--accent",
             thumbClassName
           )}
         />

package/dist/types/components/players/DashJsPlayer.d.ts

@@ -1,18 +0,0 @@
-/**
- * DASH.js Player - React Wrapper
- *
- * MPEG-DASH streaming via dash.js library.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { DashJsPlayerImpl } from '@livepeer-frameworks/player-core';
-export { DashJsPlayerImpl };
-type Props = {
-    src: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const DashJsPlayer: React.FC<Props>;
-export default DashJsPlayer;

package/dist/types/components/players/HlsJsPlayer.d.ts

@@ -1,18 +0,0 @@
-/**
- * HLS.js Player - React Wrapper
- *
- * Adaptive HLS streaming via hls.js library.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { HlsJsPlayerImpl } from '@livepeer-frameworks/player-core';
-export { HlsJsPlayerImpl };
-type Props = {
-    src: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const HlsJsPlayer: React.FC<Props>;
-export default HlsJsPlayer;

package/dist/types/components/players/MewsWsPlayer/index.d.ts

@@ -1,18 +0,0 @@
-/**
- * MEWS WebSocket Player - React Wrapper
- *
- * Low-latency WebSocket MP4 streaming using MediaSource Extensions.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { MewsWsPlayerImpl } from '@livepeer-frameworks/player-core';
-export { MewsWsPlayerImpl };
-type Props = {
-    wsUrl: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const MewsWsPlayer: React.FC<Props>;
-export default MewsWsPlayer;

package/dist/types/components/players/MistPlayer.d.ts

@@ -1,20 +0,0 @@
-/**
- * MistServer Legacy Player - React Wrapper
- *
- * Fallback player using MistServer's native player.js.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { MistPlayerImpl } from '@livepeer-frameworks/player-core';
-export { MistPlayerImpl };
-type Props = {
-    src: string;
-    streamName?: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    devMode?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const MistPlayer: React.FC<Props>;
-export default MistPlayer;

package/dist/types/components/players/MistWebRTCPlayer/index.d.ts

@@ -1,20 +0,0 @@
-/**
- * MistWebRTC Player - React Wrapper
- *
- * MistServer native WebRTC with signaling for DVR support.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { MistWebRTCPlayerImpl } from '@livepeer-frameworks/player-core';
-export { MistWebRTCPlayerImpl };
-interface Props {
-    src: string;
-    autoPlay?: boolean;
-    muted?: boolean;
-    controls?: boolean;
-    poster?: string;
-    onReady?: (video: HTMLVideoElement) => void;
-    onError?: (error: Error) => void;
-}
-export declare const MistWebRTCPlayer: React.FC<Props>;
-export default MistWebRTCPlayerImpl;

package/dist/types/components/players/NativePlayer.d.ts

@@ -1,19 +0,0 @@
-/**
- * Native Player - React Wrapper
- *
- * HTML5 video and WHEP WebRTC playback.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { NativePlayerImpl, DirectPlaybackPlayerImpl } from '@livepeer-frameworks/player-core';
-export { NativePlayerImpl, DirectPlaybackPlayerImpl };
-type Props = {
-    src: string;
-    type?: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const NativePlayer: React.FC<Props>;
-export default NativePlayer;

package/dist/types/components/players/VideoJsPlayer.d.ts

@@ -1,18 +0,0 @@
-/**
- * Video.js Player - React Wrapper
- *
- * HLS streaming via Video.js with VHS (videojs-http-streaming).
- * The implementation is in @livepeer-frameworks/player-core.
- */
-import React from 'react';
-import { VideoJsPlayerImpl } from '@livepeer-frameworks/player-core';
-export { VideoJsPlayerImpl };
-type Props = {
-    src: string;
-    muted?: boolean;
-    autoPlay?: boolean;
-    controls?: boolean;
-    onError?: (e: Error) => void;
-};
-declare const VideoJsPlayer: React.FC<Props>;
-export default VideoJsPlayer;

package/src/components/players/DashJsPlayer.tsx

@@ -1,56 +0,0 @@
-/**
- * DASH.js Player - React Wrapper
- *
- * MPEG-DASH streaming via dash.js library.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-
-import React, { useEffect, useRef } from 'react';
-import { DashJsPlayerImpl } from '@livepeer-frameworks/player-core';
-
-// Re-export the implementation from core for backwards compatibility
-export { DashJsPlayerImpl };
-
-type Props = {
-  src: string;
-  muted?: boolean;
-  autoPlay?: boolean;
-  controls?: boolean;
-  onError?: (e: Error) => void;
-};
-
-// React component wrapper
-const DashJsPlayer: React.FC<Props> = ({
-  src,
-  muted = true,
-  autoPlay = true,
-  controls = true,
-  onError
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<DashJsPlayerImpl | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const player = new DashJsPlayerImpl();
-    playerRef.current = player;
-
-    player.initialize(
-      containerRef.current,
-      { url: src, type: 'dash/video/mp4' },
-      { autoplay: autoPlay, muted, controls }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
-
-    return () => {
-      player.destroy();
-      playerRef.current = null;
-    };
-  }, [src, muted, autoPlay, controls, onError]);
-
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
-};
-
-export default DashJsPlayer;

package/src/components/players/HlsJsPlayer.tsx

@@ -1,56 +0,0 @@
-/**
- * HLS.js Player - React Wrapper
- *
- * Adaptive HLS streaming via hls.js library.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-
-import React, { useEffect, useRef } from 'react';
-import { HlsJsPlayerImpl } from '@livepeer-frameworks/player-core';
-
-// Re-export the implementation from core for backwards compatibility
-export { HlsJsPlayerImpl };
-
-type Props = {
-  src: string;
-  muted?: boolean;
-  autoPlay?: boolean;
-  controls?: boolean;
-  onError?: (e: Error) => void;
-};
-
-// React component wrapper
-const HlsJsPlayer: React.FC<Props> = ({
-  src,
-  muted = true,
-  autoPlay = true,
-  controls = true,
-  onError
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<HlsJsPlayerImpl | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const player = new HlsJsPlayerImpl();
-    playerRef.current = player;
-
-    player.initialize(
-      containerRef.current,
-      { url: src, type: 'html5/application/vnd.apple.mpegurl' },
-      { autoplay: autoPlay, muted, controls }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
-
-    return () => {
-      player.destroy();
-      playerRef.current = null;
-    };
-  }, [src, muted, autoPlay, controls, onError]);
-
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
-};
-
-export default HlsJsPlayer;

package/src/components/players/MewsWsPlayer/index.tsx

@@ -1,56 +0,0 @@
-/**
- * MEWS WebSocket Player - React Wrapper
- *
- * Low-latency WebSocket MP4 streaming using MediaSource Extensions.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-
-import React, { useEffect, useRef } from 'react';
-import { MewsWsPlayerImpl } from '@livepeer-frameworks/player-core';
-
-// Re-export the implementation from core for backwards compatibility
-export { MewsWsPlayerImpl };
-
-type Props = {
-  wsUrl: string;
-  muted?: boolean;
-  autoPlay?: boolean;
-  controls?: boolean;
-  onError?: (e: Error) => void;
-};
-
-// React component wrapper
-const MewsWsPlayer: React.FC<Props> = ({
-  wsUrl,
-  muted = true,
-  autoPlay = true,
-  controls = true,
-  onError
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<MewsWsPlayerImpl | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const player = new MewsWsPlayerImpl();
-    playerRef.current = player;
-
-    player.initialize(
-      containerRef.current,
-      { url: wsUrl, type: 'ws/video/mp4' },
-      { autoplay: autoPlay, muted, controls }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
-
-    return () => {
-      player.destroy();
-      playerRef.current = null;
-    };
-  }, [wsUrl, muted, autoPlay, controls, onError]);
-
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
-};
-
-export default MewsWsPlayer;

package/src/components/players/MistPlayer.tsx

@@ -1,60 +0,0 @@
-/**
- * MistServer Legacy Player - React Wrapper
- *
- * Fallback player using MistServer's native player.js.
- * The implementation is in @livepeer-frameworks/player-core.
- */
-
-import React, { useEffect, useRef } from 'react';
-import { MistPlayerImpl } from '@livepeer-frameworks/player-core';
-
-// Re-export the implementation from core for backwards compatibility
-export { MistPlayerImpl };
-
-type Props = {
-  src: string;
-  streamName?: string;
-  muted?: boolean;
-  autoPlay?: boolean;
-  controls?: boolean;
-  devMode?: boolean;
-  onError?: (e: Error) => void;
-};
-
-// React component wrapper
-const MistPlayer: React.FC<Props> = ({
-  src,
-  streamName,
-  muted = true,
-  autoPlay = true,
-  controls = true,
-  devMode = false,
-  onError
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<MistPlayerImpl | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const player = new MistPlayerImpl();
-    playerRef.current = player;
-
-    player.initialize(
-      containerRef.current,
-      { url: src, type: 'mist/legacy', streamName },
-      { autoplay: autoPlay, muted, controls, devMode }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
-
-    return () => {
-      player.destroy();
-      playerRef.current = null;
-    };
-  }, [src, streamName, muted, autoPlay, controls, devMode, onError]);
-
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
-};
-
-export default MistPlayer;