@atlaskit/media-ui 16.5.0 → 17.2.0

package/dist/es2019/customMediaPlayer/analytics/events/ui/mediaButtonClicked.js

@@ -0,0 +1,18 @@
+import { createPlaybackAttributes } from '../../utils/playbackAttributes';
+export function createMediaButtonClickedEvent(type, playbackState, buttonType, fileId) {
+  return {
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'button',
+    actionSubjectId: buttonType,
+    attributes: {
+      type,
+      playbackAttributes: createPlaybackAttributes(playbackState),
+      ...(fileId && {
+        fileAttributes: {
+          fileId
+        }
+      })
+    }
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/events/ui/playPauseBlanketClicked.js

@@ -0,0 +1,17 @@
+import { createPlaybackAttributes } from '../../utils/playbackAttributes';
+export function createPlayPauseBlanketClickedEvent(type, playbackState, fileId) {
+  return {
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'playPauseBlanket',
+    attributes: {
+      type,
+      playbackAttributes: createPlaybackAttributes(playbackState),
+      ...(fileId && {
+        fileAttributes: {
+          fileId
+        }
+      })
+    }
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/events/ui/playbackSpeedChanged.js

@@ -0,0 +1,17 @@
+import { createPlaybackAttributes } from '../../utils/playbackAttributes';
+export function createPlaybackSpeedChangedEvent(type, playbackState, fileId) {
+  return {
+    eventType: 'ui',
+    action: 'changed',
+    actionSubject: 'playbackSpeed',
+    attributes: {
+      type,
+      playbackAttributes: createPlaybackAttributes(playbackState),
+      ...(fileId && {
+        fileAttributes: {
+          fileId
+        }
+      })
+    }
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/events/ui/shortcutPressed.js

@@ -0,0 +1,18 @@
+import { createPlaybackAttributes } from '../../utils/playbackAttributes';
+export function createMediaShortcutPressedEvent(type, playbackState, shortcutType, fileId) {
+  return {
+    eventType: 'ui',
+    action: 'pressed',
+    actionSubject: 'shortcut',
+    actionSubjectId: shortcutType,
+    attributes: {
+      type,
+      playbackAttributes: createPlaybackAttributes(playbackState),
+      ...(fileId && {
+        fileAttributes: {
+          fileId
+        }
+      })
+    }
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/events/ui/timeRangeNavigated.js

@@ -0,0 +1,18 @@
+import { createPlaybackAttributes } from '../../utils/playbackAttributes';
+export function createTimeRangeNavigatedEvent(type, playbackState, actionSubjectId, fileId) {
+  return {
+    eventType: 'ui',
+    action: 'navigated',
+    actionSubject: 'timeRange',
+    actionSubjectId,
+    attributes: {
+      type,
+      playbackAttributes: createPlaybackAttributes(playbackState),
+      ...(fileId && {
+        fileAttributes: {
+          fileId
+        }
+      })
+    }
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/index.js

@@ -0,0 +1,9 @@
+export { createCustomMediaPlayerScreenEvent } from './events/screen/customMediaPlayer';
+export { createMediaButtonClickedEvent } from './events/ui/mediaButtonClicked';
+export { createPlaybackSpeedChangedEvent } from './events/ui/playbackSpeedChanged';
+export { createPlayPauseBlanketClickedEvent } from './events/ui/playPauseBlanketClicked';
+export { createMediaShortcutPressedEvent } from './events/ui/shortcutPressed';
+export { createTimeRangeNavigatedEvent } from './events/ui/timeRangeNavigated';
+export { createFirstPlayedTrackEvent } from './events/track/playCount';
+export { createPlayedTrackEvent } from './events/track/played';
+export { createAndFireMediaCustomMediaPlayerEvent, fireAnalyticsEvent, relevantFeatureFlagNames } from './utils/analytics';

package/dist/es2019/customMediaPlayer/analytics/utils/analytics.js

@@ -0,0 +1,14 @@
+import { createAndFireEvent } from '@atlaskit/analytics-next';
+import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
+export const relevantFeatureFlagNames = []; // can be called in a component whose props extend WithAnalyticsEventsProps
+
+export function fireAnalyticsEvent(payload, createAnalyticsEvent) {
+  if (createAnalyticsEvent) {
+    const event = createAnalyticsEvent(payload);
+    event.fire(ANALYTICS_MEDIA_CHANNEL);
+  }
+} // can be used inside withAnalyticsEvents() hook
+
+export const createAndFireMediaCustomMediaPlayerEvent = payload => {
+  return createAndFireEvent(ANALYTICS_MEDIA_CHANNEL)(payload);
+};

package/dist/es2019/customMediaPlayer/analytics/utils/playbackAttributes.js

@@ -0,0 +1,31 @@
+import isUndefined from 'lodash/isUndefined';
+import omitBy from 'lodash/omitBy';
+export function createPlaybackAttributes(playbackState) {
+  const {
+    isAutoPlay,
+    isHDAvailable,
+    isHDActive,
+    isLargePlayer,
+    isFullScreenEnabled,
+    playbackSpeed,
+    status,
+    currentTime,
+    volume,
+    duration,
+    isMuted
+  } = playbackState;
+  return omitBy({
+    isAutoPlay,
+    isHDAvailable,
+    isHDActive,
+    playbackSpeed,
+    isLargePlayer,
+    isFullScreenEnabled,
+    durationInSec: duration && parseInt(`${duration}`, 10),
+    absoluteTimeInSec: currentTime && parseInt(`${currentTime}`, 10),
+    relativeTime: duration && currentTime && duration > 0 ? Math.round(currentTime / duration * 100) / 100 : undefined,
+    status,
+    volume,
+    isMuted
+  }, isUndefined);
+}

package/dist/es2019/customMediaPlayer/fullscreen.js

@@ -23,14 +23,16 @@ export const findVendorSpecificProp = (object, propNames) => {
   }
 };
 export const requestFullscreen = element => {
-  const requestFullscreenProp = findVendorSpecificProp(element, ['requestFullScreen', 'requestFullscreen']);
+  const requestFullscreenProp = findVendorSpecificProp(element, [// The order here is important! Other way will make webkitRequestFullScreen to be picked up in chrome for example.
+  'requestFullscreen', 'requestFullScreen']);
 
   if (element[requestFullscreenProp]) {
     element[requestFullscreenProp]();
   }
 };
 export const exitFullscreen = () => {
-  const exitFullScreenProp = findVendorSpecificProp(document, ['exitFullScreen', 'exitFullscreen']);
+  const exitFullScreenProp = findVendorSpecificProp(document, [// The order here is important! Other way will make webkitExitFullScreen to be picked up in chrome for example.
+  'exitFullscreen', 'exitFullScreen']);
 
   if (document[exitFullScreenProp]) {
     document[exitFullScreenProp]();

package/dist/es2019/customMediaPlayer/icons.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+
+function SkipTenBackwardGlyph(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M5.414 6.95a1 1 0 001.414-1.414L6.293 5H12a7 7 0 11-7 7 1 1 0 10-2 0 9 9 0 109-9H6.536l.292-.293a1 1 0 10-1.414-1.414L3.293 3.414a1 1 0 000 1.414L5.414 6.95z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.494 9.15l-.02-.095a.75.75 0 00-.962-.516l-1.5.503-.094.039a.75.75 0 00-.379.91l.039.095c.163.331.55.5.91.378L9 10.293v4.457l.007.1a.75.75 0 001.493-.1v-5.5l-.006-.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M14 15.5c1.15 0 1.788-.894 2.049-1.415.305-.611.451-1.35.451-2.085 0-.69-.11-1.429-.406-2.055C15.81 9.345 15.157 8.5 14 8.5c-1.15 0-1.788.894-2.049 1.415-.305.611-.451 1.35-.451 2.085 0 .735.146 1.474.451 2.085.26.521.899 1.415 2.049 1.415zm1-3.5c0 1.105-.448 2-1 2s-1-.895-1-2 .448-2 1-2c.633 0 1 .895 1 2z"
+  }));
+}
+
+export function SkipTenBackwardIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: SkipTenBackwardGlyph
+  }, props));
+}
+
+function SkipTenForwardGlyph(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M18.586 6.95a1 1 0 11-1.414-1.414L17.707 5H12a7 7 0 107 7 1 1 0 112 0 9 9 0 11-9-9h5.465l-.293-.293a1 1 0 111.414-1.414l2.121 2.121a1 1 0 010 1.414L18.586 6.95z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.475 9.055l.019.095.006.1v5.5a.75.75 0 01-1.493.1L9 14.75v-4.457l-.511.171a.75.75 0 01-.911-.378l-.039-.094a.75.75 0 01.379-.911l.094-.039 1.5-.503a.75.75 0 01.963.516z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M14 15.5c1.15 0 1.788-.894 2.049-1.415.305-.611.451-1.35.451-2.085 0-.69-.11-1.429-.406-2.055C15.81 9.345 15.157 8.5 14 8.5c-1.15 0-1.788.894-2.049 1.415-.305.611-.451 1.35-.451 2.085 0 .735.146 1.474.451 2.085.26.521.899 1.415 2.049 1.415zm1-3.5c0 1.105-.448 2-1 2s-1-.895-1-2 .448-2 1-2c.633 0 1 .895 1 2z"
+  }));
+}
+
+export function SkipTenForwardIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: SkipTenForwardGlyph
+  }, props));
+}