const lensClickUtils = {
handleLoadVideoClick: function handleLoadVideoClick(lensId) {
log('handleLoadVideoClick: enter');
log('handleLoadVideoClick: lensId=' + lensId);
const btnElemId = elemIdUtils.getElemId(lensId, elemIdUtils.BUTTON_LOAD_VIDEO_PREFIX, undefined);
const loadBtnSelector = '#' + btnElemId;
// get the jQuery selector for the Load Video button
$(loadBtnSelector).hide();
// hide the Load Video button
var videoElemSize = lensUIUtils._getVideoElemSize(viewWidth, viewHeight);
// get the desired size of the video element given the view dimensions
var videoElemWidth = videoElemSize.width;
var videoElemHeight = videoElemSize.height;
const videoType = videoUtils.getVideoType(lensId);
// what type of video will we create?
log('handleLoadVideoClick: videoType=' + videoType);
var videoHtml = '';
var videoUrl = '';
var vId;
var videoElemId;
vId = elemIdUtils.getElemId(lensId, elemIdUtils.VIDEO_CONTENT_PREFIX, true);
// get the HTML id for the parent of the video element
log('handleLoadVideoClick: vId=' + vId);
videoElemId = elemIdUtils.getVideoElemId(lensId);
// get the id of the video element
log('handleLoadVideoClick: videoElemId=' + videoElemId);
if (videoType === videoUtils.VIDEO_TYPE_BLOB) {
// if blob video
videoUrl = videoUtils.getVideoUrl(lensId);
// get the URL of the blob
videoHTML = videoUtils.getVideoHtml_video(lensId, videoElemWidth, videoElemHeight, videoUrl);
// get html for the video
$('#' + vId).append(videoHTML);
// add the HTML for the video tag to the page
lensUIUtils.subscribeToEventsForVideoElem(videoElemId);
// subscribe to the events for the blob video
}
else {
// if Vimeo video
videoUrl = videoUtils.getIFrameUrl(lensId);
// get the URL of the iFrame source
videoHTML = videoUtils.getVideoHtml_iFrame(lensId, videoElemWidth, videoElemHeight, videoUrl);
// get html for the Vimeo video in an iFrame
$('#' + vId).append(videoHTML);
// add the HTML for the iFrame to the page
lensUIUtils.subscribeToEventsForVimeoVideo(videoElemId);
// subscribe to the events for the blob video
}
log('handleLoadVideoClick: leave');
},
handleTabClickAsync: async function handleTabClickAsync(evt) {
log('handleTabClickAsync: enter');
const elem = evt.currentTarget;
if (elem === null) {
log('handleTabClickAsync: currentTarget is NULL');
log('handleTabClickAsync: leave');
return;
}
const id = elem.id;
// get the id of the DOM element
if (id === null) {
log('handleTabClickAsync: currentTarget.id is NULL');
log('handleTabClickAsync: leave');
return;
}
log('handleTabClick: id=' + id);
const isVideo = id.startsWith(elemIdUtils.LIST_ITEM_VIDEO_TAB_PREFIX);
// is the tab a Video tab?
const lensId = lensUIUtils.getLensIdFromElemId(id);
// convert the element id to a lens id
log('handleTabClickAsync: lensId=' + lensId);
if (isVideo) {
await lensUIUtils._addVideoElemToTabIfNecAsync(lensId);
// when the user clicks the Video tab, make sure the tab contains a <video> element
}
const tabName = lensUIUtils.getTabNameFromElemId(id);
// get the name of the tab, eg
// when
// how
// examples
// video
log('handleTabClickAsync: tabName=' + tabName);
selectedTabUtils.setSelectedTab(lensId, tabName);
// store this value so we can read it when we refresh the page
displayCurrentLensesCache.clear();
// clear the lenses HTML cache because the HTML we need to generate has changed
log('handleTabClickAsync: leave');
},
handleCloseBtnClickAsync: async function handleCloseBtnClickAsync(evt) {
const logHdr = 'lensClickUtils.handleCloseBtnClickAsync: ';
log(logHdr + 'enter');
// NOTE: we handle a click in the lens card header close box two different ways.
// 1) if the user has chosen a lens in the find lens combo box,
// clicking the close box clears the combo box.
// 2) if the user has NOT used the find lens combo box to find a lens,
// clicking the close box hides the lens card.
const foundCount = lensesToFindStorageUtils.count();
// how many lenses has the user found via Find Lens?
log('handleCloseBtnClickAsync: foundCount=' + foundCount);
if (foundCount > 0) {
// if the user has found a lens using the Find Lens feature
log(logHdr + 'the user found a lens via the Find Lens feature, so we will respond to the close box click by clearing the combo box');
lensesToFindStorageUtils.clear();
// clear the found lens from storage
tabsCardExpStorageUtils.clear();
noTabsCardExpStorageUtils.clear();
// clear both lists of expanded lenses: tabs and no tabs
prevNextLensUIUtils.showHideClearBtn();
// hide the clear button
findLensComponent.option("value", '');
// clear the lens name from the combo box
prevNextLensUIUtils.hide();
// hide the prev/next buttons
prevNextLensUIUtils.clearSelectedListItem();
// clear the selected item in the list
// so the user can select it again
await lensUIUtils.displayCurrentLensesAsync();
// display the current set of lenses
await uiUtils.handleLensCountChangedAsync();
expandCollapseBtnUtils.showHideExpandCollapseBtnsAndCol();
// show or hide the expand and collapse all buttons and their parent column as necessary
log(logHdr + 'leave');
return;
}
// if the user hasn't found a lens via the Find Lens combo box
log(logHdr + 'the user has NOT found a lens via the Find Lens combo box');
const showAlert = lensUIUtils._shouldShowCloseAlert();
// should we show the hide lens alert?
log(logHdr + 'showAlert=' + showAlert);
if (showAlert) {
// if we should show the alert
var count = userStateUtils.getHideAlertCount();
count += 1;
userStateUtils.setHideAlertCount(count);
const todaysDate = new Date();
userStateUtils.setHideAlertDate(todaysDate);
// remember when we showed this alert
// so we don't show it for another 24 hours
log(logHdr + 'showing the hide lens alert');
$('#modalHideAlert').modal();
// show the hide lens alert
}
const elemId = evt.currentTarget.id;
// get the element id
log(logHdr + 'elemId=' + elemId);
const lensId = lensUIUtils.getLensIdFromElemId(elemId);
// extract the lens id from the DOM element id
log(logHdr + 'lensId=' + lensId);
const anyPlaying = videoPlayers.isAnyPlayerPlaying();
// are any videos currently playing?
log(logHdr + 'anyPlaying=' + anyPlaying);
if (anyPlaying) {
// if any videos are currently playing
const isTargetVideoPlaying = videoPlayers.isVideoPlaying(lensId);
// is the video for the card we are about to close playing?
log(logHdr + 'isTargetVideoPlaying=' + isTargetVideoPlaying);
if (isTargetVideoPlaying) {
// if the target video is playing
log(logHdr + 'the target video is playing, so we will stop it');
const player = videoPlayers.getPlayer(lensId);
// get the Vimeo video player
if (typeof player === "undefined") {
// if we failed to get the player
log(logHdr + 'we FAILED to get the player, so we give up');
}
else {
// otherwise
log(logHdr + 'atc player.pause');
player.pause();
// stop the video
log(logHdr + 'bf player.pause');
}
}
}
await showHideLensUtils.hideLensByLensIdAsync(lensId);
log(logHdr + 'leave');
}
};