gistfile1.md

Shootitlive Player

Getting started

First, you must

1. install npm
2. install grunt by running npm install -g grunt
3. download dependencies, run npm install in . (i.e. SILP root directory), and in ./loader

Now you're all set to develop SILP and deploying to AWS!

Go to http://localhost/silp/preview. Under Distribution you can choose between:

1. Local - SILP is loaded from from all separate source files in app/js.
2. Local, minified - SILP is loaded from dist/release. See Building SILP.
3. Loader file - SILP is loaded from the base_url specified in the loader file.

Building SILP

Run grunt in . to create a minified version of SILP in dist/release and then choose the Local, minified distribution. You don't have to do this to run SILP - during development it is more convenient to use the Local distribution that loads all files separately.

Building the loader file

The loader file should normally not need any changes - however, if you've made changes to it, you can rebuild the loader file, found in loader/dist/shootitlive.load.vX.default.js, by running grunt when standing in ./loader. The loader file source is found in loader/js.

AWS credentials

Put your AWS credentials in ./aws.json, it should look like this:

{
  "key": "AKIAIXXXXXX",
  "secret": "abc123abc123abc123abc123abc123"
}

Deploying to S3 and CloudFront

1. Run grunt and make sure the Local, minified distribution works. A very good way to test that it works on a live site is to do the silp_base_url trick described below on e.g. aftonbladet.se.
2. Make sure all changes are commited
3. Run grunt publish. The current branch will be deployed and the CloudFront cache will be purged.

FIXME: remove the JS suffix requirement.

Good to know

• If there's a SILP player on http://example.com, you can change where SILP is loaded from by changing the URL to http://example.com?silp_base_url=http://localhost/silp/app/js As you can see - the silp_base_url can point to any distribution you want.
• Likewise, you can override any SILP parameter by prefixing it with silp_ in the embedder's query string, for example to turn off analytics on example.com: http://example.com?silp_analytics=false.

(List all tricks and good practices that emerge here!)

Technicalities

Configuring deployment

In ./config.json there's a config section called silp_custom, where various SILP-specific build parameters can be found.

How SILP works

SILP contains of two parts: the loader, and the actual player. For more information on the loader file, see loader/README.md.

SILP is built with RequireJS, but since it's not like any other app - where you start the app using a script tag with a data-main attribute. SILP on the other hand is loaded using a

require(['silp'], function(Silp) {
    var silp = new Silp(parameters);
});

The config is therefore found in js/silp.js, together with the definition of Silp, that wraps and bootstraps an instance of 'Player'.

The build script

The library grunt-s3 is used for S3 deployment. I have made modificiations to it, and they are found in emilisto/grunt-s3 repository. package.json points to this fork and it will be installed in node_modules by running npm install in the SILP directory.

For adding config variables to be used at build time, see the silp-init helper in tasks/. Here I fetch the current git branch, and determine the AWS credentials.

Wrapping of 3rd party libraries

Silp must be completely contained in its own namespace, hence all libraries are wrapped into RequireJS modules. Look in ./vendor/jquery for example. This must be done for every 3rd party library to be included.

http://silp.shootitlive.com/src/branch/master/preview/index.html

##The default settings## var silp_options = { element_id: null, client: null, project: null, refresh: 30000, // refresh playlist interval in ms playlist: 'bottom', // left, right, top or bottom, show_playlist: true, // should we show the thumbnails? width: "auto", // image max width height: "auto", // image max height thumb_width: 50, // thumbnail max width thumb_height: 30, // thumbnail max height css: "https://s3-eu-west-1.amazonaws.com/src/branch/master/css/screen.min.css", // url to the css color_theme: "default", // the color theme - is prepended with "theme-" as a class name to use in css show_thumb_timestamp: false, // should we show the timestamp on the thumbs? *deeplinking: false, // should we save the image position to the hash? **scroll_to: false, // should we scroll the browser to the silp player? scroller_height: 5, //Height of the scroller meta_info: true, //should we show byline and caption? pic_info_height: 18, // this is for the info container that contains byline, these pixels are added to the height of the player, must have a value 15 or higher thumb_tooltip: true, // should we show the mouse over tooltip on the thumbs? share: true, // share btn? fullscreen_btn: true, // should we show the fullscreen button? pic_number_btn: true, // should we show the current pic number / length of pics show_nav: true, // should we show the navigation? show_overlay_nav: true, // should we show the overlay navigation buttons flash_default: false, //Shows video in flash as default, can be used when ads are only available for flash lang: "auto", // which language to use "auto", "en" or "sv" content: null, // Instead of an external playlist - use a string to an url or just an array just like the playlist object lazyload: false, // only send request to playlist when player is visible (experimental) pl_url: false, //Set the url to an external playlist to use, will overide the project/client settings audio_only_mode: false, //Show the player as an audiobar vast_url: false, //Specify an url for vast2.0 ads trackpixel_url: false, //specify an image url(preferably 1x1 in size) to track media views against protocol: "auto", // "auto", "http" or "https" fallback to https https_prefix: "https://s3-eu-west-1.amazonaws.com/", audio_pic_url: "http://silp.cdn.shootitlive.com/img/note_black.jpg", //Image to be used for audio files audio_thumb_pic_url: "http://silp.cdn.shootitlive.com/img/note_black_thumb.jpg", //Thumb to be user for audio files ratio: 3/2, //Sets the ratio of the player autoplay: false, //Should the video startplaying onload banner: false, //true displays the banner category: "", // sports, news, entertainment analytics: false //load google analytics // **ad_settings: { // "ad_num_clicks": false, // "emediate_campaign_number": false //}

    * = Not really usefull
    ** = Dosen't work