pageflow 15.7.1 → 16.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +33 -243
- data/README.md +1 -9
- data/Rakefile +4 -1
- data/admins/pageflow/accounts.rb +12 -16
- data/admins/pageflow/entry.rb +57 -28
- data/admins/pageflow/entry_templates.rb +5 -7
- data/admins/pageflow/sites.rb +50 -0
- data/admins/pageflow/user.rb +7 -0
- data/app/assets/javascripts/pageflow/admin/entries.js +53 -4
- data/app/assets/stylesheets/pageflow/admin/permalink_input.scss +65 -0
- data/app/assets/stylesheets/pageflow/admin.scss +1 -0
- data/app/assets/stylesheets/pageflow/editor/base.scss +2 -6
- data/app/assets/stylesheets/pageflow/editor/dialogs.scss +2 -0
- data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +9 -0
- data/app/assets/stylesheets/pageflow/editor/info_box.scss +13 -3
- data/app/assets/stylesheets/pageflow/mixins/buttons.scss +1 -0
- data/app/assets/stylesheets/pageflow/page.scss +0 -2
- data/app/assets/stylesheets/pageflow/themes/default/page.scss +1 -1
- data/app/assets/stylesheets/pageflow/ui/forms.scss +4 -1
- data/app/controllers/pageflow/editor/file_import_controller.rb +32 -42
- data/app/controllers/pageflow/entries_controller.rb +27 -3
- data/app/helpers/pageflow/admin/permalinks_helper.rb +15 -0
- data/app/helpers/pageflow/common_entry_seed_helper.rb +1 -1
- data/app/helpers/pageflow/embed_code_helper.rb +1 -1
- data/app/helpers/pageflow/entries_helper.rb +25 -17
- data/app/helpers/pageflow/sites_helper.rb +11 -0
- data/app/helpers/pageflow/social_share_helper.rb +2 -2
- data/app/inputs/pageflow_permalink_input.rb +47 -0
- data/app/models/concerns/pageflow/permalinkable.rb +12 -0
- data/app/models/concerns/pageflow/reusable_file.rb +5 -0
- data/app/models/concerns/pageflow/uploadable_file.rb +4 -0
- data/app/models/pageflow/account.rb +7 -33
- data/app/models/pageflow/{cname_theming_request_scope.rb → cname_site_request_scope.rb} +3 -3
- data/app/models/pageflow/customized_theme.rb +5 -3
- data/app/models/pageflow/entry.rb +8 -4
- data/app/models/pageflow/entry_at_revision.rb +4 -3
- data/app/models/pageflow/entry_duplicate.rb +8 -1
- data/app/models/pageflow/entry_template.rb +4 -4
- data/app/models/pageflow/home_button.rb +7 -7
- data/app/models/pageflow/image_file_url_templates.rb +2 -2
- data/app/models/pageflow/permalink.rb +39 -0
- data/app/models/pageflow/permalink_directory.rb +10 -0
- data/app/models/pageflow/published_entry.rb +19 -2
- data/app/models/pageflow/revision.rb +1 -1
- data/app/models/pageflow/site.rb +59 -0
- data/app/models/pageflow/theme_customization.rb +1 -1
- data/app/models/pageflow/theme_customization_file.rb +6 -1
- data/app/policies/pageflow/account_policy.rb +2 -2
- data/app/policies/pageflow/entry_policy.rb +2 -2
- data/app/policies/pageflow/entry_template_policy.rb +1 -1
- data/app/policies/pageflow/{theming_policy.rb → site_policy.rb} +13 -11
- data/app/views/admin/accounts/_entry_template_details.html.arb +1 -1
- data/app/views/admin/accounts/_form.html.erb +4 -22
- data/app/views/admin/accounts/_site_defaults_inline_help.html.erb +5 -0
- data/app/views/admin/entries/_form.html.erb +11 -12
- data/app/views/admin/entries/_permalink_inputs.html.erb +6 -0
- data/app/views/admin/entries/_site_input.html.erb +15 -0
- data/app/views/admin/entries/{entry_type_name_input.html.erb → entry_site_and_type_name_input.html.erb} +3 -0
- data/app/views/admin/entries/permalink_inputs.html.erb +7 -0
- data/app/views/admin/entry_templates/_form.html.erb +5 -5
- data/app/views/admin/sites/_attributes_table.html.arb +9 -0
- data/app/views/admin/sites/_fields.html.erb +17 -0
- data/app/views/admin/sites/_form.html.erb +5 -0
- data/app/views/components/pageflow/admin/entries_tab.rb +1 -2
- data/app/views/components/pageflow/admin/entry_templates_tab.rb +10 -11
- data/app/views/components/pageflow/admin/features_tab.rb +1 -1
- data/app/views/components/pageflow/admin/sites_tab.rb +32 -0
- data/app/views/components/pageflow/admin/users_tab.rb +1 -2
- data/app/views/pageflow/editor/entries/seed.json.erb +1 -1
- data/app/views/pageflow/editor/file_import/start_import_job.json.jbuilder +10 -0
- data/app/views/pageflow/editor/sites/_site.json.jbuilder +1 -0
- data/app/views/pageflow/entries/{_theming.css.erb → _site.css.erb} +0 -0
- data/app/views/pageflow/entries/stylesheet.css.erb +1 -1
- data/app/views/pageflow/files/_file.json.jbuilder +1 -0
- data/app/views/pageflow/social_share/_entry_meta_tags.html.erb +1 -1
- data/app/views/pageflow/social_share/_page_meta_tags.html.erb +1 -1
- data/config/initializers/admin_resource_tabs.rb +29 -12
- data/config/initializers/mime_types.rb +1 -0
- data/config/locales/de.yml +19 -17
- data/config/locales/en.yml +19 -17
- data/config/routes.rb +8 -5
- data/db/migrate/20221024100724_create_pageflow_permalink_directories.rb +10 -0
- data/db/migrate/20221025074049_add_permalink_attributes_to_entries.rb +5 -0
- data/db/migrate/20221027065022_create_pageflow_permalinks.rb +12 -0
- data/db/migrate/20221215101134_rename_theming_to_site.rb +9 -0
- data/db/migrate/20221215120856_associate_entry_templates_with_sites.rb +34 -0
- data/db/migrate/20221219203023_add_name_to_sites.rb +5 -0
- data/db/migrate/20230103155934_associate_theme_customizations_with_sites.rb +27 -0
- data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +176 -179
- data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +49 -7
- data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-client.js +5 -5
- data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-server.js +1 -1
- data/entry_types/paged/config/initializers/features.rb +2 -0
- data/entry_types/paged/config/locales/{new/help.de.yml → de.yml} +74 -65
- data/entry_types/paged/config/locales/{new/help.en.yml → en.yml} +66 -56
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/favicon_helper.rb +39 -13
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/generated_media_queries_helper.rb +55 -0
- data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb +6 -2
- data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb +2 -0
- data/entry_types/scrolled/app/views/pageflow_scrolled/entries/_manifest.json.jbuilder +16 -0
- data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +9 -3
- data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +5 -5
- data/entry_types/scrolled/app/views/pageflow_scrolled/favicons/_entry.html.erb +16 -10
- data/entry_types/scrolled/config/locales/de.yml +265 -76
- data/entry_types/scrolled/config/locales/en.yml +266 -77
- data/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb +3 -3
- data/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +14 -0
- data/entry_types/scrolled/lib/pageflow_scrolled/react_widget_type.rb +1 -1
- data/entry_types/scrolled/lib/pageflow_scrolled/seeds.rb +1 -1
- data/entry_types/scrolled/lib/pageflow_scrolled/web_app_manifest.rb +11 -0
- data/entry_types/scrolled/lib/pageflow_scrolled.rb +39 -1
- data/entry_types/scrolled/lib/tasks/pageflow_scrolled/storybook.rake +3 -2
- data/entry_types/scrolled/package/contentElements-editor.js +124 -38
- data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
- data/entry_types/scrolled/package/contentElements-frontend.js +321 -27
- data/entry_types/scrolled/package/editor.js +1345 -739
- data/entry_types/scrolled/package/frontend/EditableInlineText.module-14c7b097.js +5314 -0
- data/entry_types/scrolled/package/frontend/{PhonePlatformContext-9fb97827.js → PhonePlatformContext-f6093cc6.js} +87 -223
- data/entry_types/scrolled/package/frontend/{Viewer-e2290ea0.js → Viewer-b6becc57.js} +6 -40
- data/entry_types/scrolled/package/frontend/arrowRight-78a7cee4.js +42 -0
- data/entry_types/scrolled/package/frontend/{components-6ab26015.js → components-b3160dd7.js} +546 -361
- data/entry_types/scrolled/package/frontend/index.css +1 -1
- data/entry_types/scrolled/package/frontend/index.js +398 -3692
- data/entry_types/scrolled/package/package.json +3 -2
- data/entry_types/scrolled/package/testHelpers.js +12 -2
- data/entry_types/scrolled/package/widgets/defaultNavigation.css +2 -2
- data/entry_types/scrolled/package/widgets/defaultNavigation.js +50 -40
- data/entry_types/scrolled/spec/fixtures/image.ico +0 -0
- data/lib/pageflow/ability_mixin.rb +16 -8
- data/lib/pageflow/admin/attributes_table_rows.rb +1 -1
- data/lib/pageflow/admin/form_inputs.rb +1 -1
- data/lib/pageflow/admin/tabs.rb +1 -1
- data/lib/pageflow/configuration/permissions.rb +3 -3
- data/lib/pageflow/configuration.rb +17 -17
- data/lib/pageflow/entry_export_import/entry_serialization.rb +1 -1
- data/lib/pageflow/entry_type.rb +6 -2
- data/lib/pageflow/primary_domain_entry_redirect.rb +7 -7
- data/lib/pageflow/seeds.rb +10 -10
- data/lib/pageflow/theme_customizations.rb +10 -10
- data/lib/pageflow/version.rb +1 -1
- data/package/editor.js +129 -156
- data/package/frontend.js +19 -2
- data/package/testHelpers.js +39 -6
- data/spec/factories/accounts.rb +5 -2
- data/spec/factories/draft_entries.rb +2 -2
- data/spec/factories/entries.rb +18 -1
- data/spec/factories/entry_templates.rb +1 -1
- data/spec/factories/permalink_directory.rb +6 -0
- data/spec/factories/permalinks.rb +4 -0
- data/spec/factories/published_entries.rb +4 -2
- data/spec/factories/sites.rb +9 -0
- metadata +50 -62
- data/app/assets/javascripts/pageflow/dist/editor.js +0 -11890
- data/app/assets/javascripts/pageflow/dist/frontend.js +0 -5800
- data/app/assets/javascripts/pageflow/dist/react-client.js +0 -22
- data/app/assets/javascripts/pageflow/dist/react-server.js +0 -19
- data/app/helpers/pageflow/themings_helper.rb +0 -11
- data/app/models/pageflow/theming.rb +0 -29
- data/app/views/admin/accounts/_theming_defaults_inline_help.html.erb +0 -5
- data/app/views/admin/accounts/_theming_details.html.arb +0 -5
- data/app/views/pageflow/editor/themings/_theming.json.jbuilder +0 -1
- data/entry_types/paged/config/locales/new/video_contain.de.yml +0 -7
- data/entry_types/paged/config/locales/new/video_contain.en.yml +0 -7
- data/entry_types/scrolled/config/locales/new/before_after_slider.de.yml +0 -8
- data/entry_types/scrolled/config/locales/new/before_after_slider.en.yml +0 -8
- data/entry_types/scrolled/config/locales/new/center_ragged.de.yml +0 -8
- data/entry_types/scrolled/config/locales/new/center_ragged.en.yml +0 -9
- data/entry_types/scrolled/config/locales/new/consent.de.yml +0 -25
- data/entry_types/scrolled/config/locales/new/consent.en.yml +0 -24
- data/entry_types/scrolled/config/locales/new/content_element_categories.de.yml +0 -39
- data/entry_types/scrolled/config/locales/new/content_element_categories.en.yml +0 -39
- data/entry_types/scrolled/config/locales/new/default_transition.de.yml +0 -14
- data/entry_types/scrolled/config/locales/new/default_transition.en.yml +0 -14
- data/entry_types/scrolled/config/locales/new/header_line_breaks.de.yml +0 -28
- data/entry_types/scrolled/config/locales/new/header_line_breaks.en.yml +0 -27
- data/entry_types/scrolled/config/locales/new/header_size.de.yml +0 -17
- data/entry_types/scrolled/config/locales/new/header_size.en.yml +0 -17
- data/entry_types/scrolled/config/locales/new/iframe_embed.de.yml +0 -39
- data/entry_types/scrolled/config/locales/new/iframe_embed.en.yml +0 -39
- data/entry_types/scrolled/config/locales/new/inline_loops.de.yml +0 -26
- data/entry_types/scrolled/config/locales/new/inline_loops.en.yml +0 -26
- data/entry_types/scrolled/config/locales/new/portrait_inline_image.de.yml +0 -9
- data/entry_types/scrolled/config/locales/new/portrait_inline_image.en.yml +0 -9
- data/entry_types/scrolled/config/locales/new/section_width.de.yml +0 -10
- data/entry_types/scrolled/config/locales/new/section_width.en.yml +0 -10
- data/entry_types/scrolled/config/locales/new/typography_variants.de.yml +0 -7
- data/entry_types/scrolled/config/locales/new/typography_variants.en.yml +0 -7
- data/entry_types/scrolled/config/locales/new/video_embed_poster.de.yml +0 -8
- data/entry_types/scrolled/config/locales/new/video_embed_poster.en.yml +0 -8
- data/entry_types/scrolled/config/locales/new/waveform_styles.de.yml +0 -11
- data/entry_types/scrolled/config/locales/new/waveform_styles.en.yml +0 -12
- data/entry_types/scrolled/config/locales/new/widgets.de.yml +0 -6
- data/entry_types/scrolled/config/locales/new/widgets.en.yml +0 -6
- data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/browserconfig.xml +0 -9
- data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/mstile-150x150.png +0 -0
- data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/safari-pinned-tab.svg +0 -46
- data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/site.webmanifest +0 -19
- data/entry_types/scrolled/package/frontend/EditableInlineText.module-b9923660.js +0 -993
- data/entry_types/scrolled/package/frontend/usePhonePlatform-2857c22b.js +0 -34
- data/spec/factories/themings.rb +0 -7
@@ -1,4 +1,6 @@
|
|
1
|
-
import
|
1
|
+
import 'regenerator-runtime';
|
2
|
+
import { E as EventContextDataProvider, C as ConnectedSection, u as usePrevious, g as getEventObject, w as withInlineEditingDecorator, a as useCurrentSectionIndexState, b as usePostMessageListener, c as contentStyles, A as AtmoProvider, S as ScrollToSectionContext, d as api, B as Bar, _ as _asyncToGenerator, e as _regeneratorRuntime, f as useDarkBackground, T as Text, h as useTextTracks, i as useMediaMuted, j as useFocusOutlineVisible, k as useVideoQualitySetting, l as useIsomorphicLayoutEffect, m as withInlineEditingAlternative, n as frontendStyles, o as useFullscreenDimensions, p as information, q as camelize, s as styles$a, R as RootProviders, r as registerVendors, t as loadInlineEditingComponents } from './EditableInlineText.module-14c7b097.js';
|
3
|
+
export { a0 as Atmo, a1 as AtmoContext, A as AtmoProvider, Z as AudioPlayer, J as EditableText, Q as Image, U as MediaPlayer, K as PhonePlatformProvider, P as PlayerEventContextDataProvider, R as RootProviders, a5 as SectionThumbnail, a4 as StandaloneSectionThumbnail, T as Text, O as ThirdPartyOptIn, L as ThirdPartyOptOutInfo, Y as VideoPlayer, d as frontend, N as getAvailableTransitionNames, V as getInitialPlayerState, M as getTransitionNames, W as playerStateReducer, $ as processSources, r as registerConsentVendors, a2 as useAtmo, v as useAudioFocus, x as useContentElementConfigurationUpdate, y as useContentElementEditorCommandSubscription, z as useContentElementEditorState, D as useContentElementLifecycle, F as useCurrentChapter, f as useDarkBackground, G as useIsStaticPreview, i as useMediaMuted, a3 as useOnScreen, H as useOnUnmuteMedia, X as usePlayerState, I as usePortraitOrientation } from './EditableInlineText.module-14c7b097.js';
|
2
4
|
import 'core-js/modules/es.symbol';
|
3
5
|
import 'core-js/modules/es.symbol.description';
|
4
6
|
import 'core-js/modules/es.symbol.async-iterator';
|
@@ -71,3397 +73,47 @@ import 'core-js/modules/esnext.symbol.observable';
|
|
71
73
|
import 'core-js/modules/esnext.symbol.pattern-match';
|
72
74
|
import 'core-js/modules/web.dom-collections.iterator';
|
73
75
|
import 'regenerator-runtime/runtime.js';
|
74
|
-
import { browser, events,
|
75
|
-
import React, {
|
76
|
+
import { browser, events, consent, features } from 'pageflow/frontend';
|
77
|
+
import React, { useRef, useState, useEffect, useCallback, Suspense, useContext } from 'react';
|
76
78
|
import ReactDOM from 'react-dom';
|
77
|
-
import {
|
78
|
-
export { L as LocaleProvider,
|
79
|
-
import
|
79
|
+
import { c as _slicedToArray, m as useSectionsWithChapter, r as useEntryStructure, s as useWidget, t as getFileUrlTemplateHost, b as _defineProperty, a as _objectSpread2, _ as _objectWithoutProperties, u as useI18n, f as useTheme, j as _toConsumableArray, v as useAvailableQualities, w as setupI18n } from './PhonePlatformContext-f6093cc6.js';
|
80
|
+
export { L as LocaleProvider, w as setupI18n, l as useAdditionalSeedData, x as useChapters, y as useCredits, o as useEntryStateDispatch, i as useFile, z as useFileRights, u as useI18n, e as useLegalInfo, d as useLocale, A as useShareProviders, C as useShareUrl, f as useTheme } from './PhonePlatformContext-f6093cc6.js';
|
81
|
+
import 'i18n-js';
|
80
82
|
import 'use-context-selector';
|
81
83
|
import 'reselect';
|
82
84
|
import 'slugify';
|
83
85
|
import classNames from 'classnames';
|
84
|
-
import
|
85
|
-
|
86
|
-
import { _ as _createClass, a as _classCallCheck } from './createSuper-d0f30da3.js';
|
87
|
-
import BackboneEvents from 'backbone-events-standalone';
|
88
|
-
import { u as useBrowserFeature, B as BrowserFeaturesProvider } from './usePhonePlatform-2857c22b.js';
|
89
|
-
export { a as usePhonePlatform } from './usePhonePlatform-2857c22b.js';
|
86
|
+
import './createSuper-d0f30da3.js';
|
87
|
+
import 'backbone-events-standalone';
|
90
88
|
import Measure from 'react-measure';
|
91
89
|
import { DraggableCore } from 'react-draggable';
|
90
|
+
import { A as ArrowRightIcon } from './arrowRight-78a7cee4.js';
|
91
|
+
export { u as usePhonePlatform } from './arrowRight-78a7cee4.js';
|
92
92
|
import invert from 'invert-color';
|
93
93
|
import stripTags from 'striptags';
|
94
94
|
|
95
|
-
var
|
96
|
-
|
97
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
98
|
-
try {
|
99
|
-
var info = gen[key](arg);
|
100
|
-
var value = info.value;
|
101
|
-
} catch (error) {
|
102
|
-
reject(error);
|
103
|
-
return;
|
104
|
-
}
|
105
|
-
|
106
|
-
if (info.done) {
|
107
|
-
resolve(value);
|
108
|
-
} else {
|
109
|
-
Promise.resolve(value).then(_next, _throw);
|
110
|
-
}
|
111
|
-
}
|
112
|
-
|
113
|
-
function _asyncToGenerator(fn) {
|
114
|
-
return function () {
|
115
|
-
var self = this,
|
116
|
-
args = arguments;
|
117
|
-
return new Promise(function (resolve, reject) {
|
118
|
-
var gen = fn.apply(self, args);
|
119
|
-
|
120
|
-
function _next(value) {
|
121
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
122
|
-
}
|
123
|
-
|
124
|
-
function _throw(err) {
|
125
|
-
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
126
|
-
}
|
127
|
-
|
128
|
-
_next(undefined);
|
129
|
-
});
|
130
|
-
};
|
131
|
-
}
|
132
|
-
|
133
|
-
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
134
|
-
|
135
|
-
// Make sure Webpack loads chunks via asset host.
|
136
|
-
// Free variable assignment will be rewritten during Webpack compilation.
|
137
|
-
// See https://v4.webpack.js.org/guides/public-path/#on-the-fly
|
138
|
-
// PageflowScrolled::WebpackPublicPathHelper generates js snippet
|
139
|
-
// that defines the global. For Storybook, we set it to an empty default.
|
140
|
-
// eslint-disable-next-line no-undef
|
141
|
-
__webpack_public_path__ = commonjsGlobal.__webpack_public_path__ || '';
|
142
|
-
|
143
|
-
// iframes. Use polyfill instead.
|
144
|
-
|
145
|
-
if (browser.agent.matchesSafari() && window.parent !== window) {
|
146
|
-
delete window.IntersectionObserver;
|
147
|
-
}
|
148
|
-
|
149
|
-
require('intersection-observer'); // Make sure we're in a Browser-like environment before importing polyfills
|
150
|
-
// This prevents `fetch()` from being imported in a Node test environment
|
151
|
-
|
152
|
-
|
153
|
-
if (typeof window !== 'undefined') {
|
154
|
-
require('whatwg-fetch');
|
155
|
-
}
|
156
|
-
|
157
|
-
var styles = {"toggle":"Toggle-module_toggle__1fb_N"};
|
158
|
-
|
159
|
-
function _extends() {
|
160
|
-
_extends = Object.assign || function (target) {
|
161
|
-
for (var i = 1; i < arguments.length; i++) {
|
162
|
-
var source = arguments[i];
|
163
|
-
|
164
|
-
for (var key in source) {
|
165
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
166
|
-
target[key] = source[key];
|
167
|
-
}
|
168
|
-
}
|
169
|
-
}
|
170
|
-
|
171
|
-
return target;
|
172
|
-
};
|
173
|
-
|
174
|
-
return _extends.apply(this, arguments);
|
175
|
-
}
|
176
|
-
var ToggleOnIcon = (function (_ref) {
|
177
|
-
var _ref$styles = _ref.styles,
|
178
|
-
props = _objectWithoutProperties(_ref, ["styles"]);
|
179
|
-
|
180
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
181
|
-
xmlns: "http://www.w3.org/2000/svg",
|
182
|
-
viewBox: "60 170 90 157"
|
183
|
-
}, props), /*#__PURE__*/React.createElement("path", {
|
184
|
-
d: "M150 297a50 50 0 0050-50 50 50 0 00-50-50H50a50 50 0 00-50 50 50 50 0 0050 50z"
|
185
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
186
|
-
cx: "-150",
|
187
|
-
cy: "-247",
|
188
|
-
fill: "currentColor",
|
189
|
-
r: "40",
|
190
|
-
transform: "scale(-1)"
|
191
|
-
}), /*#__PURE__*/React.createElement("path", {
|
192
|
-
stroke: "currentColor",
|
193
|
-
strokeWidth: "6",
|
194
|
-
d: "M87 227l-37 37-16-18",
|
195
|
-
fill: "none"
|
196
|
-
}));
|
197
|
-
});
|
198
|
-
|
199
|
-
function _extends$1() {
|
200
|
-
_extends$1 = Object.assign || function (target) {
|
201
|
-
for (var i = 1; i < arguments.length; i++) {
|
202
|
-
var source = arguments[i];
|
203
|
-
|
204
|
-
for (var key in source) {
|
205
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
206
|
-
target[key] = source[key];
|
207
|
-
}
|
208
|
-
}
|
209
|
-
}
|
210
|
-
|
211
|
-
return target;
|
212
|
-
};
|
213
|
-
|
214
|
-
return _extends$1.apply(this, arguments);
|
215
|
-
}
|
216
|
-
var ToggleOffIcon = (function (_ref) {
|
217
|
-
var _ref$styles = _ref.styles,
|
218
|
-
props = _objectWithoutProperties(_ref, ["styles"]);
|
219
|
-
|
220
|
-
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
221
|
-
xmlns: "http://www.w3.org/2000/svg",
|
222
|
-
viewBox: "60 170 90 157"
|
223
|
-
}, props), /*#__PURE__*/React.createElement("path", {
|
224
|
-
d: "M50 197a50 50 0 00-50 50 50 50 0 0050 50h100a50 50 0 0050-50 50 50 0 00-50-50H50z"
|
225
|
-
}), /*#__PURE__*/React.createElement("circle", {
|
226
|
-
cx: "50",
|
227
|
-
cy: "247",
|
228
|
-
fill: "currentColor",
|
229
|
-
r: "40"
|
230
|
-
}), /*#__PURE__*/React.createElement("path", {
|
231
|
-
stroke: "currentColor",
|
232
|
-
strokeWidth: "6",
|
233
|
-
d: "M110.103 271.897l49.795-49.794m-.001 49.794l-49.794-49.795",
|
234
|
-
fill: "none"
|
235
|
-
}));
|
236
|
-
});
|
237
|
-
|
238
|
-
function Toggle(_ref) {
|
239
|
-
var id = _ref.id,
|
240
|
-
checked = _ref.checked,
|
241
|
-
onChange = _ref.onChange;
|
242
|
-
var Icon = checked ? ToggleOnIcon : ToggleOffIcon;
|
243
|
-
return /*#__PURE__*/React.createElement("button", {
|
244
|
-
id: id,
|
245
|
-
className: styles.toggle,
|
246
|
-
role: "checkbox",
|
247
|
-
"aria-checked": checked ? 'true' : 'false',
|
248
|
-
onClick: onChange
|
249
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
250
|
-
width: 50,
|
251
|
-
height: 35
|
252
|
-
}));
|
253
|
-
}
|
254
|
-
|
255
|
-
function _extends$2() {
|
256
|
-
_extends$2 = Object.assign || function (target) {
|
257
|
-
for (var i = 1; i < arguments.length; i++) {
|
258
|
-
var source = arguments[i];
|
259
|
-
|
260
|
-
for (var key in source) {
|
261
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
262
|
-
target[key] = source[key];
|
263
|
-
}
|
264
|
-
}
|
265
|
-
}
|
266
|
-
|
267
|
-
return target;
|
268
|
-
};
|
269
|
-
|
270
|
-
return _extends$2.apply(this, arguments);
|
271
|
-
}
|
272
|
-
var information = (function (_ref) {
|
273
|
-
var _ref$styles = _ref.styles,
|
274
|
-
props = _objectWithoutProperties(_ref, ["styles"]);
|
275
|
-
|
276
|
-
return /*#__PURE__*/React.createElement("svg", _extends$2({
|
277
|
-
xmlns: "http://www.w3.org/2000/svg",
|
278
|
-
viewBox: "-65 -65 449 449"
|
279
|
-
}, props), /*#__PURE__*/React.createElement("path", {
|
280
|
-
d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
|
281
|
-
}), /*#__PURE__*/React.createElement("path", {
|
282
|
-
d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
|
283
|
-
}));
|
284
|
-
});
|
285
|
-
|
286
|
-
var styles$1 = {"bar":"Bar-module_bar__kk5uX","text":"Bar-module_text__3EwGu","button":"Bar-module_button__3Dg6p","acceptAllButton":"Bar-module_acceptAllButton__Ij5lh Bar-module_button__3Dg6p","saveButton":"Bar-module_saveButton__km-gH Bar-module_button__3Dg6p","configureButton":"Bar-module_configureButton__2mQQz Bar-module_button__3Dg6p","vendorsBox":"Bar-module_vendorsBox__1Uyex","vendorList":"Bar-module_vendorList__11m8q","vendor":"Bar-module_vendor__2ogmn","expandVendor":"Bar-module_expandVendor__1gfA3","decisionButtons":"Bar-module_decisionButtons__2JzYP"};
|
287
|
-
|
288
|
-
function reducer(state, vendorName) {
|
289
|
-
return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, vendorName, !state[vendorName]));
|
290
|
-
}
|
291
|
-
|
292
|
-
function VendorsBox(_ref) {
|
293
|
-
var vendors = _ref.vendors,
|
294
|
-
save = _ref.save,
|
295
|
-
_ref$defaultExpanded = _ref.defaultExpanded,
|
296
|
-
defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded;
|
297
|
-
|
298
|
-
var _useI18n = useI18n(),
|
299
|
-
t = _useI18n.t;
|
300
|
-
|
301
|
-
var _useReducer = useReducer(reducer, vendors.reduce(function (result, vendor) {
|
302
|
-
return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, vendor.name, vendor.state === 'accepted'));
|
303
|
-
}, {})),
|
304
|
-
_useReducer2 = _slicedToArray(_useReducer, 2),
|
305
|
-
vendorStates = _useReducer2[0],
|
306
|
-
dispatch = _useReducer2[1];
|
307
|
-
|
308
|
-
return /*#__PURE__*/React.createElement("div", {
|
309
|
-
className: styles$1.vendorsBox
|
310
|
-
}, /*#__PURE__*/React.createElement("h3", null, t('pageflow_scrolled.public.consent_settings')), /*#__PURE__*/React.createElement("div", {
|
311
|
-
className: styles$1.vendorList
|
312
|
-
}, renderVendors({
|
313
|
-
vendors: vendors,
|
314
|
-
vendorStates: vendorStates,
|
315
|
-
t: t,
|
316
|
-
defaultExpanded: defaultExpanded,
|
317
|
-
onToggle: dispatch
|
318
|
-
})), /*#__PURE__*/React.createElement("button", {
|
319
|
-
className: styles$1.saveButton,
|
320
|
-
onClick: function onClick() {
|
321
|
-
return save(vendorStates);
|
322
|
-
}
|
323
|
-
}, t('pageflow_scrolled.public.consent_save')));
|
324
|
-
}
|
325
|
-
|
326
|
-
function renderVendors(_ref2) {
|
327
|
-
var vendors = _ref2.vendors,
|
328
|
-
vendorStates = _ref2.vendorStates,
|
329
|
-
t = _ref2.t,
|
330
|
-
defaultExpanded = _ref2.defaultExpanded,
|
331
|
-
onToggle = _ref2.onToggle;
|
332
|
-
|
333
|
-
if (!vendors.length) {
|
334
|
-
return /*#__PURE__*/React.createElement("div", {
|
335
|
-
className: "consent_vendor_list-blank"
|
336
|
-
}, t('pageflow_scrolled.public.consent_no_vendors'));
|
337
|
-
}
|
338
|
-
|
339
|
-
return vendors.map(function (vendor) {
|
340
|
-
return /*#__PURE__*/React.createElement(Vendor, {
|
341
|
-
key: vendor.name,
|
342
|
-
vendor: vendor,
|
343
|
-
state: vendorStates[vendor.name],
|
344
|
-
t: t,
|
345
|
-
defaultExpanded: defaultExpanded,
|
346
|
-
onToggle: onToggle
|
347
|
-
});
|
348
|
-
});
|
349
|
-
}
|
350
|
-
|
351
|
-
function Vendor(_ref3) {
|
352
|
-
var vendor = _ref3.vendor,
|
353
|
-
state = _ref3.state,
|
354
|
-
onToggle = _ref3.onToggle,
|
355
|
-
t = _ref3.t,
|
356
|
-
defaultExpanded = _ref3.defaultExpanded;
|
357
|
-
|
358
|
-
var _useState = useState(defaultExpanded),
|
359
|
-
_useState2 = _slicedToArray(_useState, 2),
|
360
|
-
expanded = _useState2[0],
|
361
|
-
setExpanded = _useState2[1];
|
362
|
-
|
363
|
-
var id = "consent-vendor-".concat(vendor.name);
|
364
|
-
return /*#__PURE__*/React.createElement("div", {
|
365
|
-
className: styles$1.vendor
|
366
|
-
}, /*#__PURE__*/React.createElement("label", {
|
367
|
-
htmlFor: id
|
368
|
-
}, vendor.displayName), /*#__PURE__*/React.createElement(Toggle, {
|
369
|
-
id: id,
|
370
|
-
checked: state,
|
371
|
-
onChange: function onChange() {
|
372
|
-
return onToggle(vendor.name);
|
373
|
-
}
|
374
|
-
}), /*#__PURE__*/React.createElement("button", {
|
375
|
-
className: styles$1.expandVendor,
|
376
|
-
title: t('pageflow_scrolled.public.consent_expand_vendor'),
|
377
|
-
onClick: function onClick() {
|
378
|
-
return setExpanded(!expanded);
|
379
|
-
}
|
380
|
-
}, /*#__PURE__*/React.createElement(information, {
|
381
|
-
width: 30,
|
382
|
-
height: 34
|
383
|
-
})), expanded && /*#__PURE__*/React.createElement("p", {
|
384
|
-
dangerouslySetInnerHTML: {
|
385
|
-
__html: vendor.description
|
386
|
-
}
|
387
|
-
}));
|
388
|
-
}
|
389
|
-
|
390
|
-
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
391
|
-
|
392
|
-
var ConsentContext = createContext();
|
393
|
-
function ConsentProvider(_ref) {
|
394
|
-
var consent = _ref.consent,
|
395
|
-
children = _ref.children;
|
396
|
-
return /*#__PURE__*/React.createElement(ConsentContext.Provider, {
|
397
|
-
value: consent
|
398
|
-
}, children);
|
399
|
-
}
|
400
|
-
function useConsentRequested() {
|
401
|
-
var consent = useContext(ConsentContext);
|
402
|
-
|
403
|
-
var _useState = useState({}),
|
404
|
-
_useState2 = _slicedToArray(_useState, 2),
|
405
|
-
request = _useState2[0],
|
406
|
-
setRequest = _useState2[1];
|
407
|
-
|
408
|
-
useIsomorphicLayoutEffect(function () {
|
409
|
-
var unmounted = false;
|
410
|
-
|
411
|
-
_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
|
412
|
-
var _yield$consent$reques, vendors, _acceptAll, _denyAll, _save;
|
413
|
-
|
414
|
-
return regenerator.wrap(function _callee$(_context) {
|
415
|
-
while (1) {
|
416
|
-
switch (_context.prev = _context.next) {
|
417
|
-
case 0:
|
418
|
-
_context.next = 2;
|
419
|
-
return consent.requested();
|
420
|
-
|
421
|
-
case 2:
|
422
|
-
_yield$consent$reques = _context.sent;
|
423
|
-
vendors = _yield$consent$reques.vendors;
|
424
|
-
_acceptAll = _yield$consent$reques.acceptAll;
|
425
|
-
_denyAll = _yield$consent$reques.denyAll;
|
426
|
-
_save = _yield$consent$reques.save;
|
427
|
-
|
428
|
-
if (!unmounted) {
|
429
|
-
setRequest({
|
430
|
-
vendors: vendors,
|
431
|
-
acceptAll: function acceptAll() {
|
432
|
-
_acceptAll();
|
433
|
-
|
434
|
-
setRequest({});
|
435
|
-
},
|
436
|
-
denyAll: function denyAll() {
|
437
|
-
_denyAll();
|
438
|
-
|
439
|
-
setRequest({});
|
440
|
-
},
|
441
|
-
save: function save(decisions) {
|
442
|
-
_save(decisions);
|
443
|
-
|
444
|
-
setRequest({});
|
445
|
-
}
|
446
|
-
});
|
447
|
-
}
|
448
|
-
|
449
|
-
case 8:
|
450
|
-
case "end":
|
451
|
-
return _context.stop();
|
452
|
-
}
|
453
|
-
}
|
454
|
-
}, _callee);
|
455
|
-
}))();
|
456
|
-
|
457
|
-
return function () {
|
458
|
-
return unmounted = true;
|
459
|
-
};
|
460
|
-
}, [consent]);
|
461
|
-
return request;
|
462
|
-
}
|
463
|
-
function useConsentGiven(vendorName) {
|
464
|
-
var consent = useContext(ConsentContext);
|
465
|
-
|
466
|
-
var _useContentElementEdi = useContentElementEditorState(),
|
467
|
-
isEditable = _useContentElementEdi.isEditable;
|
468
|
-
|
469
|
-
var isStaticPreview = useIsStaticPreview();
|
470
|
-
|
471
|
-
var _useState3 = useState(isEditable || isStaticPreview),
|
472
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
473
|
-
consentGiven = _useState4[0],
|
474
|
-
setConsentGiven = _useState4[1];
|
475
|
-
|
476
|
-
useIsomorphicLayoutEffect(function () {
|
477
|
-
var unmounted = false;
|
478
|
-
|
479
|
-
_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
|
480
|
-
var result;
|
481
|
-
return regenerator.wrap(function _callee2$(_context2) {
|
482
|
-
while (1) {
|
483
|
-
switch (_context2.prev = _context2.next) {
|
484
|
-
case 0:
|
485
|
-
if (!(!vendorName || isEditable || isStaticPreview)) {
|
486
|
-
_context2.next = 2;
|
487
|
-
break;
|
488
|
-
}
|
489
|
-
|
490
|
-
return _context2.abrupt("return");
|
491
|
-
|
492
|
-
case 2:
|
493
|
-
_context2.next = 4;
|
494
|
-
return consent.requireAccepted(vendorName);
|
495
|
-
|
496
|
-
case 4:
|
497
|
-
result = _context2.sent;
|
498
|
-
|
499
|
-
if (!unmounted && result === 'fulfilled') {
|
500
|
-
setConsentGiven(true);
|
501
|
-
}
|
502
|
-
|
503
|
-
case 6:
|
504
|
-
case "end":
|
505
|
-
return _context2.stop();
|
506
|
-
}
|
507
|
-
}
|
508
|
-
}, _callee2);
|
509
|
-
}))();
|
510
|
-
|
511
|
-
return function () {
|
512
|
-
return unmounted = true;
|
513
|
-
};
|
514
|
-
}, [consent, vendorName]);
|
515
|
-
var giveConsent = useCallback(function () {
|
516
|
-
return consent.accept(vendorName);
|
517
|
-
}, [consent, vendorName]);
|
518
|
-
return [consentGiven, giveConsent];
|
519
|
-
}
|
520
|
-
|
521
|
-
function _extends$3() {
|
522
|
-
_extends$3 = Object.assign || function (target) {
|
523
|
-
for (var i = 1; i < arguments.length; i++) {
|
524
|
-
var source = arguments[i];
|
525
|
-
|
526
|
-
for (var key in source) {
|
527
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
528
|
-
target[key] = source[key];
|
529
|
-
}
|
530
|
-
}
|
531
|
-
}
|
532
|
-
|
533
|
-
return target;
|
534
|
-
};
|
535
|
-
|
536
|
-
return _extends$3.apply(this, arguments);
|
537
|
-
}
|
538
|
-
var GearIcon = (function (_ref) {
|
539
|
-
var _ref$styles = _ref.styles,
|
540
|
-
props = _objectWithoutProperties(_ref, ["styles"]);
|
541
|
-
|
542
|
-
return /*#__PURE__*/React.createElement("svg", _extends$3({
|
543
|
-
xmlns: "http://www.w3.org/2000/svg",
|
544
|
-
viewBox: "-3 -3 30 30"
|
545
|
-
}, props), /*#__PURE__*/React.createElement("path", {
|
546
|
-
d: "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0014 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
|
547
|
-
}));
|
548
|
-
});
|
549
|
-
|
550
|
-
function Bar(_ref) {
|
551
|
-
var _ref$defaultExpanded = _ref.defaultExpanded,
|
552
|
-
defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded;
|
553
|
-
|
554
|
-
var _useConsentRequested = useConsentRequested(),
|
555
|
-
vendors = _useConsentRequested.vendors,
|
556
|
-
acceptAll = _useConsentRequested.acceptAll,
|
557
|
-
denyAll = _useConsentRequested.denyAll,
|
558
|
-
save = _useConsentRequested.save;
|
559
|
-
|
560
|
-
var _useState = useState(defaultExpanded),
|
561
|
-
_useState2 = _slicedToArray(_useState, 2),
|
562
|
-
expanded = _useState2[0],
|
563
|
-
setExpanded = _useState2[1];
|
564
|
-
|
565
|
-
var _useI18n = useI18n(),
|
566
|
-
t = _useI18n.t;
|
567
|
-
|
568
|
-
var locale = useLocale();
|
569
|
-
var privacyLinkUrl = useLegalInfo().privacy.url;
|
570
|
-
|
571
|
-
if (vendors) {
|
572
|
-
return /*#__PURE__*/React.createElement("div", {
|
573
|
-
className: styles$1.bar
|
574
|
-
}, renderText({
|
575
|
-
privacyLinkUrl: privacyLinkUrl,
|
576
|
-
t: t,
|
577
|
-
locale: locale,
|
578
|
-
vendors: vendors
|
579
|
-
}), !expanded && /*#__PURE__*/React.createElement("button", {
|
580
|
-
className: styles$1.configureButton,
|
581
|
-
onClick: function onClick() {
|
582
|
-
return setExpanded(true);
|
583
|
-
}
|
584
|
-
}, /*#__PURE__*/React.createElement(GearIcon, {
|
585
|
-
width: 15,
|
586
|
-
height: 15
|
587
|
-
}), t('pageflow_scrolled.public.consent_configure')), expanded && /*#__PURE__*/React.createElement(VendorsBox, {
|
588
|
-
vendors: vendors,
|
589
|
-
save: save,
|
590
|
-
t: t,
|
591
|
-
defaultExpanded: defaultExpanded
|
592
|
-
}), /*#__PURE__*/React.createElement("div", {
|
593
|
-
className: styles$1.decisionButtons
|
594
|
-
}, /*#__PURE__*/React.createElement("button", {
|
595
|
-
className: styles$1.button,
|
596
|
-
onClick: denyAll
|
597
|
-
}, t('pageflow_scrolled.public.consent_deny_all')), /*#__PURE__*/React.createElement("button", {
|
598
|
-
className: styles$1.acceptAllButton,
|
599
|
-
onClick: acceptAll
|
600
|
-
}, t('pageflow_scrolled.public.consent_accept_all'))));
|
601
|
-
}
|
602
|
-
|
603
|
-
return null;
|
604
|
-
}
|
605
|
-
|
606
|
-
function renderText(_ref2) {
|
607
|
-
var privacyLinkUrl = _ref2.privacyLinkUrl,
|
608
|
-
t = _ref2.t,
|
609
|
-
locale = _ref2.locale,
|
610
|
-
vendors = _ref2.vendors;
|
611
|
-
var vendorNames = vendors.map(function (vendor) {
|
612
|
-
return vendor.name;
|
613
|
-
}).join(',');
|
614
|
-
var text = t('pageflow_scrolled.public.consent_prompt_html', {
|
615
|
-
privacyLinkUrl: "".concat(privacyLinkUrl, "?lang=").concat(locale, "&vendors=").concat(vendorNames, "#consent")
|
616
|
-
});
|
617
|
-
return /*#__PURE__*/React.createElement("div", {
|
618
|
-
className: styles$1.text,
|
619
|
-
dangerouslySetInnerHTML: {
|
620
|
-
__html: text
|
621
|
-
}
|
622
|
-
});
|
623
|
-
}
|
624
|
-
|
625
|
-
var styles$2 = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
|
626
|
-
|
627
|
-
function _extends$4() {
|
628
|
-
_extends$4 = Object.assign || function (target) {
|
629
|
-
for (var i = 1; i < arguments.length; i++) {
|
630
|
-
var source = arguments[i];
|
631
|
-
|
632
|
-
for (var key in source) {
|
633
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
634
|
-
target[key] = source[key];
|
635
|
-
}
|
636
|
-
}
|
637
|
-
}
|
638
|
-
|
639
|
-
return target;
|
640
|
-
};
|
641
|
-
|
642
|
-
return _extends$4.apply(this, arguments);
|
643
|
-
}
|
644
|
-
var OptInIcon = (function (_ref) {
|
645
|
-
var _ref$styles = _ref.styles,
|
646
|
-
props = _objectWithoutProperties(_ref, ["styles"]);
|
647
|
-
|
648
|
-
return /*#__PURE__*/React.createElement("svg", _extends$4({
|
649
|
-
xmlns: "http://www.w3.org/2000/svg",
|
650
|
-
viewBox: "0 0 131 95"
|
651
|
-
}, props), /*#__PURE__*/React.createElement("path", {
|
652
|
-
d: "M32.01.01C46.678-.01 61.345.009 76.014.002 83.007.007 90-.009 96.99.011c.015 9.157.014 18.316 0 27.474-1.357.073-2.706.259-4.048.478-.01-7.986 0-15.975-.004-23.961-18.958-.003-37.917-.003-56.875 0l-.001 28.916c.01 2.37-.022 4.742.016 7.113 6.173-.025 12.348-.006 18.52-.011 5.804.01 11.609-.022 17.41.013-1 1.28-2.001 2.56-2.844 3.948-12.372.024-24.748-.011-37.12.019-.06-.365-.03-.735-.034-1.1V17.497c.007-5.83-.024-11.659.001-17.486zm17.617 8.004a5.999 5.999 0 014.359 1.49c1.273 1.116 2.048 2.8 2.013 4.498.042 1.806-.845 3.59-2.263 4.702-1.271 1.013-2.975 1.483-4.583 1.228a5.88 5.88 0 01-3.479-1.785c-1.44-1.459-2.013-3.695-1.475-5.67.6-2.448 2.905-4.346 5.428-4.463zm22.106 7.758c.181-.258.332-.54.547-.772 2.325 3.868 4.683 7.717 7.02 11.578.891 1.503 1.85 2.973 2.7 4.5a35.062 35.062 0 00-5.646 3.779c-.154.162-.387.14-.592.143-10.585-.014-21.174.014-31.762-.015.088-.228.308-.367.47-.542 3.79-3.745 7.58-7.484 11.365-11.232.098-.085.217-.265.366-.15 2.65 1.308 5.3 2.62 7.951 3.928 2.545-3.73 5.052-7.48 7.581-11.217zM0 21.042c.256-.058.517-.039.775-.039 9.175.007 18.349-.007 27.523.007l.064.076c.017 1.308-.012 2.618.015 3.927-5.416.038-10.834.001-16.252.018-.01 7.981-.013 15.962.002 23.944 11.917.013 23.834.013 35.752 0 .022-.674-.002-1.35.012-2.023 4.034.01 8.07.01 12.105 0 .002 11.349.01 22.698-.003 34.048-12.082-.025-24.163-.003-36.244-.01-7.911.007-15.823-.015-23.734.01-.02-19.988.01-39.975-.015-59.959zm3.435 4.043c-.904.236-1.577 1.152-1.482 2.086.079.997.994 1.837 1.999 1.82 1.367.002 2.736.015 4.105-.007 1.04-.036 1.928-.995 1.878-2.03-.003-.996-.867-1.896-1.868-1.925-1.294-.01-2.585.002-3.878-.005-.252.004-.51-.013-.754.061zm-.219 8.067c-.815.317-1.373 1.203-1.256 2.076.1.938.94 1.724 1.89 1.756 1.25.016 2.5-.002 3.752.008.439.008.9-.025 1.288-.246.73-.39 1.173-1.257 1.019-2.075-.136-.889-.95-1.62-1.852-1.645-1.328-.007-2.653.002-3.98-.004-.29-.005-.589.016-.86.13zm.219 7.923c-.762.2-1.372.884-1.471 1.665-.128.844.384 1.718 1.158 2.064.403.192.859.19 1.295.181 1.217-.008 2.434.011 3.651-.008 1.032-.047 1.92-.998 1.868-2.034-.007-.994-.87-1.891-1.87-1.922-1.293-.011-2.584.002-3.877-.006-.252-.001-.51-.008-.754.06zm-.01 8.003c-1.018.249-1.706 1.392-1.413 2.403.21.868 1.057 1.512 1.95 1.497 1.364-.003 2.728.01 4.09-.006 1.02-.034 1.906-.958 1.883-1.975.026-1.017-.858-1.958-1.88-1.981-1.252-.011-2.503.002-3.754-.003-.292-.004-.591-.018-.877.065zm48.107 0c-1.117.272-1.79 1.607-1.323 2.66a2.027 2.027 0 001.86 1.238c1.326.003 2.652.003 3.977 0 1.056.025 2.032-.916 1.996-1.978.045-1.022-.86-1.96-1.88-1.984-1.252-.008-2.503.003-3.754-.002-.293 0-.591-.017-.876.066zM12.13 53.016c-.015 7.981-.012 15.961-.001 23.943 11.917.003 23.836.003 35.753 0 .011-7.982.014-15.962-.001-23.943a14203.52 14203.52 0 00-35.75 0zm-8.694 4.05c-.797.208-1.422.943-1.482 1.764-.112 1.07.805 2.103 1.883 2.137 1.371.014 2.743.003 4.113.006 1.035.01 1.977-.89 1.986-1.928.054-1.033-.83-2.003-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289 0-.584-.014-.867.064zm48.108.003c-.951.235-1.623 1.244-1.456 2.208.123.947 1.016 1.71 1.972 1.696h3.997c1.031.013 1.994-.886 1.984-1.928.071-1.036-.829-2.011-1.866-2.037-1.254-.01-2.51.003-3.764-.005-.29 0-.586-.014-.867.066zM3.425 65.066c-.955.242-1.634 1.262-1.45 2.234.14.9.957 1.638 1.874 1.662 1.364.011 2.727 0 4.09.006 1.06.022 2.023-.925 1.997-1.984.027-1.02-.86-1.952-1.882-1.98-1.211-.012-2.426.002-3.637-.004-.332-.001-.669-.021-.992.066zm48.107.003c-.927.231-1.584 1.195-1.456 2.14.093.935.935 1.723 1.879 1.752 1.365.011 2.73 0 4.093.006 1.055.016 2.043-.917 1.994-1.984.045-1.023-.86-1.958-1.88-1.981-1.252-.011-2.502.002-3.753-.003-.294-.003-.592-.012-.877.07zM3.435 73.057c-.797.204-1.422.94-1.482 1.76-.111 1.07.802 2.112 1.883 2.138 1.371.013 2.743.002 4.113.005 1.035.017 1.977-.891 1.986-1.928.054-1.033-.835-1.997-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289.001-.584-.01-.867.067zm48.108 0c-.887.22-1.543 1.118-1.476 2.029.035.974.892 1.837 1.874 1.869 1.37.013 2.742.002 4.114.005 1.033.017 1.993-.883 1.985-1.925.071-1.039-.833-2.006-1.868-2.04-1.254-.01-2.509.003-3.763-.005-.289.001-.585-.01-.866.067zM96.83 31.045c6.813-.36 13.73 1.456 19.431 5.154a32.396 32.396 0 019.482 9.342 31.527 31.527 0 015.043 13.773c.625 5.36-.123 10.88-2.225 15.867-1.766 4.254-4.499 8.108-7.91 11.243a32.605 32.605 0 01-11.584 6.844 33.066 33.066 0 01-15.656 1.337 32.59 32.59 0 01-13.329-5.235c-5.2-3.514-9.323-8.551-11.692-14.307a31.532 31.532 0 01-2.327-14.038 31.433 31.433 0 013.839-13.243 32.232 32.232 0 018.329-9.799c5.259-4.156 11.865-6.62 18.6-6.938zm15.6 12.011c-8.543.979-17.086 1.933-25.627 2.92-.013 8.152.006 16.308-.008 24.462-2.325-.848-5.015-.792-7.24.318-1.33.665-2.493 1.763-2.997 3.169-.503 1.356-.289 2.934.528 4.128.752 1.154 1.947 1.978 3.235 2.465 1.48.569 3.115.675 4.68.452 1.888-.295 3.742-1.222 4.862-2.784.67-.936.965-2.102.894-3.237-.014-7.054.008-14.105-.01-21.158 1.976-.282 3.965-.458 5.946-.7 4.944-.56 9.885-1.124 14.827-1.682V67.42c-1.677-.563-3.506-.755-5.247-.362-1.764.38-3.483 1.32-4.479 2.84a4.618 4.618 0 00-.637 3.729c.32 1.196 1.12 2.243 2.139 2.959 1.533 1.101 3.474 1.576 5.355 1.489 2.036-.083 4.111-.843 5.498-2.353a5.078 5.078 0 001.329-3.83c-.007-6.755-.002-13.51-.005-20.265.058-2.962-.002-5.924-.002-8.884-1.018.053-2.03.212-3.04.313z"
|
653
|
-
}));
|
654
|
-
});
|
655
|
-
|
656
|
-
/**
|
657
|
-
* Render opt in prompt instead of children if third party consent
|
658
|
-
* cookie has been configured in theme options and user has not given
|
659
|
-
* consent for passed provider.
|
660
|
-
*
|
661
|
-
* @param {Object} props
|
662
|
-
* @param {string} props.providerName -
|
663
|
-
* Only render children if user has given consent for this provider.
|
664
|
-
* @param {React.ReactElement} props.children -
|
665
|
-
* Children to conditionally render.
|
666
|
-
*
|
667
|
-
* @name ThirdPartyOptIn
|
668
|
-
*/
|
669
|
-
|
670
|
-
function OptIn(_ref) {
|
671
|
-
var children = _ref.children,
|
672
|
-
providerName = _ref.providerName;
|
673
|
-
|
674
|
-
var _useI18n = useI18n(),
|
675
|
-
t = _useI18n.t;
|
676
|
-
|
677
|
-
var cookieMessage = t("pageflow_scrolled.public.third_party_consent.opt_in_prompt.".concat(providerName));
|
678
|
-
|
679
|
-
var _useState = useState(false),
|
680
|
-
_useState2 = _slicedToArray(_useState, 2),
|
681
|
-
consentedHere = _useState2[0],
|
682
|
-
setConsentedHere = _useState2[1];
|
683
|
-
|
684
|
-
var _useConsentGiven = useConsentGiven(providerName),
|
685
|
-
_useConsentGiven2 = _slicedToArray(_useConsentGiven, 2),
|
686
|
-
consentGiven = _useConsentGiven2[0],
|
687
|
-
giveConsent = _useConsentGiven2[1];
|
688
|
-
|
689
|
-
if (consentGiven || !providerName) {
|
690
|
-
return typeof children === 'function' ? children({
|
691
|
-
consentedHere: consentedHere
|
692
|
-
}) : children;
|
693
|
-
}
|
694
|
-
|
695
|
-
function accept() {
|
696
|
-
giveConsent(providerName);
|
697
|
-
setConsentedHere(true);
|
698
|
-
}
|
699
|
-
|
700
|
-
return /*#__PURE__*/React.createElement("div", {
|
701
|
-
className: styles$2.optIn
|
702
|
-
}, /*#__PURE__*/React.createElement("div", {
|
703
|
-
className: styles$2.optInIcon
|
704
|
-
}, /*#__PURE__*/React.createElement(OptInIcon, null)), /*#__PURE__*/React.createElement("div", {
|
705
|
-
className: styles$2.optInMessage
|
706
|
-
}, cookieMessage), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
707
|
-
className: styles$2.optInButton,
|
708
|
-
onClick: accept
|
709
|
-
}, t('pageflow_scrolled.public.third_party_consent.confirm'))));
|
710
|
-
}
|
711
|
-
|
712
|
-
var styles$3 = {"optOut":"OptOutInfo-module_optOut__2Q3d5","tooltip":"OptOutInfo-module_tooltip__2bpU0","icon":"OptOutInfo-module_icon__1kL6Q utils-module_unstyledButton__3rgne","full":"OptOutInfo-module_full__s_Ono"};
|
713
|
-
|
714
|
-
/**
|
715
|
-
* Display info tooltip with a link to opt out of third party
|
716
|
-
* embeds. Opt out url needs to be configured in theme options.
|
717
|
-
*
|
718
|
-
* @param {Object} props
|
719
|
-
* @param {string} props.providerName -
|
720
|
-
* Only display if user has given consent for this provider.
|
721
|
-
* @param {string} props.contentElementPosition -
|
722
|
-
* Position setting of parent content element. Used to correctly place
|
723
|
-
* tooltip when content element uses full width.
|
724
|
-
* @param {boolean} [hide] -
|
725
|
-
* Temporarily hide the tooltip, e.g. while the embed is playing
|
726
|
-
*
|
727
|
-
* @name ThirdPartyOptOutInfo
|
728
|
-
*/
|
729
|
-
|
730
|
-
function OptOutInfo(_ref) {
|
731
|
-
var _theme$options$thirdP;
|
732
|
-
|
733
|
-
var providerName = _ref.providerName,
|
734
|
-
hide = _ref.hide,
|
735
|
-
contentElementPosition = _ref.contentElementPosition;
|
736
|
-
|
737
|
-
var _useI18n = useI18n(),
|
738
|
-
t = _useI18n.t;
|
739
|
-
|
740
|
-
var theme = useTheme();
|
741
|
-
var optOutUrl = (_theme$options$thirdP = theme.options.thirdPartyConsent) === null || _theme$options$thirdP === void 0 ? void 0 : _theme$options$thirdP.optOutUrl;
|
742
|
-
|
743
|
-
var _useConsentGiven = useConsentGiven(providerName),
|
744
|
-
_useConsentGiven2 = _slicedToArray(_useConsentGiven, 1),
|
745
|
-
consentGiven = _useConsentGiven2[0];
|
746
|
-
|
747
|
-
if (!optOutUrl || !consentGiven) {
|
748
|
-
return null;
|
749
|
-
}
|
750
|
-
|
751
|
-
var linkText = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt_link');
|
752
|
-
var linkHtml = "<a href=\"".concat(optOutUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(linkText, "</a>");
|
753
|
-
var html = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt', {
|
754
|
-
link: linkHtml
|
755
|
-
});
|
756
|
-
return /*#__PURE__*/React.createElement("div", {
|
757
|
-
className: classNames(styles$3.optOut, styles$3[contentElementPosition]),
|
758
|
-
style: hide ? {
|
759
|
-
opacity: 0,
|
760
|
-
visibility: 'hidden'
|
761
|
-
} : undefined
|
762
|
-
}, /*#__PURE__*/React.createElement("button", {
|
763
|
-
className: styles$3.icon
|
764
|
-
}, /*#__PURE__*/React.createElement(information, null)), /*#__PURE__*/React.createElement("div", {
|
765
|
-
className: styles$3.tooltip
|
766
|
-
}, /*#__PURE__*/React.createElement("div", {
|
767
|
-
dangerouslySetInnerHTML: {
|
768
|
-
__html: html
|
769
|
-
}
|
770
|
-
})));
|
771
|
-
}
|
772
|
-
|
773
|
-
function registerVendors(_ref) {
|
774
|
-
var contentElementTypes = _ref.contentElementTypes,
|
775
|
-
seed = _ref.seed,
|
776
|
-
consent = _ref.consent;
|
777
|
-
var options = seed.config.theme.options.thirdPartyConsent;
|
778
|
-
var locale = seed.collections.entries[0].locale;
|
779
|
-
contentElementTypes.consentVendors({
|
780
|
-
contentElements: seed.collections.contentElements,
|
781
|
-
t: function t(key, options) {
|
782
|
-
return I18n.t(key, _objectSpread2(_objectSpread2({}, options), {}, {
|
783
|
-
locale: locale
|
784
|
-
}));
|
785
|
-
}
|
786
|
-
}).forEach(function (vendor) {
|
787
|
-
var _options$cookieProvid;
|
788
|
-
|
789
|
-
consent.registerVendor(vendor.name, {
|
790
|
-
displayName: vendor.displayName,
|
791
|
-
description: vendor.description,
|
792
|
-
paradigm: (options === null || options === void 0 ? void 0 : options.cookieName) ? vendor.paradigm || 'opt-in' : 'skip',
|
793
|
-
cookieName: options === null || options === void 0 ? void 0 : options.cookieName,
|
794
|
-
cookieKey: options === null || options === void 0 ? void 0 : (_options$cookieProvid = options.cookieProviderNameMapping) === null || _options$cookieProvid === void 0 ? void 0 : _options$cookieProvid[vendor.name],
|
795
|
-
cookieDomain: options === null || options === void 0 ? void 0 : options.cookieDomain
|
796
|
-
});
|
797
|
-
});
|
798
|
-
consent.closeVendorRegistration();
|
799
|
-
}
|
800
|
-
|
801
|
-
var SectionLifecycleContext = createContext();
|
802
|
-
var SectionLifecycleProvider = createScrollPositionLifecycleProvider(SectionLifecycleContext);
|
803
|
-
var useSectionLifecycle = createScrollPositionLifecycleHook(SectionLifecycleContext);
|
804
|
-
|
805
|
-
var Atmo = /*#__PURE__*/function () {
|
806
|
-
function Atmo(_ref) {
|
807
|
-
var _this = this;
|
808
|
-
|
809
|
-
var atmoSourceId = _ref.atmoSourceId,
|
810
|
-
multiPlayer = _ref.multiPlayer,
|
811
|
-
backgroundMedia = _ref.backgroundMedia;
|
812
|
-
|
813
|
-
_classCallCheck(this, Atmo);
|
814
|
-
|
815
|
-
this.multiPlayer = multiPlayer;
|
816
|
-
this.atmoSourceId = atmoSourceId;
|
817
|
-
this.backgroundMedia = backgroundMedia;
|
818
|
-
this.backgroundMedia.on('change:muted', function () {
|
819
|
-
_this.update();
|
820
|
-
});
|
821
|
-
documentHiddenState(function (hiddenState) {
|
822
|
-
if (hiddenState === 'hidden') {
|
823
|
-
_this.multiPlayer.fadeOutIfPlaying();
|
824
|
-
} else {
|
825
|
-
_this.update();
|
826
|
-
}
|
827
|
-
});
|
828
|
-
this.listenTo(this.multiPlayer, 'playfailed', function () {
|
829
|
-
backgroundMedia.mute(true);
|
830
|
-
});
|
831
|
-
}
|
832
|
-
|
833
|
-
_createClass(Atmo, [{
|
834
|
-
key: "disable",
|
835
|
-
value: function disable() {
|
836
|
-
this.disabled = true;
|
837
|
-
this.multiPlayer.fadeOutAndPause();
|
838
|
-
events.trigger('atmo:disabled');
|
839
|
-
}
|
840
|
-
}, {
|
841
|
-
key: "enable",
|
842
|
-
value: function enable() {
|
843
|
-
this.disabled = false;
|
844
|
-
this.update();
|
845
|
-
events.trigger('atmo:enabled');
|
846
|
-
}
|
847
|
-
}, {
|
848
|
-
key: "pause",
|
849
|
-
value: function pause() {
|
850
|
-
if (browser.has('volume control support')) {
|
851
|
-
return this.multiPlayer.fadeOutAndPause();
|
852
|
-
} else {
|
853
|
-
this.multiPlayer.pause();
|
854
|
-
}
|
855
|
-
}
|
856
|
-
}, {
|
857
|
-
key: "turnDown",
|
858
|
-
value: function turnDown() {
|
859
|
-
if (browser.has('volume control support')) {
|
860
|
-
return this.multiPlayer.changeVolumeFactor(0.2);
|
861
|
-
} else {
|
862
|
-
this.multiPlayer.pause();
|
863
|
-
}
|
864
|
-
}
|
865
|
-
}, {
|
866
|
-
key: "resume",
|
867
|
-
value: function resume() {
|
868
|
-
if (this.multiPlayer.paused()) {
|
869
|
-
if (this.disabled || this.backgroundMedia.muted) {
|
870
|
-
return Promise.resolve();
|
871
|
-
} else {
|
872
|
-
return this.multiPlayer.resumeAndFadeIn();
|
873
|
-
}
|
874
|
-
} else {
|
875
|
-
return this.multiPlayer.changeVolumeFactor(1);
|
876
|
-
}
|
877
|
-
}
|
878
|
-
}, {
|
879
|
-
key: "update",
|
880
|
-
value: function update() {
|
881
|
-
if (!this.disabled) {
|
882
|
-
if (this.backgroundMedia.muted) {
|
883
|
-
this.multiPlayer.fadeOutAndPause();
|
884
|
-
} else {
|
885
|
-
this.multiPlayer.fadeTo(this.atmoSourceId);
|
886
|
-
}
|
887
|
-
}
|
888
|
-
}
|
889
|
-
}, {
|
890
|
-
key: "createMediaPlayerHooks",
|
891
|
-
value: function createMediaPlayerHooks(atmoDuringPlayback) {
|
892
|
-
var atmo = this;
|
893
|
-
return {
|
894
|
-
before: function before() {
|
895
|
-
if (atmoDuringPlayback === 'mute') {
|
896
|
-
atmo.pause();
|
897
|
-
} else if (atmoDuringPlayback === 'turnDown') {
|
898
|
-
atmo.turnDown();
|
899
|
-
}
|
900
|
-
},
|
901
|
-
after: function after() {
|
902
|
-
atmo.resume();
|
903
|
-
}
|
904
|
-
};
|
905
|
-
}
|
906
|
-
}]);
|
907
|
-
|
908
|
-
return Atmo;
|
909
|
-
}();
|
910
|
-
Object.assign(Atmo.prototype, BackboneEvents);
|
911
|
-
|
912
|
-
function getContextValue(updateAtmo, createMediaPlayerHooks) {
|
913
|
-
var empty = function empty() {};
|
914
|
-
|
915
|
-
return {
|
916
|
-
updateAtmo: updateAtmo || empty,
|
917
|
-
createMediaPlayerHooks: createMediaPlayerHooks || empty
|
918
|
-
};
|
919
|
-
}
|
920
|
-
|
921
|
-
var AtmoContext = createContext(getContextValue());
|
922
|
-
function AtmoProvider(_ref) {
|
923
|
-
var children = _ref.children;
|
924
|
-
var atmoConfig = useRef({});
|
925
|
-
useEffect(function () {
|
926
|
-
var currentAtmo = atmoConfig.current;
|
927
|
-
currentAtmo.pool = PlayerSourceIDMap(media, {
|
928
|
-
playerOptions: {
|
929
|
-
tagName: 'audio',
|
930
|
-
loop: true
|
931
|
-
}
|
932
|
-
});
|
933
|
-
currentAtmo.multiPlayer = new MultiPlayer(currentAtmo.pool, {
|
934
|
-
fadeDuration: 500,
|
935
|
-
crossFade: true,
|
936
|
-
playFromBeginning: false,
|
937
|
-
rewindOnChange: true
|
938
|
-
});
|
939
|
-
currentAtmo.atmo = new Atmo({
|
940
|
-
multiPlayer: currentAtmo.multiPlayer,
|
941
|
-
backgroundMedia: media
|
942
|
-
});
|
943
|
-
}, []);
|
944
|
-
|
945
|
-
var updateAtmo = function updateAtmo(_ref2) {
|
946
|
-
var audioFilePermaId = _ref2.audioFilePermaId,
|
947
|
-
sources = _ref2.sources;
|
948
|
-
var currentAtmo = atmoConfig.current;
|
949
|
-
|
950
|
-
if (currentAtmo.atmo) {
|
951
|
-
currentAtmo.pool.mapSources(audioFilePermaId, sources);
|
952
|
-
currentAtmo.atmo.atmoSourceId = audioFilePermaId;
|
953
|
-
currentAtmo.atmo.update();
|
954
|
-
}
|
955
|
-
};
|
956
|
-
|
957
|
-
var createMediaPlayerHooks = function createMediaPlayerHooks(options) {
|
958
|
-
if (atmoConfig.current.atmo) {
|
959
|
-
return atmoConfig.current.atmo.createMediaPlayerHooks(options);
|
960
|
-
}
|
961
|
-
};
|
962
|
-
|
963
|
-
var contextValue = useMemo(function () {
|
964
|
-
return getContextValue(updateAtmo, createMediaPlayerHooks);
|
965
|
-
}, []);
|
966
|
-
return /*#__PURE__*/React.createElement(AtmoContext.Provider, {
|
967
|
-
value: contextValue
|
968
|
-
}, children);
|
969
|
-
}
|
970
|
-
function useAtmo() {
|
971
|
-
return useContext(AtmoContext);
|
972
|
-
}
|
973
|
-
|
974
|
-
function PlayerContainer(_ref) {
|
975
|
-
var filePermaId = _ref.filePermaId,
|
976
|
-
sources = _ref.sources,
|
977
|
-
textTrackSources = _ref.textTrackSources,
|
978
|
-
type = _ref.type,
|
979
|
-
playsInline = _ref.playsInline,
|
980
|
-
loop = _ref.loop,
|
981
|
-
controls = _ref.controls,
|
982
|
-
altText = _ref.altText,
|
983
|
-
mediaEventsContextData = _ref.mediaEventsContextData,
|
984
|
-
atmoDuringPlayback = _ref.atmoDuringPlayback,
|
985
|
-
onSetup = _ref.onSetup,
|
986
|
-
onDispose = _ref.onDispose;
|
987
|
-
var playerWrapperRef = useRef(null);
|
988
|
-
var atmo = useAtmo();
|
989
|
-
useEffect(function () {
|
990
|
-
var playerWrapper = playerWrapperRef.current;
|
991
|
-
|
992
|
-
if (sources) {
|
993
|
-
var player = media.getPlayer(sources, {
|
994
|
-
textTrackSources: textTrackSources,
|
995
|
-
filePermaId: filePermaId,
|
996
|
-
tagName: type,
|
997
|
-
playsInline: playsInline,
|
998
|
-
loop: loop,
|
999
|
-
controls: controls,
|
1000
|
-
hooks: atmoDuringPlayback ? atmo.createMediaPlayerHooks(atmoDuringPlayback) : {},
|
1001
|
-
//create hooks only for inline media players
|
1002
|
-
mediaEventsContextData: mediaEventsContextData,
|
1003
|
-
altText: altText,
|
1004
|
-
onRelease: function onRelease() {
|
1005
|
-
playerWrapper.removeChild(player.el());
|
1006
|
-
player = null;
|
1007
|
-
|
1008
|
-
if (onDispose) {
|
1009
|
-
onDispose();
|
1010
|
-
}
|
1011
|
-
}
|
1012
|
-
});
|
1013
|
-
playerWrapper.appendChild(player.el());
|
1014
|
-
|
1015
|
-
if (onSetup) {
|
1016
|
-
onSetup(player);
|
1017
|
-
}
|
1018
|
-
|
1019
|
-
return function () {
|
1020
|
-
// onRelease might already have been called by the pool when
|
1021
|
-
// it needed to re-use a player.
|
1022
|
-
if (player) {
|
1023
|
-
media.releasePlayer(player);
|
1024
|
-
}
|
1025
|
-
};
|
1026
|
-
}
|
1027
|
-
});
|
1028
|
-
return /*#__PURE__*/React.createElement("div", {
|
1029
|
-
ref: playerWrapperRef
|
1030
|
-
});
|
1031
|
-
}
|
1032
|
-
|
1033
|
-
PlayerContainer.defaultProps = {
|
1034
|
-
textTrackSources: []
|
1035
|
-
}; // This function assumes that that the parameters are arrays of
|
1036
|
-
// objects containing only skalar values. It is not a full deep
|
1037
|
-
// equality check, but suffices for the use case.
|
1038
|
-
|
1039
|
-
function deepEqual(a, b) {
|
1040
|
-
if (a.length !== b.length) {
|
1041
|
-
return false;
|
1042
|
-
}
|
1043
|
-
|
1044
|
-
for (var i = 0; i < a.length; i++) {
|
1045
|
-
var aItem = a[i];
|
1046
|
-
var bItem = b[i];
|
1047
|
-
|
1048
|
-
if (Object.keys(aItem).length !== Object.keys(bItem).length) {
|
1049
|
-
return false;
|
1050
|
-
}
|
1051
|
-
|
1052
|
-
for (var key in aItem) {
|
1053
|
-
if (aItem[key] !== bItem[key]) {
|
1054
|
-
return false;
|
1055
|
-
}
|
1056
|
-
}
|
1057
|
-
}
|
1058
|
-
|
1059
|
-
return true;
|
1060
|
-
}
|
1061
|
-
|
1062
|
-
function areEqual(prevProps, nextProps) {
|
1063
|
-
return prevProps.type === nextProps.type && prevProps.playsInline === nextProps.playsInline && prevProps.loop === nextProps.loop && prevProps.controls === nextProps.controls && prevProps.altText === nextProps.altText && prevProps.atmoDuringPlayback === nextProps.atmoDuringPlayback && deepEqual(prevProps.sources, nextProps.sources) && deepEqual(prevProps.textTrackSources, nextProps.textTrackSources);
|
1064
|
-
}
|
1065
|
-
|
1066
|
-
var PlayerContainer$1 = React.memo(PlayerContainer, areEqual);
|
1067
|
-
|
1068
|
-
var ScrollToSectionContext = React.createContext(function () {});
|
1069
|
-
|
1070
|
-
function watchPlayer (player, actions) {
|
1071
|
-
player.on('loadedmetadata', function () {
|
1072
|
-
return actions.metaDataLoaded(player.currentTime(), player.duration());
|
1073
|
-
});
|
1074
|
-
player.on('loadeddata', function () {
|
1075
|
-
return actions.dataLoaded();
|
1076
|
-
});
|
1077
|
-
player.on('progress', function () {
|
1078
|
-
return actions.progress(player.bufferedEnd());
|
1079
|
-
});
|
1080
|
-
player.on('play', actions.playing);
|
1081
|
-
player.on('playfailed', actions.playFailed);
|
1082
|
-
player.on('pause', actions.paused);
|
1083
|
-
player.on('waiting', actions.waiting);
|
1084
|
-
player.on('seeking', actions.seeking);
|
1085
|
-
player.on('seeked', actions.seeked);
|
1086
|
-
player.on('bufferunderrun', actions.bufferUnderrun);
|
1087
|
-
player.on('bufferunderruncontinue', actions.bufferUnderrunContinue);
|
1088
|
-
player.on('timeupdate', function () {
|
1089
|
-
return actions.timeUpdate(player.currentTime(), player.duration());
|
1090
|
-
});
|
1091
|
-
player.on('ended', actions.ended);
|
1092
|
-
player.one('loadedmetadata', function () {
|
1093
|
-
return actions.saveMediaElementId(player.getMediaElement().id);
|
1094
|
-
});
|
1095
|
-
}
|
1096
|
-
function unwatchPlayer(player, actions) {
|
1097
|
-
player.off('loadedmetadata');
|
1098
|
-
player.off('loadeddata');
|
1099
|
-
player.off('progress');
|
1100
|
-
player.off('play', actions.playing);
|
1101
|
-
player.off('playfailed', actions.playFailed);
|
1102
|
-
player.off('pause', actions.paused);
|
1103
|
-
player.off('waiting', actions.waiting);
|
1104
|
-
player.off('seeking', actions.seeking);
|
1105
|
-
player.off('seeked', actions.seeked);
|
1106
|
-
player.off('bufferunderrun', actions.bufferUnderrun);
|
1107
|
-
player.off('bufferunderruncontinue', actions.bufferUnderrunContinue);
|
1108
|
-
player.off('timeupdate');
|
1109
|
-
player.off('canplay');
|
1110
|
-
player.off('ended', actions.ended);
|
1111
|
-
actions.discardMediaElementId();
|
1112
|
-
}
|
1113
|
-
|
1114
|
-
function applyPlayerState(player, playerState, playerActions) {
|
1115
|
-
player.one('loadedmetadata', function () {
|
1116
|
-
return player.currentTime(playerState.currentTime);
|
1117
|
-
});
|
1118
|
-
player.changeVolumeFactor(playerState.volumeFactor, 0);
|
1119
|
-
|
1120
|
-
if (playerState.shouldPrebuffer) {
|
1121
|
-
player.prebuffer().then(playerActions.prebuffered);
|
1122
|
-
}
|
1123
|
-
|
1124
|
-
if (playerState.shouldPlay) {
|
1125
|
-
player.play();
|
1126
|
-
}
|
1127
|
-
|
1128
|
-
player.on('canplay', function () {
|
1129
|
-
if (playerState.shouldPlay && player.paused()) {
|
1130
|
-
player.play();
|
1131
|
-
}
|
1132
|
-
});
|
1133
|
-
}
|
1134
|
-
|
1135
|
-
function updatePlayerState(player, prevPlayerState, playerState, playerActions) {
|
1136
|
-
if (!prevPlayerState.shouldPrebuffer && playerState.shouldPrebuffer) {
|
1137
|
-
player.prebuffer().then(function () {
|
1138
|
-
return setTimeout(playerActions.prebuffered, 0);
|
1139
|
-
});
|
1140
|
-
}
|
1141
|
-
|
1142
|
-
if (!prevPlayerState.shouldPlay && playerState.shouldPlay) {
|
1143
|
-
if (playerState.fadeDuration) {
|
1144
|
-
player.playAndFadeIn(playerState.fadeDuration);
|
1145
|
-
} else {
|
1146
|
-
player.playOrPlayOnLoad();
|
1147
|
-
}
|
1148
|
-
} else if (prevPlayerState.shouldPlay && !playerState.shouldPlay && playerState.isPlaying) {
|
1149
|
-
if (playerState.fadeDuration && !player.muted()) {
|
1150
|
-
player.fadeOutAndPause(playerState.fadeDuration);
|
1151
|
-
} else {
|
1152
|
-
player.pause();
|
1153
|
-
}
|
1154
|
-
}
|
1155
|
-
|
1156
|
-
if (playerState.shouldSeekTo !== undefined && prevPlayerState.shouldSeekTo !== playerState.shouldSeekTo) {
|
1157
|
-
player.currentTime(playerState.shouldSeekTo);
|
1158
|
-
}
|
1159
|
-
|
1160
|
-
if (prevPlayerState.volumeFactor !== playerState.volumeFactor) {
|
1161
|
-
player.changeVolumeFactor(playerState.volumeFactor, playerState.volumeFactorFadeDuration);
|
1162
|
-
}
|
1163
|
-
}
|
1164
|
-
|
1165
|
-
function updateObjectPosition(player, x, y) {
|
1166
|
-
player.getMediaElement().style.objectPosition = typeof x !== 'undefined' && typeof y !== 'undefined' ? "".concat(x, "% ").concat(y, "%") : '';
|
1167
|
-
}
|
1168
|
-
|
1169
|
-
function getEventObject(section) {
|
1170
|
-
var page = {
|
1171
|
-
configuration: {
|
1172
|
-
title: section ? section.chapter.title + ', Section ' + section.sectionIndex : null
|
1173
|
-
},
|
1174
|
-
index: section ? section.sectionIndex : -1
|
1175
|
-
};
|
1176
|
-
return page;
|
1177
|
-
}
|
1178
|
-
var EventContext = createContext(getEventObject());
|
1179
|
-
function EventContextDataProvider(_ref) {
|
1180
|
-
var section = _ref.section,
|
1181
|
-
children = _ref.children;
|
1182
|
-
var contextValue = useMemo(function () {
|
1183
|
-
return {
|
1184
|
-
page: getEventObject(section)
|
1185
|
-
};
|
1186
|
-
}, [section]);
|
1187
|
-
return /*#__PURE__*/React.createElement(EventContext.Provider, {
|
1188
|
-
value: contextValue
|
1189
|
-
}, children);
|
1190
|
-
}
|
1191
|
-
function useEventContextData() {
|
1192
|
-
return useContext(EventContext);
|
1193
|
-
}
|
1194
|
-
|
1195
|
-
function updateTextTracksMode(player, activeTextTrackFileId) {
|
1196
|
-
[].slice.call(player.textTracks()).forEach(function (textTrack) {
|
1197
|
-
if (textTrack.id === "text_track_file_".concat(activeTextTrackFileId)) {
|
1198
|
-
textTrack.mode = 'showing';
|
1199
|
-
} else {
|
1200
|
-
textTrack.mode = 'disabled';
|
1201
|
-
}
|
1202
|
-
});
|
1203
|
-
}
|
1204
|
-
function getTextTrackSources(textTrackFiles, textTracksDisabled) {
|
1205
|
-
if (textTracksDisabled) {
|
1206
|
-
return [];
|
1207
|
-
}
|
1208
|
-
|
1209
|
-
return textTrackFiles.filter(function (textTrackFile) {
|
1210
|
-
return textTrackFile.isReady;
|
1211
|
-
}).map(function (textTrackFile) {
|
1212
|
-
return {
|
1213
|
-
id: "text_track_file_".concat(textTrackFile.id),
|
1214
|
-
kind: textTrackFile.configuration.kind,
|
1215
|
-
label: textTrackFile.displayLabel,
|
1216
|
-
srclang: textTrackFile.configuration.srclang,
|
1217
|
-
src: textTrackFile.urls.vtt
|
1218
|
-
};
|
1219
|
-
});
|
1220
|
-
}
|
1221
|
-
|
1222
|
-
var textTrackStyles = {"inset":"textTracks-module_inset__K7DIL"};
|
1223
|
-
|
1224
|
-
var styles$4 = {"wrapper":"MediaPlayer-module_wrapper__1cSGR","cover":"MediaPlayer-module_cover__2wGez"};
|
1225
|
-
|
1226
|
-
var PLAY = 'MEDIA_PLAY';
|
1227
|
-
var PLAYING = 'MEDIA_PLAYING';
|
1228
|
-
var PLAY_FAILED = 'MEDIA_PLAY_FAILED';
|
1229
|
-
var PAUSE = 'MEDIA_PAUSE';
|
1230
|
-
var PAUSED = 'MEDIA_PAUSED';
|
1231
|
-
var PLAY_AND_FADE_IN = 'MEDIA_PLAY_AND_FADE_IN';
|
1232
|
-
var FADE_OUT_AND_PAUSE = 'MEDIA_FADE_OUT_AND_PAUSE';
|
1233
|
-
var CHANGE_VOLUME_FACTOR = 'CHANGE_VOLUME_FACTOR';
|
1234
|
-
var META_DATA_LOADED = 'MEDIA_META_DATA_LOADED';
|
1235
|
-
var DATA_LOADED = 'MEDIA_DATA_LOADED';
|
1236
|
-
var PROGRESS = 'MEDIA_PROGRESS';
|
1237
|
-
var TIME_UPDATE = 'MEDIA_TIME_UPDATE';
|
1238
|
-
var ENDED = 'MEDIA_ENDED';
|
1239
|
-
var SCRUB_TO = 'MEDIA_SCRUB_TO';
|
1240
|
-
var SEEK_TO = 'MEDIA_SEEK_TO';
|
1241
|
-
var SEEKING = 'MEDIA_SEEKING';
|
1242
|
-
var SEEKED = 'MEDIA_SEEKED';
|
1243
|
-
var WAITING = 'MEDIA_WAITING';
|
1244
|
-
var PREBUFFER = 'MEDIA_PREBUFFER';
|
1245
|
-
var PREBUFFERED = 'MEDIA_PREBUFFERED';
|
1246
|
-
var BUFFER_UNDERRUN = 'MEDIA_BUFFER_UNDERRUN';
|
1247
|
-
var BUFFER_UNDERRUN_CONTINUE = 'MEDIA_BUFFER_UNDERRUN_CONTINUE';
|
1248
|
-
var MOUSE_ENTERED = 'MEDIA_MOUSE_ENTERED';
|
1249
|
-
var MOUSE_LEFT = 'MEDIA_MOUSE_LEFT';
|
1250
|
-
var MOUSE_ENTERED_CONTROLS = 'MEDIA_MOUSE_ENTERED_CONTROLS';
|
1251
|
-
var MOUSE_LEFT_CONTROLS = 'MEDIA_MOUSE_LEFT_CONTROLS';
|
1252
|
-
var FOCUS_ENTERED_CONTROLS = 'MEDIA_FOCUS_ENTERED_CONTROLS';
|
1253
|
-
var FOCUS_LEFT_CONTROLS = 'MEDIA_FOCUS_LEFT_CONTROLS';
|
1254
|
-
var USER_INTERACTION = 'MEDIA_USER_INTERACTION';
|
1255
|
-
var USER_IDLE = 'MEDIA_USER_IDLE';
|
1256
|
-
var SAVE_MEDIA_ELEMENT_ID = 'MEDIA_SAVE_MEDIA_ELEMENT_ID';
|
1257
|
-
var DISCARD_MEDIA_ELEMENT_ID = 'MEDIA_DISCARD_MEDIA_ELEMENT_ID';
|
1258
|
-
function createActions(dispatch) {
|
1259
|
-
return {
|
1260
|
-
playBlessed: function playBlessed() {
|
1261
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
1262
|
-
via = _ref.via;
|
1263
|
-
|
1264
|
-
media.mute(false);
|
1265
|
-
dispatch({
|
1266
|
-
type: PLAY,
|
1267
|
-
payload: {
|
1268
|
-
via: via
|
1269
|
-
}
|
1270
|
-
});
|
1271
|
-
},
|
1272
|
-
play: function play() {
|
1273
|
-
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
1274
|
-
via = _ref2.via;
|
1275
|
-
|
1276
|
-
dispatch({
|
1277
|
-
type: PLAY,
|
1278
|
-
payload: {
|
1279
|
-
via: via
|
1280
|
-
}
|
1281
|
-
});
|
1282
|
-
},
|
1283
|
-
playing: function playing() {
|
1284
|
-
dispatch({
|
1285
|
-
type: PLAYING
|
1286
|
-
});
|
1287
|
-
},
|
1288
|
-
playFailed: function playFailed() {
|
1289
|
-
dispatch({
|
1290
|
-
type: PLAY_FAILED
|
1291
|
-
});
|
1292
|
-
},
|
1293
|
-
pause: function pause() {
|
1294
|
-
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
1295
|
-
via = _ref3.via;
|
1296
|
-
|
1297
|
-
dispatch({
|
1298
|
-
type: PAUSE,
|
1299
|
-
payload: {
|
1300
|
-
via: via
|
1301
|
-
}
|
1302
|
-
});
|
1303
|
-
},
|
1304
|
-
paused: function paused() {
|
1305
|
-
dispatch({
|
1306
|
-
type: PAUSED
|
1307
|
-
});
|
1308
|
-
},
|
1309
|
-
playAndFadeIn: function playAndFadeIn(fadeDuration) {
|
1310
|
-
var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
1311
|
-
via = _ref4.via;
|
1312
|
-
|
1313
|
-
dispatch({
|
1314
|
-
type: PLAY_AND_FADE_IN,
|
1315
|
-
payload: {
|
1316
|
-
fadeDuration: fadeDuration,
|
1317
|
-
via: via
|
1318
|
-
}
|
1319
|
-
});
|
1320
|
-
},
|
1321
|
-
fadeOutAndPause: function fadeOutAndPause(fadeDuration) {
|
1322
|
-
var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
1323
|
-
via = _ref5.via;
|
1324
|
-
|
1325
|
-
dispatch({
|
1326
|
-
type: FADE_OUT_AND_PAUSE,
|
1327
|
-
payload: {
|
1328
|
-
fadeDuration: fadeDuration,
|
1329
|
-
via: via
|
1330
|
-
}
|
1331
|
-
});
|
1332
|
-
},
|
1333
|
-
changeVolumeFactor: function changeVolumeFactor(volumeFactor, fadeDuration) {
|
1334
|
-
dispatch({
|
1335
|
-
type: CHANGE_VOLUME_FACTOR,
|
1336
|
-
payload: {
|
1337
|
-
fadeDuration: fadeDuration,
|
1338
|
-
volumeFactor: volumeFactor
|
1339
|
-
}
|
1340
|
-
});
|
1341
|
-
},
|
1342
|
-
metaDataLoaded: function metaDataLoaded(currentTime, duration) {
|
1343
|
-
dispatch({
|
1344
|
-
type: META_DATA_LOADED,
|
1345
|
-
payload: {
|
1346
|
-
currentTime: currentTime,
|
1347
|
-
duration: duration
|
1348
|
-
}
|
1349
|
-
});
|
1350
|
-
},
|
1351
|
-
dataLoaded: function dataLoaded() {
|
1352
|
-
dispatch({
|
1353
|
-
type: DATA_LOADED
|
1354
|
-
});
|
1355
|
-
},
|
1356
|
-
progress: function progress(bufferedEnd) {
|
1357
|
-
dispatch({
|
1358
|
-
type: PROGRESS,
|
1359
|
-
payload: {
|
1360
|
-
bufferedEnd: bufferedEnd
|
1361
|
-
}
|
1362
|
-
});
|
1363
|
-
},
|
1364
|
-
timeUpdate: function timeUpdate(currentTime, duration) {
|
1365
|
-
dispatch({
|
1366
|
-
type: TIME_UPDATE,
|
1367
|
-
payload: {
|
1368
|
-
currentTime: currentTime,
|
1369
|
-
duration: duration
|
1370
|
-
}
|
1371
|
-
});
|
1372
|
-
},
|
1373
|
-
ended: function ended() {
|
1374
|
-
dispatch({
|
1375
|
-
type: ENDED
|
1376
|
-
});
|
1377
|
-
},
|
1378
|
-
scrubTo: function scrubTo(time) {
|
1379
|
-
dispatch({
|
1380
|
-
type: SCRUB_TO,
|
1381
|
-
payload: {
|
1382
|
-
time: time
|
1383
|
-
}
|
1384
|
-
});
|
1385
|
-
},
|
1386
|
-
seekTo: function seekTo(time) {
|
1387
|
-
dispatch({
|
1388
|
-
type: SEEK_TO,
|
1389
|
-
payload: {
|
1390
|
-
time: time
|
1391
|
-
}
|
1392
|
-
});
|
1393
|
-
},
|
1394
|
-
seeking: function seeking() {
|
1395
|
-
dispatch({
|
1396
|
-
type: SEEKING
|
1397
|
-
});
|
1398
|
-
},
|
1399
|
-
seeked: function seeked() {
|
1400
|
-
dispatch({
|
1401
|
-
type: SEEKED
|
1402
|
-
});
|
1403
|
-
},
|
1404
|
-
waiting: function waiting() {
|
1405
|
-
dispatch({
|
1406
|
-
type: WAITING
|
1407
|
-
});
|
1408
|
-
},
|
1409
|
-
prebuffer: function prebuffer() {
|
1410
|
-
dispatch({
|
1411
|
-
type: PREBUFFER
|
1412
|
-
});
|
1413
|
-
},
|
1414
|
-
prebuffered: function prebuffered() {
|
1415
|
-
dispatch({
|
1416
|
-
type: PREBUFFERED
|
1417
|
-
});
|
1418
|
-
},
|
1419
|
-
bufferUnderrun: function bufferUnderrun() {
|
1420
|
-
dispatch({
|
1421
|
-
type: BUFFER_UNDERRUN
|
1422
|
-
});
|
1423
|
-
},
|
1424
|
-
bufferUnderrunContinue: function bufferUnderrunContinue() {
|
1425
|
-
dispatch({
|
1426
|
-
type: BUFFER_UNDERRUN_CONTINUE
|
1427
|
-
});
|
1428
|
-
},
|
1429
|
-
mouseEntered: function mouseEntered() {
|
1430
|
-
dispatch({
|
1431
|
-
type: MOUSE_ENTERED
|
1432
|
-
});
|
1433
|
-
},
|
1434
|
-
mouseLeft: function mouseLeft() {
|
1435
|
-
dispatch({
|
1436
|
-
type: MOUSE_LEFT
|
1437
|
-
});
|
1438
|
-
},
|
1439
|
-
mouseEnteredControls: function mouseEnteredControls() {
|
1440
|
-
dispatch({
|
1441
|
-
type: MOUSE_ENTERED_CONTROLS
|
1442
|
-
});
|
1443
|
-
},
|
1444
|
-
mouseLeftControls: function mouseLeftControls() {
|
1445
|
-
dispatch({
|
1446
|
-
type: MOUSE_LEFT_CONTROLS
|
1447
|
-
});
|
1448
|
-
},
|
1449
|
-
userInteraction: function userInteraction() {
|
1450
|
-
dispatch({
|
1451
|
-
type: USER_INTERACTION
|
1452
|
-
});
|
1453
|
-
},
|
1454
|
-
userIdle: function userIdle() {
|
1455
|
-
dispatch({
|
1456
|
-
type: USER_IDLE
|
1457
|
-
});
|
1458
|
-
},
|
1459
|
-
focusEnteredControls: function focusEnteredControls() {
|
1460
|
-
dispatch({
|
1461
|
-
type: FOCUS_ENTERED_CONTROLS
|
1462
|
-
});
|
1463
|
-
},
|
1464
|
-
focusLeftControls: function focusLeftControls() {
|
1465
|
-
dispatch({
|
1466
|
-
type: FOCUS_LEFT_CONTROLS
|
1467
|
-
});
|
1468
|
-
},
|
1469
|
-
saveMediaElementId: function saveMediaElementId(id) {
|
1470
|
-
dispatch({
|
1471
|
-
type: SAVE_MEDIA_ELEMENT_ID,
|
1472
|
-
payload: {
|
1473
|
-
id: id
|
1474
|
-
}
|
1475
|
-
});
|
1476
|
-
},
|
1477
|
-
discardMediaElementId: function discardMediaElementId() {
|
1478
|
-
dispatch({
|
1479
|
-
type: DISCARD_MEDIA_ELEMENT_ID
|
1480
|
-
});
|
1481
|
-
}
|
1482
|
-
};
|
1483
|
-
}
|
1484
|
-
|
1485
|
-
function getInitialPlayerState() {
|
1486
|
-
return {
|
1487
|
-
isPlaying: false,
|
1488
|
-
shouldPlay: false,
|
1489
|
-
unplayed: true,
|
1490
|
-
dataLoaded: false,
|
1491
|
-
isLoading: true,
|
1492
|
-
playFailed: false,
|
1493
|
-
duration: 0,
|
1494
|
-
bufferedEnd: 0,
|
1495
|
-
shouldPrebuffer: true,
|
1496
|
-
fadeDuration: undefined,
|
1497
|
-
bufferUnderrun: undefined,
|
1498
|
-
scrubbingAt: undefined,
|
1499
|
-
currentTime: 0,
|
1500
|
-
mediaElementId: undefined,
|
1501
|
-
shouldSeekTo: undefined,
|
1502
|
-
userHovering: false,
|
1503
|
-
userHoveringControls: false,
|
1504
|
-
focusInsideControls: false,
|
1505
|
-
userIdle: false,
|
1506
|
-
volumeFactor: 1
|
1507
|
-
};
|
1508
|
-
}
|
1509
|
-
function playerStateReducer(state, action) {
|
1510
|
-
switch (action.type) {
|
1511
|
-
case PLAY:
|
1512
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1513
|
-
isLoading: true,
|
1514
|
-
shouldPlay: true,
|
1515
|
-
playFailed: false,
|
1516
|
-
unplayed: false,
|
1517
|
-
lastControlledVia: action.payload.via
|
1518
|
-
});
|
1519
|
-
|
1520
|
-
case PLAYING:
|
1521
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1522
|
-
shouldPlay: true,
|
1523
|
-
isPlaying: true,
|
1524
|
-
userIdle: false
|
1525
|
-
});
|
1526
|
-
|
1527
|
-
case PLAY_AND_FADE_IN:
|
1528
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1529
|
-
shouldPlay: true,
|
1530
|
-
fadeDuration: action.payload.fadeDuration,
|
1531
|
-
isLoading: true,
|
1532
|
-
lastControlledVia: action.payload.via
|
1533
|
-
});
|
1534
|
-
|
1535
|
-
case FADE_OUT_AND_PAUSE:
|
1536
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1537
|
-
shouldPlay: false,
|
1538
|
-
fadeDuration: action.payload.fadeDuration,
|
1539
|
-
isLoading: false,
|
1540
|
-
lastControlledVia: action.payload.via
|
1541
|
-
});
|
1542
|
-
|
1543
|
-
case PLAY_FAILED:
|
1544
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1545
|
-
shouldPlay: false,
|
1546
|
-
playFailed: true,
|
1547
|
-
fadeDuration: null,
|
1548
|
-
unplayed: true,
|
1549
|
-
isLoading: false
|
1550
|
-
});
|
1551
|
-
|
1552
|
-
case PAUSE:
|
1553
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1554
|
-
shouldPlay: false,
|
1555
|
-
isLoading: false,
|
1556
|
-
fadeDuration: null,
|
1557
|
-
lastControlledVia: action.payload.via
|
1558
|
-
});
|
1559
|
-
|
1560
|
-
case PAUSED:
|
1561
|
-
if (state.bufferUnderrun) {
|
1562
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1563
|
-
isPlaying: false
|
1564
|
-
});
|
1565
|
-
} else {
|
1566
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1567
|
-
shouldPlay: false,
|
1568
|
-
fadeDuration: null,
|
1569
|
-
isPlaying: false,
|
1570
|
-
isLoading: false
|
1571
|
-
});
|
1572
|
-
}
|
1573
|
-
|
1574
|
-
case SCRUB_TO:
|
1575
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1576
|
-
scrubbingAt: action.payload.time
|
1577
|
-
});
|
1578
|
-
|
1579
|
-
case SEEK_TO:
|
1580
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1581
|
-
shouldSeekTo: action.payload.time
|
1582
|
-
});
|
1583
|
-
|
1584
|
-
case SEEKING:
|
1585
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1586
|
-
isLoading: true
|
1587
|
-
});
|
1588
|
-
|
1589
|
-
case SEEKED:
|
1590
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1591
|
-
shouldSeekTo: undefined,
|
1592
|
-
scrubbingAt: undefined,
|
1593
|
-
isLoading: false
|
1594
|
-
});
|
1595
|
-
|
1596
|
-
case META_DATA_LOADED:
|
1597
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1598
|
-
currentTime: action.payload.currentTime,
|
1599
|
-
duration: action.payload.duration
|
1600
|
-
});
|
1601
|
-
|
1602
|
-
case DATA_LOADED:
|
1603
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1604
|
-
dataLoaded: true
|
1605
|
-
});
|
1606
|
-
|
1607
|
-
case PROGRESS:
|
1608
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1609
|
-
bufferedEnd: action.payload.bufferedEnd
|
1610
|
-
});
|
1611
|
-
|
1612
|
-
case TIME_UPDATE:
|
1613
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1614
|
-
currentTime: action.payload.currentTime,
|
1615
|
-
duration: action.payload.duration,
|
1616
|
-
isLoading: false
|
1617
|
-
});
|
1618
|
-
|
1619
|
-
case ENDED:
|
1620
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1621
|
-
shouldPlay: false,
|
1622
|
-
isPlaying: false,
|
1623
|
-
unplayed: true,
|
1624
|
-
lastControlledVia: null
|
1625
|
-
});
|
1626
|
-
|
1627
|
-
case WAITING:
|
1628
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1629
|
-
isLoading: true
|
1630
|
-
});
|
1631
|
-
|
1632
|
-
case PREBUFFER:
|
1633
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1634
|
-
shouldPrebuffer: true
|
1635
|
-
});
|
1636
|
-
|
1637
|
-
case PREBUFFERED:
|
1638
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1639
|
-
shouldPrebuffer: false
|
1640
|
-
});
|
1641
|
-
|
1642
|
-
case BUFFER_UNDERRUN:
|
1643
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1644
|
-
bufferUnderrun: true
|
1645
|
-
});
|
1646
|
-
|
1647
|
-
case BUFFER_UNDERRUN_CONTINUE:
|
1648
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1649
|
-
bufferUnderrun: false
|
1650
|
-
});
|
1651
|
-
|
1652
|
-
case MOUSE_ENTERED:
|
1653
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1654
|
-
userHovering: true
|
1655
|
-
});
|
1656
|
-
|
1657
|
-
case MOUSE_LEFT:
|
1658
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1659
|
-
userHovering: false
|
1660
|
-
});
|
1661
|
-
|
1662
|
-
case MOUSE_ENTERED_CONTROLS:
|
1663
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1664
|
-
userHoveringControls: true
|
1665
|
-
});
|
1666
|
-
|
1667
|
-
case MOUSE_LEFT_CONTROLS:
|
1668
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1669
|
-
userHoveringControls: false
|
1670
|
-
});
|
1671
|
-
|
1672
|
-
case FOCUS_ENTERED_CONTROLS:
|
1673
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1674
|
-
focusInsideControls: true,
|
1675
|
-
userIdle: false
|
1676
|
-
});
|
1677
|
-
|
1678
|
-
case FOCUS_LEFT_CONTROLS:
|
1679
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1680
|
-
focusInsideControls: false,
|
1681
|
-
userIdle: false
|
1682
|
-
});
|
1683
|
-
|
1684
|
-
case USER_INTERACTION:
|
1685
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1686
|
-
userIdle: false
|
1687
|
-
});
|
1688
|
-
|
1689
|
-
case USER_IDLE:
|
1690
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1691
|
-
userIdle: true
|
1692
|
-
});
|
1693
|
-
|
1694
|
-
case SAVE_MEDIA_ELEMENT_ID:
|
1695
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1696
|
-
mediaElementId: action.payload.id
|
1697
|
-
});
|
1698
|
-
|
1699
|
-
case DISCARD_MEDIA_ELEMENT_ID:
|
1700
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1701
|
-
dataLoaded: false,
|
1702
|
-
isPlaying: false,
|
1703
|
-
mediaElementId: null
|
1704
|
-
});
|
1705
|
-
|
1706
|
-
case CHANGE_VOLUME_FACTOR:
|
1707
|
-
return _objectSpread2(_objectSpread2({}, state), {}, {
|
1708
|
-
volumeFactor: action.payload.volumeFactor,
|
1709
|
-
volumeFactorFadeDuration: action.payload.fadeDuration
|
1710
|
-
});
|
1711
|
-
|
1712
|
-
default:
|
1713
|
-
return state;
|
1714
|
-
}
|
1715
|
-
}
|
1716
|
-
function usePlayerState() {
|
1717
|
-
var _useReducer = useReducer(playerStateReducer, getInitialPlayerState()),
|
1718
|
-
_useReducer2 = _slicedToArray(_useReducer, 2),
|
1719
|
-
state = _useReducer2[0],
|
1720
|
-
dispatch = _useReducer2[1];
|
1721
|
-
|
1722
|
-
var actions = useMemo(function () {
|
1723
|
-
return createActions(dispatch);
|
1724
|
-
}, [dispatch]);
|
1725
|
-
return [state, actions];
|
1726
|
-
}
|
1727
|
-
|
1728
|
-
function MediaPlayer(props) {
|
1729
|
-
var isStaticPreview = useIsStaticPreview();
|
1730
|
-
var load = props.load === 'auto' && isStaticPreview ? 'poster' : props.load;
|
1731
|
-
return /*#__PURE__*/React.createElement("div", {
|
1732
|
-
className: classNames(styles$4.wrapper, styles$4[props.fit], _defineProperty({}, textTrackStyles.inset, props.textTracksInset))
|
1733
|
-
}, load === 'auto' && /*#__PURE__*/React.createElement(PreparedMediaPlayer, props), load !== 'none' && /*#__PURE__*/React.createElement(Poster, {
|
1734
|
-
imageUrl: props.posterImageUrl,
|
1735
|
-
objectPosition: props.objectPosition,
|
1736
|
-
hide: props.type === 'video' && load !== 'poster' && props.playerState.dataLoaded && !props.playerState.unplayed
|
1737
|
-
}));
|
1738
|
-
}
|
1739
|
-
MediaPlayer.defaultProps = {
|
1740
|
-
load: 'auto'
|
1741
|
-
};
|
1742
|
-
|
1743
|
-
function Poster(_ref) {
|
1744
|
-
var imageUrl = _ref.imageUrl,
|
1745
|
-
objectPosition = _ref.objectPosition,
|
1746
|
-
hide = _ref.hide;
|
1747
|
-
|
1748
|
-
if (!imageUrl) {
|
1749
|
-
return null;
|
1750
|
-
}
|
1751
|
-
|
1752
|
-
return /*#__PURE__*/React.createElement("img", {
|
1753
|
-
src: imageUrl,
|
1754
|
-
alt: "",
|
1755
|
-
style: {
|
1756
|
-
display: hide ? 'none' : undefined,
|
1757
|
-
objectPosition: objectPosition && "".concat(objectPosition.x, "% ").concat(objectPosition.y, "%")
|
1758
|
-
}
|
1759
|
-
});
|
1760
|
-
}
|
1761
|
-
|
1762
|
-
function PreparedMediaPlayer(props) {
|
1763
|
-
var playerRef = useRef();
|
1764
|
-
var previousPlayerState = useRef(props.playerState);
|
1765
|
-
var scrollToSection = useContext(ScrollToSectionContext);
|
1766
|
-
var eventContextData = useEventContextData();
|
1767
|
-
|
1768
|
-
var onSetup = function onSetup(newPlayer) {
|
1769
|
-
playerRef.current = newPlayer;
|
1770
|
-
newPlayer.on('ended', function () {
|
1771
|
-
return props.nextSectionOnEnd && scrollToSection('next');
|
1772
|
-
});
|
1773
|
-
watchPlayer(newPlayer, props.playerActions);
|
1774
|
-
applyPlayerState(newPlayer, props.playerState, props.playerActions);
|
1775
|
-
updateObjectPosition(newPlayer, props.objectPosition.x, props.objectPosition.y);
|
1776
|
-
};
|
1777
|
-
|
1778
|
-
var onDispose = function onDispose() {
|
1779
|
-
unwatchPlayer(playerRef.current, props.playerActions);
|
1780
|
-
playerRef.current = undefined;
|
1781
|
-
};
|
1782
|
-
|
1783
|
-
useEffect(function () {
|
1784
|
-
var player = playerRef.current;
|
1785
|
-
|
1786
|
-
if (player) {
|
1787
|
-
updatePlayerState(player, previousPlayerState.current, props.playerState, props.playerActions);
|
1788
|
-
}
|
1789
|
-
|
1790
|
-
previousPlayerState.current = props.playerState;
|
1791
|
-
}, [props.playerState, props.playerActions]);
|
1792
|
-
useEffect(function () {
|
1793
|
-
var player = playerRef.current;
|
1794
|
-
|
1795
|
-
if (player) {
|
1796
|
-
updateTextTracksMode(player, props.textTracks.activeFileId);
|
1797
|
-
}
|
1798
|
-
}, [props.textTracks.activeFileId]);
|
1799
|
-
useEffect(function () {
|
1800
|
-
var player = playerRef.current;
|
1801
|
-
|
1802
|
-
if (player) {
|
1803
|
-
updateObjectPosition(player, props.objectPosition.x, props.objectPosition.y);
|
1804
|
-
}
|
1805
|
-
}, [props.objectPosition.x, props.objectPosition.y]);
|
1806
|
-
return /*#__PURE__*/React.createElement(PlayerContainer$1, {
|
1807
|
-
type: props.type,
|
1808
|
-
sources: appendSuffix(props.sources, props.sourceUrlSuffix),
|
1809
|
-
textTrackSources: getTextTrackSources(props.textTracks.files, props.textTracksDisabled),
|
1810
|
-
filePermaId: props.filePermaId,
|
1811
|
-
loop: props.loop,
|
1812
|
-
controls: props.controls,
|
1813
|
-
playsInline: props.playsInline,
|
1814
|
-
mediaEventsContextData: eventContextData,
|
1815
|
-
atmoDuringPlayback: props.atmoDuringPlayback,
|
1816
|
-
onSetup: onSetup,
|
1817
|
-
onDispose: onDispose,
|
1818
|
-
altText: props.altText
|
1819
|
-
});
|
1820
|
-
}
|
1821
|
-
PreparedMediaPlayer.defaultProps = {
|
1822
|
-
objectPosition: {},
|
1823
|
-
textTracks: {
|
1824
|
-
files: []
|
1825
|
-
}
|
1826
|
-
};
|
1827
|
-
|
1828
|
-
function appendSuffix(sources, suffix) {
|
1829
|
-
if (!suffix) {
|
1830
|
-
return sources;
|
1831
|
-
}
|
1832
|
-
|
1833
|
-
return sources.map(function (source) {
|
1834
|
-
return _objectSpread2(_objectSpread2({}, source), {}, {
|
1835
|
-
src: "".concat(source.src).concat(suffix)
|
1836
|
-
});
|
1837
|
-
});
|
1838
|
-
}
|
1839
|
-
|
1840
|
-
function useSetting(name) {
|
1841
|
-
var _useState = useState(settings.get(name)),
|
1842
|
-
_useState2 = _slicedToArray(_useState, 2),
|
1843
|
-
value = _useState2[0],
|
1844
|
-
setValue = _useState2[1];
|
1845
|
-
|
1846
|
-
useEffect(function () {
|
1847
|
-
function update() {
|
1848
|
-
setValue(settings.get(name));
|
1849
|
-
}
|
1850
|
-
|
1851
|
-
settings.on("change:".concat(name), update);
|
1852
|
-
return function () {
|
1853
|
-
return settings.off(undefined, update);
|
1854
|
-
};
|
1855
|
-
}, [setValue, name]);
|
1856
|
-
var setter = useCallback(function (value) {
|
1857
|
-
return settings.set(name, value);
|
1858
|
-
}, [name]);
|
1859
|
-
return [value, setter];
|
1860
|
-
}
|
1861
|
-
|
1862
|
-
function useTextTracks(_ref) {
|
1863
|
-
var file = _ref.file,
|
1864
|
-
defaultTextTrackFilePermaId = _ref.defaultTextTrackFilePermaId,
|
1865
|
-
captionsByDefault = _ref.captionsByDefault;
|
1866
|
-
|
1867
|
-
var _useSetting = useSetting('textTrack'),
|
1868
|
-
_useSetting2 = _slicedToArray(_useSetting, 2),
|
1869
|
-
setting = _useSetting2[0],
|
1870
|
-
setSetting = _useSetting2[1];
|
1871
|
-
|
1872
|
-
setting = setting || {};
|
1873
|
-
|
1874
|
-
var _useI18n = useI18n(),
|
1875
|
-
t = _useI18n.t;
|
1876
|
-
|
1877
|
-
var _useEntryMetadata = useEntryMetadata(),
|
1878
|
-
locale = _useEntryMetadata.locale;
|
1879
|
-
|
1880
|
-
var textTrackFiles = useTextTrackFiles({
|
1881
|
-
file: file
|
1882
|
-
});
|
1883
|
-
var autoTextTrackFile = getAutoTextTrackFile(textTrackFiles, defaultTextTrackFilePermaId, locale, captionsByDefault);
|
1884
|
-
return {
|
1885
|
-
mode: setting.kind === 'off' ? 'off' : setting.kind ? 'user' : 'auto',
|
1886
|
-
autoDisplayLabel: autoTextTrackFile ? t('pageflow_scrolled.public.text_track_modes.auto', {
|
1887
|
-
label: autoTextTrackFile.displayLabel
|
1888
|
-
}) : t('pageflow_scrolled.public.text_track_modes.auto_off'),
|
1889
|
-
files: textTrackFiles,
|
1890
|
-
activeFileId: getActiveTextTrackFileId(textTrackFiles, autoTextTrackFile, setting),
|
1891
|
-
select: function select(textTrackFileIdOrKind) {
|
1892
|
-
if (textTrackFileIdOrKind === 'off') {
|
1893
|
-
setSetting({
|
1894
|
-
kind: 'off'
|
1895
|
-
});
|
1896
|
-
} else if (textTrackFileIdOrKind === 'auto') {
|
1897
|
-
setSetting({});
|
1898
|
-
} else {
|
1899
|
-
var textTrackFile = textTrackFiles.find(function (file) {
|
1900
|
-
return file.id === textTrackFileIdOrKind;
|
1901
|
-
});
|
1902
|
-
setSetting({
|
1903
|
-
kind: textTrackFile.configuration.kind,
|
1904
|
-
srclang: textTrackFile.configuration.srclang
|
1905
|
-
});
|
1906
|
-
}
|
1907
|
-
}
|
1908
|
-
};
|
1909
|
-
}
|
1910
|
-
|
1911
|
-
function useTextTrackFiles(_ref2) {
|
1912
|
-
var file = _ref2.file;
|
1913
|
-
|
1914
|
-
var _useI18n2 = useI18n(),
|
1915
|
-
t = _useI18n2.t;
|
1916
|
-
|
1917
|
-
return useNestedFiles({
|
1918
|
-
collectionName: 'textTrackFiles',
|
1919
|
-
parent: file
|
1920
|
-
}).map(function (file) {
|
1921
|
-
return addDisplayLabel(file, t);
|
1922
|
-
}).sort(function (file1, file2) {
|
1923
|
-
return file1.displayLabel.localeCompare(file2.displayLabel);
|
1924
|
-
});
|
1925
|
-
}
|
1926
|
-
|
1927
|
-
function getActiveTextTrackFileId(textTrackFiles, autoTextTrackFile, setting) {
|
1928
|
-
if (setting.kind === 'off') {
|
1929
|
-
return null;
|
1930
|
-
}
|
1931
|
-
|
1932
|
-
var file = textTrackFiles.find(function (textTrackFile) {
|
1933
|
-
return textTrackFile.configuration.srclang === setting.srclang && textTrackFile.configuration.kind === setting.kind;
|
1934
|
-
});
|
1935
|
-
|
1936
|
-
if (file) {
|
1937
|
-
return file.id;
|
1938
|
-
}
|
1939
|
-
|
1940
|
-
return autoTextTrackFile && autoTextTrackFile.id;
|
1941
|
-
}
|
1942
|
-
|
1943
|
-
function getAutoTextTrackFile(textTrackFiles, defaultTextTrackFilePermaId, locale, captionsByDefault) {
|
1944
|
-
if (defaultTextTrackFilePermaId) {
|
1945
|
-
var defaultTextTrackFile = textTrackFiles.find(function (textTrackFile) {
|
1946
|
-
return textTrackFile.permaId === defaultTextTrackFilePermaId;
|
1947
|
-
});
|
1948
|
-
|
1949
|
-
if (defaultTextTrackFile) {
|
1950
|
-
return defaultTextTrackFile;
|
1951
|
-
}
|
1952
|
-
}
|
1953
|
-
|
1954
|
-
var subtitlesInEntryLanguage = textTrackFiles.find(function (textTrackFile) {
|
1955
|
-
return textTrackFile.configuration.kind === 'subtitles' && textTrackFile.configuration.srclang === locale;
|
1956
|
-
});
|
1957
|
-
var defaultCaptions = captionsByDefault ? textTrackFiles.find(function (textTrackFile) {
|
1958
|
-
return textTrackFile.configuration.kind === 'captions';
|
1959
|
-
}) : null;
|
1960
|
-
return subtitlesInEntryLanguage || defaultCaptions;
|
1961
|
-
}
|
1962
|
-
|
1963
|
-
function addDisplayLabel(textTrackFile, t) {
|
1964
|
-
return _objectSpread2(_objectSpread2({}, textTrackFile), {}, {
|
1965
|
-
displayLabel: textTrackFile.configuration.label || t('pageflow_scrolled.public.languages.' + textTrackFile.configuration.srclang || 'unknown', {
|
1966
|
-
defaultValue: t('pageflow_scrolled.public.languages.unknown')
|
1967
|
-
})
|
1968
|
-
});
|
1969
|
-
}
|
1970
|
-
|
1971
|
-
function usePrevious(value) {
|
1972
|
-
var ref = useRef();
|
1973
|
-
useEffect(function () {
|
1974
|
-
ref.current = value;
|
1975
|
-
});
|
1976
|
-
return ref.current;
|
1977
|
-
}
|
1978
|
-
|
1979
|
-
var MediaMutedContext = createContext(false);
|
1980
|
-
function MediaMutedProvider(_ref) {
|
1981
|
-
var children = _ref.children;
|
1982
|
-
|
1983
|
-
var _useState = useState(media.muted),
|
1984
|
-
_useState2 = _slicedToArray(_useState, 2),
|
1985
|
-
value = _useState2[0],
|
1986
|
-
setValue = _useState2[1];
|
1987
|
-
|
1988
|
-
useEffect(function () {
|
1989
|
-
media.on('change:muted', setValue);
|
1990
|
-
return function () {
|
1991
|
-
return media.off('change:muted', setValue);
|
1992
|
-
};
|
1993
|
-
}, []);
|
1994
|
-
return /*#__PURE__*/React.createElement(MediaMutedContext.Provider, {
|
1995
|
-
value: value
|
1996
|
-
}, children);
|
1997
|
-
}
|
1998
|
-
/**
|
1999
|
-
* Returns boolean indicating whether the entry is currently muted.
|
2000
|
-
*/
|
2001
|
-
|
2002
|
-
function useMediaMuted() {
|
2003
|
-
return useContext(MediaMutedContext);
|
2004
|
-
}
|
2005
|
-
function useOnUnmuteMedia(callback) {
|
2006
|
-
var muted = useMediaMuted();
|
2007
|
-
var wasMuted = usePrevious(muted);
|
2008
|
-
useIsomorphicLayoutEffect(function () {
|
2009
|
-
if (wasMuted && !muted) {
|
2010
|
-
callback();
|
2011
|
-
}
|
2012
|
-
}, [wasMuted, muted, callback]);
|
2013
|
-
}
|
2014
|
-
|
2015
|
-
function ensureProtocol(protocol, url) {
|
2016
|
-
if (url && url.match(/^\/\//)) {
|
2017
|
-
return "".concat(protocol, ":").concat(url);
|
2018
|
-
}
|
2019
|
-
|
2020
|
-
return url;
|
2021
|
-
}
|
2022
|
-
|
2023
|
-
function formatTimeDuration(durationInMs) {
|
2024
|
-
var seconds = Math.round(durationInMs / 1000) % 60;
|
2025
|
-
var minutes = Math.floor(durationInMs / 1000 / 60) % 60;
|
2026
|
-
var hours = Math.floor(durationInMs / 1000 / 60 / 60);
|
2027
|
-
var result = 'PT';
|
2028
|
-
|
2029
|
-
if (hours > 0) {
|
2030
|
-
result += "".concat(hours, "H");
|
2031
|
-
}
|
2032
|
-
|
2033
|
-
if (minutes > 0) {
|
2034
|
-
result += "".concat(minutes, "M");
|
2035
|
-
}
|
2036
|
-
|
2037
|
-
if (seconds > 0 || minutes === 0 && hours === 0) {
|
2038
|
-
result += "".concat(seconds, "S");
|
2039
|
-
}
|
2040
|
-
|
2041
|
-
return result;
|
2042
|
-
}
|
2043
|
-
|
2044
|
-
function StructuredData(_ref) {
|
2045
|
-
var data = _ref.data;
|
2046
|
-
return /*#__PURE__*/React.createElement("script", {
|
2047
|
-
type: "application/ld+json",
|
2048
|
-
dangerouslySetInnerHTML: {
|
2049
|
-
__html: JSON.stringify(data)
|
2050
|
-
}
|
2051
|
-
});
|
2052
|
-
}
|
2053
|
-
|
2054
|
-
function AudioStructuredData(_ref) {
|
2055
|
-
var file = _ref.file;
|
2056
|
-
var entryMedadata = useEntryMetadata();
|
2057
|
-
var data = {
|
2058
|
-
'@context': 'http://schema.org',
|
2059
|
-
'@type': 'AudioObject',
|
2060
|
-
name: file.basename,
|
2061
|
-
description: file.configuration.alt,
|
2062
|
-
url: ensureProtocol('https', file.urls.mp3),
|
2063
|
-
duration: formatTimeDuration(file.durationInMs),
|
2064
|
-
datePublished: entryMedadata.publishedAt,
|
2065
|
-
uploadDate: file.createdAt,
|
2066
|
-
copyrightHolder: {
|
2067
|
-
'@type': 'Organization',
|
2068
|
-
name: file.rights
|
2069
|
-
}
|
2070
|
-
};
|
2071
|
-
return /*#__PURE__*/React.createElement(StructuredData, {
|
2072
|
-
data: data
|
2073
|
-
});
|
2074
|
-
}
|
2075
|
-
|
2076
|
-
var styles$5 = {"spaceForTextTracks":"AudioPlayer-module_spaceForTextTracks__169MK","spaceForTextTracksActive":"AudioPlayer-module_spaceForTextTracksActive__99m7R"};
|
2077
|
-
|
2078
|
-
/**
|
2079
|
-
* Render audio file in MediaPlayer.
|
2080
|
-
*
|
2081
|
-
* @param {Object} props
|
2082
|
-
* @param {Object} props.audioFile - Audio file obtained via `useFile`.
|
2083
|
-
* @param {number} [props.posterImageFile] - Poster image file obtained via `useFile`.
|
2084
|
-
* @param {number} [props.defaultTextTrackFileId] - Perma id of default text track file.
|
2085
|
-
* @param {string} [props.load] - Control lazy loading. `"auto"` (default), `"poster"` or `"none"`.
|
2086
|
-
*/
|
2087
|
-
|
2088
|
-
function AudioPlayer(_ref) {
|
2089
|
-
var audioFile = _ref.audioFile,
|
2090
|
-
posterImageFile = _ref.posterImageFile,
|
2091
|
-
props = _objectWithoutProperties(_ref, ["audioFile", "posterImageFile"]);
|
2092
|
-
|
2093
|
-
var textTracks = useTextTracks({
|
2094
|
-
file: audioFile,
|
2095
|
-
defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
|
2096
|
-
captionsByDefault: useMediaMuted()
|
2097
|
-
});
|
2098
|
-
|
2099
|
-
if (audioFile && audioFile.isReady) {
|
2100
|
-
return /*#__PURE__*/React.createElement("div", {
|
2101
|
-
className: classNames(styles$5.spaceForTextTracks, _defineProperty({}, styles$5.spaceForTextTracksActive, !posterImageFile && textTracks.files.length))
|
2102
|
-
}, /*#__PURE__*/React.createElement(MediaPlayer, Object.assign({
|
2103
|
-
type: 'audio',
|
2104
|
-
textTracks: textTracks,
|
2105
|
-
filePermaId: audioFile.permaId,
|
2106
|
-
sources: processSources(audioFile),
|
2107
|
-
textTracksInset: !!posterImageFile,
|
2108
|
-
posterImageUrl: posterImageFile && posterImageFile.isReady ? posterImageFile.urls.large : undefined,
|
2109
|
-
altText: audioFile.configuration.alt
|
2110
|
-
}, props)), /*#__PURE__*/React.createElement(AudioStructuredData, {
|
2111
|
-
file: audioFile
|
2112
|
-
}));
|
2113
|
-
}
|
2114
|
-
|
2115
|
-
return null;
|
2116
|
-
}
|
2117
|
-
AudioPlayer.defaultProps = {
|
2118
|
-
controls: true
|
2119
|
-
};
|
2120
|
-
function processSources(audioFile) {
|
2121
|
-
var sources = [];
|
2122
|
-
|
2123
|
-
if (audioFile.urls['ogg']) {
|
2124
|
-
sources.push({
|
2125
|
-
type: 'audio/ogg',
|
2126
|
-
src: "".concat(audioFile.urls['ogg'], "?u=1")
|
2127
|
-
});
|
2128
|
-
}
|
2129
|
-
|
2130
|
-
if (audioFile.urls['mp3']) {
|
2131
|
-
sources.push({
|
2132
|
-
type: 'audio/mp3',
|
2133
|
-
src: "".concat(audioFile.urls['mp3'], "?u=1")
|
2134
|
-
});
|
2135
|
-
}
|
2136
|
-
|
2137
|
-
if (audioFile.urls['m4a']) {
|
2138
|
-
sources.push({
|
2139
|
-
type: 'audio/m4a',
|
2140
|
-
src: "".concat(audioFile.urls['m4a'], "?u=1")
|
2141
|
-
});
|
2142
|
-
}
|
2143
|
-
|
2144
|
-
return sources;
|
2145
|
-
}
|
2146
|
-
|
2147
|
-
function SectionAtmo(props) {
|
2148
|
-
var audioFile = useFile({
|
2149
|
-
collectionName: 'audioFiles',
|
2150
|
-
permaId: props.audioFilePermaId
|
2151
|
-
});
|
2152
|
-
var lastAudioFile = usePrevious(audioFile);
|
2153
|
-
var atmo = useAtmo();
|
2154
|
-
var processAtmo = useCallback(function () {
|
2155
|
-
var sources = undefined;
|
2156
|
-
|
2157
|
-
if (audioFile && audioFile.isReady) {
|
2158
|
-
sources = processSources(audioFile);
|
2159
|
-
}
|
2160
|
-
|
2161
|
-
if (atmo) {
|
2162
|
-
atmo.updateAtmo({
|
2163
|
-
sources: sources,
|
2164
|
-
audioFilePermaId: props.audioFilePermaId
|
2165
|
-
});
|
2166
|
-
}
|
2167
|
-
}, [atmo, audioFile, props.audioFilePermaId]);
|
2168
|
-
useSectionLifecycle({
|
2169
|
-
onActivate: function onActivate() {
|
2170
|
-
processAtmo();
|
2171
|
-
}
|
2172
|
-
});
|
2173
|
-
useEffect(function () {
|
2174
|
-
if (lastAudioFile !== undefined && (lastAudioFile && lastAudioFile.permaId) !== (audioFile && audioFile.permaId)) {
|
2175
|
-
processAtmo();
|
2176
|
-
}
|
2177
|
-
}, [processAtmo, lastAudioFile, audioFile]);
|
2178
|
-
return null;
|
2179
|
-
}
|
2180
|
-
|
2181
|
-
function getSize(el) {
|
2182
|
-
if (!el) {
|
2183
|
-
return {
|
2184
|
-
left: 0,
|
2185
|
-
top: 0,
|
2186
|
-
width: 0,
|
2187
|
-
height: 0,
|
2188
|
-
bottom: 0
|
2189
|
-
};
|
2190
|
-
}
|
2191
|
-
|
2192
|
-
return {
|
2193
|
-
left: el.offsetLeft,
|
2194
|
-
top: el.offsetTop,
|
2195
|
-
width: el.offsetWidth,
|
2196
|
-
height: el.offsetHeight,
|
2197
|
-
bottom: el.offsetParent ? el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight : 0
|
2198
|
-
};
|
2199
|
-
}
|
2200
|
-
|
2201
|
-
function useDimension() {
|
2202
|
-
var _useState = useState(getSize(null)),
|
2203
|
-
_useState2 = _slicedToArray(_useState, 2),
|
2204
|
-
componentSize = _useState2[0],
|
2205
|
-
setComponentSize = _useState2[1];
|
2206
|
-
|
2207
|
-
var _useState3 = useState(null),
|
2208
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
2209
|
-
currentNode = _useState4[0],
|
2210
|
-
setCurrentNode = _useState4[1];
|
2211
|
-
|
2212
|
-
var measuredRef = useCallback(function (node) {
|
2213
|
-
setCurrentNode(node);
|
2214
|
-
setComponentSize(getSize(node));
|
2215
|
-
}, []);
|
2216
|
-
useEffect(function () {
|
2217
|
-
function handleResize() {
|
2218
|
-
setComponentSize(getSize(currentNode));
|
2219
|
-
}
|
2220
|
-
|
2221
|
-
if (!currentNode) {
|
2222
|
-
return;
|
2223
|
-
}
|
2224
|
-
|
2225
|
-
handleResize();
|
2226
|
-
window.addEventListener('resize', handleResize);
|
2227
|
-
return function () {
|
2228
|
-
window.removeEventListener('resize', handleResize);
|
2229
|
-
};
|
2230
|
-
}, [currentNode]);
|
2231
|
-
return [componentSize, measuredRef];
|
2232
|
-
}
|
2233
|
-
|
2234
|
-
var styles$6 = {"root":"Fullscreen-module_root__1N3CI"};
|
2235
|
-
|
2236
|
-
var HeightContext = React.createContext();
|
2237
|
-
function FullscreenHeightProvider(_ref) {
|
2238
|
-
var height = _ref.height,
|
2239
|
-
children = _ref.children;
|
2240
|
-
return /*#__PURE__*/React.createElement(HeightContext.Provider, {
|
2241
|
-
value: height
|
2242
|
-
}, children);
|
2243
|
-
}
|
2244
|
-
var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
|
2245
|
-
var height = useContext(HeightContext);
|
2246
|
-
return /*#__PURE__*/React.createElement("div", {
|
2247
|
-
ref: ref,
|
2248
|
-
className: styles$6.root,
|
2249
|
-
style: {
|
2250
|
-
height: height
|
2251
|
-
}
|
2252
|
-
}, props.children);
|
2253
|
-
});
|
2254
|
-
|
2255
|
-
var styles$7 = {"FillColor":"FillColor-module_FillColor__S1uEG"};
|
2256
|
-
|
2257
|
-
function FillColor(props) {
|
2258
|
-
return /*#__PURE__*/React.createElement("div", {
|
2259
|
-
className: styles$7.FillColor,
|
2260
|
-
style: {
|
2261
|
-
backgroundColor: props.color
|
2262
|
-
}
|
2263
|
-
}, /*#__PURE__*/React.createElement(Fullscreen, null));
|
2264
|
-
}
|
2265
|
-
|
2266
|
-
/**
|
2267
|
-
* Extend image or video file with position/motif area related
|
2268
|
-
* properties that are needed to use the file as a section backdrop.
|
2269
|
-
*
|
2270
|
-
* The added properties are:
|
2271
|
-
*
|
2272
|
-
* `cropPosition`: Position in percent that can be used as
|
2273
|
-
* `background-position` or `object-position` to center the given
|
2274
|
-
* motif area in the container.
|
2275
|
-
*
|
2276
|
-
* `motifAreaOffsetRect`: Pixel position and size of the motif area in
|
2277
|
-
* the container assuming the crop position has been applied.
|
2278
|
-
*
|
2279
|
-
* `motifArea`: Either the passed motif area object or the motif area
|
2280
|
-
* from the legacy file configuration if no motif area has been
|
2281
|
-
* passed.
|
2282
|
-
*
|
2283
|
-
* @param {Object} options
|
2284
|
-
* @param {Object} options.file - Image or video file obtained via
|
2285
|
-
* `useFile`.
|
2286
|
-
* @param {Object} options.motifArea - Section specific setting
|
2287
|
-
* specifying motif area rect in percent.
|
2288
|
-
* @param {Object} options.containerDimension - Width and height in
|
2289
|
-
* pixels of the container (normally the backdrop) the file shall be
|
2290
|
-
* displayed as background of.
|
2291
|
-
*
|
2292
|
-
* @private
|
2293
|
-
*/
|
2294
|
-
function useBackgroundFile(_ref) {
|
2295
|
-
var file = _ref.file,
|
2296
|
-
motifArea = _ref.motifArea,
|
2297
|
-
containerDimension = _ref.containerDimension;
|
2298
|
-
|
2299
|
-
if (!file) {
|
2300
|
-
return null;
|
2301
|
-
} // Calculate scale factor required to make the file cover the container:
|
2302
|
-
|
2303
|
-
|
2304
|
-
var originalRatio = file.width / file.height;
|
2305
|
-
var containerRatio = containerDimension.width / containerDimension.height;
|
2306
|
-
var scale = containerRatio > originalRatio ? containerDimension.width / file.width : containerDimension.height / file.height; // Calculate the pixel size the image will have inside the container:
|
2307
|
-
|
2308
|
-
var displayFileWidth = file.width * scale;
|
2309
|
-
var displayFileHeight = file.height * scale; // Calculate the pixel position of the center of the motif area in
|
2310
|
-
// the scaled image:
|
2311
|
-
|
2312
|
-
var motifCenterX = motifArea ? motifArea.left + motifArea.width / 2 : 50;
|
2313
|
-
var motifCenterY = motifArea ? motifArea.top + motifArea.height / 2 : 50;
|
2314
|
-
var displayMotifCenterX = motifCenterX * displayFileWidth / 100;
|
2315
|
-
var displayMotifCenterY = motifCenterY * displayFileHeight / 100; // If the x-axis position (inside the image) of the center of the
|
2316
|
-
// motif area is smaller than `A = containerDimension.width / 2`, we
|
2317
|
-
// need to set the crop position to 0% to ensure that the full width
|
2318
|
-
// motif area is visible:
|
2319
|
-
//
|
2320
|
-
// center of motif area
|
2321
|
-
// |
|
2322
|
-
// oXXXXXooo...........
|
2323
|
-
// |-A-|
|
2324
|
-
//
|
2325
|
-
// Legend:
|
2326
|
-
// o: Part of the image that is visible in the container
|
2327
|
-
// .: Part of the image that is clipped
|
2328
|
-
// X: Part of the motif area that is visible in the container
|
2329
|
-
// x: Part of the motif area that is clipped
|
2330
|
-
//
|
2331
|
-
// If the x-axis position (inside the image) of the center of the
|
2332
|
-
// motif area is greater than
|
2333
|
-
// `B = image.width - containerDimension.width / 2`, we need to set the
|
2334
|
-
// crop position to 100%:
|
2335
|
-
//
|
2336
|
-
// ............oooXXXXXo
|
2337
|
-
// |-------B-------|
|
2338
|
-
//
|
2339
|
-
// For positions between A and B we want to linearly shift the crop
|
2340
|
-
// position to ensure the center of the motif area is centered in
|
2341
|
-
// the container:
|
2342
|
-
//
|
2343
|
-
// ...ooXXXXXoo.........
|
2344
|
-
//
|
2345
|
-
// This also applies if the motif area is wider than the container:
|
2346
|
-
//
|
2347
|
-
// .xxXXXXXXXXXxx.......
|
2348
|
-
//
|
2349
|
-
|
2350
|
-
var Ax = containerDimension.width / 2;
|
2351
|
-
var Ay = containerDimension.height / 2;
|
2352
|
-
var Bx = displayFileWidth - containerDimension.width / 2;
|
2353
|
-
var By = displayFileHeight - containerDimension.height / 2;
|
2354
|
-
var cropPosition = {
|
2355
|
-
x: Bx - Ax > 0 ? Math.min(100, Math.max(0, (displayMotifCenterX - Ax) / (Bx - Ax) * 100)) : 50,
|
2356
|
-
y: By - Ay > 0 ? Math.min(100, Math.max(0, (displayMotifCenterY - Ay) / (By - Ay) * 100)) : 50
|
2357
|
-
}; // Calculate the amount of pixels the image will be shifted
|
2358
|
-
// when the crop position is applied:
|
2359
|
-
|
2360
|
-
var cropLeft = (displayFileWidth - containerDimension.width) * cropPosition.x / 100;
|
2361
|
-
var cropTop = (displayFileHeight - containerDimension.height) * cropPosition.y / 100; // Calculate the pixel position and dimension of the motif area
|
2362
|
-
// relative to the container assuming the crop position has been
|
2363
|
-
// applied:
|
2364
|
-
|
2365
|
-
var motifAreaOffsetRect = motifArea && {
|
2366
|
-
top: Math.round(displayFileHeight * motifArea.top / 100 - cropTop),
|
2367
|
-
left: Math.round(displayFileWidth * motifArea.left / 100 - cropLeft),
|
2368
|
-
width: Math.round(displayFileWidth * motifArea.width / 100),
|
2369
|
-
height: Math.round(displayFileHeight * motifArea.height / 100)
|
2370
|
-
};
|
2371
|
-
return _objectSpread2(_objectSpread2({}, file), {}, {
|
2372
|
-
cropPosition: cropPosition,
|
2373
|
-
motifArea: motifArea,
|
2374
|
-
motifAreaOffsetRect: motifAreaOffsetRect
|
2375
|
-
});
|
2376
|
-
}
|
2377
|
-
|
2378
|
-
function useVideoQualitySetting() {
|
2379
|
-
var _useSetting = useSetting('videoQuality'),
|
2380
|
-
_useSetting2 = _slicedToArray(_useSetting, 2),
|
2381
|
-
value = _useSetting2[0],
|
2382
|
-
setValue = _useSetting2[1];
|
2383
|
-
|
2384
|
-
return [value || 'auto', setValue];
|
2385
|
-
}
|
2386
|
-
|
2387
|
-
browser.feature('dash', function () {
|
2388
|
-
return true;
|
2389
|
-
});
|
2390
|
-
browser.feature('video', function () {
|
2391
|
-
return true;
|
2392
|
-
});
|
2393
|
-
browser.feature('highdef', function () {
|
2394
|
-
return true;
|
2395
|
-
});
|
2396
|
-
function sources(videoFile) {
|
2397
|
-
var quality = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
|
2398
|
-
|
2399
|
-
if (typeof window !== 'undefined') {
|
2400
|
-
if (!browser.has('video')) {
|
2401
|
-
return [];
|
2402
|
-
}
|
2403
|
-
|
2404
|
-
if (!browser.has('highdef')) {
|
2405
|
-
return [{
|
2406
|
-
type: 'video/mp4',
|
2407
|
-
src: videoFile.urls.high
|
2408
|
-
}];
|
2409
|
-
}
|
2410
|
-
|
2411
|
-
if (!browser.has('dash')) {
|
2412
|
-
return [{
|
2413
|
-
type: 'video/mp4',
|
2414
|
-
src: videoFile.urls['4k'] || videoFile.urls.fullhd || videoFile.urls.high
|
2415
|
-
}];
|
2416
|
-
}
|
2417
|
-
}
|
2418
|
-
|
2419
|
-
if (quality === 'auto') {
|
2420
|
-
var result = [{
|
2421
|
-
type: 'application/x-mpegURL',
|
2422
|
-
src: videoFile.urls['hls-playlist']
|
2423
|
-
}, {
|
2424
|
-
type: 'video/mp4',
|
2425
|
-
src: videoFile.urls.high
|
2426
|
-
}];
|
2427
|
-
|
2428
|
-
if (videoFile.urls['dash-playlist']) {
|
2429
|
-
result = [{
|
2430
|
-
type: 'application/dash+xml',
|
2431
|
-
src: videoFile.urls['dash-playlist']
|
2432
|
-
}].concat(result);
|
2433
|
-
}
|
2434
|
-
|
2435
|
-
return result;
|
2436
|
-
} else {
|
2437
|
-
if (!videoFile.urls[quality]) {
|
2438
|
-
quality = 'high';
|
2439
|
-
}
|
2440
|
-
|
2441
|
-
return [{
|
2442
|
-
type: 'video/mp4',
|
2443
|
-
src: videoFile.urls[quality]
|
2444
|
-
}];
|
2445
|
-
}
|
2446
|
-
}
|
2447
|
-
|
2448
|
-
function VideoStructuredData(_ref) {
|
2449
|
-
var file = _ref.file;
|
2450
|
-
var entryMedadata = useEntryMetadata();
|
2451
|
-
var data = {
|
2452
|
-
'@context': 'http://schema.org',
|
2453
|
-
'@type': 'VideoObject',
|
2454
|
-
name: file.basename,
|
2455
|
-
description: file.configuration.alt,
|
2456
|
-
url: ensureProtocol('https', file.urls.high),
|
2457
|
-
thumbnailUrl: ensureProtocol('https', file.urls.posterMedium),
|
2458
|
-
width: file.width,
|
2459
|
-
height: file.height,
|
2460
|
-
duration: formatTimeDuration(file.durationInMs),
|
2461
|
-
datePublished: entryMedadata.publishedAt,
|
2462
|
-
uploadDate: file.createdAt,
|
2463
|
-
copyrightHolder: {
|
2464
|
-
'@type': 'Organization',
|
2465
|
-
name: file.rights
|
2466
|
-
}
|
2467
|
-
};
|
2468
|
-
return /*#__PURE__*/React.createElement(StructuredData, {
|
2469
|
-
data: data
|
2470
|
-
});
|
2471
|
-
}
|
2472
|
-
|
2473
|
-
/**
|
2474
|
-
* Render video file in MediaPlayer.
|
2475
|
-
*
|
2476
|
-
* @param {Object} props
|
2477
|
-
* @param {Object} props.videoFile - Video file obtained via `useFile`.
|
2478
|
-
* @param {number} [props.posterImageFile] - Poster image file obtained via `useFile`.
|
2479
|
-
* @param {number} [props.defaultTextTrackFileId] - Perma id of default text track file.
|
2480
|
-
* @param {string} [props.load] - Control lazy loading. `"auto"` (default), `"poster"` or `"none"`.
|
2481
|
-
* @param {String} [props.fit] - `"contain"` (default) or `"cover"`.
|
2482
|
-
*/
|
2483
|
-
|
2484
|
-
function VideoPlayer(_ref) {
|
2485
|
-
var videoFile = _ref.videoFile,
|
2486
|
-
posterImageFile = _ref.posterImageFile,
|
2487
|
-
props = _objectWithoutProperties(_ref, ["videoFile", "posterImageFile"]);
|
2488
|
-
|
2489
|
-
var _useVideoQualitySetti = useVideoQualitySetting(),
|
2490
|
-
_useVideoQualitySetti2 = _slicedToArray(_useVideoQualitySetti, 1),
|
2491
|
-
activeQuality = _useVideoQualitySetti2[0];
|
2492
|
-
|
2493
|
-
var textTracks = useTextTracks({
|
2494
|
-
file: videoFile,
|
2495
|
-
defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
|
2496
|
-
captionsByDefault: useMediaMuted()
|
2497
|
-
});
|
2498
|
-
|
2499
|
-
if (videoFile && videoFile.isReady) {
|
2500
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaPlayer, Object.assign({
|
2501
|
-
type: 'video',
|
2502
|
-
fit: props.fit,
|
2503
|
-
textTracks: textTracks,
|
2504
|
-
filePermaId: videoFile.permaId,
|
2505
|
-
sources: sources(videoFile, activeQuality),
|
2506
|
-
textTracksInset: true,
|
2507
|
-
posterImageUrl: posterImageFile && posterImageFile.isReady ? posterImageFile.urls.large : videoFile.urls.posterLarge,
|
2508
|
-
altText: videoFile.configuration.alt,
|
2509
|
-
objectPosition: props.fit === 'cover' ? videoFile.cropPosition : undefined
|
2510
|
-
}, props)), /*#__PURE__*/React.createElement(VideoStructuredData, {
|
2511
|
-
file: videoFile
|
2512
|
-
}));
|
2513
|
-
}
|
2514
|
-
|
2515
|
-
return null;
|
2516
|
-
}
|
2517
|
-
VideoPlayer.defaultProps = {
|
2518
|
-
fit: 'contain',
|
2519
|
-
controls: true
|
2520
|
-
};
|
2521
|
-
|
2522
|
-
function BackgroundVideo(_ref) {
|
2523
|
-
var video = _ref.video,
|
2524
|
-
onMotifAreaUpdate = _ref.onMotifAreaUpdate,
|
2525
|
-
containerDimension = _ref.containerDimension;
|
2526
|
-
|
2527
|
-
var _usePlayerState = usePlayerState(),
|
2528
|
-
_usePlayerState2 = _slicedToArray(_usePlayerState, 2),
|
2529
|
-
playerState = _usePlayerState2[0],
|
2530
|
-
playerActions = _usePlayerState2[1];
|
2531
|
-
|
2532
|
-
var _useSectionLifecycle = useSectionLifecycle({
|
2533
|
-
onVisible: function onVisible() {
|
2534
|
-
playerActions.changeVolumeFactor(0, 0);
|
2535
|
-
playerActions.play();
|
2536
|
-
},
|
2537
|
-
onActivate: function onActivate() {
|
2538
|
-
playerActions.changeVolumeFactor(1, 1000);
|
2539
|
-
},
|
2540
|
-
onDeactivate: function onDeactivate() {
|
2541
|
-
playerActions.changeVolumeFactor(0, 1000);
|
2542
|
-
},
|
2543
|
-
onInvisible: function onInvisible() {
|
2544
|
-
playerActions.pause();
|
2545
|
-
}
|
2546
|
-
}),
|
2547
|
-
shouldLoad = _useSectionLifecycle.shouldLoad,
|
2548
|
-
shouldPrepare = _useSectionLifecycle.shouldPrepare;
|
2549
|
-
|
2550
|
-
useEffect(function () {
|
2551
|
-
var documentState = documentHiddenState(function (visibilityState) {
|
2552
|
-
if (visibilityState === 'hidden') {
|
2553
|
-
playerActions.pause();
|
2554
|
-
} else {
|
2555
|
-
playerActions.play();
|
2556
|
-
}
|
2557
|
-
});
|
2558
|
-
return function () {
|
2559
|
-
documentState.removeCallback();
|
2560
|
-
};
|
2561
|
-
}, [playerActions]);
|
2562
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VideoPlayer, {
|
2563
|
-
load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
|
2564
|
-
playerState: playerState,
|
2565
|
-
playerActions: playerActions,
|
2566
|
-
videoFile: video,
|
2567
|
-
textTracksDisabled: true,
|
2568
|
-
fit: "cover",
|
2569
|
-
loop: true,
|
2570
|
-
playsInline: true
|
2571
|
-
}), /*#__PURE__*/React.createElement(MotifArea, {
|
2572
|
-
key: video.permaId,
|
2573
|
-
onUpdate: onMotifAreaUpdate,
|
2574
|
-
file: video,
|
2575
|
-
containerWidth: containerDimension.width,
|
2576
|
-
containerHeight: containerDimension.height
|
2577
|
-
}));
|
2578
|
-
}
|
2579
|
-
|
2580
|
-
/**
|
2581
|
-
* Returns boolean indicating whether viewport orientation is currently
|
2582
|
-
* portrait.
|
2583
|
-
*/
|
2584
|
-
|
2585
|
-
function usePortraitOrientation() {
|
2586
|
-
return useMediaQuery('(orientation: portrait)');
|
2587
|
-
}
|
2588
|
-
|
2589
|
-
var styles$8 = {"root":"Image-module_root__1ef3j"};
|
2590
|
-
|
2591
|
-
function ImageStructuredData(_ref) {
|
2592
|
-
var file = _ref.file;
|
2593
|
-
var entryMedadata = useEntryMetadata();
|
2594
|
-
var data = {
|
2595
|
-
'@context': 'http://schema.org',
|
2596
|
-
'@type': 'ImageObject',
|
2597
|
-
name: file.basename,
|
2598
|
-
description: file.configuration.alt,
|
2599
|
-
url: ensureProtocol('https', file.urls.large),
|
2600
|
-
width: file.width,
|
2601
|
-
height: file.height,
|
2602
|
-
datePublished: entryMedadata.publishedAt,
|
2603
|
-
uploadDate: file.createdAt,
|
2604
|
-
copyrightHolder: {
|
2605
|
-
'@type': 'Organization',
|
2606
|
-
name: file.rights
|
2607
|
-
}
|
2608
|
-
};
|
2609
|
-
return /*#__PURE__*/React.createElement(StructuredData, {
|
2610
|
-
data: data
|
2611
|
-
});
|
2612
|
-
}
|
2613
|
-
|
2614
|
-
/**
|
2615
|
-
* Render an image file.
|
2616
|
-
*
|
2617
|
-
* @param {Object} props
|
2618
|
-
* @param {Object} props.imageFile - Image file obtained via `useFile`.
|
2619
|
-
* @param {string} [props.variant] - Paperclip style to use. Defaults to large.
|
2620
|
-
* @param {boolean} [props.load] - Whether to load the image. Can be used for lazy loading.
|
2621
|
-
* @param {boolean} [props.structuredData] - Whether to render a JSON+LD script tag.
|
2622
|
-
*/
|
2623
|
-
|
2624
|
-
function Image(_ref) {
|
2625
|
-
var imageFile = _ref.imageFile,
|
2626
|
-
props = _objectWithoutProperties(_ref, ["imageFile"]);
|
2627
|
-
|
2628
|
-
if (imageFile && imageFile.isReady && props.load) {
|
2629
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, renderImageTag(props, imageFile), renderStructuredData(props, imageFile));
|
2630
|
-
}
|
2631
|
-
|
2632
|
-
return null;
|
2633
|
-
}
|
2634
|
-
|
2635
|
-
function renderImageTag(props, imageFile) {
|
2636
|
-
var cropPositionX = imageFile.cropPosition ? imageFile.cropPosition.x : 50;
|
2637
|
-
var cropPositionY = imageFile.cropPosition ? imageFile.cropPosition.y : 50;
|
2638
|
-
return /*#__PURE__*/React.createElement("img", {
|
2639
|
-
className: classNames(styles$8.root),
|
2640
|
-
src: imageFile.urls[props.variant],
|
2641
|
-
alt: imageFile.configuration.alt ? imageFile.configuration.alt : '',
|
2642
|
-
style: {
|
2643
|
-
objectPosition: "".concat(cropPositionX, "% ").concat(cropPositionY, "%")
|
2644
|
-
}
|
2645
|
-
});
|
2646
|
-
}
|
2647
|
-
|
2648
|
-
function renderStructuredData(props, file) {
|
2649
|
-
if (props.structuredData && file) {
|
2650
|
-
return /*#__PURE__*/React.createElement(ImageStructuredData, {
|
2651
|
-
file: file
|
2652
|
-
});
|
2653
|
-
}
|
2654
|
-
}
|
2655
|
-
|
2656
|
-
Image.defaultProps = {
|
2657
|
-
load: true,
|
2658
|
-
variant: 'large'
|
2659
|
-
};
|
2660
|
-
|
2661
|
-
function BackgroundImage(_ref) {
|
2662
|
-
var image = _ref.image,
|
2663
|
-
onMotifAreaUpdate = _ref.onMotifAreaUpdate,
|
2664
|
-
containerDimension = _ref.containerDimension;
|
2665
|
-
|
2666
|
-
var _useSectionLifecycle = useSectionLifecycle(),
|
2667
|
-
shouldLoad = _useSectionLifecycle.shouldLoad;
|
2668
|
-
|
2669
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Image, {
|
2670
|
-
imageFile: image,
|
2671
|
-
load: shouldLoad,
|
2672
|
-
structuredData: true
|
2673
|
-
}), /*#__PURE__*/React.createElement(MotifArea, {
|
2674
|
-
key: image === null || image === void 0 ? void 0 : image.permaId,
|
2675
|
-
onUpdate: onMotifAreaUpdate,
|
2676
|
-
file: image,
|
2677
|
-
containerWidth: containerDimension.width,
|
2678
|
-
containerHeight: containerDimension.height
|
2679
|
-
}));
|
2680
|
-
}
|
2681
|
-
|
2682
|
-
function OrientationAwareBackgroundImage(_ref) {
|
2683
|
-
var image = _ref.image,
|
2684
|
-
onMotifAreaUpdate = _ref.onMotifAreaUpdate,
|
2685
|
-
imageMobile = _ref.imageMobile,
|
2686
|
-
containerDimension = _ref.containerDimension;
|
2687
|
-
var mobile = usePortraitOrientation();
|
2688
|
-
|
2689
|
-
if (mobile) {
|
2690
|
-
return /*#__PURE__*/React.createElement(BackgroundImage, {
|
2691
|
-
image: imageMobile,
|
2692
|
-
onMotifAreaUpdate: onMotifAreaUpdate,
|
2693
|
-
containerDimension: containerDimension
|
2694
|
-
});
|
2695
|
-
} else {
|
2696
|
-
return /*#__PURE__*/React.createElement(BackgroundImage, {
|
2697
|
-
image: image,
|
2698
|
-
onMotifAreaUpdate: onMotifAreaUpdate,
|
2699
|
-
containerDimension: containerDimension
|
2700
|
-
});
|
2701
|
-
}
|
2702
|
-
}
|
2703
|
-
|
2704
|
-
function BackgroundAsset(props) {
|
2705
|
-
var video = useBackgroundFile({
|
2706
|
-
file: useFile({
|
2707
|
-
collectionName: 'videoFiles',
|
2708
|
-
permaId: props.video
|
2709
|
-
}),
|
2710
|
-
motifArea: props.videoMotifArea,
|
2711
|
-
containerDimension: props.containerDimension
|
2712
|
-
});
|
2713
|
-
var image = useBackgroundFile({
|
2714
|
-
file: useFile({
|
2715
|
-
collectionName: 'imageFiles',
|
2716
|
-
permaId: props.image
|
2717
|
-
}),
|
2718
|
-
motifArea: props.imageMotifArea,
|
2719
|
-
containerDimension: props.containerDimension
|
2720
|
-
});
|
2721
|
-
var imageMobile = useBackgroundFile({
|
2722
|
-
file: useFile({
|
2723
|
-
collectionName: 'imageFiles',
|
2724
|
-
permaId: props.imageMobile
|
2725
|
-
}),
|
2726
|
-
motifArea: props.imageMobileMotifArea,
|
2727
|
-
containerDimension: props.containerDimension
|
2728
|
-
});
|
2729
|
-
|
2730
|
-
if (video) {
|
2731
|
-
return /*#__PURE__*/React.createElement(Fullscreen, {
|
2732
|
-
ref: props.setContainerRef
|
2733
|
-
}, /*#__PURE__*/React.createElement(BackgroundVideo, {
|
2734
|
-
video: video,
|
2735
|
-
onMotifAreaUpdate: props.onMotifAreaUpdate,
|
2736
|
-
containerDimension: props.containerDimension
|
2737
|
-
}));
|
2738
|
-
} else if (props.color || props.image && props.image.toString().startsWith('#')) {
|
2739
|
-
return /*#__PURE__*/React.createElement(FillColor, {
|
2740
|
-
color: props.color || props.image
|
2741
|
-
});
|
2742
|
-
} else {
|
2743
|
-
return /*#__PURE__*/React.createElement(Fullscreen, {
|
2744
|
-
ref: props.setContainerRef
|
2745
|
-
}, renderBackgroundImage({
|
2746
|
-
image: image,
|
2747
|
-
imageMobile: imageMobile,
|
2748
|
-
onMotifAreaUpdate: props.onMotifAreaUpdate,
|
2749
|
-
containerDimension: props.containerDimension
|
2750
|
-
}));
|
2751
|
-
}
|
2752
|
-
}
|
2753
|
-
|
2754
|
-
function renderBackgroundImage(_ref) {
|
2755
|
-
var image = _ref.image,
|
2756
|
-
imageMobile = _ref.imageMobile,
|
2757
|
-
onMotifAreaUpdate = _ref.onMotifAreaUpdate,
|
2758
|
-
containerDimension = _ref.containerDimension;
|
2759
|
-
|
2760
|
-
if (image && imageMobile) {
|
2761
|
-
return /*#__PURE__*/React.createElement(OrientationAwareBackgroundImage, {
|
2762
|
-
image: image,
|
2763
|
-
imageMobile: imageMobile,
|
2764
|
-
onMotifAreaUpdate: onMotifAreaUpdate,
|
2765
|
-
containerDimension: containerDimension
|
2766
|
-
});
|
2767
|
-
} else {
|
2768
|
-
return /*#__PURE__*/React.createElement(BackgroundImage, {
|
2769
|
-
image: image || imageMobile,
|
2770
|
-
onMotifAreaUpdate: onMotifAreaUpdate,
|
2771
|
-
containerDimension: containerDimension
|
2772
|
-
});
|
2773
|
-
}
|
2774
|
-
}
|
2775
|
-
|
2776
|
-
var styles$9 = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","defaultBackground":"Backdrop-module_defaultBackground__1YQQL"};
|
2777
|
-
|
2778
|
-
function Backdrop(props) {
|
2779
|
-
var _useDimension = useDimension(),
|
2780
|
-
_useDimension2 = _slicedToArray(_useDimension, 2),
|
2781
|
-
containerDimension = _useDimension2[0],
|
2782
|
-
setContainerRef = _useDimension2[1];
|
2783
|
-
|
2784
|
-
return /*#__PURE__*/React.createElement("div", {
|
2785
|
-
className: classNames(styles$9.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
|
2786
|
-
}, /*#__PURE__*/React.createElement("div", {
|
2787
|
-
className: props.transitionStyles.backdropInner
|
2788
|
-
}, /*#__PURE__*/React.createElement("div", {
|
2789
|
-
className: classNames(styles$9.defaultBackground, props.transitionStyles.backdropInner2)
|
2790
|
-
}, props.children( /*#__PURE__*/React.createElement(BackgroundAsset, Object.assign({}, props, {
|
2791
|
-
containerDimension: containerDimension,
|
2792
|
-
setContainerRef: setContainerRef
|
2793
|
-
}))))));
|
2794
|
-
}
|
2795
|
-
Backdrop.defaultProps = {
|
2796
|
-
children: function children(_children) {
|
2797
|
-
return _children;
|
2798
|
-
},
|
2799
|
-
transitionStyles: {}
|
2800
|
-
};
|
2801
|
-
|
2802
|
-
function isIntersectingX(rectA, rectB) {
|
2803
|
-
return rectA.left < rectB.right && rectA.right > rectB.left || rectB.left < rectA.right && rectB.right > rectA.left;
|
2804
|
-
}
|
2805
|
-
|
2806
|
-
function getBoundingClientRect(el) {
|
2807
|
-
if (!el) {
|
2808
|
-
return {
|
2809
|
-
left: 0,
|
2810
|
-
right: 0,
|
2811
|
-
top: 0,
|
2812
|
-
bottom: 0,
|
2813
|
-
width: 0,
|
2814
|
-
height: 0
|
2815
|
-
};
|
2816
|
-
}
|
2817
|
-
|
2818
|
-
return el.getBoundingClientRect();
|
2819
|
-
}
|
2820
|
-
|
2821
|
-
function useBoundingClientRect() {
|
2822
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
2823
|
-
_ref$updateOnScrollAn = _ref.updateOnScrollAndResize,
|
2824
|
-
updateOnScrollAndResize = _ref$updateOnScrollAn === void 0 ? true : _ref$updateOnScrollAn,
|
2825
|
-
_ref$dependencies = _ref.dependencies,
|
2826
|
-
dependencies = _ref$dependencies === void 0 ? [] : _ref$dependencies;
|
2827
|
-
|
2828
|
-
var _useState = useState(getBoundingClientRect(null)),
|
2829
|
-
_useState2 = _slicedToArray(_useState, 2),
|
2830
|
-
boundingClientRect = _useState2[0],
|
2831
|
-
setBoundingClientRect = _useState2[1];
|
2832
|
-
|
2833
|
-
var _useState3 = useState(null),
|
2834
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
2835
|
-
currentNode = _useState4[0],
|
2836
|
-
setCurrentNode = _useState4[1];
|
2837
|
-
|
2838
|
-
var measureRef = useCallback(function (node) {
|
2839
|
-
setCurrentNode(node);
|
2840
|
-
setBoundingClientRect(getBoundingClientRect(node));
|
2841
|
-
}, []);
|
2842
|
-
useIsomorphicLayoutEffect(function () {
|
2843
|
-
if (dependencies.length && currentNode) {
|
2844
|
-
setBoundingClientRect(getBoundingClientRect(currentNode));
|
2845
|
-
}
|
2846
|
-
}, dependencies);
|
2847
|
-
useEffect(function () {
|
2848
|
-
function handler() {
|
2849
|
-
setBoundingClientRect(getBoundingClientRect(currentNode));
|
2850
|
-
}
|
2851
|
-
|
2852
|
-
if (!currentNode || !updateOnScrollAndResize) {
|
2853
|
-
return;
|
2854
|
-
}
|
2855
|
-
|
2856
|
-
window.addEventListener('resize', handler);
|
2857
|
-
window.addEventListener('scroll', handler);
|
2858
|
-
return function () {
|
2859
|
-
window.removeEventListener('resize', handler);
|
2860
|
-
window.removeEventListener('scroll', handler);
|
2861
|
-
};
|
2862
|
-
}, [currentNode, updateOnScrollAndResize]);
|
2863
|
-
return [boundingClientRect, measureRef];
|
2864
|
-
}
|
2865
|
-
|
2866
|
-
/**
|
2867
|
-
* Handles the state of the section layout based on the current
|
2868
|
-
* position of content and motif area. Returns an array of the form:
|
2869
|
-
*
|
2870
|
-
* [
|
2871
|
-
* {
|
2872
|
-
* isContentPadded, // true if motif and content will
|
2873
|
-
* // not fit side by side.
|
2874
|
-
*
|
2875
|
-
* intersectionRatioY, // Ratio of the motif area that is
|
2876
|
-
* // covered by the content given the
|
2877
|
-
* // current scroll position if motif
|
2878
|
-
* // is exposed.
|
2879
|
-
*
|
2880
|
-
* paddingTop, // Distance to shift down the content
|
2881
|
-
* // to ensure the motif area can be
|
2882
|
-
* // seen when entering the section.
|
2883
|
-
*
|
2884
|
-
* minHeight, // Min Height of the section to ensure
|
2885
|
-
* // the motif area can be seen.
|
2886
|
-
* },
|
2887
|
-
* setMotifAreaRectRef, // Assign motif area element that shall be
|
2888
|
-
* // measured.
|
2889
|
-
*
|
2890
|
-
* setContentAreaRef // Assign content area element that
|
2891
|
-
* // shall be measured.
|
2892
|
-
* ]
|
2893
|
-
*
|
2894
|
-
* @param {Object} options
|
2895
|
-
* @param {string[]} transitions - Names of the section's enter and exit
|
2896
|
-
* transitions.
|
2897
|
-
* @param {boolean} fullHeight - Whether the section has full or dynamic
|
2898
|
-
* height.
|
2899
|
-
* @param {boolean} empty - Whether the section contains content
|
2900
|
-
* elements.
|
2901
|
-
* @param {boolean} exposeMotifArea - Whether to pad content down if it
|
2902
|
-
* would otherwise intersect with the motif area.
|
2903
|
-
*
|
2904
|
-
* @private
|
2905
|
-
*/
|
2906
|
-
|
2907
|
-
function useMotifAreaState() {
|
2908
|
-
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
2909
|
-
transitions = _ref.transitions,
|
2910
|
-
fullHeight = _ref.fullHeight,
|
2911
|
-
empty = _ref.empty,
|
2912
|
-
exposeMotifArea = _ref.exposeMotifArea,
|
2913
|
-
updateOnScrollAndResize = _ref.updateOnScrollAndResize;
|
2914
|
-
|
2915
|
-
var _useBoundingClientRec = useBoundingClientRect({
|
2916
|
-
updateOnScrollAndResize: updateOnScrollAndResize
|
2917
|
-
}),
|
2918
|
-
_useBoundingClientRec2 = _slicedToArray(_useBoundingClientRec, 2),
|
2919
|
-
motifAreaRect = _useBoundingClientRec2[0],
|
2920
|
-
setMotifAreaRectRef = _useBoundingClientRec2[1];
|
2921
|
-
|
2922
|
-
var _useDimension = useDimension(),
|
2923
|
-
_useDimension2 = _slicedToArray(_useDimension, 2),
|
2924
|
-
motifAreaDimension = _useDimension2[0],
|
2925
|
-
setMotifAreaDimensionRef = _useDimension2[1];
|
2926
|
-
|
2927
|
-
var _useState = useState(false),
|
2928
|
-
_useState2 = _slicedToArray(_useState, 2),
|
2929
|
-
isPadded = _useState2[0],
|
2930
|
-
setIsPadded = _useState2[1];
|
2931
|
-
|
2932
|
-
var setMotifAreaRef = useCallback(function (node) {
|
2933
|
-
setMotifAreaRectRef(node);
|
2934
|
-
setMotifAreaDimensionRef(node);
|
2935
|
-
}, [setMotifAreaRectRef, setMotifAreaDimensionRef]);
|
2936
|
-
|
2937
|
-
var _useBoundingClientRec3 = useBoundingClientRect({
|
2938
|
-
updateOnScrollAndResize: updateOnScrollAndResize,
|
2939
|
-
dependencies: [isPadded]
|
2940
|
-
}),
|
2941
|
-
_useBoundingClientRec4 = _slicedToArray(_useBoundingClientRec3, 2),
|
2942
|
-
contentAreaRect = _useBoundingClientRec4[0],
|
2943
|
-
setContentAreaRef = _useBoundingClientRec4[1];
|
2944
|
-
|
2945
|
-
var isContentPadded = exposeMotifArea && isIntersectingX(motifAreaRect, contentAreaRect) && motifAreaRect.height > 0 && !empty;
|
2946
|
-
var paddingTop = getMotifAreaPadding(isContentPadded, transitions, motifAreaDimension); // Force measuring content area again since applying the padding
|
2947
|
-
// changes the intersection ratio.
|
2948
|
-
|
2949
|
-
var willBePadded = paddingTop > 0;
|
2950
|
-
useEffect(function () {
|
2951
|
-
setIsPadded(willBePadded);
|
2952
|
-
}, [willBePadded]);
|
2953
|
-
return [{
|
2954
|
-
paddingTop: paddingTop,
|
2955
|
-
isContentPadded: isContentPadded,
|
2956
|
-
minHeight: getMotifAreaMinHeight(fullHeight, transitions, motifAreaDimension),
|
2957
|
-
intersectionRatioY: getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect)
|
2958
|
-
}, setMotifAreaRef, setContentAreaRef];
|
2959
|
-
}
|
2960
|
-
|
2961
|
-
function getMotifAreaPadding(isContentPadded, transitions, motifAreaDimension) {
|
2962
|
-
if (!isContentPadded) {
|
2963
|
-
return;
|
2964
|
-
}
|
2965
|
-
|
2966
|
-
if (transitions[0] === 'fadeIn' || transitions[0] === 'fadeInBg') {
|
2967
|
-
// Once the section has become active, the backdrop becomes
|
2968
|
-
// visible all at once. Motif area aware background positioning
|
2969
|
-
// ensures that the motif area is within the viewport. Still, when
|
2970
|
-
// scrolling fast, the top of the section will already have
|
2971
|
-
// reached the top of the viewport once the fade transitions ends.
|
2972
|
-
//
|
2973
|
-
// If the motif area is at the top of the backdrop, adding its
|
2974
|
-
// height as padding is enough to ensure that the content does not
|
2975
|
-
// immediately start intersecting.
|
2976
|
-
//
|
2977
|
-
// If the motif area is at the bottom of the backdrop, additional
|
2978
|
-
// padding is needed to prevent the content from hiding the motif
|
2979
|
-
// right at the start. Adding the full top distance of the motif
|
2980
|
-
// area, though, means a full viewport height has to be scrolled
|
2981
|
-
// by after the content of the previous section has been faded out
|
2982
|
-
// before the content of the section enters the viewport.
|
2983
|
-
// Subjectively, this feels like to little feedback that more
|
2984
|
-
// content is coming. We therefore reduce the additional distance
|
2985
|
-
// by a third.
|
2986
|
-
return motifAreaDimension.top * 2 / 3 + motifAreaDimension.height;
|
2987
|
-
}
|
2988
|
-
|
2989
|
-
if (transitions[0] === 'reveal') {
|
2990
|
-
// The backdrop remains in a fixed position while the content is
|
2991
|
-
// being scrolled in. Shifting the content down by the height of
|
2992
|
-
// the motif area means the motif area will be completely visible
|
2993
|
-
// when the top of the section aligns with the top of the motif
|
2994
|
-
// area.
|
2995
|
-
//
|
2996
|
-
// For exit transition `scrollOut`, the min height determined
|
2997
|
-
// below, ensures that the top of the section can actually reach
|
2998
|
-
// that position before the section begins to scroll.
|
2999
|
-
return motifAreaDimension.height;
|
3000
|
-
} else {
|
3001
|
-
// In the remaining `scrollIn` case, content and backdrop move in
|
3002
|
-
// together. We need to shift content down below the motif.
|
3003
|
-
return motifAreaDimension.top + motifAreaDimension.height;
|
3004
|
-
}
|
3005
|
-
}
|
3006
|
-
|
3007
|
-
function getMotifAreaMinHeight(fullHeight, transitions, motifAreaDimension) {
|
3008
|
-
if (fullHeight) {
|
3009
|
-
return;
|
3010
|
-
}
|
3011
|
-
|
3012
|
-
if (transitions[0] === 'reveal') {
|
3013
|
-
if (transitions[1] === 'conceal') {
|
3014
|
-
// Ensure section is tall enough to reveal the full height of
|
3015
|
-
// the motif area once the section passes it.
|
3016
|
-
return motifAreaDimension.height;
|
3017
|
-
} else {
|
3018
|
-
// Ensure backdrop can be revealed far enough before the section
|
3019
|
-
// starts scrolling.
|
3020
|
-
return motifAreaDimension.bottom + motifAreaDimension.height;
|
3021
|
-
}
|
3022
|
-
} else {
|
3023
|
-
// Ensure motif is visible in scrolled in section.
|
3024
|
-
return motifAreaDimension.top + motifAreaDimension.height;
|
3025
|
-
}
|
3026
|
-
}
|
3027
|
-
|
3028
|
-
function getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect) {
|
3029
|
-
var motifAreaOverlap = Math.max(0, Math.min(motifAreaRect.height, motifAreaRect.bottom - contentAreaRect.top));
|
3030
|
-
return isContentPadded ? motifAreaOverlap / motifAreaRect.height : 0;
|
3031
|
-
}
|
3032
|
-
|
3033
|
-
function useScrollTarget(ref, isScrollTarget) {
|
3034
|
-
useEffect(function () {
|
3035
|
-
if (ref.current && isScrollTarget) {
|
3036
|
-
window.scrollTo({
|
3037
|
-
top: ref.current.getBoundingClientRect().top + window.scrollY - window.innerHeight * 0.25,
|
3038
|
-
behavior: 'smooth'
|
3039
|
-
});
|
3040
|
-
}
|
3041
|
-
}, [ref, isScrollTarget]);
|
3042
|
-
}
|
3043
|
-
|
3044
|
-
var DarkBackgroundContext = createContext(true);
|
3045
|
-
function BackgroundColorProvider(_ref) {
|
3046
|
-
var dark = _ref.dark,
|
3047
|
-
invert = _ref.invert,
|
3048
|
-
children = _ref.children;
|
3049
|
-
var previousValue = useDarkBackground();
|
3050
|
-
return /*#__PURE__*/React.createElement(DarkBackgroundContext.Provider, {
|
3051
|
-
value: getValue({
|
3052
|
-
dark: dark,
|
3053
|
-
invert: invert,
|
3054
|
-
previousValue: previousValue
|
3055
|
-
})
|
3056
|
-
}, children);
|
3057
|
-
}
|
3058
|
-
|
3059
|
-
function getValue(_ref2) {
|
3060
|
-
var dark = _ref2.dark,
|
3061
|
-
invert = _ref2.invert,
|
3062
|
-
previousValue = _ref2.previousValue;
|
3063
|
-
|
3064
|
-
if (dark !== undefined) {
|
3065
|
-
return dark;
|
3066
|
-
} else if (invert === true) {
|
3067
|
-
return !previousValue;
|
3068
|
-
} else {
|
3069
|
-
return previousValue;
|
3070
|
-
}
|
3071
|
-
}
|
3072
|
-
/**
|
3073
|
-
* Use to invert elements depending on whether they are rendered on a
|
3074
|
-
* dark or light background to ensure correct display in inverted
|
3075
|
-
* sections or in sections with card appearance.
|
3076
|
-
*
|
3077
|
-
* @return {boolean}
|
3078
|
-
*/
|
3079
|
-
|
3080
|
-
|
3081
|
-
function useDarkBackground() {
|
3082
|
-
return useContext(DarkBackgroundContext);
|
3083
|
-
}
|
3084
|
-
|
3085
|
-
var styles$a = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","Section":"Section-module_Section__Yo58b","narrow":"Section-module_narrow__3Dawu","invert":"Section-module_invert__3_p7F"};
|
3086
|
-
|
3087
|
-
var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
|
3088
|
-
|
3089
|
-
var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic"};
|
3090
|
-
|
3091
|
-
var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6"};
|
3092
|
-
|
3093
|
-
var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
|
3094
|
-
|
3095
|
-
var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","foreground":"fadeInConceal-module_foreground__3giM9","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
|
3096
|
-
|
3097
|
-
var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f"};
|
3098
|
-
|
3099
|
-
var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","foreground":"fadeInFadeOutBg-module_foreground__24f_M","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc"};
|
3100
|
-
|
3101
|
-
var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql"};
|
3102
|
-
|
3103
|
-
var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU utils-module_clip__34eot","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
|
3104
|
-
|
3105
|
-
var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF utils-module_clip__34eot","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
|
3106
|
-
|
3107
|
-
var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF utils-module_clip__34eot","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
|
3108
|
-
|
3109
|
-
var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd utils-module_clip__34eot","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
|
3110
|
-
|
3111
|
-
var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
|
3112
|
-
|
3113
|
-
var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-"};
|
3114
|
-
|
3115
|
-
var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau"};
|
3116
|
-
|
3117
|
-
var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
|
3118
|
-
|
3119
|
-
var styles$b = {
|
3120
|
-
fadeInBgConceal: fadeInBgConceal,
|
3121
|
-
fadeInBgFadeOut: fadeInBgFadeOut,
|
3122
|
-
fadeInBgFadeOutBg: fadeInBgFadeOutBg,
|
3123
|
-
fadeInBgScrollOut: fadeInBgScrollOut,
|
3124
|
-
fadeInConceal: fadeInConceal,
|
3125
|
-
fadeInFadeOut: fadeInFadeOut,
|
3126
|
-
fadeInFadeOutBg: fadeInFadeOutBg,
|
3127
|
-
fadeInScrollOut: fadeInScrollOut,
|
3128
|
-
revealConceal: revealConceal,
|
3129
|
-
revealFadeOut: revealFadeOut,
|
3130
|
-
revealFadeOutBg: revealFadeOutBg,
|
3131
|
-
revealScrollOut: revealScrollOut,
|
3132
|
-
scrollInConceal: scrollInConceal,
|
3133
|
-
scrollInFadeOut: scrollInFadeOut,
|
3134
|
-
scrollInFadeOutBg: scrollInFadeOutBg,
|
3135
|
-
scrollInScrollOut: scrollInScrollOut
|
3136
|
-
};
|
3137
|
-
var enterTransitions = {
|
3138
|
-
fade: 'fadeIn',
|
3139
|
-
fadeBg: 'fadeInBg',
|
3140
|
-
scroll: 'scrollIn',
|
3141
|
-
scrollOver: 'scrollIn',
|
3142
|
-
reveal: 'reveal',
|
3143
|
-
beforeAfter: 'reveal'
|
3144
|
-
};
|
3145
|
-
var exitTransitions = {
|
3146
|
-
fade: 'fadeOut',
|
3147
|
-
fadeBg: 'fadeOutBg',
|
3148
|
-
scroll: 'scrollOut',
|
3149
|
-
scrollOver: 'conceal',
|
3150
|
-
reveal: 'scrollOut',
|
3151
|
-
beforeAfter: 'conceal'
|
3152
|
-
};
|
3153
|
-
function getTransitionNames() {
|
3154
|
-
return Object.keys(exitTransitions);
|
3155
|
-
}
|
3156
|
-
function getAvailableTransitionNames(section, previousSection) {
|
3157
|
-
if (!section.fullHeight || !previousSection.fullHeight) {
|
3158
|
-
return getTransitionNames().filter(function (name) {
|
3159
|
-
return !name.startsWith('fade');
|
3160
|
-
});
|
3161
|
-
}
|
3162
|
-
|
3163
|
-
return getTransitionNames();
|
3164
|
-
}
|
3165
|
-
function getTransitionStyles(section, previousSection, nextSection) {
|
3166
|
-
var name = getTransitionStylesName(section, previousSection, nextSection);
|
3167
|
-
|
3168
|
-
if (!styles$b[name]) {
|
3169
|
-
throw new Error("Unknown transition ".concat(name));
|
3170
|
-
}
|
3171
|
-
|
3172
|
-
return styles$b[name];
|
3173
|
-
}
|
3174
|
-
function getEnterAndExitTransitions(section, previousSection, nextSection) {
|
3175
|
-
return [enterTransitions[getTransitionName(previousSection, section)], exitTransitions[getTransitionName(section, nextSection)]];
|
3176
|
-
}
|
3177
|
-
function getTransitionStylesName(section, previousSection, nextSection) {
|
3178
|
-
var _getEnterAndExitTrans = getEnterAndExitTransitions(section, previousSection, nextSection),
|
3179
|
-
_getEnterAndExitTrans2 = _slicedToArray(_getEnterAndExitTrans, 2),
|
3180
|
-
enter = _getEnterAndExitTrans2[0],
|
3181
|
-
exit = _getEnterAndExitTrans2[1];
|
3182
|
-
|
3183
|
-
return "".concat(enter).concat(capitalize(exit));
|
3184
|
-
}
|
3185
|
-
|
3186
|
-
function getTransitionName(previousSection, section) {
|
3187
|
-
if (!section || !previousSection) {
|
3188
|
-
return 'scroll';
|
3189
|
-
}
|
3190
|
-
|
3191
|
-
if ((!section.fullHeight || !previousSection.fullHeight) && section.transition.startsWith('fade')) {
|
3192
|
-
return 'scroll';
|
3193
|
-
}
|
3194
|
-
|
3195
|
-
return section.transition;
|
3196
|
-
}
|
3197
|
-
|
3198
|
-
function capitalize(string) {
|
3199
|
-
return string.charAt(0).toUpperCase() + string.slice(1);
|
3200
|
-
}
|
3201
|
-
|
3202
|
-
function NoOpShadow(props) {
|
3203
|
-
return /*#__PURE__*/React.createElement("div", null, props.children);
|
3204
|
-
}
|
3205
|
-
|
3206
|
-
var styles$c = {"shadow":"GradientShadow-module_shadow__2UiDH","align-right":"GradientShadow-module_align-right__3iXZs","shadowBlack":"GradientShadow-module_shadowBlack__cSr14","align-left":"GradientShadow-module_align-left__3qcNM","intersecting":"GradientShadow-module_intersecting__h6vpz","align-center":"GradientShadow-module_align-center__2C7cl","align-centerRagged":"GradientShadow-module_align-centerRagged__2-iv8","shadowWhite":"GradientShadow-module_shadowWhite__3Xw2q"};
|
3207
|
-
|
3208
|
-
function GradientShadow(props) {
|
3209
|
-
// If motif area intersects with content area horizontally, fade in
|
3210
|
-
// shadow soon as the content has been scrolled far enough to start
|
3211
|
-
// intersecting with the motif area vertically. If motif area does
|
3212
|
-
// not intersect, always make it visible. Shadow appearance will then
|
3213
|
-
// depend on alignment (i.e. a gradient from the left).
|
3214
|
-
var opacityFactor = props.motifAreaState.isContentPadded ? // Make shadow reach full opacity when content has been scrolled
|
3215
|
-
// up half way across the motif area.
|
3216
|
-
roundToFirstDecimalPlace(Math.min(1, props.motifAreaState.intersectionRatioY * 2)) : 1;
|
3217
|
-
var opacity = props.motifAreaState.isContentPadded ? props.dynamicShadowOpacity : props.staticShadowOpacity;
|
3218
|
-
return /*#__PURE__*/React.createElement("div", {
|
3219
|
-
className: classNames(styles$c.root, styles$c["align-".concat(props.align)], _defineProperty({}, styles$c.intersecting, props.motifAreaState.isContentPadded))
|
3220
|
-
}, /*#__PURE__*/React.createElement("div", {
|
3221
|
-
className: classNames(styles$c.shadow, props.inverted ? styles$c.shadowWhite : styles$c.shadowBlack),
|
3222
|
-
style: {
|
3223
|
-
opacity: opacity * opacityFactor
|
3224
|
-
}
|
3225
|
-
}, /*#__PURE__*/React.createElement(Fullscreen, null)), props.children);
|
3226
|
-
}
|
3227
|
-
GradientShadow.defaultProps = {
|
3228
|
-
opacity: 0.7,
|
3229
|
-
align: 'left'
|
3230
|
-
};
|
3231
|
-
|
3232
|
-
function roundToFirstDecimalPlace(value) {
|
3233
|
-
return Math.round(value * 10) / 10;
|
3234
|
-
}
|
3235
|
-
|
3236
|
-
var styles$d = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
|
3237
|
-
|
3238
|
-
function InvisibleBoxWrapper(_ref) {
|
3239
|
-
var _classNames;
|
3240
|
-
|
3241
|
-
var position = _ref.position,
|
3242
|
-
openStart = _ref.openStart,
|
3243
|
-
openEnd = _ref.openEnd,
|
3244
|
-
children = _ref.children;
|
3245
|
-
return /*#__PURE__*/React.createElement("div", {
|
3246
|
-
className: classNames((_classNames = {}, _defineProperty(_classNames, styles$d.start, !openStart && position !== 'full'), _defineProperty(_classNames, styles$d.end, !openEnd && position !== 'full'), _classNames))
|
3247
|
-
}, children);
|
3248
|
-
}
|
3249
|
-
|
3250
|
-
var styles$e = {"wrapper":"GradientBox-module_wrapper__1Jj7N","content":"GradientBox-module_content__96lDk","shadow":"GradientBox-module_shadow__2XilX","long":"GradientBox-module_long__10s6v","gradient":"GradientBox-module_gradient__31tJ-","withShadow":"GradientBox-module_withShadow__3mhPR","shadowDark":"GradientBox-module_shadowDark__3Tv0L","shadowLight":"GradientBox-module_shadowLight__Bieg6","root":"GradientBox-module_root__8Xn9W"};
|
3251
|
-
|
3252
|
-
function GradientBox(props) {
|
3253
|
-
var _classNames;
|
3254
|
-
|
3255
|
-
return /*#__PURE__*/React.createElement("div", {
|
3256
|
-
className: classNames(styles$e.root, (_classNames = {}, _defineProperty(_classNames, styles$e.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$e["long"], props.coverInvisibleNextSection), _classNames)),
|
3257
|
-
style: {
|
3258
|
-
paddingTop: props.motifAreaState.paddingTop
|
3259
|
-
}
|
3260
|
-
}, /*#__PURE__*/React.createElement("div", {
|
3261
|
-
className: styles$e.wrapper
|
3262
|
-
}, /*#__PURE__*/React.createElement("div", {
|
3263
|
-
className: classNames(styles$e.shadow, props.inverted ? styles$e.shadowLight : styles$e.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
|
3264
|
-
style: {
|
3265
|
-
top: props.motifAreaState.paddingTop,
|
3266
|
-
opacity: props.staticShadowOpacity
|
3267
|
-
}
|
3268
|
-
}), /*#__PURE__*/React.createElement("div", {
|
3269
|
-
className: styles$e.content
|
3270
|
-
}, props.children)));
|
3271
|
-
}
|
3272
|
-
|
3273
|
-
var styles$f = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
|
3274
|
-
|
3275
|
-
function CardBox(props) {
|
3276
|
-
return /*#__PURE__*/React.createElement("div", {
|
3277
|
-
className: styles$f.wrapper,
|
3278
|
-
style: {
|
3279
|
-
paddingTop: props.motifAreaState.paddingTop
|
3280
|
-
}
|
3281
|
-
}, /*#__PURE__*/React.createElement("div", {
|
3282
|
-
className: styles$f.content
|
3283
|
-
}, props.children));
|
3284
|
-
}
|
3285
|
-
|
3286
|
-
var styles$g = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","card":"CardBoxWrapper-module_card__hvRUa","cardStart":"CardBoxWrapper-module_cardStart__2NywG","cardEnd":"CardBoxWrapper-module_cardEnd__x4Ye6","cardBgWhite":"CardBoxWrapper-module_cardBgWhite__xXhg7","cardBgBlack":"CardBoxWrapper-module_cardBgBlack__Ahp3s"};
|
3287
|
-
|
3288
|
-
var positionOutsideBox = ['sticky', 'wide', 'full'];
|
3289
|
-
function CardBoxWrapper(props) {
|
3290
|
-
return /*#__PURE__*/React.createElement("div", {
|
3291
|
-
className: className(props)
|
3292
|
-
}, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
|
3293
|
-
invert: !positionOutsideBox.includes(props.position)
|
3294
|
-
}, props.children));
|
3295
|
-
}
|
3296
|
-
|
3297
|
-
function className(props) {
|
3298
|
-
if (positionOutsideBox.includes(props.position)) {
|
3299
|
-
return undefined;
|
3300
|
-
}
|
3301
|
-
|
3302
|
-
return classNames(styles$g.card, props.inverted ? styles$g.cardBgBlack : styles$g.cardBgWhite, _defineProperty({}, styles$g.cardStart, !props.openStart), _defineProperty({}, styles$g.cardEnd, !props.openEnd));
|
3303
|
-
}
|
3304
|
-
|
3305
|
-
var components = {
|
3306
|
-
shadow: {
|
3307
|
-
Shadow: GradientShadow,
|
3308
|
-
Box: GradientBox,
|
3309
|
-
BoxWrapper: InvisibleBoxWrapper
|
3310
|
-
},
|
3311
|
-
transparent: {
|
3312
|
-
Shadow: NoOpShadow,
|
3313
|
-
Box: CardBox,
|
3314
|
-
BoxWrapper: InvisibleBoxWrapper
|
3315
|
-
},
|
3316
|
-
cards: {
|
3317
|
-
Shadow: NoOpShadow,
|
3318
|
-
Box: CardBox,
|
3319
|
-
BoxWrapper: CardBoxWrapper
|
3320
|
-
}
|
3321
|
-
};
|
3322
|
-
function getAppearanceComponents(appearance) {
|
3323
|
-
return components[appearance || 'shadow'];
|
3324
|
-
}
|
3325
|
-
|
3326
|
-
var Section = withInlineEditingDecorator('SectionDecorator', function Section(_ref) {
|
3327
|
-
var section = _ref.section,
|
3328
|
-
contentElements = _ref.contentElements,
|
3329
|
-
state = _ref.state,
|
3330
|
-
isScrollTarget = _ref.isScrollTarget,
|
3331
|
-
onActivate = _ref.onActivate;
|
3332
|
-
var ref = useRef();
|
3333
|
-
useScrollTarget(ref, isScrollTarget);
|
3334
|
-
var transitionStyles = getTransitionStyles(section, section.previousSection, section.nextSection);
|
3335
|
-
return /*#__PURE__*/React.createElement("section", {
|
3336
|
-
id: "section-".concat(section.permaId),
|
3337
|
-
ref: ref,
|
3338
|
-
className: classNames(styles$a.Section, transitionStyles.section, _defineProperty({}, styles$a.narrow, section.width === 'narrow'), _defineProperty({}, styles$a.invert, section.invert))
|
3339
|
-
}, /*#__PURE__*/React.createElement(SectionLifecycleProvider, {
|
3340
|
-
onActivate: onActivate,
|
3341
|
-
isLast: !section.nextSection
|
3342
|
-
}, /*#__PURE__*/React.createElement(SectionAtmo, {
|
3343
|
-
audioFilePermaId: section.atmoAudioFileId
|
3344
|
-
}), /*#__PURE__*/React.createElement(SectionContents, {
|
3345
|
-
section: section,
|
3346
|
-
contentElements: contentElements,
|
3347
|
-
state: state,
|
3348
|
-
transitionStyles: transitionStyles
|
3349
|
-
})));
|
3350
|
-
});
|
3351
|
-
|
3352
|
-
function SectionContents(_ref2) {
|
3353
|
-
var section = _ref2.section,
|
3354
|
-
contentElements = _ref2.contentElements,
|
3355
|
-
state = _ref2.state,
|
3356
|
-
transitionStyles = _ref2.transitionStyles;
|
95
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
3357
96
|
|
3358
|
-
|
3359
|
-
|
97
|
+
// Make sure Webpack loads chunks via asset host.
|
98
|
+
// Free variable assignment will be rewritten during Webpack compilation.
|
99
|
+
// See https://v4.webpack.js.org/guides/public-path/#on-the-fly
|
100
|
+
// PageflowScrolled::WebpackPublicPathHelper generates js snippet
|
101
|
+
// that defines the global. For Storybook, we set it to an empty default.
|
102
|
+
// eslint-disable-next-line no-undef
|
103
|
+
__webpack_public_path__ = commonjsGlobal.__webpack_public_path__ || '';
|
3360
104
|
|
3361
|
-
|
3362
|
-
return {
|
3363
|
-
layout: section.layout,
|
3364
|
-
invert: section.invert,
|
3365
|
-
sectionIndex: section.sectionIndex
|
3366
|
-
};
|
3367
|
-
}, [section.layout, section.invert, section.sectionIndex]);
|
3368
|
-
|
3369
|
-
var _useMotifAreaState = useMotifAreaState({
|
3370
|
-
updateOnScrollAndResize: shouldPrepare,
|
3371
|
-
exposeMotifArea: section.exposeMotifArea,
|
3372
|
-
transitions: getEnterAndExitTransitions(section, section.previousSection, section.nextSection),
|
3373
|
-
empty: !contentElements.length,
|
3374
|
-
sectionTransition: section.transition,
|
3375
|
-
fullHeight: section.fullHeight
|
3376
|
-
}),
|
3377
|
-
_useMotifAreaState2 = _slicedToArray(_useMotifAreaState, 4),
|
3378
|
-
motifAreaState = _useMotifAreaState2[0],
|
3379
|
-
setMotifAreaRef = _useMotifAreaState2[1],
|
3380
|
-
setContentAreaRef = _useMotifAreaState2[2],
|
3381
|
-
setForegroundContentRef = _useMotifAreaState2[3];
|
3382
|
-
|
3383
|
-
var _getAppearanceCompone = getAppearanceComponents(section.appearance),
|
3384
|
-
Shadow = _getAppearanceCompone.Shadow,
|
3385
|
-
Box = _getAppearanceCompone.Box,
|
3386
|
-
BoxWrapper = _getAppearanceCompone.BoxWrapper;
|
3387
|
-
|
3388
|
-
var staticShadowOpacity = percentToFraction(section.staticShadowOpacity, {
|
3389
|
-
defaultValue: 0.7
|
3390
|
-
});
|
3391
|
-
var dynamicShadowOpacity = percentToFraction(section.dynamicShadowOpacity, {
|
3392
|
-
defaultValue: 0.7
|
3393
|
-
});
|
3394
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Backdrop, Object.assign({}, section.backdrop, {
|
3395
|
-
onMotifAreaUpdate: setMotifAreaRef,
|
3396
|
-
state: state,
|
3397
|
-
transitionStyles: transitionStyles
|
3398
|
-
}), function (children) {
|
3399
|
-
return /*#__PURE__*/React.createElement(Shadow, {
|
3400
|
-
align: section.layout,
|
3401
|
-
inverted: section.invert,
|
3402
|
-
motifAreaState: motifAreaState,
|
3403
|
-
staticShadowOpacity: staticShadowOpacity,
|
3404
|
-
dynamicShadowOpacity: dynamicShadowOpacity
|
3405
|
-
}, children);
|
3406
|
-
}), /*#__PURE__*/React.createElement(Foreground, {
|
3407
|
-
transitionStyles: transitionStyles,
|
3408
|
-
state: state,
|
3409
|
-
inFirstSection: section.sectionIndex === 0,
|
3410
|
-
minHeight: motifAreaState.minHeight,
|
3411
|
-
paddingBottom: !endsWithFullWidthElement(contentElements),
|
3412
|
-
contentRef: setForegroundContentRef,
|
3413
|
-
heightMode: heightMode(section)
|
3414
|
-
}, /*#__PURE__*/React.createElement(Box, {
|
3415
|
-
inverted: section.invert,
|
3416
|
-
coverInvisibleNextSection: section.nextSection && section.nextSection.transition.startsWith('fade'),
|
3417
|
-
transitionStyles: transitionStyles,
|
3418
|
-
state: state,
|
3419
|
-
motifAreaState: motifAreaState,
|
3420
|
-
staticShadowOpacity: staticShadowOpacity
|
3421
|
-
}, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
|
3422
|
-
dark: !section.invert
|
3423
|
-
}, /*#__PURE__*/React.createElement(Layout, {
|
3424
|
-
sectionId: section.id,
|
3425
|
-
items: contentElements,
|
3426
|
-
appearance: section.appearance,
|
3427
|
-
contentAreaRef: setContentAreaRef,
|
3428
|
-
sectionProps: sectionProperties
|
3429
|
-
}, function (children, boxProps) {
|
3430
|
-
return /*#__PURE__*/React.createElement(BoxWrapper, Object.assign({}, boxProps, {
|
3431
|
-
inverted: section.invert
|
3432
|
-
}), children);
|
3433
|
-
})))));
|
3434
|
-
}
|
105
|
+
// iframes. Use polyfill instead.
|
3435
106
|
|
3436
|
-
|
3437
|
-
|
3438
|
-
sectionId: props.section.id
|
3439
|
-
});
|
3440
|
-
return /*#__PURE__*/React.createElement(Section, Object.assign({}, props, {
|
3441
|
-
contentElements: contentElements
|
3442
|
-
}));
|
107
|
+
if (browser.agent.matchesSafari() && window.parent !== window) {
|
108
|
+
delete window.IntersectionObserver;
|
3443
109
|
}
|
3444
110
|
|
3445
|
-
|
3446
|
-
|
3447
|
-
if (section.transition.startsWith('fade') && section.previousSection || section.nextSection && section.nextSection.transition.startsWith('fade')) {
|
3448
|
-
return 'fullFade';
|
3449
|
-
} else {
|
3450
|
-
return 'full';
|
3451
|
-
}
|
3452
|
-
}
|
3453
|
-
|
3454
|
-
return 'dynamic';
|
3455
|
-
}
|
111
|
+
require('intersection-observer'); // Make sure we're in a Browser-like environment before importing polyfills
|
112
|
+
// This prevents `fetch()` from being imported in a Node test environment
|
3456
113
|
|
3457
|
-
function endsWithFullWidthElement(elements) {
|
3458
|
-
var lastElement = elements[elements.length - 1];
|
3459
|
-
return lastElement && lastElement.position === 'full';
|
3460
|
-
}
|
3461
114
|
|
3462
|
-
|
3463
|
-
|
3464
|
-
return typeof value !== 'undefined' ? value / 100 : defaultValue;
|
115
|
+
if (typeof window !== 'undefined') {
|
116
|
+
require('whatwg-fetch');
|
3465
117
|
}
|
3466
118
|
|
3467
119
|
function Chapter(props) {
|
@@ -3479,7 +131,8 @@ function renderSections(sections, currentSectionIndex, setCurrentSection, scroll
|
|
3479
131
|
return sections.map(function (section) {
|
3480
132
|
return /*#__PURE__*/React.createElement(EventContextDataProvider, {
|
3481
133
|
key: section.permaId,
|
3482
|
-
section: section
|
134
|
+
section: section,
|
135
|
+
sectionsCount: sections.length
|
3483
136
|
}, /*#__PURE__*/React.createElement(ConnectedSection, {
|
3484
137
|
state: section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active',
|
3485
138
|
isScrollTarget: section.sectionIndex === scrollTargetSectionIndex,
|
@@ -3491,48 +144,77 @@ function renderSections(sections, currentSectionIndex, setCurrentSection, scroll
|
|
3491
144
|
});
|
3492
145
|
}
|
3493
146
|
|
3494
|
-
|
3495
|
-
|
3496
|
-
|
147
|
+
// initial viewport as 100vh. Once the page is scrolled, browser
|
148
|
+
// toolbars are hidden, the viewport becomes larger and elements with
|
149
|
+
// height 100vh no longer cover the viewport.
|
150
|
+
//
|
151
|
+
// To detect this situation, this component compares the height of a
|
152
|
+
// 100vh div with the inner height of the window on resize. Once those
|
153
|
+
// window height exceeds probe heights the component sets the `--vh`
|
154
|
+
// custom property (which default to 1vh) to a pixel value such that
|
155
|
+
// `calc(100 * var(--vh))` equals the inner height of the window.
|
156
|
+
//
|
157
|
+
// To prevent changing element sizes once the browser toolbars are
|
158
|
+
// shown again (when the user scrolls back up), `--vh` is not updated
|
159
|
+
// when the inner height of the window decreases slightly.
|
160
|
+
//
|
161
|
+
// On orientation change, we do want to update `--vh`, though. We
|
162
|
+
// therefore do update it when the inner height of the window
|
163
|
+
// decreases by more than 30%.
|
164
|
+
|
165
|
+
function VhFix(_ref) {
|
3497
166
|
var children = _ref.children;
|
167
|
+
var probeRef = useRef();
|
3498
168
|
|
3499
|
-
var _useState = useState(
|
169
|
+
var _useState = useState(),
|
3500
170
|
_useState2 = _slicedToArray(_useState, 2),
|
3501
|
-
|
3502
|
-
|
171
|
+
height = _useState2[0],
|
172
|
+
setHeight = _useState2[1];
|
3503
173
|
|
3504
|
-
|
3505
|
-
|
3506
|
-
|
3507
|
-
|
3508
|
-
|
3509
|
-
|
3510
|
-
|
3511
|
-
|
3512
|
-
|
3513
|
-
}, children));
|
3514
|
-
}
|
3515
|
-
/**
|
3516
|
-
* Returns chapter containing the current scroll position.
|
3517
|
-
*
|
3518
|
-
* @example
|
3519
|
-
*
|
3520
|
-
* const chapter = useCurrentChapter();
|
3521
|
-
* chapter // =>
|
3522
|
-
* {
|
3523
|
-
* id: 3,
|
3524
|
-
* permaId: 5,
|
3525
|
-
* title: 'Chapter 1',
|
3526
|
-
* summary: 'An introductory chapter',
|
3527
|
-
* chapterSlug: 'chapter-1'
|
3528
|
-
* }
|
3529
|
-
*/
|
174
|
+
useEffect(function () {
|
175
|
+
if (!browser.has('ios platform')) {
|
176
|
+
return;
|
177
|
+
}
|
178
|
+
|
179
|
+
window.addEventListener('resize', update);
|
180
|
+
return function () {
|
181
|
+
return window.removeEventListener('resize', update);
|
182
|
+
};
|
3530
183
|
|
3531
|
-
function
|
3532
|
-
|
184
|
+
function update() {
|
185
|
+
setHeight(function (previousHeight) {
|
186
|
+
return getHeight({
|
187
|
+
windowHeight: window.innerHeight,
|
188
|
+
probeHeight: probeRef.current.clientHeight,
|
189
|
+
previousHeight: previousHeight
|
190
|
+
});
|
191
|
+
});
|
192
|
+
}
|
193
|
+
}, []);
|
194
|
+
return /*#__PURE__*/React.createElement("div", {
|
195
|
+
style: height && {
|
196
|
+
'--vh': "".concat(height / 100, "px")
|
197
|
+
}
|
198
|
+
}, /*#__PURE__*/React.createElement("div", {
|
199
|
+
style: {
|
200
|
+
height: '100vh',
|
201
|
+
position: 'absolute'
|
202
|
+
},
|
203
|
+
ref: probeRef
|
204
|
+
}), children);
|
3533
205
|
}
|
3534
|
-
function
|
3535
|
-
|
206
|
+
function getHeight(_ref2) {
|
207
|
+
var windowHeight = _ref2.windowHeight,
|
208
|
+
probeHeight = _ref2.probeHeight,
|
209
|
+
previousHeight = _ref2.previousHeight;
|
210
|
+
|
211
|
+
if (probeHeight < windowHeight || previousHeight) {
|
212
|
+
if (!previousHeight || windowHeight > previousHeight || windowHeight < previousHeight * 0.7) {
|
213
|
+
return windowHeight;
|
214
|
+
} else {
|
215
|
+
return previousHeight;
|
216
|
+
}
|
217
|
+
}
|
3536
218
|
}
|
3537
219
|
|
3538
220
|
function useSectionChangeEvents(currentSectionIndex) {
|
@@ -3540,7 +222,10 @@ function useSectionChangeEvents(currentSectionIndex) {
|
|
3540
222
|
var sections = useSectionsWithChapter();
|
3541
223
|
useEffect(function () {
|
3542
224
|
if (previousSectionIndex !== currentSectionIndex) {
|
3543
|
-
events.trigger('page:change', getEventObject(
|
225
|
+
events.trigger('page:change', getEventObject({
|
226
|
+
section: sections[currentSectionIndex],
|
227
|
+
sectionsCount: sections.length
|
228
|
+
}));
|
3544
229
|
}
|
3545
230
|
});
|
3546
231
|
}
|
@@ -3556,8 +241,6 @@ var sectionChangeMessagePoster = function sectionChangeMessagePoster(index) {
|
|
3556
241
|
}
|
3557
242
|
};
|
3558
243
|
|
3559
|
-
var contentStyles = {"Content":"Content-module_Content__m7urk"};
|
3560
|
-
|
3561
244
|
var Content = withInlineEditingDecorator('ContentDecorator', function Content(props) {
|
3562
245
|
var _useCurrentSectionInd = useCurrentSectionIndexState(),
|
3563
246
|
_useCurrentSectionInd2 = _slicedToArray(_useCurrentSectionInd, 2),
|
@@ -3605,9 +288,9 @@ var Content = withInlineEditingDecorator('ContentDecorator', function Content(pr
|
|
3605
288
|
return /*#__PURE__*/React.createElement("div", {
|
3606
289
|
className: contentStyles.Content,
|
3607
290
|
id: "goToContent"
|
3608
|
-
}, /*#__PURE__*/React.createElement(AtmoProvider, null, /*#__PURE__*/React.createElement(ScrollToSectionContext.Provider, {
|
291
|
+
}, /*#__PURE__*/React.createElement(VhFix, null, /*#__PURE__*/React.createElement(AtmoProvider, null, /*#__PURE__*/React.createElement(ScrollToSectionContext.Provider, {
|
3609
292
|
value: scrollToSection
|
3610
|
-
}, renderChapters(entryStructure, currentSectionIndex, setCurrentSection, scrollTargetSectionIndex, setScrollTargetSectionIndex))));
|
293
|
+
}, renderChapters(entryStructure, currentSectionIndex, setCurrentSection, scrollTargetSectionIndex, setScrollTargetSectionIndex)))));
|
3611
294
|
});
|
3612
295
|
|
3613
296
|
function renderChapters(entryStructure, currentSectionIndex, setCurrentSection, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
|
@@ -3626,137 +309,28 @@ function renderChapters(entryStructure, currentSectionIndex, setCurrentSection,
|
|
3626
309
|
}
|
3627
310
|
|
3628
311
|
function Widget(_ref) {
|
3629
|
-
var role = _ref.role
|
3630
|
-
|
3631
|
-
|
3632
|
-
|
3633
|
-
|
3634
|
-
if (!widget) {
|
3635
|
-
return null;
|
3636
|
-
}
|
3637
|
-
|
3638
|
-
var Component = api.widgetTypes.getComponent(widget.typeName);
|
3639
|
-
return /*#__PURE__*/React.createElement(Component, {
|
3640
|
-
configuration: widget.configuration
|
3641
|
-
});
|
3642
|
-
}
|
3643
|
-
|
3644
|
-
function Entry() {
|
3645
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bar, null), /*#__PURE__*/React.createElement(Widget, {
|
3646
|
-
role: "header"
|
3647
|
-
}), /*#__PURE__*/React.createElement(Content, null), /*#__PURE__*/React.createElement(Widget, {
|
3648
|
-
role: "footer"
|
3649
|
-
}));
|
3650
|
-
}
|
3651
|
-
|
3652
|
-
var styles$h = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
|
3653
|
-
|
3654
|
-
var FocusVisibleContext = createContext();
|
3655
|
-
function useFocusOutlineVisible() {
|
3656
|
-
return useContext(FocusVisibleContext);
|
3657
|
-
}
|
3658
|
-
function FocusOutlineProvider(_ref) {
|
3659
|
-
var children = _ref.children;
|
3660
|
-
|
3661
|
-
var _useState = useState(),
|
3662
|
-
_useState2 = _slicedToArray(_useState, 2),
|
3663
|
-
value = _useState2[0],
|
3664
|
-
setValue = _useState2[1];
|
3665
|
-
|
3666
|
-
useEffect(function () {
|
3667
|
-
document.body.addEventListener('keydown', enable);
|
3668
|
-
document.body.addEventListener('mousedown', disable);
|
3669
|
-
disable();
|
3670
|
-
return function () {
|
3671
|
-
document.body.removeEventListener('keydown', enable);
|
3672
|
-
document.body.removeEventListener('mousedown', disable);
|
3673
|
-
};
|
3674
|
-
|
3675
|
-
function enable() {
|
3676
|
-
document.body.classList.remove(styles$h.focusOutlineDisabled);
|
3677
|
-
setValue(true);
|
3678
|
-
}
|
3679
|
-
|
3680
|
-
function disable() {
|
3681
|
-
document.body.classList.add(styles$h.focusOutlineDisabled);
|
3682
|
-
setValue(false);
|
3683
|
-
}
|
3684
|
-
}, []);
|
3685
|
-
return /*#__PURE__*/React.createElement(FocusVisibleContext.Provider, {
|
3686
|
-
value: value
|
3687
|
-
}, children);
|
3688
|
-
}
|
3689
|
-
|
3690
|
-
var PhonePlatformProvider = withInlineEditingAlternative('PhonePlatformProvider', function PhonePlatformProvider(_ref) {
|
3691
|
-
var children = _ref.children;
|
3692
|
-
var isPhonePlatform = useBrowserFeature('phone platform');
|
3693
|
-
return /*#__PURE__*/React.createElement(PhonePlatformContext.Provider, {
|
3694
|
-
value: isPhonePlatform
|
3695
|
-
}, children);
|
3696
|
-
});
|
3697
|
-
|
3698
|
-
var AudioFocusContext = createContext();
|
3699
|
-
function AudioFocusProvider(_ref) {
|
3700
|
-
var children = _ref.children;
|
3701
|
-
|
3702
|
-
var _useState = useState([]),
|
3703
|
-
_useState2 = _slicedToArray(_useState, 2),
|
3704
|
-
currentKey = _useState2[0],
|
3705
|
-
setCurrentKey = _useState2[1];
|
3706
|
-
|
3707
|
-
var value = useMemo(function () {
|
3708
|
-
return [currentKey, setCurrentKey];
|
3709
|
-
}, [currentKey, setCurrentKey]);
|
3710
|
-
return /*#__PURE__*/React.createElement(AudioFocusContext.Provider, {
|
3711
|
-
value: value
|
3712
|
-
}, children);
|
3713
|
-
}
|
3714
|
-
/**
|
3715
|
-
* Prevent parallel playback of multiple media elements.
|
3716
|
-
*
|
3717
|
-
* @param {Object} options
|
3718
|
-
* @param {number} options.key - Unique id used to identify the element.
|
3719
|
-
* @param {boolean} options.request - Set to true to request audio focus.
|
3720
|
-
* @param {Function} options.onLost -
|
3721
|
-
* Callback that will be invoked if another element requests audio
|
3722
|
-
* focus, thereby preempting your hold of audio focus. The callback
|
3723
|
-
* should pause the element.
|
3724
|
-
*/
|
3725
|
-
|
3726
|
-
function useAudioFocus(_ref2) {
|
3727
|
-
var key = _ref2.key,
|
3728
|
-
request = _ref2.request,
|
3729
|
-
onLost = _ref2.onLost;
|
3730
|
-
var wasRequested = usePrevious(request);
|
312
|
+
var role = _ref.role,
|
313
|
+
props = _ref.props;
|
314
|
+
var widget = useWidget({
|
315
|
+
role: role
|
316
|
+
});
|
3731
317
|
|
3732
|
-
|
3733
|
-
|
3734
|
-
|
3735
|
-
setCurrentKey = _useContext2[1];
|
318
|
+
if (!widget) {
|
319
|
+
return null;
|
320
|
+
}
|
3736
321
|
|
3737
|
-
var
|
3738
|
-
|
3739
|
-
|
3740
|
-
|
3741
|
-
}
|
3742
|
-
}, [request, wasRequested, setCurrentKey, key]);
|
3743
|
-
useEffect(function () {
|
3744
|
-
if (previousKey === key && currentKey !== key) {
|
3745
|
-
onLost();
|
3746
|
-
}
|
3747
|
-
}, [currentKey, previousKey, key, onLost]);
|
322
|
+
var Component = api.widgetTypes.getComponent(widget.typeName);
|
323
|
+
return /*#__PURE__*/React.createElement(Component, Object.assign({
|
324
|
+
configuration: widget.configuration
|
325
|
+
}, props));
|
3748
326
|
}
|
3749
327
|
|
3750
|
-
function
|
3751
|
-
|
3752
|
-
|
3753
|
-
|
3754
|
-
|
3755
|
-
|
3756
|
-
seed: seed
|
3757
|
-
}, /*#__PURE__*/React.createElement(CurrentSectionProvider, null, /*#__PURE__*/React.createElement(LocaleProvider, null, /*#__PURE__*/React.createElement(ConsentProvider, {
|
3758
|
-
consent: consent$1
|
3759
|
-
}, children)))))))));
|
328
|
+
function Entry() {
|
329
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bar, null), /*#__PURE__*/React.createElement(Widget, {
|
330
|
+
role: "header"
|
331
|
+
}), /*#__PURE__*/React.createElement(Content, null), /*#__PURE__*/React.createElement(Widget, {
|
332
|
+
role: "footer"
|
333
|
+
}));
|
3760
334
|
}
|
3761
335
|
|
3762
336
|
function loadDashUnlessHlsSupported(_x) {
|
@@ -3764,8 +338,8 @@ function loadDashUnlessHlsSupported(_x) {
|
|
3764
338
|
}
|
3765
339
|
|
3766
340
|
function _loadDashUnlessHlsSupported() {
|
3767
|
-
_loadDashUnlessHlsSupported = _asyncToGenerator( /*#__PURE__*/
|
3768
|
-
return
|
341
|
+
_loadDashUnlessHlsSupported = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(seed) {
|
342
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
3769
343
|
while (1) {
|
3770
344
|
switch (_context.prev = _context.next) {
|
3771
345
|
case 0:
|
@@ -3800,7 +374,7 @@ function hlsHostSupportedByAndroid(seed) {
|
|
3800
374
|
return getFileUrlTemplateHost(seed, 'videoFiles', 'hls-playlist').indexOf('_') < 0;
|
3801
375
|
}
|
3802
376
|
|
3803
|
-
var styles
|
377
|
+
var styles = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"Figure-module_root__3FC-x","invert":"Figure-module_invert___0BJP"};
|
3804
378
|
|
3805
379
|
/**
|
3806
380
|
* Render a figure with a caption text attached.
|
@@ -3817,7 +391,7 @@ function Figure(_ref) {
|
|
3817
391
|
|
3818
392
|
if (caption) {
|
3819
393
|
return /*#__PURE__*/React.createElement("figure", {
|
3820
|
-
className: classNames(styles
|
394
|
+
className: classNames(styles.root, _defineProperty({}, styles.invert, !darkBackground))
|
3821
395
|
}, children, /*#__PURE__*/React.createElement("figcaption", null, /*#__PURE__*/React.createElement(Text, {
|
3822
396
|
scaleCategory: "caption"
|
3823
397
|
}, caption)));
|
@@ -3826,7 +400,7 @@ function Figure(_ref) {
|
|
3826
400
|
}
|
3827
401
|
}
|
3828
402
|
|
3829
|
-
var styles$
|
403
|
+
var styles$1 = {"wrapper":"ContentElementBox-module_wrapper__3wZgP"};
|
3830
404
|
|
3831
405
|
/**
|
3832
406
|
* Wrap content element that render a visible box in this component to
|
@@ -3839,7 +413,7 @@ var styles$j = {"wrapper":"ContentElementBox-module_wrapper__3wZgP"};
|
|
3839
413
|
function ContentElementBox(_ref) {
|
3840
414
|
var children = _ref.children;
|
3841
415
|
return /*#__PURE__*/React.createElement("div", {
|
3842
|
-
className: styles$
|
416
|
+
className: styles$1.wrapper
|
3843
417
|
}, children);
|
3844
418
|
}
|
3845
419
|
|
@@ -3915,7 +489,7 @@ function RemotePeakData(_ref) {
|
|
3915
489
|
}
|
3916
490
|
}
|
3917
491
|
|
3918
|
-
var styles$
|
492
|
+
var styles$2 = {"container":"Waveform-module_container__1Dxdv","clickMask":"Waveform-module_clickMask__3LYAT","menuBar":"Waveform-module_menuBar__342n-","timeDisplay":"Waveform-module_timeDisplay__1v4Tl","playControl":"Waveform-module_playControl__QWTsJ","waveWrapper":"Waveform-module_waveWrapper__3gamc"};
|
3919
493
|
|
3920
494
|
var waveColor = '#828282ed';
|
3921
495
|
var waveColorInverted = 'rgba(0, 0, 0, 0.5)';
|
@@ -3953,7 +527,7 @@ function Waveform(props) {
|
|
3953
527
|
var measureRef = _ref.measureRef;
|
3954
528
|
return /*#__PURE__*/React.createElement("div", {
|
3955
529
|
ref: measureRef,
|
3956
|
-
className: styles$
|
530
|
+
className: styles$2.waveWrapper
|
3957
531
|
}, /*#__PURE__*/React.createElement(RemotePeakData, {
|
3958
532
|
audioFile: props.audioFile
|
3959
533
|
}, function (peakData) {
|
@@ -3978,7 +552,7 @@ function Waveform(props) {
|
|
3978
552
|
}
|
3979
553
|
}
|
3980
554
|
|
3981
|
-
var styles$
|
555
|
+
var styles$3 = {"timeDisplay":"TimeDisplay-module_timeDisplay__2UwqM","time":"TimeDisplay-module_time__li1ZU"};
|
3982
556
|
|
3983
557
|
var unknownTimePlaceholder = '-:--';
|
3984
558
|
function formatTime(value) {
|
@@ -4004,18 +578,18 @@ function pad(value) {
|
|
4004
578
|
function TimeDisplay(props) {
|
4005
579
|
return /*#__PURE__*/React.createElement("div", {
|
4006
580
|
"data-testid": 'time-display',
|
4007
|
-
className: styles$
|
581
|
+
className: styles$3.timeDisplay
|
4008
582
|
}, /*#__PURE__*/React.createElement("span", {
|
4009
|
-
className: styles$
|
583
|
+
className: styles$3.time
|
4010
584
|
}, formatTime(props.currentTime)), "/", /*#__PURE__*/React.createElement("span", {
|
4011
|
-
className: styles$
|
585
|
+
className: styles$3.time
|
4012
586
|
}, formatTime(props.duration)));
|
4013
587
|
}
|
4014
588
|
|
4015
|
-
var styles$
|
589
|
+
var styles$4 = {"button":"MenuBarButton-module_button__2sY0F ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","icon":"MenuBarButton-module_icon__2h8__","subMenuItemAnnotation":"MenuBarButton-module_subMenuItemAnnotation__32Quc","subMenu":"MenuBarButton-module_subMenu__f-E-X","subMenuExpanded":"MenuBarButton-module_subMenuExpanded__2UvkJ","subMenuItem":"MenuBarButton-module_subMenuItem__1pyn_","subMenuItemIcon":"MenuBarButton-module_subMenuItemIcon__3iaB-","subMenuItemButton":"MenuBarButton-module_subMenuItemButton__2QnUz utils-module_unstyledButton__3rgne"};
|
4016
590
|
|
4017
|
-
function _extends
|
4018
|
-
_extends
|
591
|
+
function _extends() {
|
592
|
+
_extends = Object.assign || function (target) {
|
4019
593
|
for (var i = 1; i < arguments.length; i++) {
|
4020
594
|
var source = arguments[i];
|
4021
595
|
|
@@ -4029,13 +603,13 @@ function _extends$5() {
|
|
4029
603
|
return target;
|
4030
604
|
};
|
4031
605
|
|
4032
|
-
return _extends
|
606
|
+
return _extends.apply(this, arguments);
|
4033
607
|
}
|
4034
608
|
var CheckIcon = (function (_ref) {
|
4035
609
|
var _ref$styles = _ref.styles,
|
4036
610
|
props = _objectWithoutProperties(_ref, ["styles"]);
|
4037
611
|
|
4038
|
-
return /*#__PURE__*/React.createElement("svg", _extends
|
612
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
4039
613
|
xmlns: "http://www.w3.org/2000/svg",
|
4040
614
|
width: "24",
|
4041
615
|
height: "24",
|
@@ -4085,18 +659,18 @@ function MenuBarButton(props) {
|
|
4085
659
|
}
|
4086
660
|
}, []);
|
4087
661
|
return /*#__PURE__*/React.createElement("div", {
|
4088
|
-
className: classNames(_defineProperty({}, styles$
|
662
|
+
className: classNames(_defineProperty({}, styles$4.subMenuExpanded, subMenuExpanded), styles$4.wrapper),
|
4089
663
|
onMouseEnter: openMenu,
|
4090
664
|
onMouseLeave: closeMenu,
|
4091
665
|
onFocus: onFocus,
|
4092
666
|
onBlur: onBlur,
|
4093
667
|
onKeyDown: onKeyDown
|
4094
668
|
}, /*#__PURE__*/React.createElement("button", {
|
4095
|
-
className: styles$
|
669
|
+
className: styles$4.button,
|
4096
670
|
title: props.title,
|
4097
671
|
onClick: onButtonClick
|
4098
672
|
}, React.createElement(props.icon, {
|
4099
|
-
className: styles$
|
673
|
+
className: styles$4.icon
|
4100
674
|
})), renderSubMenu(props, closeMenu));
|
4101
675
|
}
|
4102
676
|
MenuBarButton.defaultProps = {
|
@@ -4106,7 +680,7 @@ MenuBarButton.defaultProps = {
|
|
4106
680
|
function renderSubMenu(props, closeMenu) {
|
4107
681
|
if (props.subMenuItems.length > 0) {
|
4108
682
|
return /*#__PURE__*/React.createElement("ul", {
|
4109
|
-
className: styles$
|
683
|
+
className: styles$4.subMenu,
|
4110
684
|
role: "menu"
|
4111
685
|
}, renderSubMenuItems(props, closeMenu));
|
4112
686
|
}
|
@@ -4115,10 +689,10 @@ function renderSubMenu(props, closeMenu) {
|
|
4115
689
|
function renderSubMenuItems(props, closeMenu) {
|
4116
690
|
return props.subMenuItems.map(function (item) {
|
4117
691
|
return /*#__PURE__*/React.createElement("li", {
|
4118
|
-
className: styles$
|
692
|
+
className: styles$4.subMenuItem,
|
4119
693
|
key: item.value
|
4120
694
|
}, /*#__PURE__*/React.createElement("button", {
|
4121
|
-
className: styles$
|
695
|
+
className: styles$4.subMenuItemButton,
|
4122
696
|
role: "menuitemradio",
|
4123
697
|
"aria-checked": item.active,
|
4124
698
|
onClick: subMenuItemClickHandler(props, item.value, closeMenu)
|
@@ -4129,7 +703,7 @@ function renderSubMenuItems(props, closeMenu) {
|
|
4129
703
|
function renderSubMenuItemIcon(item) {
|
4130
704
|
if (item.active) {
|
4131
705
|
return /*#__PURE__*/React.createElement(CheckIcon, {
|
4132
|
-
className: styles$
|
706
|
+
className: styles$4.subMenuItemIcon
|
4133
707
|
});
|
4134
708
|
}
|
4135
709
|
}
|
@@ -4137,7 +711,7 @@ function renderSubMenuItemIcon(item) {
|
|
4137
711
|
function renderSubMenuItemAnnotation(props, item) {
|
4138
712
|
if (item.annotation) {
|
4139
713
|
return /*#__PURE__*/React.createElement("span", {
|
4140
|
-
className: styles$
|
714
|
+
className: styles$4.subMenuItemAnnotation
|
4141
715
|
}, item.annotation);
|
4142
716
|
}
|
4143
717
|
}
|
@@ -4153,8 +727,8 @@ function subMenuItemClickHandler(props, value, closeMenu) {
|
|
4153
727
|
};
|
4154
728
|
}
|
4155
729
|
|
4156
|
-
function _extends$
|
4157
|
-
_extends$
|
730
|
+
function _extends$1() {
|
731
|
+
_extends$1 = Object.assign || function (target) {
|
4158
732
|
for (var i = 1; i < arguments.length; i++) {
|
4159
733
|
var source = arguments[i];
|
4160
734
|
|
@@ -4168,13 +742,13 @@ function _extends$6() {
|
|
4168
742
|
return target;
|
4169
743
|
};
|
4170
744
|
|
4171
|
-
return _extends$
|
745
|
+
return _extends$1.apply(this, arguments);
|
4172
746
|
}
|
4173
747
|
var TextTracksIcon = (function (_ref) {
|
4174
748
|
var _ref$styles = _ref.styles,
|
4175
749
|
props = _objectWithoutProperties(_ref, ["styles"]);
|
4176
750
|
|
4177
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
751
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
4178
752
|
xmlns: "http://www.w3.org/2000/svg",
|
4179
753
|
viewBox: "-3 -3 30 30"
|
4180
754
|
}, props), /*#__PURE__*/React.createElement("path", {
|
@@ -4201,10 +775,10 @@ TextTracksMenu.defaultProps = {
|
|
4201
775
|
items: []
|
4202
776
|
};
|
4203
777
|
|
4204
|
-
var styles$
|
778
|
+
var styles$5 = {"container":"ControlBar-module_container__1GH64","transparent":"ControlBar-module_transparent__eS4af","lightBackground":"ControlBar-module_lightBackground__3-tGf","darkBackground":"ControlBar-module_darkBackground__31Wv7","controlBarContainer":"ControlBar-module_controlBarContainer__1cxRO","inset":"ControlBar-module_inset__JvBh9","button":"ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","playControl":"ControlBar-module_playControl__Vg5et ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne"};
|
4205
779
|
|
4206
|
-
function _extends$
|
4207
|
-
_extends$
|
780
|
+
function _extends$2() {
|
781
|
+
_extends$2 = Object.assign || function (target) {
|
4208
782
|
for (var i = 1; i < arguments.length; i++) {
|
4209
783
|
var source = arguments[i];
|
4210
784
|
|
@@ -4218,13 +792,13 @@ function _extends$7() {
|
|
4218
792
|
return target;
|
4219
793
|
};
|
4220
794
|
|
4221
|
-
return _extends$
|
795
|
+
return _extends$2.apply(this, arguments);
|
4222
796
|
}
|
4223
797
|
var PlayIcon = (function (_ref) {
|
4224
798
|
var _ref$styles = _ref.styles,
|
4225
799
|
props = _objectWithoutProperties(_ref, ["styles"]);
|
4226
800
|
|
4227
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
801
|
+
return /*#__PURE__*/React.createElement("svg", _extends$2({
|
4228
802
|
xmlns: "http://www.w3.org/2000/svg",
|
4229
803
|
viewBox: "0 0 24 24"
|
4230
804
|
}, props), /*#__PURE__*/React.createElement("path", {
|
@@ -4232,8 +806,8 @@ var PlayIcon = (function (_ref) {
|
|
4232
806
|
}));
|
4233
807
|
});
|
4234
808
|
|
4235
|
-
function _extends$
|
4236
|
-
_extends$
|
809
|
+
function _extends$3() {
|
810
|
+
_extends$3 = Object.assign || function (target) {
|
4237
811
|
for (var i = 1; i < arguments.length; i++) {
|
4238
812
|
var source = arguments[i];
|
4239
813
|
|
@@ -4247,13 +821,13 @@ function _extends$8() {
|
|
4247
821
|
return target;
|
4248
822
|
};
|
4249
823
|
|
4250
|
-
return _extends$
|
824
|
+
return _extends$3.apply(this, arguments);
|
4251
825
|
}
|
4252
826
|
var PauseIcon = (function (_ref) {
|
4253
827
|
var _ref$styles = _ref.styles,
|
4254
828
|
props = _objectWithoutProperties(_ref, ["styles"]);
|
4255
829
|
|
4256
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
830
|
+
return /*#__PURE__*/React.createElement("svg", _extends$3({
|
4257
831
|
xmlns: "http://www.w3.org/2000/svg",
|
4258
832
|
viewBox: "0 0 24 24"
|
4259
833
|
}, props), /*#__PURE__*/React.createElement("path", {
|
@@ -4266,7 +840,7 @@ function PlayPauseButton(props) {
|
|
4266
840
|
t = _useI18n.t;
|
4267
841
|
|
4268
842
|
return /*#__PURE__*/React.createElement("button", {
|
4269
|
-
className: styles$
|
843
|
+
className: styles$5.playControl,
|
4270
844
|
"aria-label": t(props.isPlaying ? 'pause' : 'play', {
|
4271
845
|
scope: 'pageflow_scrolled.public.player_controls'
|
4272
846
|
}),
|
@@ -4283,11 +857,11 @@ function PlayPauseButton(props) {
|
|
4283
857
|
function pausePlayIcon(props) {
|
4284
858
|
if (props.isPlaying) {
|
4285
859
|
return /*#__PURE__*/React.createElement(PauseIcon, {
|
4286
|
-
className: styles$
|
860
|
+
className: styles$5.controlsIcon
|
4287
861
|
});
|
4288
862
|
} else {
|
4289
863
|
return /*#__PURE__*/React.createElement(PlayIcon, {
|
4290
|
-
className: styles$
|
864
|
+
className: styles$5.controlsIcon
|
4291
865
|
});
|
4292
866
|
}
|
4293
867
|
}
|
@@ -4301,9 +875,9 @@ function WaveformPlayerControls(props) {
|
|
4301
875
|
onMouseEnter: props.onMouseEnter,
|
4302
876
|
onMouseLeave: props.onMouseLeave,
|
4303
877
|
"data-testid": "waveform-controls",
|
4304
|
-
className: classNames(styles$
|
878
|
+
className: classNames(styles$2.container)
|
4305
879
|
}, props.children, /*#__PURE__*/React.createElement("div", {
|
4306
|
-
className: styles$
|
880
|
+
className: styles$2.clickMask,
|
4307
881
|
onClick: props.onPlayerClick
|
4308
882
|
}), /*#__PURE__*/React.createElement(Waveform, {
|
4309
883
|
audioFile: props.file,
|
@@ -4316,13 +890,13 @@ function WaveformPlayerControls(props) {
|
|
4316
890
|
pause: props.pause,
|
4317
891
|
mediaElementId: props.mediaElementId
|
4318
892
|
}), /*#__PURE__*/React.createElement("div", {
|
4319
|
-
className: styles$
|
893
|
+
className: styles$2.playControl
|
4320
894
|
}, /*#__PURE__*/React.createElement(PlayPauseButton, {
|
4321
895
|
isPlaying: props.isPlaying,
|
4322
896
|
play: props.play,
|
4323
897
|
pause: props.pause
|
4324
898
|
})), /*#__PURE__*/React.createElement("div", {
|
4325
|
-
className: classNames(styles$
|
899
|
+
className: classNames(styles$2.menuBar, darkBackground ? styles$5.darkBackground : styles$5.lightBackground, _defineProperty({}, styles$5.inset, !props.standAlone))
|
4326
900
|
}, /*#__PURE__*/React.createElement(TimeDisplay, {
|
4327
901
|
currentTime: props.currentTime,
|
4328
902
|
duration: props.duration
|
@@ -4332,14 +906,14 @@ function WaveformPlayerControls(props) {
|
|
4332
906
|
})));
|
4333
907
|
}
|
4334
908
|
|
4335
|
-
var styles$
|
909
|
+
var styles$6 = {"container":"BigPlayPauseButton-module_container__19sKj","pointerCursor":"BigPlayPauseButton-module_pointerCursor__2A55P","hideCursor":"BigPlayPauseButton-module_hideCursor__2Hyys","button":"BigPlayPauseButton-module_button__10g4Q utils-module_unstyledButton__3rgne","hidden":"BigPlayPauseButton-module_hidden__1KUzr","animated":"BigPlayPauseButton-module_animated__1MMNq","fadeOut":"BigPlayPauseButton-module_fadeOut__2vcA_","fadeIn":"BigPlayPauseButton-module_fadeIn__1Ge1-"};
|
4336
910
|
|
4337
911
|
function BigPlayPauseButton(props) {
|
4338
912
|
var _classNames, _classNames2;
|
4339
913
|
|
4340
|
-
var c = classNames(styles$
|
914
|
+
var c = classNames(styles$6.button, (_classNames = {}, _defineProperty(_classNames, styles$6.hidden, props.hidden || props.lastControlledVia === 'playPauseButton'), _defineProperty(_classNames, styles$6.fadeIn, props.unplayed), _defineProperty(_classNames, styles$6.animated, !props.unplayed), _classNames));
|
4341
915
|
return /*#__PURE__*/React.createElement("div", {
|
4342
|
-
className: classNames(styles$
|
916
|
+
className: classNames(styles$6.container, (_classNames2 = {}, _defineProperty(_classNames2, styles$6.hideCursor, props.hideCursor), _defineProperty(_classNames2, styles$6.pointerCursor, !!props.onClick), _classNames2)),
|
4343
917
|
onClick: props.onClick
|
4344
918
|
}, /*#__PURE__*/React.createElement("div", {
|
4345
919
|
key: props.isPlaying,
|
@@ -4355,7 +929,7 @@ function pausePlayIcon$1(props) {
|
|
4355
929
|
}
|
4356
930
|
}
|
4357
931
|
|
4358
|
-
var styles$
|
932
|
+
var styles$7 = {"container":"ProgressIndicators-module_container__1QiQJ","wrapper":"ProgressIndicators-module_wrapper__2PCVv","draggable":"ProgressIndicators-module_draggable__1iAE8","bars":"ProgressIndicators-module_bars__2-ddd","progressBar":"ProgressIndicators-module_progressBar__2PYn-","background":"ProgressIndicators-module_background__-x5f_ ProgressIndicators-module_progressBar__2PYn-","loadingProgressBar":"ProgressIndicators-module_loadingProgressBar__YD2GH ProgressIndicators-module_progressBar__2PYn-","playProgressBar":"ProgressIndicators-module_playProgressBar__3mCSX ProgressIndicators-module_progressBar__2PYn-","sliderHandle":"ProgressIndicators-module_sliderHandle__3ArIf","dragging":"ProgressIndicators-module_dragging__3yY3t"};
|
4359
933
|
|
4360
934
|
function ProgressIndicators(_ref) {
|
4361
935
|
var currentTime = _ref.currentTime,
|
@@ -4403,7 +977,7 @@ function ProgressIndicators(_ref) {
|
|
4403
977
|
var loadProgress = duration > 0 ? Math.min(1, bufferedEnd / duration) : 0;
|
4404
978
|
var playProgress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
|
4405
979
|
return /*#__PURE__*/React.createElement("div", {
|
4406
|
-
className: classNames(styles$
|
980
|
+
className: classNames(styles$7.container, _defineProperty({}, styles$7.dragging, dragging)),
|
4407
981
|
"aria-label": t('pageflow_scrolled.public.player_controls.progress', {
|
4408
982
|
currentTime: formatTime(currentTime),
|
4409
983
|
duration: formatTime(duration)
|
@@ -4411,7 +985,7 @@ function ProgressIndicators(_ref) {
|
|
4411
985
|
onKeyDown: handleKeyDown,
|
4412
986
|
tabIndex: "0"
|
4413
987
|
}, /*#__PURE__*/React.createElement("div", {
|
4414
|
-
className: styles$
|
988
|
+
className: styles$7.wrapper
|
4415
989
|
}, /*#__PURE__*/React.createElement(Measure, {
|
4416
990
|
client: true,
|
4417
991
|
onResize: function onResize(contentRect) {
|
@@ -4424,26 +998,26 @@ function ProgressIndicators(_ref) {
|
|
4424
998
|
onDrag: handleDrag,
|
4425
999
|
onStop: handleStop
|
4426
1000
|
}, /*#__PURE__*/React.createElement("div", {
|
4427
|
-
className: classNames(styles$
|
1001
|
+
className: classNames(styles$7.draggable)
|
4428
1002
|
}, /*#__PURE__*/React.createElement("div", {
|
4429
1003
|
ref: measureRef,
|
4430
|
-
className: styles$
|
1004
|
+
className: styles$7.bars
|
4431
1005
|
}, /*#__PURE__*/React.createElement("div", {
|
4432
|
-
className: styles$
|
1006
|
+
className: styles$7.background
|
4433
1007
|
}), /*#__PURE__*/React.createElement("div", {
|
4434
|
-
className: styles$
|
1008
|
+
className: styles$7.loadingProgressBar,
|
4435
1009
|
style: {
|
4436
1010
|
width: toPercent(loadProgress)
|
4437
1011
|
},
|
4438
1012
|
"data-testid": "loading-progress-bar"
|
4439
1013
|
}), /*#__PURE__*/React.createElement("div", {
|
4440
|
-
className: styles$
|
1014
|
+
className: styles$7.playProgressBar,
|
4441
1015
|
style: {
|
4442
1016
|
width: toPercent(playProgress)
|
4443
1017
|
},
|
4444
1018
|
"data-testid": "play-progress-bar"
|
4445
1019
|
}), /*#__PURE__*/React.createElement("div", {
|
4446
|
-
className: styles$
|
1020
|
+
className: styles$7.sliderHandle,
|
4447
1021
|
style: {
|
4448
1022
|
left: toPercent(playProgress)
|
4449
1023
|
},
|
@@ -4456,8 +1030,8 @@ function toPercent(value) {
|
|
4456
1030
|
return value > 0 ? value * 100 + '%' : 0;
|
4457
1031
|
}
|
4458
1032
|
|
4459
|
-
function _extends$
|
4460
|
-
_extends$
|
1033
|
+
function _extends$4() {
|
1034
|
+
_extends$4 = Object.assign || function (target) {
|
4461
1035
|
for (var i = 1; i < arguments.length; i++) {
|
4462
1036
|
var source = arguments[i];
|
4463
1037
|
|
@@ -4471,13 +1045,13 @@ function _extends$9() {
|
|
4471
1045
|
return target;
|
4472
1046
|
};
|
4473
1047
|
|
4474
|
-
return _extends$
|
1048
|
+
return _extends$4.apply(this, arguments);
|
4475
1049
|
}
|
4476
1050
|
var QualityIcon = (function (_ref) {
|
4477
1051
|
var _ref$styles = _ref.styles,
|
4478
1052
|
props = _objectWithoutProperties(_ref, ["styles"]);
|
4479
1053
|
|
4480
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
1054
|
+
return /*#__PURE__*/React.createElement("svg", _extends$4({
|
4481
1055
|
xmlns: "http://www.w3.org/2000/svg",
|
4482
1056
|
viewBox: "-3 -3 30 30"
|
4483
1057
|
}, props), /*#__PURE__*/React.createElement("path", {
|
@@ -4510,7 +1084,7 @@ function ClassicPlayerControls(props) {
|
|
4510
1084
|
var darkBackground = useDarkBackground();
|
4511
1085
|
var transparent = !props.standAlone && props.unplayed || props.isPlaying && props.inactive;
|
4512
1086
|
return /*#__PURE__*/React.createElement("div", {
|
4513
|
-
className: styles$
|
1087
|
+
className: styles$5.container
|
4514
1088
|
}, props.children, !props.standAlone && /*#__PURE__*/React.createElement(BigPlayPauseButton, {
|
4515
1089
|
unplayed: props.unplayed,
|
4516
1090
|
isPlaying: props.isPlaying,
|
@@ -4529,7 +1103,7 @@ function renderControlBar(props, darkBackground, transparent) {
|
|
4529
1103
|
onBlur: props.onBlur,
|
4530
1104
|
onMouseEnter: props.onMouseEnter,
|
4531
1105
|
onMouseLeave: props.onMouseLeave,
|
4532
|
-
className: classNames(styles$
|
1106
|
+
className: classNames(styles$5.controlBarContainer, darkBackground ? styles$5.darkBackground : styles$5.lightBackground, (_classNames = {}, _defineProperty(_classNames, styles$5.inset, !props.standAlone), _defineProperty(_classNames, styles$5.transparent, transparent), _classNames))
|
4533
1107
|
}, /*#__PURE__*/React.createElement(PlayPauseButton, {
|
4534
1108
|
isPlaying: props.isPlaying,
|
4535
1109
|
play: props.play,
|
@@ -4682,7 +1256,7 @@ function AudioPlayerControls(_ref) {
|
|
4682
1256
|
}
|
4683
1257
|
|
4684
1258
|
var Viewer = React.lazy(function () {
|
4685
|
-
return import('./Viewer-
|
1259
|
+
return import('./Viewer-b6becc57.js');
|
4686
1260
|
});
|
4687
1261
|
function Panorama(props) {
|
4688
1262
|
return /*#__PURE__*/React.createElement(Suspense, {
|
@@ -4690,61 +1264,6 @@ function Panorama(props) {
|
|
4690
1264
|
}, /*#__PURE__*/React.createElement(Viewer, props));
|
4691
1265
|
}
|
4692
1266
|
|
4693
|
-
var styles$q = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
|
4694
|
-
|
4695
|
-
function SectionThumbnail(_ref) {
|
4696
|
-
var seed = _ref.seed,
|
4697
|
-
props = _objectWithoutProperties(_ref, ["seed"]);
|
4698
|
-
|
4699
|
-
return /*#__PURE__*/React.createElement(RootProviders, {
|
4700
|
-
seed: seed
|
4701
|
-
}, /*#__PURE__*/React.createElement(Inner, props));
|
4702
|
-
}
|
4703
|
-
|
4704
|
-
function Inner(_ref2) {
|
4705
|
-
var sectionPermaId = _ref2.sectionPermaId,
|
4706
|
-
subscribe = _ref2.subscribe;
|
4707
|
-
var dispatch = useEntryStateDispatch();
|
4708
|
-
useEffect(function () {
|
4709
|
-
return subscribe(dispatch);
|
4710
|
-
}, [subscribe, dispatch]);
|
4711
|
-
var section = useSection({
|
4712
|
-
sectionPermaId: sectionPermaId
|
4713
|
-
});
|
4714
|
-
|
4715
|
-
if (section) {
|
4716
|
-
return /*#__PURE__*/React.createElement(StaticPreview, null, /*#__PURE__*/React.createElement(Measure, {
|
4717
|
-
client: true
|
4718
|
-
}, function (_ref3) {
|
4719
|
-
var measureRef = _ref3.measureRef,
|
4720
|
-
contentRect = _ref3.contentRect;
|
4721
|
-
return /*#__PURE__*/React.createElement(FullscreenHeightProvider, {
|
4722
|
-
height: contentRect.client.height && Math.ceil(contentRect.client.height) * 5
|
4723
|
-
}, /*#__PURE__*/React.createElement("div", {
|
4724
|
-
ref: measureRef,
|
4725
|
-
className: styles$q.crop
|
4726
|
-
}, /*#__PURE__*/React.createElement("div", {
|
4727
|
-
className: styles$q.scale
|
4728
|
-
}, /*#__PURE__*/React.createElement("div", {
|
4729
|
-
className: contentStyles.Content
|
4730
|
-
}, /*#__PURE__*/React.createElement(ConnectedSection, {
|
4731
|
-
state: "active",
|
4732
|
-
section: _objectSpread2(_objectSpread2({}, section), {}, {
|
4733
|
-
transition: 'preview'
|
4734
|
-
})
|
4735
|
-
})))));
|
4736
|
-
}));
|
4737
|
-
} else {
|
4738
|
-
return /*#__PURE__*/React.createElement("div", {
|
4739
|
-
className: styles$q.root
|
4740
|
-
}, "Not found.");
|
4741
|
-
}
|
4742
|
-
}
|
4743
|
-
|
4744
|
-
Inner.defaultProps = {
|
4745
|
-
subscribe: function subscribe() {}
|
4746
|
-
};
|
4747
|
-
|
4748
1267
|
// from https://github.com/n8tb1t/use-scroll-position
|
4749
1268
|
var isBrowser = typeof window !== "undefined";
|
4750
1269
|
|
@@ -4822,11 +1341,11 @@ var EditableInlineText = withInlineEditingAlternative('EditableInlineText', func
|
|
4822
1341
|
_ref$defaultValue = _ref.defaultValue,
|
4823
1342
|
defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue;
|
4824
1343
|
return /*#__PURE__*/React.createElement("span", {
|
4825
|
-
className: classNames(frontendStyles.root,
|
1344
|
+
className: classNames(frontendStyles.root, frontendStyles["hyphens-".concat(hyphens)])
|
4826
1345
|
}, value ? (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : (_value$$children$ = _value$.children[0]) === null || _value$$children$ === void 0 ? void 0 : _value$$children$.text : defaultValue);
|
4827
1346
|
});
|
4828
1347
|
|
4829
|
-
var styles$
|
1348
|
+
var styles$8 = {"container":"FitViewport-module_container__-awVj","content":"FitViewport-module_content__1_K5a","inner":"FitViewport-module_inner__3psd1","opaque":"FitViewport-module_opaque__3EE3o"};
|
4830
1349
|
|
4831
1350
|
var AspectRatioContext = React.createContext();
|
4832
1351
|
/**
|
@@ -4859,7 +1378,10 @@ function FitViewport(_ref) {
|
|
4859
1378
|
aspectRatio = _ref.aspectRatio,
|
4860
1379
|
opaque = _ref.opaque,
|
4861
1380
|
children = _ref.children;
|
4862
|
-
|
1381
|
+
|
1382
|
+
var _useFullscreenDimensi = useFullscreenDimensions(),
|
1383
|
+
height = _useFullscreenDimensi.height;
|
1384
|
+
|
4863
1385
|
if (!file && !aspectRatio) return children;
|
4864
1386
|
aspectRatio = aspectRatio || file.height / file.width;
|
4865
1387
|
var maxWidthCSS;
|
@@ -4873,7 +1395,7 @@ function FitViewport(_ref) {
|
|
4873
1395
|
}
|
4874
1396
|
|
4875
1397
|
return /*#__PURE__*/React.createElement("div", {
|
4876
|
-
className: classNames(styles$
|
1398
|
+
className: classNames(styles$8.container, _defineProperty({}, styles$8.opaque, opaque)),
|
4877
1399
|
style: {
|
4878
1400
|
maxWidth: maxWidthCSS
|
4879
1401
|
}
|
@@ -4891,17 +1413,17 @@ FitViewport.Content = function FitViewportContent(_ref2) {
|
|
4891
1413
|
}
|
4892
1414
|
|
4893
1415
|
return /*#__PURE__*/React.createElement("div", {
|
4894
|
-
className: styles$
|
1416
|
+
className: styles$8.content
|
4895
1417
|
}, /*#__PURE__*/React.createElement("div", {
|
4896
1418
|
style: {
|
4897
1419
|
paddingTop: arPaddingTop + '%'
|
4898
1420
|
}
|
4899
1421
|
}), /*#__PURE__*/React.createElement("div", {
|
4900
|
-
className: styles$
|
1422
|
+
className: styles$8.inner
|
4901
1423
|
}, children));
|
4902
1424
|
};
|
4903
1425
|
|
4904
|
-
var styles$
|
1426
|
+
var styles$9 = {"container":"Tooltip-module_container__3V63U","bubble":"Tooltip-module_bubble__FIL1C scope-tooltip","fixed":"Tooltip-module_fixed__3NGyG","openOnHover":"Tooltip-module_openOnHover__1EeI5","fadeIn":"Tooltip-module_fadeIn__3g9QH","inner":"Tooltip-module_inner__E2hsp","highlight":"Tooltip-module_highlight__2NpuQ","arrow":"Tooltip-module_arrow__3LxXo"};
|
4905
1427
|
|
4906
1428
|
function Tooltip(_ref) {
|
4907
1429
|
var _classNames;
|
@@ -4916,7 +1438,7 @@ function Tooltip(_ref) {
|
|
4916
1438
|
verticalOffset = _ref.verticalOffset,
|
4917
1439
|
horizontalOffset = _ref.horizontalOffset;
|
4918
1440
|
return /*#__PURE__*/React.createElement("div", {
|
4919
|
-
className: classNames(styles$
|
1441
|
+
className: classNames(styles$9.container, (_classNames = {}, _defineProperty(_classNames, styles$9.openOnHover, openOnHover), _defineProperty(_classNames, styles$9.fixed, fixed), _classNames)),
|
4920
1442
|
onClick: fixFocusHandlingSafari
|
4921
1443
|
}, children, /*#__PURE__*/React.createElement(Bubble, {
|
4922
1444
|
className: bubbleClassName,
|
@@ -4943,14 +1465,14 @@ function Bubble(_ref2) {
|
|
4943
1465
|
return /*#__PURE__*/React.createElement("div", {
|
4944
1466
|
style: inlineStyle,
|
4945
1467
|
tabIndex: "-1",
|
4946
|
-
className: classNames(className, styles$
|
1468
|
+
className: classNames(className, styles$9.bubble, _defineProperty({}, styles$9.highlight, highlight))
|
4947
1469
|
}, /*#__PURE__*/React.createElement("div", {
|
4948
1470
|
style: {
|
4949
1471
|
left: arrowPos
|
4950
1472
|
},
|
4951
|
-
className: styles$
|
1473
|
+
className: styles$9.arrow
|
4952
1474
|
}), /*#__PURE__*/React.createElement("div", {
|
4953
|
-
className: styles$
|
1475
|
+
className: styles$9.inner
|
4954
1476
|
}, children));
|
4955
1477
|
} // Safari does not focus buttons after they are clicked [1]. Focus
|
4956
1478
|
// manually to ensure `focus-within` selector that opens the tooltip
|
@@ -4979,8 +1501,8 @@ Tooltip.defaultProps = {
|
|
4979
1501
|
horizontalOffset: 0
|
4980
1502
|
};
|
4981
1503
|
|
4982
|
-
function _extends$
|
4983
|
-
_extends$
|
1504
|
+
function _extends$5() {
|
1505
|
+
_extends$5 = Object.assign || function (target) {
|
4984
1506
|
for (var i = 1; i < arguments.length; i++) {
|
4985
1507
|
var source = arguments[i];
|
4986
1508
|
|
@@ -4994,14 +1516,14 @@ function _extends$a() {
|
|
4994
1516
|
return target;
|
4995
1517
|
};
|
4996
1518
|
|
4997
|
-
return _extends$
|
1519
|
+
return _extends$5.apply(this, arguments);
|
4998
1520
|
}
|
4999
1521
|
var muted = (function (_ref) {
|
5000
1522
|
var _ref$styles = _ref.styles,
|
5001
1523
|
styles = _ref$styles === void 0 ? {} : _ref$styles,
|
5002
1524
|
props = _objectWithoutProperties(_ref, ["styles"]);
|
5003
1525
|
|
5004
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
1526
|
+
return /*#__PURE__*/React.createElement("svg", _extends$5({
|
5005
1527
|
"aria-hidden": "true",
|
5006
1528
|
"data-prefix": "fas",
|
5007
1529
|
"data-icon": "volume-mute",
|
@@ -5013,8 +1535,8 @@ var muted = (function (_ref) {
|
|
5013
1535
|
}));
|
5014
1536
|
});
|
5015
1537
|
|
5016
|
-
function _extends$
|
5017
|
-
_extends$
|
1538
|
+
function _extends$6() {
|
1539
|
+
_extends$6 = Object.assign || function (target) {
|
5018
1540
|
for (var i = 1; i < arguments.length; i++) {
|
5019
1541
|
var source = arguments[i];
|
5020
1542
|
|
@@ -5028,13 +1550,13 @@ function _extends$b() {
|
|
5028
1550
|
return target;
|
5029
1551
|
};
|
5030
1552
|
|
5031
|
-
return _extends$
|
1553
|
+
return _extends$6.apply(this, arguments);
|
5032
1554
|
}
|
5033
1555
|
var share = (function (_ref) {
|
5034
1556
|
var _ref$styles = _ref.styles,
|
5035
1557
|
props = _objectWithoutProperties(_ref, ["styles"]);
|
5036
1558
|
|
5037
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
1559
|
+
return /*#__PURE__*/React.createElement("svg", _extends$6({
|
5038
1560
|
xmlns: "http://www.w3.org/2000/svg",
|
5039
1561
|
viewBox: "5 5 84 84"
|
5040
1562
|
}, props), /*#__PURE__*/React.createElement("path", {
|
@@ -5042,8 +1564,8 @@ var share = (function (_ref) {
|
|
5042
1564
|
}));
|
5043
1565
|
});
|
5044
1566
|
|
5045
|
-
function _extends$
|
5046
|
-
_extends$
|
1567
|
+
function _extends$7() {
|
1568
|
+
_extends$7 = Object.assign || function (target) {
|
5047
1569
|
for (var i = 1; i < arguments.length; i++) {
|
5048
1570
|
var source = arguments[i];
|
5049
1571
|
|
@@ -5057,14 +1579,14 @@ function _extends$c() {
|
|
5057
1579
|
return target;
|
5058
1580
|
};
|
5059
1581
|
|
5060
|
-
return _extends$
|
1582
|
+
return _extends$7.apply(this, arguments);
|
5061
1583
|
}
|
5062
1584
|
var unmuted = (function (_ref) {
|
5063
1585
|
var _ref$styles = _ref.styles,
|
5064
1586
|
styles = _ref$styles === void 0 ? {} : _ref$styles,
|
5065
1587
|
props = _objectWithoutProperties(_ref, ["styles"]);
|
5066
1588
|
|
5067
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
1589
|
+
return /*#__PURE__*/React.createElement("svg", _extends$7({
|
5068
1590
|
"aria-hidden": "true",
|
5069
1591
|
"data-prefix": "fas",
|
5070
1592
|
"data-icon": "volume-mute",
|
@@ -5076,17 +1598,200 @@ var unmuted = (function (_ref) {
|
|
5076
1598
|
}));
|
5077
1599
|
});
|
5078
1600
|
|
1601
|
+
function _extends$8() {
|
1602
|
+
_extends$8 = Object.assign || function (target) {
|
1603
|
+
for (var i = 1; i < arguments.length; i++) {
|
1604
|
+
var source = arguments[i];
|
1605
|
+
|
1606
|
+
for (var key in source) {
|
1607
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
1608
|
+
target[key] = source[key];
|
1609
|
+
}
|
1610
|
+
}
|
1611
|
+
}
|
1612
|
+
|
1613
|
+
return target;
|
1614
|
+
};
|
1615
|
+
|
1616
|
+
return _extends$8.apply(this, arguments);
|
1617
|
+
}
|
1618
|
+
var email = (function (_ref) {
|
1619
|
+
var _ref$styles = _ref.styles,
|
1620
|
+
props = _objectWithoutProperties(_ref, ["styles"]);
|
1621
|
+
|
1622
|
+
return /*#__PURE__*/React.createElement("svg", _extends$8({
|
1623
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1624
|
+
viewBox: "0 0 612 612"
|
1625
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
1626
|
+
d: "M573.75 57.375H38.25C17.136 57.375 0 74.511 0 95.625v420.75c0 21.133 17.136 38.25 38.25 38.25h535.5c21.133 0 38.25-17.117 38.25-38.25V95.625c0-21.114-17.117-38.25-38.25-38.25zM554.625 497.25H57.375V204.657l224.03 187.999c7.134 5.967 15.874 8.97 24.595 8.97 8.74 0 17.461-3.003 24.595-8.97l224.03-187.999V497.25zm0-367.487L306 338.379 57.375 129.763V114.75h497.25v15.013z"
|
1627
|
+
}));
|
1628
|
+
});
|
1629
|
+
|
1630
|
+
function _extends$9() {
|
1631
|
+
_extends$9 = Object.assign || function (target) {
|
1632
|
+
for (var i = 1; i < arguments.length; i++) {
|
1633
|
+
var source = arguments[i];
|
1634
|
+
|
1635
|
+
for (var key in source) {
|
1636
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
1637
|
+
target[key] = source[key];
|
1638
|
+
}
|
1639
|
+
}
|
1640
|
+
}
|
1641
|
+
|
1642
|
+
return target;
|
1643
|
+
};
|
1644
|
+
|
1645
|
+
return _extends$9.apply(this, arguments);
|
1646
|
+
}
|
1647
|
+
var facebook = (function (_ref) {
|
1648
|
+
var _ref$styles = _ref.styles,
|
1649
|
+
props = _objectWithoutProperties(_ref, ["styles"]);
|
1650
|
+
|
1651
|
+
return /*#__PURE__*/React.createElement("svg", _extends$9({
|
1652
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1653
|
+
viewBox: "0 0 430.113 430.114"
|
1654
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
1655
|
+
d: "M158.081 83.3v59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805s5.601-34.721 8.316-72.685H247.54V92.74c0-7.4 9.717-17.354 19.321-17.354h48.557V.001h-66.021C155.878-.004 158.081 72.48 158.081 83.3z"
|
1656
|
+
}));
|
1657
|
+
});
|
1658
|
+
|
1659
|
+
function _extends$a() {
|
1660
|
+
_extends$a = Object.assign || function (target) {
|
1661
|
+
for (var i = 1; i < arguments.length; i++) {
|
1662
|
+
var source = arguments[i];
|
1663
|
+
|
1664
|
+
for (var key in source) {
|
1665
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
1666
|
+
target[key] = source[key];
|
1667
|
+
}
|
1668
|
+
}
|
1669
|
+
}
|
1670
|
+
|
1671
|
+
return target;
|
1672
|
+
};
|
1673
|
+
|
1674
|
+
return _extends$a.apply(this, arguments);
|
1675
|
+
}
|
1676
|
+
var linkedIn = (function (_ref) {
|
1677
|
+
var _ref$styles = _ref.styles,
|
1678
|
+
props = _objectWithoutProperties(_ref, ["styles"]);
|
1679
|
+
|
1680
|
+
return /*#__PURE__*/React.createElement("svg", _extends$a({
|
1681
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1682
|
+
viewBox: "0 0 430.117 430.117"
|
1683
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
1684
|
+
d: "M430.117 261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707-25.473 0-40.632 17.142-47.301 33.724-2.432 5.928-3.058 14.179-3.058 22.477V420.56h-92.219s1.242-251.285 0-277.32h92.21v39.309c-.187.294-.43.611-.606.896h.606v-.896c12.251-18.869 34.13-45.824 83.102-45.824 60.673-.001 106.157 39.636 106.157 124.818zM52.183 9.558C20.635 9.558 0 30.251 0 57.463c0 26.619 20.038 47.94 50.959 47.94h.616c32.159 0 52.159-21.317 52.159-47.94-.606-27.212-20-47.905-51.551-47.905zM5.477 420.56h92.184V143.24H5.477v277.32z"
|
1685
|
+
}));
|
1686
|
+
});
|
1687
|
+
|
1688
|
+
function _extends$b() {
|
1689
|
+
_extends$b = Object.assign || function (target) {
|
1690
|
+
for (var i = 1; i < arguments.length; i++) {
|
1691
|
+
var source = arguments[i];
|
1692
|
+
|
1693
|
+
for (var key in source) {
|
1694
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
1695
|
+
target[key] = source[key];
|
1696
|
+
}
|
1697
|
+
}
|
1698
|
+
}
|
1699
|
+
|
1700
|
+
return target;
|
1701
|
+
};
|
1702
|
+
|
1703
|
+
return _extends$b.apply(this, arguments);
|
1704
|
+
}
|
1705
|
+
var telegram = (function (_ref) {
|
1706
|
+
var _ref$styles = _ref.styles,
|
1707
|
+
props = _objectWithoutProperties(_ref, ["styles"]);
|
1708
|
+
|
1709
|
+
return /*#__PURE__*/React.createElement("svg", _extends$b({
|
1710
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1711
|
+
viewBox: "0 0 512.004 512.004"
|
1712
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
1713
|
+
d: "M508.194 20.517c-4.43-4.96-11.42-6.29-17.21-3.76l-482 211a15.01 15.01 0 00-8.98 13.41 15.005 15.005 0 008.38 13.79l115.09 56.6 28.68 172.06c.93 6.53 6.06 11.78 12.74 12.73 4.8.69 9.57-1 12.87-4.4l90.86-90.86 129.66 92.62a15.02 15.02 0 0014.24 1.74 15.01 15.01 0 009.19-11.01l90-451c.89-4.47-.26-9.26-3.52-12.92zm-372.84 263.45l-84.75-41.68 334.82-146.57-250.07 188.25zm46.94 44.59l-13.95 69.75-15.05-90.3 183.97-138.49-150.88 151.39c-2.12 2.12-3.53 4.88-4.09 7.65zm9.13 107.3l15.74-78.67 36.71 26.22-52.45 52.45zm205.41 19.94l-176.73-126.23 252.47-253.31-75.74 379.54z"
|
1714
|
+
}));
|
1715
|
+
});
|
1716
|
+
|
1717
|
+
function _extends$c() {
|
1718
|
+
_extends$c = Object.assign || function (target) {
|
1719
|
+
for (var i = 1; i < arguments.length; i++) {
|
1720
|
+
var source = arguments[i];
|
1721
|
+
|
1722
|
+
for (var key in source) {
|
1723
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
1724
|
+
target[key] = source[key];
|
1725
|
+
}
|
1726
|
+
}
|
1727
|
+
}
|
1728
|
+
|
1729
|
+
return target;
|
1730
|
+
};
|
1731
|
+
|
1732
|
+
return _extends$c.apply(this, arguments);
|
1733
|
+
}
|
1734
|
+
var twitter = (function (_ref) {
|
1735
|
+
var _ref$styles = _ref.styles,
|
1736
|
+
props = _objectWithoutProperties(_ref, ["styles"]);
|
1737
|
+
|
1738
|
+
return /*#__PURE__*/React.createElement("svg", _extends$c({
|
1739
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1740
|
+
viewBox: "0 0 612 612"
|
1741
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
1742
|
+
d: "M612 116.258a250.714 250.714 0 01-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 01-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"
|
1743
|
+
}));
|
1744
|
+
});
|
1745
|
+
|
1746
|
+
function _extends$d() {
|
1747
|
+
_extends$d = Object.assign || function (target) {
|
1748
|
+
for (var i = 1; i < arguments.length; i++) {
|
1749
|
+
var source = arguments[i];
|
1750
|
+
|
1751
|
+
for (var key in source) {
|
1752
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
1753
|
+
target[key] = source[key];
|
1754
|
+
}
|
1755
|
+
}
|
1756
|
+
}
|
1757
|
+
|
1758
|
+
return target;
|
1759
|
+
};
|
1760
|
+
|
1761
|
+
return _extends$d.apply(this, arguments);
|
1762
|
+
}
|
1763
|
+
var whatsApp = (function (_ref) {
|
1764
|
+
var _ref$styles = _ref.styles,
|
1765
|
+
props = _objectWithoutProperties(_ref, ["styles"]);
|
1766
|
+
|
1767
|
+
return /*#__PURE__*/React.createElement("svg", _extends$d({
|
1768
|
+
xmlns: "http://www.w3.org/2000/svg",
|
1769
|
+
viewBox: "0 0 90 90"
|
1770
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
1771
|
+
d: "M90 43.841c0 24.213-19.779 43.841-44.182 43.841a44.256 44.256 0 01-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 01-6.34-22.637C1.635 19.628 21.416 0 45.818 0 70.223 0 90 19.628 90 43.841zM45.818 6.982c-20.484 0-37.146 16.535-37.146 36.859 0 8.065 2.629 15.534 7.076 21.61L11.107 79.14l14.275-4.537A37.122 37.122 0 0045.819 80.7c20.481 0 37.146-16.533 37.146-36.857S66.301 6.982 45.818 6.982zm22.311 46.956c-.273-.447-.994-.717-2.076-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.358-1.717-.538-2.438.537-.721 1.076-2.797 3.495-3.43 4.212-.632.719-1.263.809-2.347.271-1.082-.537-4.571-1.673-8.708-5.333-3.219-2.848-5.393-6.364-6.025-7.441-.631-1.075-.066-1.656.475-2.191.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.717.182-1.344-.09-1.883-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.792-2.436-1.792-.631 0-1.354-.09-2.076-.09s-1.896.269-2.889 1.344c-.992 1.076-3.789 3.676-3.789 8.963 0 5.288 3.879 10.397 4.422 11.113.541.716 7.49 11.92 18.5 16.223C58.2 65.771 58.2 64.336 60.186 64.156c1.984-.179 6.406-2.599 7.312-5.107.9-2.512.9-4.663.631-5.111z"
|
1772
|
+
}));
|
1773
|
+
});
|
1774
|
+
|
5079
1775
|
var icons = {
|
1776
|
+
expand: ArrowRightIcon,
|
5080
1777
|
information: information,
|
5081
1778
|
muted: muted,
|
5082
1779
|
share: share,
|
5083
|
-
unmuted: unmuted
|
1780
|
+
unmuted: unmuted,
|
1781
|
+
email: email,
|
1782
|
+
facebook: facebook,
|
1783
|
+
linkedIn: linkedIn,
|
1784
|
+
telegram: telegram,
|
1785
|
+
twitter: twitter,
|
1786
|
+
whatsApp: whatsApp
|
5084
1787
|
};
|
5085
1788
|
/**
|
5086
1789
|
* Render an SVG icon that can be customized in themes.
|
5087
1790
|
*
|
5088
1791
|
* @param {Object} props
|
5089
|
-
* @param {string} props.name -
|
1792
|
+
* @param {string} props.name -
|
1793
|
+
* Either: expand, information, muted, share, unmuted,
|
1794
|
+
* email, facebook, linkedIn, telegram, twitter, whatsApp.
|
5090
1795
|
*/
|
5091
1796
|
|
5092
1797
|
function ThemeIcon(_ref) {
|
@@ -5125,16 +1830,17 @@ function presence(html) {
|
|
5125
1830
|
}
|
5126
1831
|
|
5127
1832
|
var utils = {
|
1833
|
+
camelize: camelize,
|
5128
1834
|
isBlank: isBlank,
|
5129
1835
|
presence: presence
|
5130
1836
|
};
|
5131
1837
|
|
5132
1838
|
var editMode = typeof window !== 'undefined' && window.location.pathname.indexOf('/editor/entries') === 0;
|
5133
|
-
var withShadowClassName = styles$
|
1839
|
+
var withShadowClassName = styles$a.withShadow;
|
5134
1840
|
|
5135
1841
|
global.pageflowScrolledRender = /*#__PURE__*/function () {
|
5136
|
-
var _ref = _asyncToGenerator( /*#__PURE__*/
|
5137
|
-
return
|
1842
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(seed) {
|
1843
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
5138
1844
|
while (1) {
|
5139
1845
|
switch (_context.prev = _context.next) {
|
5140
1846
|
case 0:
|
@@ -5216,4 +1922,4 @@ function Root(_ref2) {
|
|
5216
1922
|
}, /*#__PURE__*/React.createElement(Entry, null));
|
5217
1923
|
}
|
5218
1924
|
|
5219
|
-
export {
|
1925
|
+
export { AudioPlayerControls, ClassicPlayerControls, ContentElementBox, EditableInlineText, Entry, Figure, FitViewport, MediaInteractionTracking, MediaPlayerControls, Panorama, PlayerControls, Root, ThemeIcon, Tooltip, VideoPlayerControls, WaveformPlayerControls, Widget, registerTemplateWidgetType, textColorForBackgroundColor, useScrollPosition, utils, withShadowClassName };
|