PannableVideo

This library provide a pannable and zoomable video element.

Look in examples to see how to use this library

View

pannableVideo : (Msg -> msg) -> State -> VideoInfo -> Html msg

the zoomable, pannable video element. Look for State and VideoInfo below

advancedPannableVideo :

(Msg -> msg)

-> State

-> VideoInfo

-> List (Attribute msg)

-> List (Html msg)

-> Html msg

More advanced video element if you want to style, or do something I can't think of

Model

type alias State =

{ coords : Coordinate

, sz : Scale

, previous : Coordinate

, center : Coordinate

, touches : List Touch

, pinch : Bool

, iden : Int

, rangeX : Float

, rangeY : Float

}

Internal state of the element. Should be part of model

type alias VideoInfo =

{ videoSrc : String

, videoSize : ( Int, Int )

, minScale : Float

, maxScale : Float

}

Represent the info of the video. This currently includes:

videoSrc : the source of the video
videoSize : the dimension of the video in pixel
minScale : minimum zoom scale
maxSCale : maximum zoom scale

initialState : State

The initial state to be put into init

simpleVideoInfo : String -> ( Int, Int ) -> VideoInfo

Simple VideoInfo object.

Take in:


    source of the video -> size in px

Events

type Msg

Internal Event Manager. Should be sent to processEvent in the update

processEvent : Msg -> State -> State

Process Msg in the update function

Modules

PannableVideo

anhmiuhv/pannablevideo/1.0.0

PannableVideo

View

Model

Events

Modules