Merge branch 'master' of https://github.com/oerc-music/meld-clients-core

src/containers/timeSensitiveImage.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux' ;
+import MyImage from 'meld-clients-core/src/containers/image.js'
+
+class TimeSensitiveImage extends Component { 
+	constructor(props) { 
+		super(props);
+		this.state = { 
+			activeUri: "",
+		}
+	}
+
+	render() {
+		// objective: set our active URI according to the clock
+		// 1. check the time according to our clock provider
+		if("mediaResources" in this.props.timesync && 
+			this.props.clockProvider in this.props.timesync.mediaResources) {
+			let t = this.props.timesync.mediaResources[this.props.clockProvider]["currentTime"]
+			t = t + 3 // initiate image switch 3 seconds AHEAD of where it is specified (NOTE: APP / USE-CASE SPECIFIC...)
+			const syncs = this.props.timesync.mediaResources[this.props.clockProvider]["times"]
+			const times = Object.keys(syncs).map((t) => Number(t)); // ensure number, not string
+			if(times.length) { 
+				// 2. find the closest corresponding synchronisation point before t
+				const closest = times.reduce( (closestSoFar, curr) => {
+					 // ensure we have numbers, not strings
+					 return curr > closestSoFar && curr <= t ? curr : closestSoFar
+				})
+				// 3. this becomes our active URI pointing to the image to load
+				return <MyImage {...this.props} uri={ syncs[closest][0]["@id"]  } />
+			}
+		}
+		return <div></div>
+	}
+};
+
+
+function mapStateToProps({ timesync}) {
+	return { timesync};
+}
+
+export default connect(mapStateToProps,)(TimeSensitiveImage);

src/reducers/index.js

@@ -5,14 +5,16 @@ import TEIReducer from './reducer_tei';
 import AppReducer from './reducer_app';
 import SessionControlReducer from './reducer_sessionControl'
 import ModalUIReducer from './reducer_modalUI'
+import TimeSyncReducer from './reducer_timesync'
 
 var reducerSets = {
 	graph: GraphReducer,
 	score: ScoreReducer,
 	tei: TEIReducer,
 	app: AppReducer,
 	sessionControl: SessionControlReducer,
-	modalUI: ModalUIReducer
+	modalUI: ModalUIReducer,
+	timesync: TimeSyncReducer
 };
 
 export var reducers = combineReducers(reducerSets);

src/reducers/reducer_timesync.js

@@ -0,0 +1,55 @@
+import update from 'immutability-helper';
+import { parse } from 'querystring';
+import { FETCH_GRAPH, PROCESS_ANNOTATION, TICK } from '../actions/index';
+
+export default function(state = { mediaResources: {} }, action) { 
+	let mediaResourcesToAdd = {};
+	switch(action.type) {
+		case FETCH_GRAPH: 
+			// parse through graph looking for timed media resources
+			// to add to our state for potential timed annotation tracking
+			// n.b. will need fixing if we change our manifest structures
+			action.payload["@graph"][0]["ldp:contains"].map( (anno) => {
+				anno["oa:hasTarget"].map( (target) => { 
+					if((target["@type"] === "meldterm:AudioManifestation" ||
+							target["@type"] === "meldterm:VideoManifestation") 
+						&& 
+						 !(target["@id"] in state["mediaResources"])) {
+							mediaResourcesToAdd[target["@id"]] = {times:{}, currentTime:0};
+					}
+				});
+			});
+			return update(state, { $merge: { mediaResources: mediaResourcesToAdd } });
+		case PROCESS_ANNOTATION:
+			mediaResourcesToAdd = state["mediaResources"]
+			action.payload.targets.map( (t) => { 
+				// only interested if a) we have a timed media fragment and
+				// b) we know about the media resource that this is a fragment of
+				const targetUriComponents = t["@id"].split('#')
+				const baseResource = targetUriComponents[0]
+				if(targetUriComponents.length > 1){
+					const params = parse(targetUriComponents[1])
+					if("t" in params) { 
+						// have a timed media fragment
+						if(baseResource in mediaResourcesToAdd) {
+							// we know about this media resource
+							// keep track of the annotation at this time
+							mediaResourcesToAdd[baseResource]["times"][params["t"]] = action.payload.bodies
+						}
+					}
+				}
+			})
+			return update(state, { $set: { "mediaResources": mediaResourcesToAdd } })
+		case TICK:
+			return update(state, { 
+				"mediaResources": {
+					[action.payload.uri]: {
+						$merge: {
+							"currentTime": action.payload.time, 
+						}
+					}
+				}
+			})
+		default: return state;
+	}
+}