@micromag/viewer 0.3.462 → 0.3.464
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +26 -9
- package/lib/index.js +25 -8
- package/package.json +11 -11
package/es/index.js
CHANGED
|
@@ -17,7 +17,7 @@ import classNames from 'classnames';
|
|
|
17
17
|
import { Helmet } from 'react-helmet';
|
|
18
18
|
import EventEmitter from 'wolfy87-eventemitter';
|
|
19
19
|
import { Label, CloseIcon, ScreenPreview, Screen, ArrowIcon, Button as Button$1, PlayIcon, Spinner, UnmuteIcon, MuteIcon, PauseIcon, Meta, FontFaces } from '@micromag/core/components';
|
|
20
|
-
import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaReady, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
|
|
20
|
+
import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useMediaReady, useMediaState, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
|
|
21
21
|
import { getStyleFromColor, easings, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
|
|
22
22
|
import { ShareIncentive } from '@micromag/elements/all';
|
|
23
23
|
import { useIntl, FormattedMessage } from 'react-intl';
|
|
@@ -1560,7 +1560,10 @@ var ViewerMenu = function ViewerMenu(_ref) {
|
|
|
1560
1560
|
var _useDragProgress = useDragProgress({
|
|
1561
1561
|
progress: shareOpened ? 1 : 0,
|
|
1562
1562
|
computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
|
|
1563
|
-
springParams: springParams
|
|
1563
|
+
springParams: springParams,
|
|
1564
|
+
drapOptions: {
|
|
1565
|
+
axis: 'y'
|
|
1566
|
+
}
|
|
1564
1567
|
}),
|
|
1565
1568
|
bindShareDrag = _useDragProgress.bind,
|
|
1566
1569
|
draggingShare = _useDragProgress.dragging,
|
|
@@ -1600,7 +1603,10 @@ var ViewerMenu = function ViewerMenu(_ref) {
|
|
|
1600
1603
|
var _useDragProgress2 = useDragProgress({
|
|
1601
1604
|
progress: menuOpened ? 1 : 0,
|
|
1602
1605
|
computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
|
|
1603
|
-
springParams: springParams
|
|
1606
|
+
springParams: springParams,
|
|
1607
|
+
drapOptions: {
|
|
1608
|
+
axis: 'y'
|
|
1609
|
+
}
|
|
1604
1610
|
}),
|
|
1605
1611
|
bindMenuDrag = _useDragProgress2.bind,
|
|
1606
1612
|
draggingMenu = _useDragProgress2.dragging,
|
|
@@ -2133,9 +2139,9 @@ function PlaybackControls(_ref) {
|
|
|
2133
2139
|
_usePlaybackContext$h = _usePlaybackContext.hasAudio,
|
|
2134
2140
|
hasAudio = _usePlaybackContext$h === void 0 ? null : _usePlaybackContext$h,
|
|
2135
2141
|
_usePlaybackContext$p = _usePlaybackContext.playing,
|
|
2136
|
-
|
|
2142
|
+
wantedPlaying = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
|
|
2137
2143
|
_usePlaybackContext$m2 = _usePlaybackContext.muted,
|
|
2138
|
-
|
|
2144
|
+
wantedMuted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
|
|
2139
2145
|
setPlaying = _usePlaybackContext.setPlaying,
|
|
2140
2146
|
setMuted = _usePlaybackContext.setMuted,
|
|
2141
2147
|
controls = _usePlaybackContext.controls,
|
|
@@ -2153,19 +2159,26 @@ function PlaybackControls(_ref) {
|
|
|
2153
2159
|
});
|
|
2154
2160
|
var ready = mediaElement === null || mediaReady;
|
|
2155
2161
|
var finalShowLoading = showLoading && !ready;
|
|
2162
|
+
var _useMediaState = useMediaState(mediaElement, {
|
|
2163
|
+
playing: wantedPlaying,
|
|
2164
|
+
muted: wantedMuted
|
|
2165
|
+
}),
|
|
2166
|
+
buffering = _useMediaState.buffering,
|
|
2167
|
+
playing = _useMediaState.playing,
|
|
2168
|
+
muted = _useMediaState.muted;
|
|
2156
2169
|
useEffect(function () {
|
|
2157
2170
|
var id = null;
|
|
2158
2171
|
setShowLoading(false);
|
|
2159
|
-
if (!ready && withLoading) {
|
|
2172
|
+
if ((!ready || buffering) && withLoading) {
|
|
2160
2173
|
id = setTimeout(function () {
|
|
2161
2174
|
setShowLoading(true);
|
|
2162
|
-
},
|
|
2175
|
+
}, 1000);
|
|
2163
2176
|
}
|
|
2164
2177
|
return function () {
|
|
2165
2178
|
setShowLoading(false);
|
|
2166
2179
|
clearTimeout(id);
|
|
2167
2180
|
};
|
|
2168
|
-
}, [ready, withLoading, setShowLoading]);
|
|
2181
|
+
}, [ready, buffering, withLoading, setShowLoading]);
|
|
2169
2182
|
var _useState3 = useState({
|
|
2170
2183
|
color: getColorAsString(defaultColor),
|
|
2171
2184
|
progressColor: getColorAsString(defaultColor),
|
|
@@ -2840,7 +2853,11 @@ var Viewer = function Viewer(_ref) {
|
|
|
2840
2853
|
computeProgress: computeScreenProgress,
|
|
2841
2854
|
onProgress: onScreenProgress,
|
|
2842
2855
|
onTap: onTap,
|
|
2843
|
-
springParams: springParams
|
|
2856
|
+
springParams: springParams,
|
|
2857
|
+
drapOptions: {
|
|
2858
|
+
filterTaps: true,
|
|
2859
|
+
axis: 'y'
|
|
2860
|
+
}
|
|
2844
2861
|
}),
|
|
2845
2862
|
isDragging = _useDragProgress.dragging,
|
|
2846
2863
|
progressSpring = _useDragProgress.progress,
|
package/lib/index.js
CHANGED
|
@@ -1564,7 +1564,10 @@ var ViewerMenu = function ViewerMenu(_ref) {
|
|
|
1564
1564
|
var _useDragProgress = hooks.useDragProgress({
|
|
1565
1565
|
progress: shareOpened ? 1 : 0,
|
|
1566
1566
|
computeProgress: shareOpened ? computeShareProgressClose : computeShareProgress,
|
|
1567
|
-
springParams: springParams
|
|
1567
|
+
springParams: springParams,
|
|
1568
|
+
drapOptions: {
|
|
1569
|
+
axis: 'y'
|
|
1570
|
+
}
|
|
1568
1571
|
}),
|
|
1569
1572
|
bindShareDrag = _useDragProgress.bind,
|
|
1570
1573
|
draggingShare = _useDragProgress.dragging,
|
|
@@ -1604,7 +1607,10 @@ var ViewerMenu = function ViewerMenu(_ref) {
|
|
|
1604
1607
|
var _useDragProgress2 = hooks.useDragProgress({
|
|
1605
1608
|
progress: menuOpened ? 1 : 0,
|
|
1606
1609
|
computeProgress: menuOpened ? computeMenuProgressClose : computeMenuProgress,
|
|
1607
|
-
springParams: springParams
|
|
1610
|
+
springParams: springParams,
|
|
1611
|
+
drapOptions: {
|
|
1612
|
+
axis: 'y'
|
|
1613
|
+
}
|
|
1608
1614
|
}),
|
|
1609
1615
|
bindMenuDrag = _useDragProgress2.bind,
|
|
1610
1616
|
draggingMenu = _useDragProgress2.dragging,
|
|
@@ -2137,9 +2143,9 @@ function PlaybackControls(_ref) {
|
|
|
2137
2143
|
_usePlaybackContext$h = _usePlaybackContext.hasAudio,
|
|
2138
2144
|
hasAudio = _usePlaybackContext$h === void 0 ? null : _usePlaybackContext$h,
|
|
2139
2145
|
_usePlaybackContext$p = _usePlaybackContext.playing,
|
|
2140
|
-
|
|
2146
|
+
wantedPlaying = _usePlaybackContext$p === void 0 ? false : _usePlaybackContext$p,
|
|
2141
2147
|
_usePlaybackContext$m2 = _usePlaybackContext.muted,
|
|
2142
|
-
|
|
2148
|
+
wantedMuted = _usePlaybackContext$m2 === void 0 ? true : _usePlaybackContext$m2,
|
|
2143
2149
|
setPlaying = _usePlaybackContext.setPlaying,
|
|
2144
2150
|
setMuted = _usePlaybackContext.setMuted,
|
|
2145
2151
|
controls = _usePlaybackContext.controls,
|
|
@@ -2157,19 +2163,26 @@ function PlaybackControls(_ref) {
|
|
|
2157
2163
|
});
|
|
2158
2164
|
var ready = mediaElement === null || mediaReady;
|
|
2159
2165
|
var finalShowLoading = showLoading && !ready;
|
|
2166
|
+
var _useMediaState = hooks.useMediaState(mediaElement, {
|
|
2167
|
+
playing: wantedPlaying,
|
|
2168
|
+
muted: wantedMuted
|
|
2169
|
+
}),
|
|
2170
|
+
buffering = _useMediaState.buffering,
|
|
2171
|
+
playing = _useMediaState.playing,
|
|
2172
|
+
muted = _useMediaState.muted;
|
|
2160
2173
|
React.useEffect(function () {
|
|
2161
2174
|
var id = null;
|
|
2162
2175
|
setShowLoading(false);
|
|
2163
|
-
if (!ready && withLoading) {
|
|
2176
|
+
if ((!ready || buffering) && withLoading) {
|
|
2164
2177
|
id = setTimeout(function () {
|
|
2165
2178
|
setShowLoading(true);
|
|
2166
|
-
},
|
|
2179
|
+
}, 1000);
|
|
2167
2180
|
}
|
|
2168
2181
|
return function () {
|
|
2169
2182
|
setShowLoading(false);
|
|
2170
2183
|
clearTimeout(id);
|
|
2171
2184
|
};
|
|
2172
|
-
}, [ready, withLoading, setShowLoading]);
|
|
2185
|
+
}, [ready, buffering, withLoading, setShowLoading]);
|
|
2173
2186
|
var _useState3 = React.useState({
|
|
2174
2187
|
color: utils.getColorAsString(defaultColor),
|
|
2175
2188
|
progressColor: utils.getColorAsString(defaultColor),
|
|
@@ -2844,7 +2857,11 @@ var Viewer = function Viewer(_ref) {
|
|
|
2844
2857
|
computeProgress: computeScreenProgress,
|
|
2845
2858
|
onProgress: onScreenProgress,
|
|
2846
2859
|
onTap: onTap,
|
|
2847
|
-
springParams: springParams
|
|
2860
|
+
springParams: springParams,
|
|
2861
|
+
drapOptions: {
|
|
2862
|
+
filterTaps: true,
|
|
2863
|
+
axis: 'y'
|
|
2864
|
+
}
|
|
2848
2865
|
}),
|
|
2849
2866
|
isDragging = _useDragProgress.dragging,
|
|
2850
2867
|
progressSpring = _useDragProgress.progress,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/viewer",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.464",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -62,15 +62,15 @@
|
|
|
62
62
|
},
|
|
63
63
|
"dependencies": {
|
|
64
64
|
"@babel/runtime": "^7.13.10",
|
|
65
|
-
"@micromag/core": "^0.3.
|
|
66
|
-
"@micromag/element-badge": "^0.3.
|
|
67
|
-
"@micromag/element-scroll": "^0.3.
|
|
68
|
-
"@micromag/element-share-options": "^0.3.
|
|
69
|
-
"@micromag/element-webview": "^0.3.
|
|
70
|
-
"@micromag/elements": "^0.3.
|
|
71
|
-
"@micromag/fields": "^0.3.
|
|
72
|
-
"@micromag/intl": "^0.3.
|
|
73
|
-
"@micromag/screens": "^0.3.
|
|
65
|
+
"@micromag/core": "^0.3.463",
|
|
66
|
+
"@micromag/element-badge": "^0.3.463",
|
|
67
|
+
"@micromag/element-scroll": "^0.3.463",
|
|
68
|
+
"@micromag/element-share-options": "^0.3.463",
|
|
69
|
+
"@micromag/element-webview": "^0.3.463",
|
|
70
|
+
"@micromag/elements": "^0.3.463",
|
|
71
|
+
"@micromag/fields": "^0.3.463",
|
|
72
|
+
"@micromag/intl": "^0.3.463",
|
|
73
|
+
"@micromag/screens": "^0.3.463",
|
|
74
74
|
"@react-spring/core": "^9.6.1",
|
|
75
75
|
"@react-spring/web": "^9.6.1",
|
|
76
76
|
"@use-gesture/react": "^10.3.0",
|
|
@@ -90,5 +90,5 @@
|
|
|
90
90
|
"access": "public",
|
|
91
91
|
"registry": "https://registry.npmjs.org/"
|
|
92
92
|
},
|
|
93
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "f9f5a0f5194e71fe489d08a5971a77e72616eafe"
|
|
94
94
|
}
|