Linking to Limecraft Flow

If you want to link directly to a given page of Limecraft Flow, this document contains some tips.

Common urls

By default, Limecraft Flow will redirect the user to the last page she was at. So navigating to platform will redirect the user to the last page they were at.
For the production listing screen, use this one.

Production Library

In the urls below, we’ll use :pId to denote the production id parameter, replace it with the id (a number) of your production.

The url looks like this:

https://platform.limecraft.com#productions/:pId/material

If you want to set specific options, you can use this url

https://platform.limecraft.com#productions/:pId/material/:materialOptionsString

The materialOptionsString parameter is a base64-encoded json object.

In JavaScript code, the materialOptions string is generated via:

const materialOptionsObject = {
    someOption: 'test'
};
const materialOptionsString = btoa(JSON.stringify(materialOptionsObject))

For more complete information, see Serializing JSON options for use in Limecraft Flow UI url.

These are the options you can set:

materialOptionsObject = {
    // view mode: "list-collapsed"|"grid"|"list". The "list" object is not advised as it is a drain on performance.
    "vM": "list-collapsed"|"list"|"grid",
    // side bar collapse: minimize the left sidebar
    "sBC": false,
    // active query
    "q": {
        "query": "lime",    // query passed to search index
        "userQuery": "lime",    // query as shown to the user
        "userSort": "score desc"    // result sorting
    }
}

The q option can become very advanced. It can contain filters facets too. The interested user can perform a query in the library and execute this on the console to get the options object:

// last part of the material url
materialOptionsString = 'eyJ2TSI6ImdyaWQiLCJxIjp7InF1ZXJ5IjoibWVkaWFPYmplY3ROYW1lOjQ1MTYqIiwidXNlclF1ZXJ5IjoibWVkaWFPYmplY3ROYW1lOjQ1MTYqIiwidXNlclNvcnQiOiJzY29yZSBkZXNjIn0sInNCQyI6dHJ1ZSwic2Nyb2wiOjB9';
JSON.parse(atob(materialOptionsString))

Clip Details

The clip info, transcriber and subtitle editor are all part of the details screen.

Navigate to a MediaObjectAnnotation, no options

There is an alias provided which renders the default clip details screen for a given MediaObjectAnnotation at:

https://platform.limecraft.com/#productions/:pId/details-screen/moa/:moaId

Navigate to a MediaObject

https://platform.limecraft.com/#productions/:pId/details-screen/mo/:moId

It is possible to pass in options, see the next section for more details.

https://platform.limecraft.com/#productions/:pId/details-screen/mo/:moId/:detailsOptionsString

Navigate to one or more MediaObject(Annotation)s

The url looks like this:

https://platform.limecraft.com/#productions/:pId/details-screen/:detailsOptionsString

Again, the detailsOptionsString parameter is a base64-encoded JSON object, as explained above.

var detailsOptionsObject;
detailsOptionsObject = {
    //list of MediaObjectAnnotation ids
    "navIds":[502633],
	//index into navIds, zero-based
	"index":0,
	//the sidebar shows the comments.
	// "none" - hide the sidebar
	// "comments" - show the subclip logger
    // "review" - show the review application
	// "subtitler" - show the subtitler
    // "tech-info" - show the clip info
	"tab":"comments",

    //when tab is "tech-info", subtab will determine which
    //section is active
    // "meta" - the metadata
    // "workflow" - workflows and activity
    // "material" - material and files
    // "render" - render links
    "subtab": "meta",

	//transcript mode. Either 'view' or 'edit'.
	// "disabled" - hide the transcript pane
	// "view" - show the transcript pane in view mode
	// "edit" - show the transcript pane in edit mode
	"tr16":"edit",
	//header visibility - false will hide the header, e.g. to embed in your own application via iframe
	"hv": true,
	//overlay annotations on player - false will not show the
	// annotations on top of the video
	"ol":false,
	//play clips back to back (playlist mode) - false will not
	// play the clips back to back
	"b2b":false,
	//list of selected subclips. This can be used if you want to
	// highlight a certain subclip.
	"selectedThreadIds":[],
	//extra classes to apply to the application html element.
	"xcls":"",
	//url the 'back' button points to. The button is not
	// shown when hv=false.
	"bck":"#productions/145/material"
};

Serializing JSON options for use in Limecraft Flow UI url

When sending JSON options to the Limecraft Flow UI, they are serialized as follows:

JSON stringify
(optional toBinary)
Base64 encode (btoa)
encodeURIComponent

serialized = btoa(JSON.stringify(optionsObject));
return encodeURIComponent(serialized);

When the above fails due to special characters, it is necessary to also perform toBinary in between the JSON stringify and the btoa:

toBinary(string) {
	const codeUnits = new Uint16Array(string.length);
	for (let i = 0; i < codeUnits.length; i += 1) {
		codeUnits[i] = string.charCodeAt(i);
	}
	return String.fromCharCode(...new Uint8Array(codeUnits.buffer));
},

serialized = btoa(toBinary(JSON.stringify(optionsObject)));
return encodeURIComponent(serialized);

It is advised to first try without toBinary, as it results in shorter urls.