react-chrono - npm Package Compare versions

Comparing version 1.1.7 to 1.2.0

dist/components/timeline-elements/timeline-card-content/timeline-card-content.styles.d.ts

@@ -23,16 +23,5 @@ /// <reference types="react" />
 }, object>;
-export declare const MediaWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: Theme;
-    active?: boolean | undefined;
-    mode?: "VERTICAL" | "HORIZONTAL" | "TREE" | undefined;
-    dir?: string | undefined;
+export declare const SlideShowProgressBar: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    theme?: Theme | undefined;
+    duration?: number | undefined;
 }, object>;
-export declare const Media: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
-    mode?: "VERTICAL" | "HORIZONTAL" | "TREE" | undefined;
-    visible?: boolean | undefined;
-    active?: boolean | undefined;
-    dir?: string | undefined;
-}, object>;
-export declare const MediaDetailsWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    mode?: "VERTICAL" | "HORIZONTAL" | "TREE" | undefined;
-}, object>;

dist/components/timeline-elements/timeline-control/timeline-control.styles.d.ts

@@ -13,3 +13,5 @@ /// <reference types="react" />
 }, object>;
-export declare const TimelineControlContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, object>;
+export declare const TimelineControlContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    slideShowActive?: boolean | undefined;
+}, object>;
 export declare const ControlButton: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
@@ -16,0 +18,0 @@ theme?: Theme | undefined;

dist/models/TimelineCollnModel.d.ts

@@ -14,2 +14,8 @@ import { TimelineItemViewModel } from "./TimelineItemModel";
     cardHeight?: number;
+    onMediaStateChange: (state: {
+        id?: string;
+        playing?: boolean;
+        paused?: boolean;
+    }) => void;
+    slideItemDuration?: number;
 }
@@ -16,0 +22,0 @@ export interface Scroll {

dist/models/TimelineContentModel.d.ts

@@ -14,3 +14,9 @@ import { Media } from "./TimelineItemMedia";
     onShowMore: () => void;
+    onMediaStateChange: (state: {
+        id?: string;
+        playing?: boolean;
+        paused?: boolean;
+    }) => void;
     slideShowActive?: boolean;
+    slideItemDuration?: number;
     theme?: Theme;
@@ -17,0 +23,0 @@ title?: string;

dist/models/TimelineItemMedia.d.ts

@@ -1,10 +0,15 @@
-/// <reference types="react" />
 export declare type MediaType = "VIDEO" | "IMAGE";
-export interface MediaURL {
+export interface MediaSource {
     url: string;
+    type?: string;
 }
-export declare type Media = {
+export interface Media {
     name?: string;
     type: MediaType;
-    source: MediaURL | React.FunctionComponent;
-};
+    source: MediaSource;
+}
+export interface MediaState {
+    id?: string;
+    paused?: boolean;
+    playing?: boolean;
+}

dist/models/TimelineItemModel.d.ts

@@ -29,2 +29,8 @@ import { Scroll } from "./TimelineCollnModel";
     cardHeight?: number;
+    slideItemDuration?: number;
+    onMediaStateChange: (state: {
+        id?: string;
+        playing?: boolean;
+        paused?: boolean;
+    }) => void;
 }

dist/models/TimelineModel.d.ts

@@ -49,2 +49,9 @@ import { TimelineItemModel } from "./TimelineItemModel";
     slideShowRunning?: boolean;
+    onMediaStateChange: (state: {
+        id?: string;
+        playing?: boolean;
+        paused?: boolean;
+    }) => void;
+    slideShowEnabled?: boolean;
+    slideItemDuration?: number;
 }
