Template Directory

Github

Demo Link

Directory

| src
| ├─ api                        // Module: Cloud interface configuration file
| ├─ components                 // Module: components
| | ├─ featureComponents               // Extra functional components
| | | ├─ sdCardConfig                  // SD video popup
| | | ├─ sdFormatting                  // Sd card format
| | | ├─ statisicPage                  // General Statistics Page (Statistics of Pet Feeder)
| | | ├─ timerPage                    // General timing page (dpLocalTimer is a custom protocol timing, and timer is general cloud and device timing)
| | ├─ liveBottomBar               // Large module: bottom menu bar
| | | ├─ cloudStorageFeature         // Small module: Tab menu at the bottom-cloud storage entrance
| | | ├─ collectPointFeature         // Small module: bottom tab menu-collection point entrance
| | | ├─ customFeature               // Small module: bottom tab menu-function entry
| | | | ├─ cruisePage                   // Cruise page component
| | | | ├─ deviceVolumePage             // Device volume popup component
| | | | ├─ floodLightPage               // Light pop-up window assembly
| | | | ├─ lullabyPage                  // Lullaby pop-up assembly
| | | | ├─  panelView.js                // Function menu interface entrance
| | | ├─ feedFeature                 // Small module: bottom tab menu-feeding entrance
| | | ├─ notifyFeature               // Small module: bottom tab menu-message entry
| | | ├─ ptzZoomFeature              // Small module: Tab menu at the bottom-Cloud platform entrance
| | | ├─  liveControlConfig.js       // Bottom tab module function, message, cloud platform, collection point, function
| | | ├─  liveControlBasic.js        // Basic functions at the bottom, full screen, intercom more
| | ├─ livePlayComponents       // Module: Preview video module component collection
| | | └─  cameraLoadText.js        // Video player mask component: Used to prompt abnormal video playback, such as: offline, privacy mode, network error, etc.
| | | ├─  cameraMic.js             // Unidirectional intercom microphone intercom effect component
| | | ├─  cameraTopList.js         // Non-full screen top menu module: video switching, width and height adjustment, speaker adjustment
| | | ├─  customPlayer.js          // Secondary packaging component based on native player
| | | ├─  fullFeatureBottomLeft.js  // Ptz, focal length and other functions at the bottom left of the full screen
| | | ├─  fullFeatureBottomRight.js // Full screen bottom right mic, video, camera function
| | | ├─  fullFeatureTopLeft.js     // Full screen top left, back
| | | ├─  fullFeatureTopRight.js    // Full screen top right, sound, switch video stream, etc.
| | | ├─  normalPlayFeature.js     // Non-full screen video function module entrance
| | ├─ nativeComponents        // Module: native package reference module
| | | ├─  cameraPlayer.js          // Video player view module
| | | └─  cameraManager.js         // Video API call encapsulation module
| | ├─ publicComponents        // Module: Common components
| | | ├─  batteryFeature              // Low-power product power module
| | | ├─  customDialog              // Public custom pop-up components: such as lullaby, device volume function module
| | | ├─  selfDialog                // Self-edited dialog: mainly used video settings to solve the problem that some masks of Android cannot be completely covered
| | | ├─  switchDialog              // Common pop-up selection box components: such as night vision mode, non-full-screen video stream switching, etc. for selection switching
| | | ├─  zoomFullScreen.js        // Full screen focal length component
| | | ├─  zoomCommon.js            // Non-full screen focal length components
| | | ├─  topPublicTip.js          // Text components at the top: such as: two-way intercom, text prompts during calls
| | | ├─  topHeader.js             // Common topBar package component
| | | ├─  timerInterVal.js         // Video timing component
| | | ├─  ptzFullScreen.js         // Full screen ptz gimbal control component
| | | ├─  ptzCommon.js             // Non-full screen ptz gimbal control component
| | | ├─  progressBarCommon.js     // Common progress bar component
| | | ├─  loadingCircle.js         // Alarm message three-point load component
| | | ├─  cutScreen.js             // Screenshot
| | | ├─  clarityFullScreen.js     // Full screen resolution switching component
| ├─ config                   // Module: Project configuration
| | ├─  cameraData.js              // Common data configuration set: eg: all collection configurations of video streams
| | ├─  click.js                   // A collection of basic methods related to video and interactive with native: such as: entering cloud storage, taking pictures, intercom, obtaining device configuration information, etc.
| | ├─  dpTimeData.js              // dp timing data configuration
| | ├─  global.js                  // Global public variable
| | ├─  index.js                   // Commonly used basic adaptation configuration: cx, cy, whether it is iphoneX, screen width, height, etc.
| | ├─  panelBasicFeatureInitData  // Camera basic function configuration
| | ├─  panelClick.js              // Custom function menu click event method collection
| | ├─  panelMoreFeatureInitData.js   // Multifunctional custom initial configuration in tab function module
| | ├─  panelTableFeatureInitData.js  // Tab function menu module initial configuration
| | ├─  pidFeatureOrderData.js.js     // Set multi-function initialization data according to different pid
| | ├─  pidTabOrderData.js            // Set tab initialization data according to different pid
| | ├─  popDpDataStore.js          // Custom function display interface data configuration, such as: lamp module configuration, lullaby configuration, etc.
| | └─ theme.js                   // Theme configuration
| ├─ containers                    // Place various components at the page level
| | ├─ LivePlay                    // Module: Video preview interface
| | | ├─  LivePage.js              // Video preview interface entrance
| | | ├─  Live-player-view.js      // Video player entrance
| | | ├─  Live-player-feature.js   // Video player separate function entrance
| | | └─  Live-control-view.js     // Bottom function menu entrance
| ├─ i18n                          // Multilingual configuration
| ├─ redux                      // Module: redux related
| | ├─ modules
| | | ├─  ipcCommon.js             // Custom redux data points, you can just put your new definition here | You can also create your own files
| | | └─  common.js                // The basic template has been encapsulated data, involving dp point information, try not to change
| | ├─  configureStore.js          // rxjs basic configuration
| | ├─  combine.js                 // Merge redux module
| ├─ res                           // Place local resources, including pictures, svg path, etc.
| ├─ utils                      //  Module: Tool Method
| | └─  ColorParser.js             // Lamp module, color conversion tool
| | ├─  dpConfigUtils.js           // Key: delete the module configuration information method, filter method for dp point menu configuration, cloud configuration, local configuration function
| | ├─  index.js                   // Common conversion methods such as: progress bar percentage and value conversion
| | ├─  panelStatus.js             // Function menu page transparency, disable and change the picture tintColor method
| ├─  main.js                      // Project entry file, inherited from `NavigatorLayout`, topbar, routing settings, etc.
| ├─  composeLayout.js             // Encapsulates and handles some `device events` and `device information needed inside the panel
├─  package.json                   // npm dependency management
├─  index.js                       // Android entrance (for compatibility)
├─  index.ios.js                   // ios entrance
├─  index.android.js               // Android entrance
├─  babelrc.js                     // babel configuration file
├─  README.md                      // Project information
├─  .prettierrc.js                 // Prettier configureation
├─  .npmrc                         // npm package source switch
├─  .gitignore                     // git ignore upload configuration information
├─  .eslintrc.js                   // eslint configuration file
└─ .babelrc                        // babel entrance