Recording timeline component

The Lytx recording timeline component contains everything you need to stream recordings from a dashcam that is online or in standby mode, see Online playground:

recording timeline component
Copy
Copied
<lytx-recording-timeline auth-token="[auth-token]" imei="[imei]" organization-id="[organization-id]"></lytx-recording-timeline>

This documentation describes the following for our recording timeline component:

Recording timeline component parameters

The following table lists the recording parameters. The variables listed in the table should be in a key-value structure, for easy override and configuration by developers.

Name Type Required Default Description
auth-token string Required - Retrieve an authentication token and insert it here.
organization-id string Required - The organization ID for the organization of the relevant device.
imei string Required - The IMEI of the device. The IMEI number can be found on a sticker on the device itself or on the back of the device box.
amplitude-key string Optional - The API key for integrating with a specified instance of Amplitude.
font-family string Optional 'Helvetica' This is the font family configured for all text across the UI display.
translations-src string Optional null(en) The URI to use in the language translation file (a JSON file).
primary-color string Optional #e15241, rgb(225,82,65) The color of the buttons and timeline recordings.
is-12-hour string Optional true Use 12 hour format in the time display. If false, 24 hour format is displayed.
title-display boolean Optional true Show or hide the component title.
description-display boolean Optional true Show or hide the component description.
date-value string Optional today If this value is provided, the UI input is disabled and the date to display is the provided value. The Date value in ISO format. Example: 2023-12-15
camera-id-value string Optional In-cab If this value is provided, the UI input is disabled and the lens to display is the provided value. Options include: 1 - road-facing, 2 - in-cab, 50+ - auxiliary camera views.
time-zone-value string Optional Local time If this value is provided, the UI input is disabled and the time zone to display is the provided value. The time value is GMT +/- XX:XX. Example: +10:30
quality-value string Optional Normal quality If this value is provided, the UI input is disabled and the quality to display is the provided value. Options include: lq - normal quality, hq - high quality streaming
download-title boolean Optional true Show or hide the download title.
download-button boolean Optional true Show or hide the download action.
play-title boolean Optional true Show or hide the play title.
play-description boolean Optional true Show or hide the play description.
fullScreen boolean Optional true Show or hide fullscreen mode button.
mute boolean Optional true Show or hide the mute button.
watch-interval string Optional 30 Sets the interval for the video in seconds.
watch-before-button boolean Optional true Show or hide the "watch X seconds before".
watch-again-button boolean Optional true Show or hide the "watch again" button.
continue-watch-button boolean Optional true Show or hide the "continue watching" button.

Recording timeline component events

Configure the eventHandler to handle events triggered by the component.

Name Impact
componentError Triggered to display an error message based on your eventHandler configuration.

Some examples of event listeners

AngularJS

Copy
Copied
// app.component.view.html
<lytx-recording-timeline auth-token="TOKEN" imei="1a2b3c4d5e6" organization-id="5" ng-on-component_error="componentErrorLytxRecordingTimeline($event)"></lytx-recording-timeline>

React

Copy
Copied
// app.component.view.html
import './App.css';
import { useEffect, useRef } from 'react';
function App() {
  const playerRef = useRef()
  useEffect(() => {
    const element = playerRef.current
    const onComponentErrorHandler = (event) => {
      console.log('onComponentErrorHandler')
      console.error(event)
    }
    if (element) {
      element.addEventListener("componentError", onComponentErrorHandler)
    }
    return () => {
      if (element) {
        element.removeEventListener("componentError", onComponentErrorHandler)
      }
    }
  }, [playerRef])
  return (
    <div className="App">
      <lytx-recording-timeline ref={playerRef} auth-token="TOKEN" imei="1a2b3c4d5e6" organization-id="5"></lytx-recording-timeline>
    </div>
  );
}
export default App;

Translation Keys

Following are the JSON keys that can be customized when localizing your app. For general keys (not specific to a component), see Localization support.

