pageflow 15.7.1 → 16.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (201) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +33 -243
  3. data/README.md +1 -9
  4. data/Rakefile +4 -1
  5. data/admins/pageflow/accounts.rb +12 -16
  6. data/admins/pageflow/entry.rb +57 -28
  7. data/admins/pageflow/entry_templates.rb +5 -7
  8. data/admins/pageflow/sites.rb +50 -0
  9. data/admins/pageflow/user.rb +7 -0
  10. data/app/assets/javascripts/pageflow/admin/entries.js +53 -4
  11. data/app/assets/stylesheets/pageflow/admin/permalink_input.scss +65 -0
  12. data/app/assets/stylesheets/pageflow/admin.scss +1 -0
  13. data/app/assets/stylesheets/pageflow/editor/base.scss +2 -6
  14. data/app/assets/stylesheets/pageflow/editor/dialogs.scss +2 -0
  15. data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +9 -0
  16. data/app/assets/stylesheets/pageflow/editor/info_box.scss +13 -3
  17. data/app/assets/stylesheets/pageflow/mixins/buttons.scss +1 -0
  18. data/app/assets/stylesheets/pageflow/page.scss +0 -2
  19. data/app/assets/stylesheets/pageflow/themes/default/page.scss +1 -1
  20. data/app/assets/stylesheets/pageflow/ui/forms.scss +4 -1
  21. data/app/controllers/pageflow/editor/file_import_controller.rb +32 -42
  22. data/app/controllers/pageflow/entries_controller.rb +27 -3
  23. data/app/helpers/pageflow/admin/permalinks_helper.rb +15 -0
  24. data/app/helpers/pageflow/common_entry_seed_helper.rb +1 -1
  25. data/app/helpers/pageflow/embed_code_helper.rb +1 -1
  26. data/app/helpers/pageflow/entries_helper.rb +25 -17
  27. data/app/helpers/pageflow/sites_helper.rb +11 -0
  28. data/app/helpers/pageflow/social_share_helper.rb +2 -2
  29. data/app/inputs/pageflow_permalink_input.rb +47 -0
  30. data/app/models/concerns/pageflow/permalinkable.rb +12 -0
  31. data/app/models/concerns/pageflow/reusable_file.rb +5 -0
  32. data/app/models/concerns/pageflow/uploadable_file.rb +4 -0
  33. data/app/models/pageflow/account.rb +7 -33
  34. data/app/models/pageflow/{cname_theming_request_scope.rb → cname_site_request_scope.rb} +3 -3
  35. data/app/models/pageflow/customized_theme.rb +5 -3
  36. data/app/models/pageflow/entry.rb +8 -4
  37. data/app/models/pageflow/entry_at_revision.rb +4 -3
  38. data/app/models/pageflow/entry_duplicate.rb +8 -1
  39. data/app/models/pageflow/entry_template.rb +4 -4
  40. data/app/models/pageflow/home_button.rb +7 -7
  41. data/app/models/pageflow/image_file_url_templates.rb +2 -2
  42. data/app/models/pageflow/permalink.rb +39 -0
  43. data/app/models/pageflow/permalink_directory.rb +10 -0
  44. data/app/models/pageflow/published_entry.rb +19 -2
  45. data/app/models/pageflow/revision.rb +1 -1
  46. data/app/models/pageflow/site.rb +59 -0
  47. data/app/models/pageflow/theme_customization.rb +1 -1
  48. data/app/models/pageflow/theme_customization_file.rb +6 -1
  49. data/app/policies/pageflow/account_policy.rb +2 -2
  50. data/app/policies/pageflow/entry_policy.rb +2 -2
  51. data/app/policies/pageflow/entry_template_policy.rb +1 -1
  52. data/app/policies/pageflow/{theming_policy.rb → site_policy.rb} +13 -11
  53. data/app/views/admin/accounts/_entry_template_details.html.arb +1 -1
  54. data/app/views/admin/accounts/_form.html.erb +4 -22
  55. data/app/views/admin/accounts/_site_defaults_inline_help.html.erb +5 -0
  56. data/app/views/admin/entries/_form.html.erb +11 -12
  57. data/app/views/admin/entries/_permalink_inputs.html.erb +6 -0
  58. data/app/views/admin/entries/_site_input.html.erb +15 -0
  59. data/app/views/admin/entries/{entry_type_name_input.html.erb → entry_site_and_type_name_input.html.erb} +3 -0
  60. data/app/views/admin/entries/permalink_inputs.html.erb +7 -0
  61. data/app/views/admin/entry_templates/_form.html.erb +5 -5
  62. data/app/views/admin/sites/_attributes_table.html.arb +9 -0
  63. data/app/views/admin/sites/_fields.html.erb +17 -0
  64. data/app/views/admin/sites/_form.html.erb +5 -0
  65. data/app/views/components/pageflow/admin/entries_tab.rb +1 -2
  66. data/app/views/components/pageflow/admin/entry_templates_tab.rb +10 -11
  67. data/app/views/components/pageflow/admin/features_tab.rb +1 -1
  68. data/app/views/components/pageflow/admin/sites_tab.rb +32 -0
  69. data/app/views/components/pageflow/admin/users_tab.rb +1 -2
  70. data/app/views/pageflow/editor/entries/seed.json.erb +1 -1
  71. data/app/views/pageflow/editor/file_import/start_import_job.json.jbuilder +10 -0
  72. data/app/views/pageflow/editor/sites/_site.json.jbuilder +1 -0
  73. data/app/views/pageflow/entries/{_theming.css.erb → _site.css.erb} +0 -0
  74. data/app/views/pageflow/entries/stylesheet.css.erb +1 -1
  75. data/app/views/pageflow/files/_file.json.jbuilder +1 -0
  76. data/app/views/pageflow/social_share/_entry_meta_tags.html.erb +1 -1
  77. data/app/views/pageflow/social_share/_page_meta_tags.html.erb +1 -1
  78. data/config/initializers/admin_resource_tabs.rb +29 -12
  79. data/config/initializers/mime_types.rb +1 -0
  80. data/config/locales/de.yml +19 -17
  81. data/config/locales/en.yml +19 -17
  82. data/config/routes.rb +8 -5
  83. data/db/migrate/20221024100724_create_pageflow_permalink_directories.rb +10 -0
  84. data/db/migrate/20221025074049_add_permalink_attributes_to_entries.rb +5 -0
  85. data/db/migrate/20221027065022_create_pageflow_permalinks.rb +12 -0
  86. data/db/migrate/20221215101134_rename_theming_to_site.rb +9 -0
  87. data/db/migrate/20221215120856_associate_entry_templates_with_sites.rb +34 -0
  88. data/db/migrate/20221219203023_add_name_to_sites.rb +5 -0
  89. data/db/migrate/20230103155934_associate_theme_customizations_with_sites.rb +27 -0
  90. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +176 -179
  91. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +49 -7
  92. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-client.js +5 -5
  93. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/react-server.js +1 -1
  94. data/entry_types/paged/config/initializers/features.rb +2 -0
  95. data/entry_types/paged/config/locales/{new/help.de.yml → de.yml} +74 -65
  96. data/entry_types/paged/config/locales/{new/help.en.yml → en.yml} +66 -56
  97. data/entry_types/scrolled/app/helpers/pageflow_scrolled/favicon_helper.rb +39 -13
  98. data/entry_types/scrolled/app/helpers/pageflow_scrolled/generated_media_queries_helper.rb +55 -0
  99. data/entry_types/scrolled/app/helpers/pageflow_scrolled/themes_helper.rb +6 -2
  100. data/entry_types/scrolled/app/views/pageflow_scrolled/editor/entries/_head.html.erb +2 -0
  101. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/_manifest.json.jbuilder +16 -0
  102. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +9 -3
  103. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder +5 -5
  104. data/entry_types/scrolled/app/views/pageflow_scrolled/favicons/_entry.html.erb +16 -10
  105. data/entry_types/scrolled/config/locales/de.yml +265 -76
  106. data/entry_types/scrolled/config/locales/en.yml +266 -77
  107. data/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb +3 -3
  108. data/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb +14 -0
  109. data/entry_types/scrolled/lib/pageflow_scrolled/react_widget_type.rb +1 -1
  110. data/entry_types/scrolled/lib/pageflow_scrolled/seeds.rb +1 -1
  111. data/entry_types/scrolled/lib/pageflow_scrolled/web_app_manifest.rb +11 -0
  112. data/entry_types/scrolled/lib/pageflow_scrolled.rb +39 -1
  113. data/entry_types/scrolled/lib/tasks/pageflow_scrolled/storybook.rake +3 -2
  114. data/entry_types/scrolled/package/contentElements-editor.js +124 -38
  115. data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
  116. data/entry_types/scrolled/package/contentElements-frontend.js +321 -27
  117. data/entry_types/scrolled/package/editor.js +1345 -739
  118. data/entry_types/scrolled/package/frontend/EditableInlineText.module-14c7b097.js +5314 -0
  119. data/entry_types/scrolled/package/frontend/{PhonePlatformContext-9fb97827.js → PhonePlatformContext-f6093cc6.js} +87 -223
  120. data/entry_types/scrolled/package/frontend/{Viewer-e2290ea0.js → Viewer-b6becc57.js} +6 -40
  121. data/entry_types/scrolled/package/frontend/arrowRight-78a7cee4.js +42 -0
  122. data/entry_types/scrolled/package/frontend/{components-6ab26015.js → components-b3160dd7.js} +546 -361
  123. data/entry_types/scrolled/package/frontend/index.css +1 -1
  124. data/entry_types/scrolled/package/frontend/index.js +398 -3692
  125. data/entry_types/scrolled/package/package.json +3 -2
  126. data/entry_types/scrolled/package/testHelpers.js +12 -2
  127. data/entry_types/scrolled/package/widgets/defaultNavigation.css +2 -2
  128. data/entry_types/scrolled/package/widgets/defaultNavigation.js +50 -40
  129. data/entry_types/scrolled/spec/fixtures/image.ico +0 -0
  130. data/lib/pageflow/ability_mixin.rb +16 -8
  131. data/lib/pageflow/admin/attributes_table_rows.rb +1 -1
  132. data/lib/pageflow/admin/form_inputs.rb +1 -1
  133. data/lib/pageflow/admin/tabs.rb +1 -1
  134. data/lib/pageflow/configuration/permissions.rb +3 -3
  135. data/lib/pageflow/configuration.rb +17 -17
  136. data/lib/pageflow/entry_export_import/entry_serialization.rb +1 -1
  137. data/lib/pageflow/entry_type.rb +6 -2
  138. data/lib/pageflow/primary_domain_entry_redirect.rb +7 -7
  139. data/lib/pageflow/seeds.rb +10 -10
  140. data/lib/pageflow/theme_customizations.rb +10 -10
  141. data/lib/pageflow/version.rb +1 -1
  142. data/package/editor.js +129 -156
  143. data/package/frontend.js +19 -2
  144. data/package/testHelpers.js +39 -6
  145. data/spec/factories/accounts.rb +5 -2
  146. data/spec/factories/draft_entries.rb +2 -2
  147. data/spec/factories/entries.rb +18 -1
  148. data/spec/factories/entry_templates.rb +1 -1
  149. data/spec/factories/permalink_directory.rb +6 -0
  150. data/spec/factories/permalinks.rb +4 -0
  151. data/spec/factories/published_entries.rb +4 -2
  152. data/spec/factories/sites.rb +9 -0
  153. metadata +50 -62
  154. data/app/assets/javascripts/pageflow/dist/editor.js +0 -11890
  155. data/app/assets/javascripts/pageflow/dist/frontend.js +0 -5800
  156. data/app/assets/javascripts/pageflow/dist/react-client.js +0 -22
  157. data/app/assets/javascripts/pageflow/dist/react-server.js +0 -19
  158. data/app/helpers/pageflow/themings_helper.rb +0 -11
  159. data/app/models/pageflow/theming.rb +0 -29
  160. data/app/views/admin/accounts/_theming_defaults_inline_help.html.erb +0 -5
  161. data/app/views/admin/accounts/_theming_details.html.arb +0 -5
  162. data/app/views/pageflow/editor/themings/_theming.json.jbuilder +0 -1
  163. data/entry_types/paged/config/locales/new/video_contain.de.yml +0 -7
  164. data/entry_types/paged/config/locales/new/video_contain.en.yml +0 -7
  165. data/entry_types/scrolled/config/locales/new/before_after_slider.de.yml +0 -8
  166. data/entry_types/scrolled/config/locales/new/before_after_slider.en.yml +0 -8
  167. data/entry_types/scrolled/config/locales/new/center_ragged.de.yml +0 -8
  168. data/entry_types/scrolled/config/locales/new/center_ragged.en.yml +0 -9
  169. data/entry_types/scrolled/config/locales/new/consent.de.yml +0 -25
  170. data/entry_types/scrolled/config/locales/new/consent.en.yml +0 -24
  171. data/entry_types/scrolled/config/locales/new/content_element_categories.de.yml +0 -39
  172. data/entry_types/scrolled/config/locales/new/content_element_categories.en.yml +0 -39
  173. data/entry_types/scrolled/config/locales/new/default_transition.de.yml +0 -14
  174. data/entry_types/scrolled/config/locales/new/default_transition.en.yml +0 -14
  175. data/entry_types/scrolled/config/locales/new/header_line_breaks.de.yml +0 -28
  176. data/entry_types/scrolled/config/locales/new/header_line_breaks.en.yml +0 -27
  177. data/entry_types/scrolled/config/locales/new/header_size.de.yml +0 -17
  178. data/entry_types/scrolled/config/locales/new/header_size.en.yml +0 -17
  179. data/entry_types/scrolled/config/locales/new/iframe_embed.de.yml +0 -39
  180. data/entry_types/scrolled/config/locales/new/iframe_embed.en.yml +0 -39
  181. data/entry_types/scrolled/config/locales/new/inline_loops.de.yml +0 -26
  182. data/entry_types/scrolled/config/locales/new/inline_loops.en.yml +0 -26
  183. data/entry_types/scrolled/config/locales/new/portrait_inline_image.de.yml +0 -9
  184. data/entry_types/scrolled/config/locales/new/portrait_inline_image.en.yml +0 -9
  185. data/entry_types/scrolled/config/locales/new/section_width.de.yml +0 -10
  186. data/entry_types/scrolled/config/locales/new/section_width.en.yml +0 -10
  187. data/entry_types/scrolled/config/locales/new/typography_variants.de.yml +0 -7
  188. data/entry_types/scrolled/config/locales/new/typography_variants.en.yml +0 -7
  189. data/entry_types/scrolled/config/locales/new/video_embed_poster.de.yml +0 -8
  190. data/entry_types/scrolled/config/locales/new/video_embed_poster.en.yml +0 -8
  191. data/entry_types/scrolled/config/locales/new/waveform_styles.de.yml +0 -11
  192. data/entry_types/scrolled/config/locales/new/waveform_styles.en.yml +0 -12
  193. data/entry_types/scrolled/config/locales/new/widgets.de.yml +0 -6
  194. data/entry_types/scrolled/config/locales/new/widgets.en.yml +0 -6
  195. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/browserconfig.xml +0 -9
  196. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/mstile-150x150.png +0 -0
  197. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/safari-pinned-tab.svg +0 -46
  198. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/site.webmanifest +0 -19
  199. data/entry_types/scrolled/package/frontend/EditableInlineText.module-b9923660.js +0 -993
  200. data/entry_types/scrolled/package/frontend/usePhonePlatform-2857c22b.js +0 -34
  201. data/spec/factories/themings.rb +0 -7
