Merge pull request #779 from THEOplayer/feature/example-extension-button

Add an extension menu with custom actions

Author: tvanlaerhoven

example/src/App.tsx

@@ -51,6 +51,7 @@ import {
   KeyOSDrmFairplayContentProtectionIntegrationFactory,
   KeyOSDrmWidevineContentProtectionIntegrationFactory,
 } from '@theoplayer/react-native-drm';
+import { ExtensionMenuButton } from './custom/ExtensionMenuButton';
 
 // Register Ezdrm Fairplay integration
 ContentProtectionRegistry.registerContentProtectionIntegration('customEzdrm', 'fairplay', new EzdrmFairplayContentProtectionIntegrationFactory());
@@ -166,6 +167,7 @@ export default function App() {
                   <AutoFocusGuide>
                     <ControlBar>
                       <Spacer />
+                      <ExtensionMenuButton>{/*<ExtensionButton label={'Custom action'} onPress={() => {}} />*/}</ExtensionMenuButton>
                       <MediaCacheMenuButton>
                         <MediaCacheDownloadButton />
                         <MediaCachingTaskListSubMenu />

example/src/custom/ExtensionMenuButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { MenuButton, MenuRadioButton, MenuView, ScrollableMenu } from '@theoplayer/react-native-ui';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { ExtensionSvg } from '../res/ExtensionSvg';
+
+export interface ExtensionMenuButtonProps {
+  /**
+   * Overrides for the style of the menu.
+   */
+  menuStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A button component that opens a media cache menu.
+ */
+export const ExtensionMenuButton = (props: React.PropsWithChildren<ExtensionMenuButtonProps>) => {
+  if (!props.children) {
+    return <></>;
+  }
+  return (
+    <MenuButton
+      svg={<ExtensionSvg />}
+      menuConstructor={() => <MenuView style={props.menuStyle} menu={<ScrollableMenu title={'Extensions'} items={props.children} />} />}
+    />
+  );
+};
+
+export const ExtensionButton = ({ label, onPress }: { label: string; onPress?: () => void }) => (
+  <MenuRadioButton label={label} uid={0} onSelect={() => onPress?.()} />
+);

example/src/custom/MediaCacheDownloadButton.tsx

@@ -1,15 +1,15 @@
 import { PlayerContext } from '@theoplayer/react-native-ui';
 import React, { useCallback, useContext } from 'react';
 import { MediaCache } from 'react-native-theoplayer';
-import { MenuRadioButton } from '@theoplayer/react-native-ui/src/ui/components/menu/common/MenuRadioButton';
+import { MenuRadioButton } from '@theoplayer/react-native-ui';
 
 export const MediaCacheDownloadButton = () => {
   const { player } = useContext(PlayerContext);
 
   const onPress = useCallback(() => {
     const currentSource = player?.source;
     if (currentSource) {
-      MediaCache.createTask(currentSource, {
+      void MediaCache.createTask(currentSource, {
         amount: '100%',
         expirationDate: new Date(Date.now() + 24 * 60 * 60 * 1000),
         allowsCellularAccess: true,

example/src/res/ExtensionSvg.tsx

@@ -0,0 +1,18 @@
+import type { SvgProps } from 'react-native-svg';
+import Svg, { Path } from 'react-native-svg';
+import React from 'react';
+import { SvgContext } from '@theoplayer/react-native-ui';
+
+export const ExtensionSvg = (props: SvgProps) => {
+  return (
+    <SvgContext.Consumer>
+      {(context) => (
+        <>
+          <Svg viewBox={'0 -960 960 960'} {...context} {...props}>
+            <Path d="M352-120H200q-33 0-56.5-23.5T120-200v-152q48 0 84-30.5t36-77.5q0-47-36-77.5T120-568v-152q0-33 23.5-56.5T200-800h160q0-42 29-71t71-29q42 0 71 29t29 71h160q33 0 56.5 23.5T800-720v160q42 0 71 29t29 71q0 42-29 71t-71 29v160q0 33-23.5 56.5T720-120H568q0-50-31.5-85T460-240q-45 0-76.5 35T352-120Zm-152-80h85q24-66 77-93t98-27q45 0 98 27t77 93h85v-240h80q8 0 14-6t6-14q0-8-6-14t-14-6h-80v-240H480v-80q0-8-6-14t-14-6q-8 0-14 6t-6 14v80H200v88q54 20 87 67t33 105q0 57-33 104t-87 68v88Zm260-260Z" />
+          </Svg>
+        </>
+      )}
+    </SvgContext.Consumer>
+  );
+};