BrandingPage.js
1 month ago
ContributePage.js
1 month ago
CustomCssPage.js
1 month ago
LicensePage.js
1 month ago
MediaHubPage.js
1 month ago
PresetsPage.js
1 month ago
UninstallPage.js
1 month ago
ViewingAnalyticsPage.js
1 month ago
ViewingAnalyticsPage.js
115 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { useCallback } from 'react'; |
| 3 | import { Container, Switch, toast, Tooltip } from '@bsf/force-ui'; |
| 4 | import { Info } from 'lucide-react'; |
| 5 | import SettingsPageShell from '../shared/SettingsPageShell'; |
| 6 | import SectionCard from '../shared/SectionCard'; |
| 7 | import ProGate from '../shared/ProGate'; |
| 8 | import useSettingOption from '../../../hooks/useSettingOption'; |
| 9 | import useRegisterActivePage from '../../../hooks/useRegisterActivePage'; |
| 10 | import { OPTION_KEYS } from '../config'; |
| 11 | |
| 12 | const DEFAULT_ANALYTICS = { |
| 13 | enable: false, |
| 14 | purge_data: true, |
| 15 | }; |
| 16 | |
| 17 | const isPremium = window.prestoPlayer?.isPremium ?? false; |
| 18 | |
| 19 | const ViewingAnalyticsPage = ( { registerActivePage } ) => { |
| 20 | const { data, setData, save, reset, isDirty, isSaving, isLoading } = |
| 21 | useSettingOption( OPTION_KEYS.analytics, DEFAULT_ANALYTICS ); |
| 22 | |
| 23 | const update = ( patch ) => |
| 24 | setData( ( prev ) => ( { |
| 25 | ...( prev || DEFAULT_ANALYTICS ), |
| 26 | ...patch, |
| 27 | } ) ); |
| 28 | |
| 29 | const handleSave = useCallback( async () => { |
| 30 | try { |
| 31 | await save(); |
| 32 | toast.success( __( 'Settings saved.', 'presto-player' ), { |
| 33 | autoDismiss: 3000, |
| 34 | } ); |
| 35 | } catch ( err ) { |
| 36 | toast.error( __( 'Could not save settings.', 'presto-player' ), { |
| 37 | autoDismiss: 5000, |
| 38 | } ); |
| 39 | } |
| 40 | }, [ save ] ); |
| 41 | |
| 42 | useRegisterActivePage( registerActivePage, { |
| 43 | isDirty, |
| 44 | save: handleSave, |
| 45 | discard: reset, |
| 46 | } ); |
| 47 | |
| 48 | return ( |
| 49 | <SettingsPageShell |
| 50 | title={ __( 'Video Analytics', 'presto-player' ) } |
| 51 | isDirty={ isDirty } |
| 52 | isSaving={ isSaving } |
| 53 | isLoading={ isLoading } |
| 54 | onSave={ handleSave } |
| 55 | > |
| 56 | <SectionCard> |
| 57 | <ProGate |
| 58 | enabled={ isPremium } |
| 59 | title={ __( 'Video Analytics', 'presto-player' ) } |
| 60 | description={ __( |
| 61 | 'Track video views, watch time, and engagement metrics.', |
| 62 | 'presto-player' |
| 63 | ) } |
| 64 | > |
| 65 | <Container direction="column" className="gap-4"> |
| 66 | <Switch |
| 67 | size="md" |
| 68 | value={ !! data.enable } |
| 69 | onChange={ ( val ) => update( { enable: val } ) } |
| 70 | label={ { |
| 71 | heading: __( 'Enable', 'presto-player' ), |
| 72 | description: __( |
| 73 | 'Enable view analytics for your media.', |
| 74 | 'presto-player' |
| 75 | ), |
| 76 | } } |
| 77 | /> |
| 78 | |
| 79 | { data.enable && ( |
| 80 | <Switch |
| 81 | size="md" |
| 82 | value={ !! data.purge_data } |
| 83 | onChange={ ( val ) => update( { purge_data: val } ) } |
| 84 | label={ { |
| 85 | heading: ( |
| 86 | <span className="inline-flex items-center gap-1.5"> |
| 87 | { __( 'Auto-Purge Data (recommended)', 'presto-player' ) } |
| 88 | <Tooltip |
| 89 | content={ __( |
| 90 | 'Analytics records older than 90 days are automatically deleted to keep your database lean. Disable only if you need long-term historical data.', |
| 91 | 'presto-player' |
| 92 | ) } |
| 93 | arrow |
| 94 | placement="right" |
| 95 | > |
| 96 | <Info className="size-3.5 text-icon-secondary cursor-help shrink-0" /> |
| 97 | </Tooltip> |
| 98 | </span> |
| 99 | ), |
| 100 | description: __( |
| 101 | 'Automatically purge data older than 90 days.', |
| 102 | 'presto-player' |
| 103 | ), |
| 104 | } } |
| 105 | /> |
| 106 | ) } |
| 107 | </Container> |
| 108 | </ProGate> |
| 109 | </SectionCard> |
| 110 | </SettingsPageShell> |
| 111 | ); |
| 112 | }; |
| 113 | |
| 114 | export default ViewingAnalyticsPage; |
| 115 |