@@ -1,4 +1,6 @@
1
- import regeneratorRuntime from 'regenerator-runtime';
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, documentHiddenState, PlayerSourceIDMap, media, MultiPlayer, settings, consent, features } from 'pageflow/frontend';
75
- import React, { useReducer, useState, useLayoutEffect, useEffect, createContext, useContext, useCallback, useRef, useMemo, Suspense } from '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 { _ as _objectWithoutProperties, u as useI18n, a as _objectSpread2, b as _defineProperty, c as _slicedToArray, d as useLocale, e as useLegalInfo, f as useTheme, g as useEntryMetadata, h as useNestedFiles, i as useFile, j as useSectionContentElements, k as useSectionsWithChapter, l as useEntryStructure, m as useWidget, P as PhonePlatformContext, E as EntryStateProvider, L as LocaleProvider, n as getFileUrlTemplateHost, o as _toConsumableArray, p as useAvailableQualities, q as useEntryStateDispatch, r as useSection, s as setupI18n } from './PhonePlatformContext-9fb97827.js';
78
- export { L as LocaleProvider, s as setupI18n, t as useAdditionalSeedData, v as useChapters, w as useCredits, q as useEntryStateDispatch, i as useFile, x as useFileRights, u as useI18n, e as useLegalInfo, d as useLocale, y as useShareProviders, z as useShareUrl, f as useTheme } from './PhonePlatformContext-9fb97827.js';
79
- import I18n from 'i18n-js';
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 { u as useContentElementEditorState, a as useIsStaticPreview, c as createScrollPositionLifecycleProvider, b as createScrollPositionLifecycleHook, M as MotifArea, d as useMediaQuery, w as withInlineEditingDecorator, F as Foreground, L as Layout, e as usePostMessageListener, f as api, g as withInlineEditingAlternative, T as Text, S as StaticPreview, h as frontendStyles, l as loadInlineEditingComponents } from './EditableInlineText.module-b9923660.js';
85
- export { E as EditableText, T as Text, f as frontend, i as useContentElementConfigurationUpdate, j as useContentElementEditorCommandSubscription, u as useContentElementEditorState, k as useContentElementLifecycle, a as useIsStaticPreview, m as useOnScreen } from './EditableInlineText.module-b9923660.js';
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 regenerator = regeneratorRuntime;
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
- var _useSectionLifecycle = useSectionLifecycle(),
3359
- shouldPrepare = _useSectionLifecycle.shouldPrepare;
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
- var sectionProperties = useMemo(function () {
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
- function ConnectedSection(props) {
3437
- var contentElements = useSectionContentElements({
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
- function heightMode(section) {
3446
- if (section.fullHeight) {
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
- function percentToFraction(value, _ref3) {
3463
- var defaultValue = _ref3.defaultValue;
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
- var CurrentChapterContext = React.createContext();
3495
- var CurrentSectionIndexStateContext = React.createContext();
3496
- function CurrentSectionProvider(_ref) {
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(0),
169
+ var _useState = useState(),
3500
170
  _useState2 = _slicedToArray(_useState, 2),
3501
- currentSectionIndex = _useState2[0],
3502
- setCurrentSectionIndex = _useState2[1];
171
+ height = _useState2[0],
172
+ setHeight = _useState2[1];
3503
173
 
3504
- var currentSectionIndexState = useMemo(function () {
3505
- return [currentSectionIndex, setCurrentSectionIndex];
3506
- }, [currentSectionIndex, setCurrentSectionIndex]);
3507
- var sections = useSectionsWithChapter();
3508
- var currentSection = sections[currentSectionIndex];
3509
- return /*#__PURE__*/React.createElement(CurrentChapterContext.Provider, {
3510
- value: currentSection === null || currentSection === void 0 ? void 0 : currentSection.chapter
3511
- }, /*#__PURE__*/React.createElement(CurrentSectionIndexStateContext.Provider, {
3512
- value: currentSectionIndexState
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 useCurrentChapter() {
3532
- return useContext(CurrentChapterContext);
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 useCurrentSectionIndexState() {
3535
- return useContext(CurrentSectionIndexStateContext);
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(sections[currentSectionIndex]));
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
- var widget = useWidget({
3631
- role: role
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
- var _useContext = useContext(AudioFocusContext),
3733
- _useContext2 = _slicedToArray(_useContext, 2),
3734
- currentKey = _useContext2[0],
3735
- setCurrentKey = _useContext2[1];
318
+ if (!widget) {
319
+ return null;
320
+ }
3736
321
 
3737
- var previousKey = usePrevious(currentKey);
3738
- useEffect(function () {
3739
- if (request && !wasRequested) {
3740
- setCurrentKey(key);
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 RootProviders(_ref) {
3751
- var seed = _ref.seed,
3752
- _ref$consent = _ref.consent,
3753
- consent$1 = _ref$consent === void 0 ? consent : _ref$consent,
3754
- children = _ref.children;
3755
- return /*#__PURE__*/React.createElement(FocusOutlineProvider, null, /*#__PURE__*/React.createElement(BrowserFeaturesProvider, null, /*#__PURE__*/React.createElement(PhonePlatformProvider, null, /*#__PURE__*/React.createElement(MediaMutedProvider, null, /*#__PURE__*/React.createElement(AudioFocusProvider, null, /*#__PURE__*/React.createElement(EntryStateProvider, {
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__*/regenerator.mark(function _callee(seed) {
3768
- return regenerator.wrap(function _callee$(_context) {
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$i = {"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"};
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$i.root, _defineProperty({}, styles$i.invert, !darkBackground))
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$j = {"wrapper":"ContentElementBox-module_wrapper__3wZgP"};
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$j.wrapper
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$k = {"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"};
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$k.waveWrapper
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$l = {"timeDisplay":"TimeDisplay-module_timeDisplay__2UwqM","time":"TimeDisplay-module_time__li1ZU"};
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$l.timeDisplay
581
+ className: styles$3.timeDisplay
4008
582
  }, /*#__PURE__*/React.createElement("span", {
4009
- className: styles$l.time
583
+ className: styles$3.time
4010
584
  }, formatTime(props.currentTime)), "/", /*#__PURE__*/React.createElement("span", {
4011
- className: styles$l.time
585
+ className: styles$3.time
4012
586
  }, formatTime(props.duration)));
4013
587
  }
4014
588
 
4015
- var styles$m = {"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"};
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$5() {
4018
- _extends$5 = Object.assign || function (target) {
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$5.apply(this, arguments);
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$5({
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$m.subMenuExpanded, subMenuExpanded), styles$m.wrapper),
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$m.button,
669
+ className: styles$4.button,
4096
670
  title: props.title,
4097
671
  onClick: onButtonClick
4098
672
  }, React.createElement(props.icon, {
4099
- className: styles$m.icon
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$m.subMenu,
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$m.subMenuItem,
692
+ className: styles$4.subMenuItem,
4119
693
  key: item.value
4120
694
  }, /*#__PURE__*/React.createElement("button", {
4121
- className: styles$m.subMenuItemButton,
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$m.subMenuItemIcon
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$m.subMenuItemAnnotation
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$6() {
4157
- _extends$6 = Object.assign || function (target) {
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$6.apply(this, arguments);
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$6({
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$n = {"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"};
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$7() {
4207
- _extends$7 = Object.assign || function (target) {
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$7.apply(this, arguments);
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$7({
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$8() {
4236
- _extends$8 = Object.assign || function (target) {
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$8.apply(this, arguments);
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$8({
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$n.playControl,
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$n.controlsIcon
860
+ className: styles$5.controlsIcon
4287
861
  });
4288
862
  } else {
4289
863
  return /*#__PURE__*/React.createElement(PlayIcon, {
4290
- className: styles$n.controlsIcon
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$k.container)
878
+ className: classNames(styles$2.container)
4305
879
  }, props.children, /*#__PURE__*/React.createElement("div", {
4306
- className: styles$k.clickMask,
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$k.playControl
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$k.menuBar, darkBackground ? styles$n.darkBackground : styles$n.lightBackground, _defineProperty({}, styles$n.inset, !props.standAlone))
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$o = {"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-"};
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$o.button, (_classNames = {}, _defineProperty(_classNames, styles$o.hidden, props.hidden || props.lastControlledVia === 'playPauseButton'), _defineProperty(_classNames, styles$o.fadeIn, props.unplayed), _defineProperty(_classNames, styles$o.animated, !props.unplayed), _classNames));
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$o.container, (_classNames2 = {}, _defineProperty(_classNames2, styles$o.hideCursor, props.hideCursor), _defineProperty(_classNames2, styles$o.pointerCursor, !!props.onClick), _classNames2)),
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$p = {"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"};
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$p.container, _defineProperty({}, styles$p.dragging, dragging)),
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$p.wrapper
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$p.draggable)
1001
+ className: classNames(styles$7.draggable)
4428
1002
  }, /*#__PURE__*/React.createElement("div", {
4429
1003
  ref: measureRef,
4430
- className: styles$p.bars
1004
+ className: styles$7.bars
4431
1005
  }, /*#__PURE__*/React.createElement("div", {
4432
- className: styles$p.background
1006
+ className: styles$7.background
4433
1007
  }), /*#__PURE__*/React.createElement("div", {
4434
- className: styles$p.loadingProgressBar,
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$p.playProgressBar,
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$p.sliderHandle,
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$9() {
4460
- _extends$9 = Object.assign || function (target) {
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$9.apply(this, arguments);
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$9({
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$n.container
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$n.controlBarContainer, darkBackground ? styles$n.darkBackground : styles$n.lightBackground, (_classNames = {}, _defineProperty(_classNames, styles$n.inset, !props.standAlone), _defineProperty(_classNames, styles$n.transparent, transparent), _classNames))
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-e2290ea0.js');
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, _defineProperty({}, frontendStyles.manualHyphens, hyphens === 'manual'))
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$r = {"container":"FitViewport-module_container__-awVj","content":"FitViewport-module_content__1_K5a","inner":"FitViewport-module_inner__3psd1","opaque":"FitViewport-module_opaque__3EE3o"};
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
- var height = useContext(HeightContext);
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$r.container, _defineProperty({}, styles$r.opaque, opaque)),
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$r.content
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$r.inner
1422
+ className: styles$8.inner
4901
1423
  }, children));
4902
1424
  };
4903
1425
 
4904
- var styles$s = {"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"};
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$s.container, (_classNames = {}, _defineProperty(_classNames, styles$s.openOnHover, openOnHover), _defineProperty(_classNames, styles$s.fixed, fixed), _classNames)),
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$s.bubble, _defineProperty({}, styles$s.highlight, highlight))
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$s.arrow
1473
+ className: styles$9.arrow
4952
1474
  }), /*#__PURE__*/React.createElement("div", {
4953
- className: styles$s.inner
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$a() {
4983
- _extends$a = Object.assign || function (target) {
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$a.apply(this, arguments);
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$a({
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$b() {
5017
- _extends$b = Object.assign || function (target) {
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$b.apply(this, arguments);
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$b({
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$c() {
5046
- _extends$c = Object.assign || function (target) {
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$c.apply(this, arguments);
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$c({
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 - Either: information, muted, share or unmuted.
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$e.withShadow;
1839
+ var withShadowClassName = styles$a.withShadow;
5134
1840
 
5135
1841
  global.pageflowScrolledRender = /*#__PURE__*/function () {
5136
- var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(seed) {
5137
- return regenerator.wrap(function _callee$(_context) {
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 { Atmo, AtmoContext, AtmoProvider, AudioPlayer, AudioPlayerControls, ClassicPlayerControls, ContentElementBox, EditableInlineText, Entry, Figure, FitViewport, Image, MediaInteractionTracking, MediaPlayer, MediaPlayerControls, Panorama, PhonePlatformProvider, PlayerControls, Root, RootProviders, SectionThumbnail, ThemeIcon, OptIn as ThirdPartyOptIn, OptOutInfo as ThirdPartyOptOutInfo, Tooltip, VideoPlayer, VideoPlayerControls, WaveformPlayerControls, Widget, getAvailableTransitionNames, getInitialPlayerState, getTransitionNames, playerStateReducer, processSources, registerVendors as registerConsentVendors, registerTemplateWidgetType, textColorForBackgroundColor, useAtmo, useAudioFocus, useCurrentChapter, useDarkBackground, useMediaMuted, useOnUnmuteMedia, usePlayerState, usePortraitOrientation, useScrollPosition, utils, withShadowClassName };
1925
+ export { AudioPlayerControls, ClassicPlayerControls, ContentElementBox, EditableInlineText, Entry, Figure, FitViewport, MediaInteractionTracking, MediaPlayerControls, Panorama, PlayerControls, Root, ThemeIcon, Tooltip, VideoPlayerControls, WaveformPlayerControls, Widget, registerTemplateWidgetType, textColorForBackgroundColor, useScrollPosition, utils, withShadowClassName };