Key Value Description
RoadFacingLens Road-facing lens Displayed in the camera name for cameraId 1.
InCabinLens In-cab lens Displayed in the camera name for cameraId 2.
AuxiliaryCamera Auxiliary camera Displayed in the camera name for cameraId other than 1 and 2.
ContinueWatching Continue watching Displayed in the button that appears after 30 seconds of video.
AuthTokenRequired AuthToken is a required property. Displayed when the auth token property is missing.
ImeiRequired IMEI is a required property. Displayed when the imei property is missing.
CameraIdRequired cameraId is a required property. Displayed when the camera id property is missing.
OrganizationIdRequired organizationId is a required property. Displayed when the organization id property is missing.
DeviceNotFound IMEI is not found. Displayed when the imei isn't found in the system.
CameraNotFound Camera is not available. Displayed when the camera ID isn't found.
DeviceOffline The device is offline. Displayed when the device is offline.
RecordingDownloadFailed Unable to download recording video. Displayed when an error occurs while downloading the recording.
LoadingRecordingFromCamera Loading from camera Displayed when the recording stream starts loading.
RetrieveVideoFromCamera Retrieve video from camera Displayed when the recordings are available for the event.
UnableToLoadRecording Unable to load video Displayed when an error occurs while streaming the recording.
NormalQuality Normal quality Displayed in the recording quality option for normal quality.
HighQuality High quality Displayed in the recording quality option for high quality.
SecondsBefore Seconds before Displayed in the button to play previous recording video.
SecondsBeforeEvent Seconds before event Displayed in the seconds before event option.
SecondsAfterEvent Seconds after event Displayed in the seconds after event option.
WatchAgain Watch again Displayed in the button that appears after a recording is played.
ContinueWatching Continue watching Displayed in the button that appears after a recording is played to play the next X seconds of video.
Save Save Displayed in the button that appears in the datepicker to save the date.
Cancel Cancel Displayed in the button in the datepicker to close the datepicker.
Play Play Displayed in the button to play the selected time recording.
Download Download Displayed in the button to download the prepared file.
PrepareDownload Prepare download Displayed in the button to start preparing the recording for download.
PreparingTheFile Preparing the file Displayed in the button while preparing the recording for download.
RetryDownload Retry download Displayed in the button when the download process has failed.
DownloadNow Download now Displayed in the button when the recording is ready to download.
RecordingsUnavailable No recordings available Displayed when recordings are unavailable for the selected date.
RecordingsUnavailableNote Choose another day. Displayed in the message note when recordings are unavailable for the selected date.
DeviceOfflineNote Select a device that is online or in standby mode to see the recordings. Displayed in the message note when the device is offline.
Recordings Recordings Displayed in the title.
RecordingsNote Adjust the parameters to change the dates and recordings displayed on your timeline. Displayed in the sub title below the title.
LocalTimeZone Local Displayed in the timezone options for the user timezone.
InvalidDate Invalid date provided. Displayed when the provided date is invalid.
InvalidCameraId Invalid camera provided. Displayed when the provided camera is invalid.
InvalidTimeZone Invalid time zone provided. Displayed when the provided time zone is invalid.
InvalidRecordingQuality Invalid quality provided. Displayed when the provided recording quality is invalid.

Amplitude events

Every event sent to Amplitude includes the following general metadata:

  • user
  • reseller name
  • time
  • source

The Amplitude events for the recording timeline component include:

When the user clicks Event name Additional data
Date picker Recording timeline - date change No additional data
Camera type (in cabin/front) Recording timeline - camera type change Camera type
TimeZone Recording timeline - timeZone change Time Zone
Quality Recording timeline - quality change Quality
Move timeline cursor Recording timeline - cursor moved No additional data
Play recording Recording timeline - play recording No additional data
Pre download recording Recording timeline - download button selected No additional data
Cancel recording Recording timeline - cancel recording No additional data
Seconds before Recording timeline - seconds before change The seconds
Seconds after Recording timeline - seconds after change The seconds
Prepare download Recording timeline - prepare download No additional data
Download recording Recording timeline - download performed No additional data
Play/Pause Recording timeline - play/pause recording Action (play/pause)
Full Screen Recording timeline - recording fullscreen selected No additional data
Watch X seconds before Recording timeline - watch X seconds before No additional data
Watch again Recording timeline - watch again No additional data
Continue watching Recording timeline - continue watching No additional data

For general keys (not specific to a component), see Analytics support.