@folklore/hooks
Advanced tools
@folklore/hooks - npm Package Compare versions
Comparing version 0.0.31 to 0.0.32
269
dist/cjs.js
@@ -33,3 +33,2 @@ 'use strict'; | ||
| const delta = desiredValue - startValue; | ||
| function loop() { | ||
@@ -39,3 +38,2 @@ if (canceled) { | ||
| } | ||
| const currentTime = Date.now(); | ||
@@ -46,3 +44,2 @@ const elapsedTime = currentTime - startTime; | ||
| setCurrentValue(newValue); | ||
| if (newValue !== desiredValue) { | ||
@@ -52,3 +49,2 @@ animationFrame = raf__default["default"](loop); | ||
| } | ||
| if (delta !== 0) { | ||
@@ -59,6 +55,4 @@ duration = Math.min(maxDuration, Math.abs(delta) * speed * 1000); | ||
| } | ||
| return () => { | ||
| canceled = true; | ||
| if (animationFrame !== null) { | ||
@@ -84,9 +78,8 @@ raf__default["default"].cancel(animationFrame); | ||
| const idChanged = lastIdRef.current !== id; | ||
| if (idChanged) { | ||
| realCurrentTime.current = 0; | ||
| lastIdRef.current = id; | ||
| } // Check time update | ||
| } | ||
| // Check time update | ||
| react.useEffect(() => { | ||
@@ -96,5 +89,3 @@ if (disabled || player === null) { | ||
| } | ||
| let canceled = false; | ||
| const updateTime = time => { | ||
@@ -104,6 +95,4 @@ if (canceled) { | ||
| } | ||
| realCurrentTime.current = time; | ||
| setCurrentTime(time); | ||
| if (customOnUpdate !== null) { | ||
@@ -113,6 +102,4 @@ customOnUpdate(time); | ||
| }; | ||
| const interval = setInterval(() => { | ||
| const time = getCurrentTime(player); | ||
| if (typeof time.then !== 'undefined') { | ||
@@ -134,3 +121,2 @@ time.then(updateTime); | ||
| const debug$3 = createDebug__default["default"]('folklore:video:dailymotion'); | ||
| const useDailymotionPlayer = function () { | ||
@@ -158,3 +144,2 @@ let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; | ||
| } | ||
| const match = url.match(/\/video\/([^/?]+)/); | ||
@@ -164,6 +149,6 @@ return match !== null ? match[1] : null; | ||
| } = params; | ||
| const [apiLoaded, setApiLoaded] = react.useState(typeof window.DM !== 'undefined'); | ||
| const [apiLoaded, setApiLoaded] = react.useState(typeof window !== 'undefined' && typeof window.DM !== 'undefined'); | ||
| const [playerReady, setPlayerReady] = react.useState(false); | ||
| const [loaded, setLoaded] = react.useState(false); | ||
| const apiRef = react.useRef(typeof window.DM !== 'undefined' ? window.DM : null); | ||
| const apiRef = react.useRef(typeof window !== 'undefined' && typeof window.DM !== 'undefined' ? window.DM : null); | ||
| const ready = apiLoaded && playerReady; | ||
@@ -188,7 +173,7 @@ const videoId = react.useMemo(() => getVideoId(id), [id]); | ||
| duration | ||
| }); // Load SDK | ||
| }); | ||
| // Load SDK | ||
| react.useEffect(() => { | ||
| let canceled = false; | ||
| if (!apiLoaded && videoId !== null) { | ||
@@ -204,8 +189,8 @@ debug$3('Load API'); | ||
| } | ||
| return () => { | ||
| canceled = true; | ||
| }; | ||
| }, [videoId, apiLoaded, setApiLoaded]); // Create or update player | ||
| }, [videoId, apiLoaded, setApiLoaded]); | ||
| // Create or update player | ||
| react.useEffect(() => { | ||
@@ -221,7 +206,5 @@ const { | ||
| } = elementRef; | ||
| if (!apiLoaded || videoId === null || element === null) { | ||
| return; | ||
| } | ||
| const playerParams = { | ||
@@ -239,3 +222,2 @@ 'autoplay-d': autoplay, | ||
| let player = currentPlayer; | ||
| if (player !== null) { | ||
@@ -255,7 +237,5 @@ player.load(videoId, { | ||
| } | ||
| if (!playerReady) { | ||
| setPlayerReady(true); | ||
| } | ||
| playerRef.current = player; | ||
@@ -268,10 +248,7 @@ playerElementRef.current = element; | ||
| } = playerRef; | ||
| if (player === null) { | ||
| return () => {}; | ||
| } | ||
| let currentPlayState = playState; | ||
| let currentMetadata = metadata; | ||
| function onPlaybackReady() { | ||
@@ -281,5 +258,5 @@ setLoaded(true); | ||
| } | ||
| function onLoadedMetadata() { | ||
| currentMetadata = { ...currentMetadata, | ||
| currentMetadata = { | ||
| ...currentMetadata, | ||
| duration: player.duration | ||
@@ -290,5 +267,5 @@ }; | ||
| } | ||
| function onDurationChange() { | ||
| currentMetadata = { ...currentMetadata, | ||
| currentMetadata = { | ||
| ...currentMetadata, | ||
| duration: player.duration | ||
@@ -299,3 +276,2 @@ }; | ||
| } | ||
| function onVolumeChange() { | ||
@@ -306,5 +282,5 @@ setMuted(player.muted); | ||
| } | ||
| function onPlay() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| playing: true, | ||
@@ -317,5 +293,5 @@ paused: false, | ||
| } | ||
| function onPause() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| playing: false, | ||
@@ -328,5 +304,5 @@ paused: true, | ||
| } | ||
| function onEnd() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| playing: false, | ||
@@ -339,5 +315,5 @@ paused: false, | ||
| } | ||
| function onPlaying() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| buffering: false | ||
@@ -348,5 +324,5 @@ }; | ||
| } | ||
| function onWaiting() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| buffering: true | ||
@@ -357,5 +333,5 @@ }; | ||
| } | ||
| function onAdStart() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| adPlaying: true | ||
@@ -366,5 +342,5 @@ }; | ||
| } | ||
| function onAdEnd() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| adPlaying: false | ||
@@ -375,3 +351,2 @@ }; | ||
| } | ||
| player.addEventListener('playback_ready', onPlaybackReady); | ||
@@ -467,3 +442,2 @@ player.addEventListener('loadedmetadata', onLoadedMetadata); | ||
| const eventsManager$1 = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null; | ||
| const useDocumentEvent = (event, callback) => { | ||
@@ -474,3 +448,2 @@ react.useEffect(() => { | ||
| } | ||
| return () => { | ||
@@ -485,3 +458,2 @@ if (eventsManager$1 !== null && callback !== null) { | ||
| const eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null; | ||
| const useWindowEvent = (event, callback) => { | ||
@@ -492,3 +464,2 @@ react.useEffect(() => { | ||
| } | ||
| return () => { | ||
@@ -509,3 +480,2 @@ if (eventsManager !== null && callback !== null) { | ||
| let callback = null; | ||
| if (typeof keyMap === 'function') { | ||
@@ -516,3 +486,2 @@ callback = keyMap; | ||
| } | ||
| if (callback !== null) { | ||
@@ -527,3 +496,2 @@ callback(event); | ||
| let callback = null; | ||
| if (typeof keyMap === 'function') { | ||
@@ -534,3 +502,2 @@ callback = keyMap; | ||
| } | ||
| if (callback !== null) { | ||
@@ -601,11 +568,9 @@ callback(event); | ||
| }, []) : null; | ||
| const updateState = update => setState({ ...state, | ||
| const updateState = update => setState({ | ||
| ...state, | ||
| ...update | ||
| }); | ||
| const updateFromResponse = function (response) { | ||
| let error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; | ||
| let reset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; | ||
| if (error !== null) { | ||
@@ -618,3 +583,2 @@ updateState({ | ||
| } | ||
| const newPage = getPageFromResponse(response); | ||
@@ -630,3 +594,2 @@ const currentPages = currentPagesRef.current || []; | ||
| const hasObject = aPage !== null && bPage !== null; | ||
| if (hasObject) { | ||
@@ -636,6 +599,4 @@ if (aPage === bPage) { | ||
| } | ||
| return aPage > bPage ? 1 : -1; | ||
| } | ||
| if (isNumber__default["default"](a) && isNumber__default["default"](b)) { | ||
@@ -645,6 +606,4 @@ if (a === b) { | ||
| } | ||
| return a > b ? 1 : -1; | ||
| } | ||
| return 0; | ||
@@ -662,3 +621,2 @@ }); | ||
| }; | ||
| const getNextPage = () => { | ||
@@ -671,3 +629,2 @@ const allPages = lastPage !== -1 ? Array.call(null, ...Array(lastPage)).map((it, index) => index + 1) : []; | ||
| }; | ||
| const loadItems = requestPage => { | ||
@@ -681,3 +638,2 @@ updateState({ | ||
| } | ||
| return response; | ||
@@ -690,3 +646,2 @@ }).catch(error => { | ||
| }; | ||
| const loadPage = pageToLoad => { | ||
@@ -696,13 +651,9 @@ if (loading) { | ||
| } | ||
| const currentPages = currentPagesRef.current || []; | ||
| const foundPage = currentPages.find(it => it.page === pageToLoad) || null; | ||
| if (foundPage !== null) { | ||
| return Promise.resolve(foundPage); | ||
| } | ||
| return loadItems(pageToLoad); | ||
| }; | ||
| const loadNextPage = () => { | ||
@@ -712,11 +663,9 @@ if (loading) { | ||
| } | ||
| const nextPage = getNextPage(); | ||
| return nextPage !== null ? loadItems(nextPage) : Promise.resolve(); | ||
| }; // Reset all on query change | ||
| }; | ||
| // Reset all on query change | ||
| react.useEffect(() => { | ||
| const hadState = lastState.current !== null; | ||
| if (hadState) { | ||
@@ -736,3 +685,2 @@ currentPagesRef.current = null; | ||
| lastState.current = initialState; | ||
| if (hadState) { | ||
@@ -747,10 +695,7 @@ currentPagesRef.current = initialState.pages; | ||
| } | ||
| let loadPromise = null; | ||
| const pageToLoad = initialPages === null && page === null ? 1 : page; | ||
| if (pageToLoad !== null) { | ||
| loadPromise = loadItems(pageToLoad); | ||
| } | ||
| return () => { | ||
@@ -785,3 +730,2 @@ if (loadPromise !== null) { | ||
| const noPlayerError = new Error('No player'); | ||
| const useNativeVideoPlayer = function (url) { | ||
@@ -826,3 +770,2 @@ let { | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -832,3 +775,2 @@ player.volume = newVolume; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
@@ -840,3 +782,2 @@ }, []); | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -846,3 +787,2 @@ player.muted = true; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
@@ -854,3 +794,2 @@ }, []); | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -860,3 +799,2 @@ player.muted = false; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
@@ -868,3 +806,2 @@ }, []); | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -874,3 +811,2 @@ player.currentTime = newTime; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
@@ -882,3 +818,2 @@ }, []); | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -888,6 +823,6 @@ player.loop = newLoop; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
| }, []); // Bind player events | ||
| }, []); | ||
| // Bind player events | ||
| react.useEffect(() => { | ||
@@ -897,7 +832,5 @@ const { | ||
| } = elementRef; | ||
| if (player === null) { | ||
| return () => {}; | ||
| } | ||
| const onCanPlay = () => { | ||
@@ -907,3 +840,2 @@ setLoaded(true); | ||
| }; | ||
| const onMetadataLoaded = () => { | ||
@@ -918,3 +850,2 @@ const newMetadata = { | ||
| }; | ||
| const onPlay = () => { | ||
@@ -929,3 +860,2 @@ setPlayState({ | ||
| }; | ||
| const onPause = () => { | ||
@@ -940,3 +870,2 @@ setPlayState({ | ||
| }; | ||
| const onEnded = () => { | ||
@@ -951,3 +880,2 @@ setPlayState({ | ||
| }; | ||
| debug$2('Bind events [URL: %s]', url); | ||
@@ -998,3 +926,2 @@ player.addEventListener('canplay', onCanPlay); | ||
| const observersCache = new Map(); | ||
| const getOptionsKey = _ref => { | ||
@@ -1006,18 +933,15 @@ let { | ||
| } = _ref; | ||
| return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold); | ||
| return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`; | ||
| }; | ||
| const createObserver = function (Observer) { | ||
| let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| let subscribers = []; | ||
| const addSubscriber = (element, callback) => { | ||
| const currentSubscriber = subscribers.find(it => it.element === element) || null; | ||
| if (currentSubscriber !== null) { | ||
| return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? { ...it, | ||
| return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? { | ||
| ...it, | ||
| callbacks: [...it.callbacks, callback] | ||
| } : it).filter(it => it.callbacks.length > 0); | ||
| } | ||
| return [...subscribers, { | ||
@@ -1028,7 +952,6 @@ element, | ||
| }; | ||
| const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? { ...it, | ||
| const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? { | ||
| ...it, | ||
| callbacks: it.callbacks.filter(subCallback => subCallback !== callback) | ||
| } : it).filter(it => it.callbacks.length > 0); | ||
| const onUpdate = entries => { | ||
@@ -1041,3 +964,2 @@ entries.forEach(entry => { | ||
| } = _ref2; | ||
| if (element === entry.target) { | ||
@@ -1051,9 +973,6 @@ callbacks.forEach(callback => { | ||
| }; | ||
| const observer = new Observer(onUpdate, options); | ||
| const unsubscribe = function (element) { | ||
| let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; | ||
| subscribers = removeSubscriber(element, callback); | ||
| if (typeof observer.unobserve === 'undefined') { | ||
@@ -1066,5 +985,3 @@ observer.disconnect(); | ||
| } | ||
| const currentSubscriber = subscribers.find(it => it.element === element) || null; | ||
| if (currentSubscriber === null) { | ||
@@ -1074,7 +991,5 @@ observer.unobserve(element); | ||
| }; | ||
| const subscribe = (element, callback) => { | ||
| const currentSubscriber = subscribers.find(it => it.element === element) || null; | ||
| subscribers = addSubscriber(element, callback); | ||
| if (currentSubscriber === null) { | ||
@@ -1084,3 +999,2 @@ observer.observe(element); | ||
| }; | ||
| return { | ||
@@ -1092,13 +1006,17 @@ subscribe, | ||
| }; | ||
| const getObserver = function (Observer) { | ||
| const getObserver = function () { | ||
| let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; | ||
| let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| if (Observer === null) { | ||
| return { | ||
| observer: null, | ||
| subscribe: () => {}, | ||
| unsubscribe: () => {} | ||
| }; | ||
| } | ||
| const observerKey = getOptionsKey(options); | ||
| if (!observersCache.has(Observer)) { | ||
| observersCache.set(Observer, {}); | ||
| } | ||
| const observers = observersCache.get(Observer); | ||
| if (typeof observers[observerKey] === 'undefined') { | ||
@@ -1108,3 +1026,2 @@ observers[observerKey] = createObserver(Observer, options); | ||
| } | ||
| return observers[observerKey]; | ||
@@ -1130,22 +1047,15 @@ }; | ||
| } = nodeRef; | ||
| const callback = newEntry => setEntry(newEntry); | ||
| let unsubscribe = null; | ||
| if (nodeElement !== null) { | ||
| const newOpts = {}; | ||
| if (root !== null) { | ||
| newOpts.root = root; | ||
| } | ||
| if (rootMargin !== null) { | ||
| newOpts.rootMargin = rootMargin; | ||
| } | ||
| if (threshold !== null) { | ||
| newOpts.threshold = threshold; | ||
| } | ||
| const { | ||
@@ -1158,3 +1068,2 @@ subscribe, | ||
| } | ||
| currentElement.current = nodeElement; | ||
@@ -1172,6 +1081,6 @@ return () => { | ||
| }; | ||
| /** | ||
| * Intersection Observer | ||
| */ | ||
| const defaultThreshold = [0, 1.0]; | ||
@@ -1195,3 +1104,3 @@ const intersectionObserverInitialEntry = { | ||
| } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| return useObserver(IntersectionObserver, { | ||
| return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, { | ||
| root, | ||
@@ -1203,6 +1112,6 @@ rootMargin, | ||
| }; | ||
| /** | ||
| * Resize Observer | ||
| */ | ||
| const resizeObserverInitialEntry = { | ||
@@ -1218,3 +1127,3 @@ target: null, | ||
| } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| return useObserver(ResizeObserver, { | ||
| return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, { | ||
| disabled | ||
@@ -1226,3 +1135,2 @@ }, resizeObserverInitialEntry); | ||
| const debug$1 = createDebug__default["default"]('folklore:video:youtube'); | ||
| function useYouTubePlayer(id) { | ||
@@ -1243,3 +1151,2 @@ let { | ||
| } | ||
| const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; | ||
@@ -1250,4 +1157,4 @@ const match = url.match(regExp); | ||
| } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| const [apiLoaded, setApiLoaded] = react.useState(typeof window.YT !== 'undefined'); | ||
| const apiRef = react.useRef(typeof window.YT !== 'undefined' ? window.YT : null); | ||
| const [apiLoaded, setApiLoaded] = react.useState(typeof window !== 'undefined' && typeof window.YT !== 'undefined'); | ||
| const apiRef = react.useRef(typeof window !== 'undefined' && typeof window.YT !== 'undefined' ? window.YT : null); | ||
| const elementRef = react.useRef(null); | ||
@@ -1273,3 +1180,2 @@ const playerRef = react.useRef(null); | ||
| let canceled = false; | ||
| if (!apiLoaded && videoId !== null) { | ||
@@ -1285,3 +1191,2 @@ debug$1('Load API'); | ||
| } | ||
| return () => { | ||
@@ -1308,7 +1213,5 @@ canceled = true; | ||
| const promise = player !== null && typeof player.setVolume !== 'undefined' ? Promise.resolve(player.setVolume(volume * 100)) : Promise.reject(NO_PLAYER_ERROR$1); | ||
| if (customOnVolumeChange) { | ||
| customOnVolumeChange(volume); | ||
| } | ||
| return promise; | ||
@@ -1345,4 +1248,6 @@ }, [customOnVolumeChange]); | ||
| } | ||
| }, []); // Detect iframe switch and destroy player | ||
| }, []); | ||
| // Detect iframe switch and destroy player | ||
| react.useEffect(() => { | ||
@@ -1352,3 +1257,2 @@ const { | ||
| } = playerRef; | ||
| if (playerElementRef.current !== elementRef.current && currentPlayer !== null) { | ||
@@ -1358,4 +1262,5 @@ debug$1('iFrame switched'); | ||
| } | ||
| }, [elementHasChanged]); // Create player | ||
| }, [elementHasChanged]); | ||
| // Create player | ||
| react.useEffect(() => { | ||
@@ -1371,3 +1276,2 @@ const { | ||
| } = elementRef; | ||
| if (!apiLoaded || videoId === null || element === null) { | ||
@@ -1377,5 +1281,3 @@ destroyPlayer(); | ||
| } | ||
| let player = currentPlayer; | ||
| if (player !== null && typeof player.loadVideoById !== 'undefined') { | ||
@@ -1386,3 +1288,2 @@ debug$1('Switch video [ID: %s]', videoId); | ||
| debug$1('Create player [ID: %s]', videoId); | ||
| const onReady = _ref => { | ||
@@ -1396,12 +1297,10 @@ let { | ||
| const newDuration = target.getDuration(); | ||
| if (newDuration !== metadata.duration) { | ||
| setMetadata({ ...metadata, | ||
| setMetadata({ | ||
| ...metadata, | ||
| duration: newDuration | ||
| }); | ||
| } | ||
| debug$1('onReady [ID: %s]', videoId); | ||
| }; | ||
| const onStateChange = _ref2 => { | ||
@@ -1419,3 +1318,2 @@ let { | ||
| let stateLabel = null; | ||
| if (newState.playing) { | ||
@@ -1434,6 +1332,4 @@ stateLabel = 'playing'; | ||
| } | ||
| debug$1('onStateChange %s [ID: %s]', stateLabel, videoId); | ||
| }; | ||
| player = new YT.Player(element, { | ||
@@ -1456,3 +1352,2 @@ videoId, | ||
| } | ||
| playerRef.current = player; | ||
@@ -1493,3 +1388,2 @@ playerElementRef.current = element; | ||
| const NO_PLAYER_ERROR = new Error('No player'); | ||
| const useVimeoPlayer = function (id) { | ||
@@ -1511,3 +1405,2 @@ let { | ||
| } | ||
| const match = url.match(/\/[0-9]+/); | ||
@@ -1537,7 +1430,7 @@ return match !== null ? match[1] : null; | ||
| duration | ||
| }); // Load SDK | ||
| }); | ||
| // Load SDK | ||
| react.useEffect(() => { | ||
| let canceled = false; | ||
| if (!apiLoaded && id !== null) { | ||
@@ -1553,3 +1446,2 @@ debug('Load API'); | ||
| } | ||
| return () => { | ||
@@ -1605,3 +1497,2 @@ canceled = true; | ||
| } = playerRef; | ||
| if (player !== null) { | ||
@@ -1611,3 +1502,2 @@ debug('Unload video'); | ||
| } | ||
| if (player !== null) { | ||
@@ -1622,3 +1512,2 @@ debug('Unset video'); | ||
| } = playerRef; | ||
| if (playerElementRef.current !== elementRef.current && currentPlayer !== null) { | ||
@@ -1628,4 +1517,5 @@ debug('iFrame switched'); | ||
| } | ||
| }, [elementHasChanged]); // Create player | ||
| }, [elementHasChanged]); | ||
| // Create player | ||
| react.useEffect(() => { | ||
@@ -1641,3 +1531,2 @@ const { | ||
| } = elementRef; | ||
| if (!apiLoaded || videoId === null || element === null) { | ||
@@ -1647,5 +1536,3 @@ destroyVideo(); | ||
| } | ||
| let player = currentPlayer; | ||
| if (player === null) { | ||
@@ -1671,7 +1558,7 @@ debug('Create player [ID: %s]', videoId); | ||
| } | ||
| playerRef.current = player; | ||
| playerElementRef.current = element; | ||
| }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); // Bind player events | ||
| }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); | ||
| // Bind player events | ||
| react.useEffect(() => { | ||
@@ -1681,17 +1568,12 @@ const { | ||
| } = playerRef; | ||
| if (player === null) { | ||
| return () => {}; | ||
| } | ||
| let canceled = false; | ||
| const onLoaded = () => { | ||
| Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(_ref => { | ||
| let [newDuration, newWidth, newHeight, newMuted] = _ref; | ||
| if (canceled) { | ||
| return; | ||
| } | ||
| const newMetadata = { | ||
@@ -1703,7 +1585,5 @@ duration: newDuration, | ||
| setMetadata(newMetadata); | ||
| if (newMuted) { | ||
| setVolumeState(0); | ||
| } | ||
| setLoaded(true); | ||
@@ -1713,3 +1593,2 @@ }); | ||
| }; | ||
| const onPlay = () => { | ||
@@ -1729,3 +1608,2 @@ setPlayState({ | ||
| }; | ||
| const onPause = () => { | ||
@@ -1740,3 +1618,2 @@ setPlayState({ | ||
| }; | ||
| const onVolumeChange = _ref2 => { | ||
@@ -1749,3 +1626,2 @@ let { | ||
| }; | ||
| const onEnded = () => { | ||
@@ -1760,3 +1636,2 @@ setPlayState({ | ||
| }; | ||
| const onBufferStart = () => { | ||
@@ -1771,3 +1646,2 @@ setPlayState({ | ||
| }; | ||
| const onBufferEnded = () => { | ||
@@ -1782,3 +1656,2 @@ setPlayState({ | ||
| }; | ||
| debug('Bind events [ID: %s]', videoId); | ||
@@ -1853,3 +1726,2 @@ player.on('loaded', onLoaded); | ||
| let player = null; | ||
| if (service === 'dailymotion') { | ||
@@ -1864,3 +1736,2 @@ player = dailymotionPlayer; | ||
| } | ||
| const { | ||
@@ -1905,3 +1776,2 @@ playing = false, | ||
| const hasMetadata = metaWidth !== null || metaHeight !== null || metaDuration !== null; | ||
| if (hasMetadata && customOnMetadataChange !== null) { | ||
@@ -1922,5 +1792,3 @@ customOnMetadataChange({ | ||
| }); | ||
| const currentScroll = getWindowScroll(); | ||
| const useWindowScroll = function () { | ||
@@ -1934,3 +1802,2 @@ let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| const newScroll = getWindowScroll(); | ||
| if (currentScroll.x !== newScroll.x || currentScroll.y !== newScroll.y) { | ||
@@ -1942,3 +1809,2 @@ currentScroll.x = newScroll.x; | ||
| } | ||
| return null; | ||
@@ -1948,3 +1814,2 @@ }, [setScroll]); | ||
| const newScroll = updateScroll(); | ||
| if (newScroll !== null && onChange !== null) { | ||
@@ -1966,3 +1831,2 @@ onChange(newScroll); | ||
| let currentSize = getWindowSize(); | ||
| function useWindowSize() { | ||
@@ -1975,3 +1839,2 @@ let { | ||
| const newSize = getWindowSize(); | ||
| if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) { | ||
@@ -1982,3 +1845,2 @@ currentSize = newSize; | ||
| } | ||
| return null; | ||
@@ -1988,3 +1850,2 @@ }, [setSize]); | ||
| const newSize = updateSize(); | ||
| if (newSize !== null && onChange !== null) { | ||
@@ -1991,0 +1852,0 @@ onChange(newSize); |
269
dist/es.js
@@ -22,3 +22,2 @@ import raf from 'raf'; | ||
| const delta = desiredValue - startValue; | ||
| function loop() { | ||
@@ -28,3 +27,2 @@ if (canceled) { | ||
| } | ||
| const currentTime = Date.now(); | ||
@@ -35,3 +33,2 @@ const elapsedTime = currentTime - startTime; | ||
| setCurrentValue(newValue); | ||
| if (newValue !== desiredValue) { | ||
@@ -41,3 +38,2 @@ animationFrame = raf(loop); | ||
| } | ||
| if (delta !== 0) { | ||
@@ -48,6 +44,4 @@ duration = Math.min(maxDuration, Math.abs(delta) * speed * 1000); | ||
| } | ||
| return () => { | ||
| canceled = true; | ||
| if (animationFrame !== null) { | ||
@@ -73,9 +67,8 @@ raf.cancel(animationFrame); | ||
| const idChanged = lastIdRef.current !== id; | ||
| if (idChanged) { | ||
| realCurrentTime.current = 0; | ||
| lastIdRef.current = id; | ||
| } // Check time update | ||
| } | ||
| // Check time update | ||
| useEffect(() => { | ||
@@ -85,5 +78,3 @@ if (disabled || player === null) { | ||
| } | ||
| let canceled = false; | ||
| const updateTime = time => { | ||
@@ -93,6 +84,4 @@ if (canceled) { | ||
| } | ||
| realCurrentTime.current = time; | ||
| setCurrentTime(time); | ||
| if (customOnUpdate !== null) { | ||
@@ -102,6 +91,4 @@ customOnUpdate(time); | ||
| }; | ||
| const interval = setInterval(() => { | ||
| const time = getCurrentTime(player); | ||
| if (typeof time.then !== 'undefined') { | ||
@@ -123,3 +110,2 @@ time.then(updateTime); | ||
| const debug$3 = createDebug('folklore:video:dailymotion'); | ||
| const useDailymotionPlayer = function () { | ||
@@ -147,3 +133,2 @@ let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; | ||
| } | ||
| const match = url.match(/\/video\/([^/?]+)/); | ||
@@ -153,6 +138,6 @@ return match !== null ? match[1] : null; | ||
| } = params; | ||
| const [apiLoaded, setApiLoaded] = useState(typeof window.DM !== 'undefined'); | ||
| const [apiLoaded, setApiLoaded] = useState(typeof window !== 'undefined' && typeof window.DM !== 'undefined'); | ||
| const [playerReady, setPlayerReady] = useState(false); | ||
| const [loaded, setLoaded] = useState(false); | ||
| const apiRef = useRef(typeof window.DM !== 'undefined' ? window.DM : null); | ||
| const apiRef = useRef(typeof window !== 'undefined' && typeof window.DM !== 'undefined' ? window.DM : null); | ||
| const ready = apiLoaded && playerReady; | ||
@@ -177,7 +162,7 @@ const videoId = useMemo(() => getVideoId(id), [id]); | ||
| duration | ||
| }); // Load SDK | ||
| }); | ||
| // Load SDK | ||
| useEffect(() => { | ||
| let canceled = false; | ||
| if (!apiLoaded && videoId !== null) { | ||
@@ -193,8 +178,8 @@ debug$3('Load API'); | ||
| } | ||
| return () => { | ||
| canceled = true; | ||
| }; | ||
| }, [videoId, apiLoaded, setApiLoaded]); // Create or update player | ||
| }, [videoId, apiLoaded, setApiLoaded]); | ||
| // Create or update player | ||
| useEffect(() => { | ||
@@ -210,7 +195,5 @@ const { | ||
| } = elementRef; | ||
| if (!apiLoaded || videoId === null || element === null) { | ||
| return; | ||
| } | ||
| const playerParams = { | ||
@@ -228,3 +211,2 @@ 'autoplay-d': autoplay, | ||
| let player = currentPlayer; | ||
| if (player !== null) { | ||
@@ -244,7 +226,5 @@ player.load(videoId, { | ||
| } | ||
| if (!playerReady) { | ||
| setPlayerReady(true); | ||
| } | ||
| playerRef.current = player; | ||
@@ -257,10 +237,7 @@ playerElementRef.current = element; | ||
| } = playerRef; | ||
| if (player === null) { | ||
| return () => {}; | ||
| } | ||
| let currentPlayState = playState; | ||
| let currentMetadata = metadata; | ||
| function onPlaybackReady() { | ||
@@ -270,5 +247,5 @@ setLoaded(true); | ||
| } | ||
| function onLoadedMetadata() { | ||
| currentMetadata = { ...currentMetadata, | ||
| currentMetadata = { | ||
| ...currentMetadata, | ||
| duration: player.duration | ||
@@ -279,5 +256,5 @@ }; | ||
| } | ||
| function onDurationChange() { | ||
| currentMetadata = { ...currentMetadata, | ||
| currentMetadata = { | ||
| ...currentMetadata, | ||
| duration: player.duration | ||
@@ -288,3 +265,2 @@ }; | ||
| } | ||
| function onVolumeChange() { | ||
@@ -295,5 +271,5 @@ setMuted(player.muted); | ||
| } | ||
| function onPlay() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| playing: true, | ||
@@ -306,5 +282,5 @@ paused: false, | ||
| } | ||
| function onPause() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| playing: false, | ||
@@ -317,5 +293,5 @@ paused: true, | ||
| } | ||
| function onEnd() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| playing: false, | ||
@@ -328,5 +304,5 @@ paused: false, | ||
| } | ||
| function onPlaying() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| buffering: false | ||
@@ -337,5 +313,5 @@ }; | ||
| } | ||
| function onWaiting() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| buffering: true | ||
@@ -346,5 +322,5 @@ }; | ||
| } | ||
| function onAdStart() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| adPlaying: true | ||
@@ -355,5 +331,5 @@ }; | ||
| } | ||
| function onAdEnd() { | ||
| currentPlayState = { ...currentPlayState, | ||
| currentPlayState = { | ||
| ...currentPlayState, | ||
| adPlaying: false | ||
@@ -364,3 +340,2 @@ }; | ||
| } | ||
| player.addEventListener('playback_ready', onPlaybackReady); | ||
@@ -456,3 +431,2 @@ player.addEventListener('loadedmetadata', onLoadedMetadata); | ||
| const eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null; | ||
| const useDocumentEvent = (event, callback) => { | ||
@@ -463,3 +437,2 @@ useEffect(() => { | ||
| } | ||
| return () => { | ||
@@ -474,3 +447,2 @@ if (eventsManager$1 !== null && callback !== null) { | ||
| const eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null; | ||
| const useWindowEvent = (event, callback) => { | ||
@@ -481,3 +453,2 @@ useEffect(() => { | ||
| } | ||
| return () => { | ||
@@ -498,3 +469,2 @@ if (eventsManager !== null && callback !== null) { | ||
| let callback = null; | ||
| if (typeof keyMap === 'function') { | ||
@@ -505,3 +475,2 @@ callback = keyMap; | ||
| } | ||
| if (callback !== null) { | ||
@@ -516,3 +485,2 @@ callback(event); | ||
| let callback = null; | ||
| if (typeof keyMap === 'function') { | ||
@@ -523,3 +491,2 @@ callback = keyMap; | ||
| } | ||
| if (callback !== null) { | ||
@@ -590,11 +557,9 @@ callback(event); | ||
| }, []) : null; | ||
| const updateState = update => setState({ ...state, | ||
| const updateState = update => setState({ | ||
| ...state, | ||
| ...update | ||
| }); | ||
| const updateFromResponse = function (response) { | ||
| let error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; | ||
| let reset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; | ||
| if (error !== null) { | ||
@@ -607,3 +572,2 @@ updateState({ | ||
| } | ||
| const newPage = getPageFromResponse(response); | ||
@@ -619,3 +583,2 @@ const currentPages = currentPagesRef.current || []; | ||
| const hasObject = aPage !== null && bPage !== null; | ||
| if (hasObject) { | ||
@@ -625,6 +588,4 @@ if (aPage === bPage) { | ||
| } | ||
| return aPage > bPage ? 1 : -1; | ||
| } | ||
| if (isNumber(a) && isNumber(b)) { | ||
@@ -634,6 +595,4 @@ if (a === b) { | ||
| } | ||
| return a > b ? 1 : -1; | ||
| } | ||
| return 0; | ||
@@ -651,3 +610,2 @@ }); | ||
| }; | ||
| const getNextPage = () => { | ||
@@ -660,3 +618,2 @@ const allPages = lastPage !== -1 ? Array.call(null, ...Array(lastPage)).map((it, index) => index + 1) : []; | ||
| }; | ||
| const loadItems = requestPage => { | ||
@@ -670,3 +627,2 @@ updateState({ | ||
| } | ||
| return response; | ||
@@ -679,3 +635,2 @@ }).catch(error => { | ||
| }; | ||
| const loadPage = pageToLoad => { | ||
@@ -685,13 +640,9 @@ if (loading) { | ||
| } | ||
| const currentPages = currentPagesRef.current || []; | ||
| const foundPage = currentPages.find(it => it.page === pageToLoad) || null; | ||
| if (foundPage !== null) { | ||
| return Promise.resolve(foundPage); | ||
| } | ||
| return loadItems(pageToLoad); | ||
| }; | ||
| const loadNextPage = () => { | ||
@@ -701,11 +652,9 @@ if (loading) { | ||
| } | ||
| const nextPage = getNextPage(); | ||
| return nextPage !== null ? loadItems(nextPage) : Promise.resolve(); | ||
| }; // Reset all on query change | ||
| }; | ||
| // Reset all on query change | ||
| useEffect(() => { | ||
| const hadState = lastState.current !== null; | ||
| if (hadState) { | ||
@@ -725,3 +674,2 @@ currentPagesRef.current = null; | ||
| lastState.current = initialState; | ||
| if (hadState) { | ||
@@ -736,10 +684,7 @@ currentPagesRef.current = initialState.pages; | ||
| } | ||
| let loadPromise = null; | ||
| const pageToLoad = initialPages === null && page === null ? 1 : page; | ||
| if (pageToLoad !== null) { | ||
| loadPromise = loadItems(pageToLoad); | ||
| } | ||
| return () => { | ||
@@ -774,3 +719,2 @@ if (loadPromise !== null) { | ||
| const noPlayerError = new Error('No player'); | ||
| const useNativeVideoPlayer = function (url) { | ||
@@ -815,3 +759,2 @@ let { | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -821,3 +764,2 @@ player.volume = newVolume; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
@@ -829,3 +771,2 @@ }, []); | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -835,3 +776,2 @@ player.muted = true; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
@@ -843,3 +783,2 @@ }, []); | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -849,3 +788,2 @@ player.muted = false; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
@@ -857,3 +795,2 @@ }, []); | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -863,3 +800,2 @@ player.currentTime = newTime; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
@@ -871,3 +807,2 @@ }, []); | ||
| } = elementRef; | ||
| if (player !== null) { | ||
@@ -877,6 +812,6 @@ player.loop = newLoop; | ||
| } | ||
| return Promise.reject(noPlayerError); | ||
| }, []); // Bind player events | ||
| }, []); | ||
| // Bind player events | ||
| useEffect(() => { | ||
@@ -886,7 +821,5 @@ const { | ||
| } = elementRef; | ||
| if (player === null) { | ||
| return () => {}; | ||
| } | ||
| const onCanPlay = () => { | ||
@@ -896,3 +829,2 @@ setLoaded(true); | ||
| }; | ||
| const onMetadataLoaded = () => { | ||
@@ -907,3 +839,2 @@ const newMetadata = { | ||
| }; | ||
| const onPlay = () => { | ||
@@ -918,3 +849,2 @@ setPlayState({ | ||
| }; | ||
| const onPause = () => { | ||
@@ -929,3 +859,2 @@ setPlayState({ | ||
| }; | ||
| const onEnded = () => { | ||
@@ -940,3 +869,2 @@ setPlayState({ | ||
| }; | ||
| debug$2('Bind events [URL: %s]', url); | ||
@@ -987,3 +915,2 @@ player.addEventListener('canplay', onCanPlay); | ||
| const observersCache = new Map(); | ||
| const getOptionsKey = _ref => { | ||
@@ -995,18 +922,15 @@ let { | ||
| } = _ref; | ||
| return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold); | ||
| return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`; | ||
| }; | ||
| const createObserver = function (Observer) { | ||
| let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| let subscribers = []; | ||
| const addSubscriber = (element, callback) => { | ||
| const currentSubscriber = subscribers.find(it => it.element === element) || null; | ||
| if (currentSubscriber !== null) { | ||
| return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? { ...it, | ||
| return subscribers.map(it => it.element === element && it.callbacks.indexOf(callback) === -1 ? { | ||
| ...it, | ||
| callbacks: [...it.callbacks, callback] | ||
| } : it).filter(it => it.callbacks.length > 0); | ||
| } | ||
| return [...subscribers, { | ||
@@ -1017,7 +941,6 @@ element, | ||
| }; | ||
| const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? { ...it, | ||
| const removeSubscriber = (element, callback) => subscribers.map(it => it.element === element ? { | ||
| ...it, | ||
| callbacks: it.callbacks.filter(subCallback => subCallback !== callback) | ||
| } : it).filter(it => it.callbacks.length > 0); | ||
| const onUpdate = entries => { | ||
@@ -1030,3 +953,2 @@ entries.forEach(entry => { | ||
| } = _ref2; | ||
| if (element === entry.target) { | ||
@@ -1040,9 +962,6 @@ callbacks.forEach(callback => { | ||
| }; | ||
| const observer = new Observer(onUpdate, options); | ||
| const unsubscribe = function (element) { | ||
| let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; | ||
| subscribers = removeSubscriber(element, callback); | ||
| if (typeof observer.unobserve === 'undefined') { | ||
@@ -1055,5 +974,3 @@ observer.disconnect(); | ||
| } | ||
| const currentSubscriber = subscribers.find(it => it.element === element) || null; | ||
| if (currentSubscriber === null) { | ||
@@ -1063,7 +980,5 @@ observer.unobserve(element); | ||
| }; | ||
| const subscribe = (element, callback) => { | ||
| const currentSubscriber = subscribers.find(it => it.element === element) || null; | ||
| subscribers = addSubscriber(element, callback); | ||
| if (currentSubscriber === null) { | ||
@@ -1073,3 +988,2 @@ observer.observe(element); | ||
| }; | ||
| return { | ||
@@ -1081,13 +995,17 @@ subscribe, | ||
| }; | ||
| const getObserver = function (Observer) { | ||
| const getObserver = function () { | ||
| let Observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; | ||
| let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| if (Observer === null) { | ||
| return { | ||
| observer: null, | ||
| subscribe: () => {}, | ||
| unsubscribe: () => {} | ||
| }; | ||
| } | ||
| const observerKey = getOptionsKey(options); | ||
| if (!observersCache.has(Observer)) { | ||
| observersCache.set(Observer, {}); | ||
| } | ||
| const observers = observersCache.get(Observer); | ||
| if (typeof observers[observerKey] === 'undefined') { | ||
@@ -1097,3 +1015,2 @@ observers[observerKey] = createObserver(Observer, options); | ||
| } | ||
| return observers[observerKey]; | ||
@@ -1119,22 +1036,15 @@ }; | ||
| } = nodeRef; | ||
| const callback = newEntry => setEntry(newEntry); | ||
| let unsubscribe = null; | ||
| if (nodeElement !== null) { | ||
| const newOpts = {}; | ||
| if (root !== null) { | ||
| newOpts.root = root; | ||
| } | ||
| if (rootMargin !== null) { | ||
| newOpts.rootMargin = rootMargin; | ||
| } | ||
| if (threshold !== null) { | ||
| newOpts.threshold = threshold; | ||
| } | ||
| const { | ||
@@ -1147,3 +1057,2 @@ subscribe, | ||
| } | ||
| currentElement.current = nodeElement; | ||
@@ -1161,6 +1070,6 @@ return () => { | ||
| }; | ||
| /** | ||
| * Intersection Observer | ||
| */ | ||
| const defaultThreshold = [0, 1.0]; | ||
@@ -1184,3 +1093,3 @@ const intersectionObserverInitialEntry = { | ||
| } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| return useObserver(IntersectionObserver, { | ||
| return useObserver(typeof IntersectionObserver !== 'undefined' ? IntersectionObserver : null, { | ||
| root, | ||
@@ -1192,6 +1101,6 @@ rootMargin, | ||
| }; | ||
| /** | ||
| * Resize Observer | ||
| */ | ||
| const resizeObserverInitialEntry = { | ||
@@ -1207,3 +1116,3 @@ target: null, | ||
| } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| return useObserver(ResizeObserver, { | ||
| return useObserver(typeof ResizeObserver !== 'undefined' ? ResizeObserver : null, { | ||
| disabled | ||
@@ -1215,3 +1124,2 @@ }, resizeObserverInitialEntry); | ||
| const debug$1 = createDebug('folklore:video:youtube'); | ||
| function useYouTubePlayer(id) { | ||
@@ -1232,3 +1140,2 @@ let { | ||
| } | ||
| const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; | ||
@@ -1239,4 +1146,4 @@ const match = url.match(regExp); | ||
| } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| const [apiLoaded, setApiLoaded] = useState(typeof window.YT !== 'undefined'); | ||
| const apiRef = useRef(typeof window.YT !== 'undefined' ? window.YT : null); | ||
| const [apiLoaded, setApiLoaded] = useState(typeof window !== 'undefined' && typeof window.YT !== 'undefined'); | ||
| const apiRef = useRef(typeof window !== 'undefined' && typeof window.YT !== 'undefined' ? window.YT : null); | ||
| const elementRef = useRef(null); | ||
@@ -1262,3 +1169,2 @@ const playerRef = useRef(null); | ||
| let canceled = false; | ||
| if (!apiLoaded && videoId !== null) { | ||
@@ -1274,3 +1180,2 @@ debug$1('Load API'); | ||
| } | ||
| return () => { | ||
@@ -1297,7 +1202,5 @@ canceled = true; | ||
| const promise = player !== null && typeof player.setVolume !== 'undefined' ? Promise.resolve(player.setVolume(volume * 100)) : Promise.reject(NO_PLAYER_ERROR$1); | ||
| if (customOnVolumeChange) { | ||
| customOnVolumeChange(volume); | ||
| } | ||
| return promise; | ||
@@ -1334,4 +1237,6 @@ }, [customOnVolumeChange]); | ||
| } | ||
| }, []); // Detect iframe switch and destroy player | ||
| }, []); | ||
| // Detect iframe switch and destroy player | ||
| useEffect(() => { | ||
@@ -1341,3 +1246,2 @@ const { | ||
| } = playerRef; | ||
| if (playerElementRef.current !== elementRef.current && currentPlayer !== null) { | ||
@@ -1347,4 +1251,5 @@ debug$1('iFrame switched'); | ||
| } | ||
| }, [elementHasChanged]); // Create player | ||
| }, [elementHasChanged]); | ||
| // Create player | ||
| useEffect(() => { | ||
@@ -1360,3 +1265,2 @@ const { | ||
| } = elementRef; | ||
| if (!apiLoaded || videoId === null || element === null) { | ||
@@ -1366,5 +1270,3 @@ destroyPlayer(); | ||
| } | ||
| let player = currentPlayer; | ||
| if (player !== null && typeof player.loadVideoById !== 'undefined') { | ||
@@ -1375,3 +1277,2 @@ debug$1('Switch video [ID: %s]', videoId); | ||
| debug$1('Create player [ID: %s]', videoId); | ||
| const onReady = _ref => { | ||
@@ -1385,12 +1286,10 @@ let { | ||
| const newDuration = target.getDuration(); | ||
| if (newDuration !== metadata.duration) { | ||
| setMetadata({ ...metadata, | ||
| setMetadata({ | ||
| ...metadata, | ||
| duration: newDuration | ||
| }); | ||
| } | ||
| debug$1('onReady [ID: %s]', videoId); | ||
| }; | ||
| const onStateChange = _ref2 => { | ||
@@ -1408,3 +1307,2 @@ let { | ||
| let stateLabel = null; | ||
| if (newState.playing) { | ||
@@ -1423,6 +1321,4 @@ stateLabel = 'playing'; | ||
| } | ||
| debug$1('onStateChange %s [ID: %s]', stateLabel, videoId); | ||
| }; | ||
| player = new YT.Player(element, { | ||
@@ -1445,3 +1341,2 @@ videoId, | ||
| } | ||
| playerRef.current = player; | ||
@@ -1482,3 +1377,2 @@ playerElementRef.current = element; | ||
| const NO_PLAYER_ERROR = new Error('No player'); | ||
| const useVimeoPlayer = function (id) { | ||
@@ -1500,3 +1394,2 @@ let { | ||
| } | ||
| const match = url.match(/\/[0-9]+/); | ||
@@ -1526,7 +1419,7 @@ return match !== null ? match[1] : null; | ||
| duration | ||
| }); // Load SDK | ||
| }); | ||
| // Load SDK | ||
| useEffect(() => { | ||
| let canceled = false; | ||
| if (!apiLoaded && id !== null) { | ||
@@ -1542,3 +1435,2 @@ debug('Load API'); | ||
| } | ||
| return () => { | ||
@@ -1594,3 +1486,2 @@ canceled = true; | ||
| } = playerRef; | ||
| if (player !== null) { | ||
@@ -1600,3 +1491,2 @@ debug('Unload video'); | ||
| } | ||
| if (player !== null) { | ||
@@ -1611,3 +1501,2 @@ debug('Unset video'); | ||
| } = playerRef; | ||
| if (playerElementRef.current !== elementRef.current && currentPlayer !== null) { | ||
@@ -1617,4 +1506,5 @@ debug('iFrame switched'); | ||
| } | ||
| }, [elementHasChanged]); // Create player | ||
| }, [elementHasChanged]); | ||
| // Create player | ||
| useEffect(() => { | ||
@@ -1630,3 +1520,2 @@ const { | ||
| } = elementRef; | ||
| if (!apiLoaded || videoId === null || element === null) { | ||
@@ -1636,5 +1525,3 @@ destroyVideo(); | ||
| } | ||
| let player = currentPlayer; | ||
| if (player === null) { | ||
@@ -1660,7 +1547,7 @@ debug('Create player [ID: %s]', videoId); | ||
| } | ||
| playerRef.current = player; | ||
| playerElementRef.current = element; | ||
| }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); // Bind player events | ||
| }, [apiLoaded, videoId, elementHasChanged, setReady, destroyVideo, setLoaded]); | ||
| // Bind player events | ||
| useEffect(() => { | ||
@@ -1670,17 +1557,12 @@ const { | ||
| } = playerRef; | ||
| if (player === null) { | ||
| return () => {}; | ||
| } | ||
| let canceled = false; | ||
| const onLoaded = () => { | ||
| Promise.all([player.getDuration(), player.getVideoWidth(), player.getVideoHeight(), player.getMuted()]).then(_ref => { | ||
| let [newDuration, newWidth, newHeight, newMuted] = _ref; | ||
| if (canceled) { | ||
| return; | ||
| } | ||
| const newMetadata = { | ||
@@ -1692,7 +1574,5 @@ duration: newDuration, | ||
| setMetadata(newMetadata); | ||
| if (newMuted) { | ||
| setVolumeState(0); | ||
| } | ||
| setLoaded(true); | ||
@@ -1702,3 +1582,2 @@ }); | ||
| }; | ||
| const onPlay = () => { | ||
@@ -1718,3 +1597,2 @@ setPlayState({ | ||
| }; | ||
| const onPause = () => { | ||
@@ -1729,3 +1607,2 @@ setPlayState({ | ||
| }; | ||
| const onVolumeChange = _ref2 => { | ||
@@ -1738,3 +1615,2 @@ let { | ||
| }; | ||
| const onEnded = () => { | ||
@@ -1749,3 +1625,2 @@ setPlayState({ | ||
| }; | ||
| const onBufferStart = () => { | ||
@@ -1760,3 +1635,2 @@ setPlayState({ | ||
| }; | ||
| const onBufferEnded = () => { | ||
@@ -1771,3 +1645,2 @@ setPlayState({ | ||
| }; | ||
| debug('Bind events [ID: %s]', videoId); | ||
@@ -1842,3 +1715,2 @@ player.on('loaded', onLoaded); | ||
| let player = null; | ||
| if (service === 'dailymotion') { | ||
@@ -1853,3 +1725,2 @@ player = dailymotionPlayer; | ||
| } | ||
| const { | ||
@@ -1894,3 +1765,2 @@ playing = false, | ||
| const hasMetadata = metaWidth !== null || metaHeight !== null || metaDuration !== null; | ||
| if (hasMetadata && customOnMetadataChange !== null) { | ||
@@ -1911,5 +1781,3 @@ customOnMetadataChange({ | ||
| }); | ||
| const currentScroll = getWindowScroll(); | ||
| const useWindowScroll = function () { | ||
@@ -1923,3 +1791,2 @@ let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| const newScroll = getWindowScroll(); | ||
| if (currentScroll.x !== newScroll.x || currentScroll.y !== newScroll.y) { | ||
@@ -1931,3 +1798,2 @@ currentScroll.x = newScroll.x; | ||
| } | ||
| return null; | ||
@@ -1937,3 +1803,2 @@ }, [setScroll]); | ||
| const newScroll = updateScroll(); | ||
| if (newScroll !== null && onChange !== null) { | ||
@@ -1955,3 +1820,2 @@ onChange(newScroll); | ||
| let currentSize = getWindowSize(); | ||
| function useWindowSize() { | ||
@@ -1964,3 +1828,2 @@ let { | ||
| const newSize = getWindowSize(); | ||
| if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) { | ||
@@ -1971,3 +1834,2 @@ currentSize = newSize; | ||
| } | ||
| return null; | ||
@@ -1977,3 +1839,2 @@ }, [setSize]); | ||
| const newSize = updateSize(); | ||
| if (newSize !== null && onChange !== null) { | ||
@@ -1980,0 +1841,0 @@ onChange(newSize); |
| { | ||
| "name": "@folklore/hooks", | ||
| "version": "0.0.31", | ||
| "version": "0.0.32", | ||
| "description": "React hooks", | ||
@@ -51,3 +51,3 @@ "keywords": [ | ||
| }, | ||
| "gitHead": "80b0b5301d3c79cca819327b0f95d8fac1a0b77d", | ||
| "gitHead": "3d237ba72294e3624d4f77e4a398478c38d5979f", | ||
| "dependencies": { | ||
@@ -54,0 +54,0 @@ "@folklore/events": "^0.0.4", |
Improved metrics
- Total package byte prevSize
- increased by0.71%
104382
- Lines of code
- increased by1.85%
3412