Siskin

App Simulator Vue Plugin using video and hotspots

Siskin is a plugin that provides a Vue component called Scene. This component can render videos with overlayed image hotspots that allow navigating to different timestamps in the video, or away from the component.

The plugin also optionally provides a custom router and vuex store module for convenience in managing the state of many scenes and transitions.

Installation

# install
npm i -S @helios-interactive/vue-siskin

Usage

There are two main ways to use Siskin. Using the Scene component alone or using the provided router and store module.

Scene Component

To use the Scene component:

import Vue from 'vue';
import AppSimulator from '@helios-interactive/vue-siskin';

Vue.use(AppSimulator);

This will register the Scene component with Vue and make it available for use in other components.

In a component file:

<template>
  <scene :scene="scene" />
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      scene: {...},
    };
  },
};
</script>

The Scene component expects a scene property that contains data for rendering a vidoe or image with overlayed hotspots.

Example Scene Data:

{
  type: 'video',
  asset: 'intro/intro.mp4',
  position: {
    left: 0,
    top: 0,
  },
  hotspots: [
    {
      width: 100,
      height: 100,
      left: 100,
      top: 100,
      action: 'otherScene'
    },{
      width: 100,
      height: 100,
      left: 300,
      top: 100,
      time: 2,
      action: {
        type: 'continue',
        startTime: 4,
      },
    }
  ],
}

Router and Store Module

To use the additional router functionality and store module inclue the router and store when instantiating the plugin:

import Vue from 'vue';
import AppSimulator from '@helios-interactive/vue-siskin';
import router from './router';
import store from './store';

Vue.use(AppSimulator, { router, store });

This will include an additional SceneRouter component that manages transitions between multiple scenes as well as loading scene data and preloading images for smooth transitions.

<template>
  <scene-router />
</template>