Skip to content

Commit

Permalink
Latest build files
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dananji
Dananji committed Nov 10, 2023
1 parent 385cfb3 commit a15edf6
Show file tree
Hide file tree
Showing 11 changed files with 270 additions and 157 deletions.
129 changes: 80 additions & 49 deletions dist/ramp.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1038,7 +1038,7 @@ function canvasesInManifest(manifest) {
/**
* Get isMultiCanvas and last canvas index information from the
* given Manifest
* @param {Object} manifest
* @param {Object} manifest
* @returns {Object} { isMultiCanvas: Boolean, lastIndex: Number }
*/
function manifestCanvasesInfo(manifest) {
Expand All @@ -1063,16 +1063,16 @@ function manifestCanvasesInfo(manifest) {

/**
* Get canvas index by using the canvas id
* @param {Object} manifest
* @param {String} canvasId
* @param {Object} manifest
* @param {String} canvasId
* @returns {Number} canvasindex
*/
function getCanvasIndex(manifest, canvasId) {
try {
var sequences = manifesto_js.parseManifest(manifest).getSequences();
if (sequences && sequences != undefined) {
var canvasindex = sequences[0].getCanvasIndexById(canvasId);
if (canvasindex) {
if (canvasindex || canvasindex === 0) {
return canvasindex;
} else {
console.log('Canvas not found in Manifest, ', canvasId);
Expand Down Expand Up @@ -1275,11 +1275,11 @@ function inaccessibleItemMessage(manifest, canvasIndex) {
var items = parseAnnotations(annotations, 'painting');
if (items.length > 0) {
var item = items[0].getBody()[0];
itemMessage = item.getLabel().getValue() ? getLabelValue(item.getLabel().getValue()) : 'No associated media source(s) in the Canvas';
itemMessage = item.getLabel().getValue() ? getLabelValue(item.getLabel().getValue()) : 'This item cannot be played.';
}
return itemMessage;
} else {
return null;
return 'This item cannot be played.';
}
}

Expand Down Expand Up @@ -1456,8 +1456,8 @@ function parseAutoAdvance(manifest) {
/**
* Parse 'structures' into an array of nested JSON objects with
* required information for structured navigation UI rendering
* @param {Object} manifest
* @returns {Object}
* @param {Object} manifest
* @returns {Object}
* obj.structures: a nested json object structure derived from
* 'structures' property in the given Manifest
* obj.timespans: timespan items linking to Canvas
Expand Down Expand Up @@ -1495,7 +1495,7 @@ function getStructureRanges(manifest) {
label: label,
isTitle: canvases.length === 0 ? true : false,
rangeId: range.id,
id: canvases.length > 0 ? canvases[0] : undefined,
id: canvases.length > 0 ? isCanvas ? "".concat(canvases[0].split(',')[0], ",") : canvases[0] : undefined,
isEmpty: isEmpty,
isCanvas: isCanvas,
itemIndex: isCanvas ? cIndex : undefined,
Expand Down Expand Up @@ -2814,6 +2814,7 @@ var VideoJSProgress = /*#__PURE__*/function (_vjsComponent) {
_this.setTimes = _this.setTimes.bind(_assertThisInitialized(_this));
_this.player = player;
_this.options = options;
_this.currentTime = options.currentTime;
_this.state = {
startTime: null,
endTime: null
Expand Down Expand Up @@ -2968,6 +2969,7 @@ var VideoJSProgress = /*#__PURE__*/function (_vjsComponent) {
handleOnChange: this.handleOnChange,
player: this.player,
handleTimeUpdate: this.handleTimeUpdate,
initCurrentTime: this.options.currentTime,
times: this.times,
options: this.options
}), this.el());
Expand All @@ -2987,9 +2989,10 @@ var VideoJSProgress = /*#__PURE__*/function (_vjsComponent) {
function ProgressBar(_ref) {
var player = _ref.player,
handleTimeUpdate = _ref.handleTimeUpdate,
initCurrentTime = _ref.initCurrentTime,
times = _ref.times,
options = _ref.options;
var _React$useState = React__default["default"].useState(0),
var _React$useState = React__default["default"].useState(initCurrentTime),
_React$useState2 = _slicedToArray(_React$useState, 2),
progress = _React$useState2[0],
_setProgress = _React$useState2[1];
Expand All @@ -3015,6 +3018,10 @@ function ProgressBar(_ref) {
activeSrcIndex = _React$useState10[0],
setActiveSrcIndex = _React$useState10[1];
var isMultiSourced = options.targets.length > 1 ? true : false;
var initTimeRef = React__default["default"].useRef(initCurrentTime);
var setInitTime = function setInitTime(t) {
initTimeRef.current = t;
};
var progressRef = React__default["default"].useRef(progress);
var setProgress = function setProgress(p) {
progressRef.current = p;
Expand Down Expand Up @@ -3069,9 +3076,18 @@ function ProgressBar(_ref) {
});
player.on('timeupdate', function () {
if (player.isDisposed()) return;
var curTime = player.currentTime();
var curTime;
// Initially update progress from the prop passed from Ramp,
// this accounts for structured navigation when switching canvases
if (initTimeRef.current > 0 && player.currentTime() == 0) {
curTime = initTimeRef.current;
player.currentTime(initTimeRef.current);
} else {
curTime = player.currentTime();
}
setProgress(curTime);
handleTimeUpdate(curTime);
setInitTime(0);
});

/**
Expand Down Expand Up @@ -3295,11 +3311,22 @@ function CurrentTimeDisplay(_ref) {
_React$useState2 = _slicedToArray(_React$useState, 2),
currTime = _React$useState2[0],
setCurrTime = _React$useState2[1];
var initTimeRef = React__default["default"].useRef(options.currentTime);
var setInitTime = function setInitTime(t) {
initTimeRef.current = t;
};
player.on('timeupdate', function () {
if (player.isDisposed()) return;
var time = player.currentTime();
var time;
// Update time from the given initial time if it is not zero
if (initTimeRef.current > 0 && player.currentTime() == 0) {
time = initTimeRef.current;
} else {
time = player.currentTime();
}
if (targets.length > 1) time += targets[srcIndex].altStart;
setCurrTime(time);
setInitTime(0);
});
return /*#__PURE__*/React__default["default"].createElement("span", {
className: "vjs-current-time-display",
Expand Down Expand Up @@ -3567,9 +3594,9 @@ function VideoJSPlayer(_ref) {
var isClicked = playerState.isClicked,
isEnded = playerState.isEnded,
isPlaying = playerState.isPlaying,
player = playerState.player,
startTime = playerState.startTime,
currentTime = playerState.currentTime,
player = playerState.player;
playerState.startTime;
var currentTime = playerState.currentTime,
playerRange = playerState.playerRange;
var _React$useState = React__default["default"].useState(canvasIndex),
_React$useState2 = _slicedToArray(_React$useState, 2),
Expand Down Expand Up @@ -3862,18 +3889,6 @@ function VideoJSPlayer(_ref) {
}]);
}
}
} else if (startTime === null && canvasSegmentsRef.current.length > 0 && isReady) {
// When canvas gets loaded into the player, set the currentNavItem and startTime
// if there's a media fragment starting from time 0.0.
// This then triggers the creation of a fragment highlight in the player's timerail
var firsItem = canvasSegmentsRef.current[0];
var timeFragment = getMediaFragment(firsItem.id, canvasDuration);
if (timeFragment && timeFragment.start === 0) {
manifestDispatch({
item: firsItem,
type: 'switchItem'
});
}
}
}, [currentNavItem, isReady, canvasSegments]);

Expand Down Expand Up @@ -3997,7 +4012,7 @@ function VideoJSPlayer(_ref) {
* in the player's time rail.
* */
var handleTimeUpdate = function handleTimeUpdate() {
if (player !== null && isReadyRef.current) {
if (player !== null && isReadyRef.current && !isClicked) {
var activeSegment = getActiveSegment(player.currentTime());
if (activeSegment && activeIdRef.current != activeSegment['id']) {
// Set the active segment id in component's state
Expand Down Expand Up @@ -4154,6 +4169,7 @@ var MediaPlayer = function MediaPlayer(_ref) {
targets = manifestState.targets,
playlist = manifestState.playlist;
playerState.player;
var currentTime = playerState.currentTime;
React__default["default"].useEffect(function () {
if (manifest) {
initCanvas(canvasIndex);
Expand Down Expand Up @@ -4221,7 +4237,7 @@ var MediaPlayer = function MediaPlayer(_ref) {
sources: sources,
tracks: tracks
}));
updatePlayerSrcDetails(canvas.duration, sources, isMultiSource);
updatePlayerSrcDetails(canvas.duration, sources, canvasId, isMultiSource);
setIsMultiSource(isMultiSource);
setCIndex(canvasId);
error ? setReady(false) : setReady(true);
Expand All @@ -4248,10 +4264,11 @@ var MediaPlayer = function MediaPlayer(_ref) {
* Update contexts based on the items in the canvas(es) in manifest
* @param {Number} duration canvas duration
* @param {Array} sources array of sources passed into player
* @param {Number} cIndex latest canvas index
* @param {Boolean} isMultiSource flag indicating whether there are
* multiple items in the canvas
*/
var updatePlayerSrcDetails = function updatePlayerSrcDetails(duration, sources, isMultiSource) {
var updatePlayerSrcDetails = function updatePlayerSrcDetails(duration, sources, cIndex, isMultiSource) {
var timeFragment = {};
if (isMultiSource) {
playerDispatch({
Expand All @@ -4267,7 +4284,7 @@ var MediaPlayer = function MediaPlayer(_ref) {
playerDispatch({
type: 'updatePlayer'
});
var itemMessage = inaccessibleItemMessage(manifest, canvasIndex);
var itemMessage = inaccessibleItemMessage(manifest, cIndex);
setPlayerConfig(_objectSpread$1(_objectSpread$1({}, playerConfig), {}, {
error: itemMessage
}));
Expand Down Expand Up @@ -4343,11 +4360,13 @@ var MediaPlayer = function MediaPlayer(_ref) {
duration: canvasDuration,
srcIndex: srcIndex,
targets: targets,
currentTime: currentTime || 0,
nextItemClicked: nextItemClicked
},
videoJSCurrentTime: {
srcIndex: srcIndex,
targets: targets
targets: targets,
currentTime: currentTime || 0
},
// make the volume slider horizontal for audio
volumePanel: {
Expand Down Expand Up @@ -4455,7 +4474,7 @@ var MediaPlayer = function MediaPlayer(_ref) {
})
});
}
if (playlist.isPlaylist && canvasIsEmpty) {
if (canvasIsEmpty) {
return /*#__PURE__*/React__default["default"].createElement("div", {
"data-testid": "inaccessible-item",
className: "ramp--inaccessible-item",
Expand All @@ -4464,8 +4483,12 @@ var MediaPlayer = function MediaPlayer(_ref) {
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: "ramp--no-media-message"
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: "message-display"
}, /*#__PURE__*/React__default["default"].createElement("p", null, playerConfig.error)), /*#__PURE__*/React__default["default"].createElement(VideoJSPlayer, _extends({
className: "message-display",
"data-testid": "inaccessible-message",
dangerouslySetInnerHTML: {
__html: playerConfig.error
}
}), /*#__PURE__*/React__default["default"].createElement(VideoJSPlayer, _extends({
isVideo: true,
switchPlayer: switchPlayer,
handleIsEnded: handleEnded
Expand Down Expand Up @@ -4613,7 +4636,7 @@ var ListItem = function ListItem(_ref) {
});
});
React__default["default"].useEffect(function () {
if (liRef.current) {
if (liRef.current && !isCanvas) {
if (currentNavItem && currentNavItem.id == itemIdRef.current) {
liRef.current.className += ' active';
} else if ((currentNavItem == null || currentNavItem.id != itemIdRef.current) && liRef.current.classList.contains('active')) {
Expand Down Expand Up @@ -4716,6 +4739,7 @@ var StructuredNavigation = function StructuredNavigation() {
canvasIsEmpty = _useManifestState.canvasIsEmpty,
canvasSegments = _useManifestState.canvasSegments;
var structureItemsRef = React__default["default"].useRef();
var canvasIsEmptyRef = React__default["default"].useRef(canvasIsEmpty);
React__default["default"].useEffect(function () {
// Update currentTime and canvasIndex in state if a
// custom start time and(or) canvas is given in manifest
Expand Down Expand Up @@ -4749,7 +4773,7 @@ var StructuredNavigation = function StructuredNavigation() {
}
}, [manifest]);

// Set currentNavItem when current Canvas is an inaccessible item
// Set currentNavItem when current Canvas is an inaccessible/empty item
React__default["default"].useEffect(function () {
if (canvasIsEmpty && playlist.isPlaylist) {
manifestDispatch({
Expand All @@ -4764,10 +4788,17 @@ var StructuredNavigation = function StructuredNavigation() {
return c.id === clickedUrl;
});
if ((clickedItem === null || clickedItem === void 0 ? void 0 : clickedItem.length) > 0) {
manifestDispatch({
item: clickedItem[0],
type: 'switchItem'
});
// Only update the current nav item for timespans
// Eliminate Canvas level items unless the structure is empty
var _clickedItem$ = clickedItem[0],
isCanvas = _clickedItem$.isCanvas,
items = _clickedItem$.items;
if (!isCanvas || items.length == 0 && isCanvas) {
manifestDispatch({
item: clickedItem[0],
type: 'switchItem'
});
}
}
var currentCanvasIndex = getCanvasIndex(manifest, getCanvasId(clickedUrl));
var timeFragment = getMediaFragment(clickedUrl, canvasDuration);
Expand All @@ -4794,15 +4825,10 @@ var StructuredNavigation = function StructuredNavigation() {
canvasIndex: currentCanvasIndex,
type: 'switchCanvas'
});
canvasIsEmptyRef.current = structureItemsRef.current[currentCanvasIndex].isEmpty;
}
}
if (canvasIsEmpty) {
// Reset isClicked in state for
// inaccessible items (empty canvases)
playerDispatch({
type: 'resetClick'
});
} else if (player) {
if (player && !canvasIsEmptyRef.current) {
player.currentTime(timeFragmentStart);
playerDispatch({
startTime: timeFragment.start,
Expand All @@ -4816,7 +4842,12 @@ var StructuredNavigation = function StructuredNavigation() {
// Setting userActive to true shows timerail breifly, helps
// to visualize the structure in player while playing
if (isPlaying) player.userActive(true);
player.currentTime(timeFragmentStart);
} else if (canvasIsEmptyRef.current) {
// Reset isClicked in state for
// inaccessible items (empty canvases)
playerDispatch({
type: 'resetClick'
});
}
}
}, [isClicked, player]);
Expand Down
2 changes: 1 addition & 1 deletion dist/ramp.cjs.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit a15edf6

Please sign in to comment.