Skip to content

Commit

Permalink
Merge pull request #18 from davidosuna1987/autoplayTarget
Browse files Browse the repository at this point in the history
Autoplay target
  • Loading branch information
Todilo authored Mar 11, 2024
2 parents 73b41ba + 0b52011 commit 8cc78e1
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 21 deletions.
39 changes: 20 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,25 +129,26 @@ _For more example and a playground please refer to [storybook](https://todilo.gi

# API

| Parameter | Type | Default | Description | Example |
| ------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| imagesCount | number | none | Set the number of images in your sequence | 35 |
| imageBaseUrl | string | none | Set URL from the base of your homepage | ./imageSeries/ |
| imagesFileTyp | string | none | Image type (anything that can be rendered in an _img_ tag) | png |
| imageFilenamePrefix | string | none | Add a prefix before the image number | shoe (if entire image filename is shoe2.png) |
| imageInitialIndex | number | 0 | Which imagenumber to show on component load | 10 |
| mouseDragSPeed | number | 20 | How fast to change images when pointer moves | 20 |
| autoplaySpeed | number | 10 | How fast to change images when autoplay is active | 10 |
| reverse | boolean | false | Reverse the order of images displayed. Applicable for both pointer as well as autoplay | false |
| autoplay | boolean | false | Should the images automatically change on component load | false |
| width | number | 150 | With of the image | 150 |
| height | number | 150 | Height of the image | 150 |
| zeroPad | ZeroPadRange (number 0 to 9) | 0 | Num zeros to prepend to your image number (if you set 1, your image numbers will be 01, 02..., 09, 10, 11) | 1 |
| showRotationIconOnStartup | boolean | false | If true, a small icon representing a rotation which should inform the user that the component can be rotated. | false |
| shouldNotifyEvents | boolean | false | If true the component will notify on some events. This can be a lot of event so use with caution. | false |
| notifyOnPointerDown | function | not set | Pass your own function that takes x, y as arguments. Will be called when mouse or touch is pressed. | - |
| notifyOnPointerUp | function | not set | Pass your own function that takes x, y as arguments . Will be called when mouse or touch is released. | - |
| notifyOnPointerMoved | function | not set | Pass your own function that takes x, y as arguments . Will be called any time the mouse or touch is moved if being pressed down. | |
| Parameter | Type | Default | Description | Example |
| ------------------------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| imagesCount | number | none | Set the number of images in your sequence | 35 |
| imageBaseUrl | string | none | Set URL from the base of your homepage | ./imageSeries/ |
| imagesFileTyp | string | none | Image type (anything that can be rendered in an _img_ tag) | png |
| imageFilenamePrefix | string | none | Add a prefix before the image number | shoe (if entire image filename is shoe2.png) |
| imageInitialIndex | number | 0 | Which imagenumber to show on component load | 10 |
| mouseDragSPeed | number | 20 | How fast to change images when pointer moves | 20 |
| autoplaySpeed | number | 10 | How fast to change images when autoplay is active | 10 |
| reverse | boolean | false | Reverse the order of images displayed. Applicable for both pointer as well as autoplay | false |
| autoplay | boolean | false | Should the images automatically change on component load | false |
| autoplayTarget | number | none | The autoplay will stop on given image index | 15 |
| width | number | 150 | With of the image | 150 |
| height | number | 150 | Height of the image | 150 |
| zeroPad | ZeroPadRange (number 0 to 9) | 0 | Num zeros to prepend to your image number (if you set 1, your image numbers will be 01, 02..., 09, 10, 11) | 1 |
| showRotationIconOnStartup | boolean | false | If true, a small icon representing a rotation which should inform the user that the component can be rotated. | false |
| shouldNotifyEvents | boolean | false | If true the component will notify on some events. This can be a lot of event so use with caution. | false |
| notifyOnPointerDown | function | not set | Pass your own function that takes x, y as arguments. Will be called when mouse or touch is pressed. | - |
| notifyOnPointerUp | function | not set | Pass your own function that takes x, y as arguments . Will be called when mouse or touch is released. | - |
| notifyOnPointerMoved | function | not set | Pass your own function that takes x, y as arguments . Will be called any time the mouse or touch is moved if being pressed down. | |

<!-- ROADMAP -->

Expand Down
13 changes: 12 additions & 1 deletion src/components/React360Viewer/React360Viewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
import styled, { css } from "styled-components";
import AnimationImage from "../AnimationImage/AnimationImage";
import StyledRotateIcon from "../icons/StyledRotateIcon";
import type { HtmlHTMLAttributes } from "react";

// The regular % can return negative numbers.
function moduloWithoutNegative(value: number, n: number): number {
Expand All @@ -20,6 +21,7 @@ export interface React360ViewerProps {
autoplaySpeed?: number;
reverse?: boolean;
autoplay?: boolean;
autoplayTarget?: number;
width?: number;
height?: number;
zeroPad?: ZeroPadRange;
Expand All @@ -30,6 +32,10 @@ export interface React360ViewerProps {
shouldNotifyEvents?: boolean;
}

/** Base props *and* all available HTML div element props. */
export type React360ViewerPropsExtended = HtmlHTMLAttributes<HTMLDivElement> &
React360ViewerProps;

interface StyleProps {
isGrabbing: boolean;
}
Expand Down Expand Up @@ -60,6 +66,7 @@ export const React360Viewer = ({
reverse = false,
autoplaySpeed = 10,
autoplay = false,
autoplayTarget,
width = 150,
height = 150,
zeroPad = 0,
Expand All @@ -69,7 +76,7 @@ export const React360Viewer = ({
notifyOnPointerDown,
notifyOnPointerUp,
notifyOnPointerMoved,
}: React360ViewerProps) => {
}: React360ViewerPropsExtended) => {
const elementRef = useRef(null);
const [isScrolling, setIsScrolling] = useState(false);
const [initialMousePosition, setInitialMousePosition] = useState(0);
Expand Down Expand Up @@ -120,6 +127,10 @@ export const React360Viewer = ({
);

setSelectedImageIndex(index);

if (autoplayTarget !== undefined && index === autoplayTarget) {
setUseAutoplay(false);
}
};

useEffect(() => {
Expand Down
1 change: 0 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"target": "es5",
"outDir": "./dist",
"lib": ["dom", "dom.iterable", "esnext"],

"declaration": true,
"declarationDir": "dist",
"allowJs": true,
Expand Down

0 comments on commit 8cc78e1

Please sign in to comment.