@@ -51,0 +58,0 @@ /**

dist/models/TimelineTreeModel.d.ts

@@ -1,45 +0,47 @@
-/// <reference types="react" />
-import { TimelineItemViewModel } from "./TimelineItemModel";
 import { Scroll } from "./TimelineCollnModel";
 import { Media } from "./TimelineItemMedia";
-export interface TreeLeafModel {
+import { TimelineItemViewModel } from "./TimelineItemModel";
+import { TimelineMode } from "./TimelineModel";
+interface CommonPropsModel {
+    onClick: (id?: string) => void;
+    slideItemDuration?: number;
+    slideShowRunning?: boolean;
+    theme?: Theme;
+    cardHeight?: number;
+    mode?: TimelineMode;
+    alternateCards?: boolean;
+}
+interface CommonBranchAndLeafModel extends CommonPropsModel {
     active?: boolean;
-    alternateCards?: boolean;
     className: string;
     id?: string;
+}
+export interface TreeLeafModel extends CommonBranchAndLeafModel {
     onActive: (timelinePointOffset: number) => void;
-    onClick: (id: string) => void;
-    theme?: Theme;
 }
-export interface TreeBranchModel {
-    active?: boolean;
-    alternateCards?: boolean;
-    className: string;
+export interface TreeBranchModel extends CommonBranchAndLeafModel {
     contentDetailedText?: string;
     contentText: string;
     contentTitle?: string;
-    id?: string;
     index: number;
     media?: Media;
-    mode?: "VERTICAL" | "HORIZONTAL" | "TREE";
-    onClick: (id: string) => void;
     onShowMore: () => void;
-    slideShowRunning?: boolean;
-    theme?: Theme;
     title: string;
     visible?: boolean;
     onActive: (timelinePointOffset: number, timelineContentHeight: number, timelineContentOffset: number) => void;
-    cardHeight?: number;
+    onMediaStateChange: (state: {
+        id?: string;
+        playing?: boolean;
+        paused?: boolean;
+    }) => void;
 }
-export interface TimelineTreeModel {
+export interface TimelineTreeModel extends CommonPropsModel {
     activeTimelineItem: number;
-    alternateCards?: boolean;
     autoScroll: (s: Partial<Scroll>) => void;
     items: TimelineItemViewModel[];
-    onClick: (id?: string) => void;
-    slideShowRunning?: boolean;
-    theme?: Theme;
-    mode?: "VERTICAL" | "HORIZONTAL" | "TREE";
-    sRef?: React.Ref<any>;
-    cardHeight?: number;
+    onMediaStateChange: (state: {
+        id?: string;
+        playing?: boolean;
+        paused?: boolean;
+    }) => void;
 }
@@ -51,1 +53,2 @@ export interface Theme {
 }
+export {};

package.json

 {
   "name": "react-chrono",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "a modern timeline component for React",

README.md

@@ -10,3 +10,6 @@ [![Build Status](https://dev.azure.com/prabhummurthy/react-chrono/_apis/build/status/prabhuignoto.react-chrono?branchName=master)](https://dev.azure.com/prabhummurthy/react-chrono/_build/latest?definitionId=7&branchName=master)
 
-![slideshow](./readme-assets/demo.gif)
+<!-- ![slideshow](./readme-assets/demo2.gif) -->
+<div style="text-align: center">
+  <img src="./readme-assets/demo2.gif"/>
+</div>
 
@@ -22,7 +25,9 @@ **Try it on CodeSandbox!**
 - 📺&nbsp; Auto play the timeline with the [slideshow](#slideshow-mode) mode.
-- 🖼️&nbsp; Display images in the timeline with ease.
-- ⌨&nbsp; Navigate the timeline via Keyboard.
-- 🔧&nbsp; Optimized to render images efficiently on (tree & vertical mode). Images not visible are automatically hidden.
+- 🖼️&nbsp; [Display Images & Videos](#media) in the timeline with ease.
+- ⌨&nbsp; Navigate the timeline via [Keyboard](#-keyboard-navigation--disabling-it).
+- ⚡&nbsp; Data driven API.
+- 🔧&nbsp; Optimized to render images & videos efficiently on (tree & vertical mode).
 - 🎨&nbsp; [Customize](#theme) colors with ease.
 - 💪&nbsp; Built with [Typescript](https://www.typescriptlang.org/).
+- 🎨&nbsp; Styled with [emotion](https://emotion.sh).
 
@@ -40,2 +45,5 @@ <h2>Table of Contents</h2>
   - [⌨ Keyboard Navigation & Disabling it](#-keyboard-navigation--disabling-it)
+  - [Media](#media)
+    - [Image](#image)
+    - [Video](#video)
   - [Slideshow Mode](#slideshow-mode)
@@ -141,3 +149,3 @@ - [Item Width](#item-width)
 | slideShow         | starts the timeline in slideshow mode.                                                | false        |
-| slideItemDuration | The amount of delay in `ms` for the timeline points in `slideshow` mode.              | 2500         |
+| slideItemDuration | The amount of delay in `ms` for the timeline points in `slideshow` mode.              | 5000         |
 | itemWidth         | width of the timeline section in `HORIZONTAL` mode.                                   | 300          |
@@ -170,3 +178,3 @@ | cardHeight        | sets the minimum height of the timeline card.                                         | 250          |
 | contentText  | text displayed in the timeline card          | String |
-| media        | media object to set image.                   | Object |
+| media        | media object to set image or video.          | Object |
 
@@ -197,3 +205,3 @@ ```sh
 
-To disable eyboard navigation set `disableNavOnKey` to true.
+To disable keyboard navigation set `disableNavOnKey` to true.
 
@@ -204,2 +212,41 @@ ```sh
 
+### Media
+
+Both images and videos can be embedded in the timeline. Just add the `media` attribute to the [Timeline Item model](#timeline-item-model) and the component will take care of the rest.
+
+#### Image
+
+```sh
+{
+  title: "May 1940",
+  contentTitle: "Dunkirk",
+  media: {
+    name: "dunkirk beach",
+    source: {
+      url: "http://someurl/image.jpg"
+    },
+    type: "IMAGE"
+  }
+}
+```
+
+#### Video
+
+Videos start playing automatically when active will be paused when not active. Like images, videos are also automatically hidden when not in the visible viewport of the container.
+
+```sh
+{
+  title: "7 December 1941",
+  contentTitle: "Pearl Harbor",
+  media: {
+    source: {
+      url: "/pearl-harbor.mp4",
+      type: "mp4"
+    },
+    type: "VIDEO",
+    name: "Pearl Harbor"
+  }
+}
+```
+
 ### Slideshow Mode
@@ -206,0 +253,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

568156

increased by4.74%

Number of package files

41

increased by7.89%

Lines of code

12232

increased by4.75%

Number of lines in readme file

312

increased by17.74%

No dependency changes