First import

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "sunday"

.github/workflows/build.yml

@@ -0,0 +1,29 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Build
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build

.github/workflows/bump-version-and-publish.yml

@@ -0,0 +1,66 @@
+name: Bump version, Tag & Publish
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Semver type of new version'
+        required: true
+        type: choice
+        options:
+          - major
+          - minor
+          - patch
+          - prerelease
+      prereleaseId:
+        description: 'Prerelease id'
+        required: false
+        type: choice
+        options:
+          - alpha
+          - beta
+          - rc
+
+jobs:
+  bump-version:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out source
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install npm packages
+        run: npm ci
+
+      - name: Setup Git
+        run: |
+          git config user.name github-actions
+          git config user.email [email protected]
+
+      - name: Bump Version
+        run: |
+          npm version ${{ github.event.inputs.version }} --no-git-tag-version --preid ${{ github.event.inputs.prereleaseId }}
+          git add .
+          git commit -m "v$(npm pkg get version | tr -d '"')" --no-verify
+          git tag $(npm pkg get version | tr -d '"') -m "v$(npm pkg get version | tr -d '"')"
+
+      - name: Build & Publish
+        run: npm run build
+
+      - name: Publish to NPM
+        run: |
+          npm run prepare-publish
+          cd ./dist
+          npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
+          npm publish
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Push latest version
+        run: git push origin main --follow-tags

.github/workflows/publish-dev-release.yml

@@ -0,0 +1,43 @@
+name: Publish dev release
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  bump-version:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out source
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install npm packages
+        run: npm ci
+
+      - name: Setup Git
+        run: |
+          git config user.name github-actions
+          git config user.email [email protected]
+
+      - name: Bump Version
+        run: |
+          echo "$(npm pkg get version | cut -d '"' -f 2 | cut -d '-' -f 1)-dev.$(git rev-parse --short HEAD)" | xargs npm version --no-git-tag-version
+
+      - name: Build & Publish
+        run: npm run build
+
+      - name: Publish
+        run: |
+          npm run prepare-publish
+          cd ./dist
+          npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
+          npm publish --tag next
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# cypress
+/cypress/screenshots
+/cypress/videos
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.idea
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.eslintcache
+
+# npm publish artifects
+/dist

README.md

@@ -0,0 +1,93 @@
+# Fast Image Sequence Renderer
+
+The fast-image-sequence-renderer is a powerful package that allows you to display a sequence of images at a high frame rate on your website. It can be used to create smooth animations or video-like sequences from a series of images.
+
+The FastImageSequence supports a variety of options for customizing the behavior of the image sequence, such as preloading all images, using a worker for handling tar files, and more.
+
+## Getting started
+
+### Installing
+
+Add `@mediamonks/fast-image-sequence-renderer` to your project:
+
+```sh
+npm i @mediamonks/fast-image-sequence-renderer
+```
+## Basic usage
+
+Creating a FastImageSequence instance and playing an image sequence.
+```ts
+import { FastImageSequence } from '@mediamonks/fast-image-sequence-renderer';
+
+const options = {
+    frames: 100,
+    wrap: true,
+    size: 'cover',
+    imageURLCallback: (index) => `path/to/your/image/sequence/image${index}.jpg`,
+
+    tarURL: 'path/to/your/tar/file.tar',
+    tarImageURLCallback: (index) => `path/to/your/tar/image/sequence/image${index}.jpg`,
+};
+
+const sequence = new FastImageSequence(containerElement, options);
+sequence.play();
+```
+
+In the options object, you need to set either imageURLCallback or tarImageURLCallback. Both are optional, but at least one must be set. If you use tarImageURLCallback, you also have to load a tar file.
+
+The imageURLCallback and tarImageURLCallback are functions that take an index as a parameter and return a string representing the URL of the image at that index in the sequence. This allows you to dynamically generate the URLs of your images based on their index in the sequence.  
+
+The normal usage of this library involves having a tar file with low-resolution preview images. These will be used when you randomly seek or jump in the sequence, or when the internet speed is low. However, you are free to fine-tune as you will. For example, you can choose to only use the tar with high-resolution images.  
+
+By setting callbacks for URLs and loading the tar file yourself, you can set different functions for different devices and/or different supported image file formats. This gives you the flexibility to optimize the image sequence for your specific project needs.
+
+This library allows you to control the playback of the image sequence, stop it, get the current progress, and more.
+```ts
+sequence.stop();
+console.log(sequence.progress);
+```
+
+## Creating a Tarball with Preview Images
+
+A tarball is a collection of files and directories stored in a single file. In the context of `FastImageSequence`, you can use a tarball to store low-resolution preview images for your image sequence. This can be particularly useful when you want to quickly seek or jump in the sequence, or when the internet speed is low.
+
+To create a tarball with preview images, you can follow these steps:
+
+1. Prepare your preview images: Make sure all your preview images are in a single directory. The images should be in a sequence and named in a consistent manner (for example, `image1.jpg`, `image2.jpg`, `image3.jpg`, etc.).
+
+2. Use a tar tool to create the tarball: There are many tools available to create tarballs. If you are comfortable with command line, you can use the `tar` command in Unix-based systems like this:
+
+    ```sh
+    tar -cvf preview_images.tar /path/to/your/preview_images
+    ```
+
+   This command will create a tarball named `preview_images.tar` from the directory `/path/to/your/preview_images`.
+
+3. Alternatively, if you prefer a graphical interface, you can use an online tool like [Tar File Creator](https://reindernijhoff.net/tools/tar/). Simply drag and drop your directory of images onto the page, and it will generate a tarball that you can download.
+
+Once you have your tarball, you can use it with `FastImageSequence` by setting the `tarURL` option to the URL of your tarball, and implementing the `tarImageURLCallback` to return the URL of an image in the tarball given its index.
+
+## Building
+
+In order to build seng-event, ensure that you have [Git](http://git-scm.com/downloads)
+and [Node.js](http://nodejs.org/) installed.
+
+Clone a copy of the repo:
+```sh
+git clone https://github.com/mediamonks/fast-image-sequence-renderer.git
+```
+
+Change to the fast-image-sequence-renderer directory:
+```sh
+cd fast-image-sequence-renderer
+```
+
+Install dev dependencies:
+```sh
+npm i
+```
+
+Build package:
+```sh
+npm run build
+```

example/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# cypress
+/cypress/screenshots
+/cypress/videos
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.idea
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.eslintcache