pageflow 15.3.0 → 15.4.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.

This version of pageflow might be problematic. Click here for more details.

Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +158 -353
  3. data/README.md +2 -3
  4. data/app/assets/javascripts/pageflow/dist/ui.js +99 -32
  5. data/app/assets/javascripts/pageflow/vendor.js +0 -1
  6. data/app/assets/stylesheets/pageflow/editor/base.scss +3 -2
  7. data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +1 -1
  8. data/app/assets/stylesheets/pageflow/editor/select_button.scss +1 -1
  9. data/app/assets/stylesheets/pageflow/editor/sidebar_footer.scss +1 -1
  10. data/app/assets/stylesheets/pageflow/entries.scss +1 -1
  11. data/app/assets/stylesheets/pageflow/loading_spinner.scss +4 -1
  12. data/app/assets/stylesheets/pageflow/navigation_mobile.scss +4 -4
  13. data/app/assets/stylesheets/pageflow/themes/default/anchors.scss +1 -1
  14. data/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss +1 -1
  15. data/app/assets/stylesheets/pageflow/themes/default/page/anchors.scss +1 -1
  16. data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/control_bar.scss +1 -1
  17. data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/info_box.scss +1 -1
  18. data/app/assets/stylesheets/pageflow/themes/default/player_controls/shared/menu_bar.scss +2 -2
  19. data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss +2 -2
  20. data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/info_box.scss +1 -1
  21. data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/quality_menu.scss +2 -2
  22. data/app/assets/stylesheets/pageflow/themes/default/player_controls/waveform/wave.scss +1 -1
  23. data/app/assets/stylesheets/pageflow/ui/forms.scss +9 -2
  24. data/app/assets/stylesheets/pageflow/ui/input/extended_select_input.scss +2 -2
  25. data/app/models/pageflow/account_role_query.rb +1 -1
  26. data/app/models/pageflow/managed_user_query.rb +1 -1
  27. data/app/policies/pageflow/folder_policy.rb +2 -2
  28. data/app/policies/pageflow/membership_policy.rb +2 -2
  29. data/app/policies/pageflow/theming_policy.rb +2 -2
  30. data/app/policies/pageflow/user_policy.rb +1 -1
  31. data/app/views/pageflow/video_files/_video_file.json.jbuilder +8 -1
  32. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +103 -36
  33. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +42 -15
  34. data/entry_types/paged/app/assets/javascripts/pageflow_paged/vendor.js +1 -0
  35. data/entry_types/paged/app/assets/javascripts/pageflow_paged/videojs.js +6 -0
  36. data/entry_types/paged/app/views/layouts/pageflow_paged/_loading_spinner_inline_script.html.erb +1 -0
  37. data/entry_types/paged/app/views/layouts/pageflow_paged/application.html.erb +1 -1
  38. data/entry_types/paged/app/views/pageflow_paged/editor/entries/_head.html.erb +2 -0
  39. data/entry_types/paged/lib/tasks/pageflow_paged_tasks.rake +7 -0
  40. data/{vendor/assets/javascripts → entry_types/paged/vendor/assets/javascripts/pageflow_paged/vendor}/dash.all.min.js +0 -0
  41. data/{vendor/assets/javascripts → entry_types/paged/vendor/assets/javascripts/pageflow_paged/vendor}/videojs-dash.js +0 -0
  42. data/{vendor/assets/javascripts → entry_types/paged/vendor/assets/javascripts/pageflow_paged/vendor}/videojs.js +0 -0
  43. data/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb +2 -0
  44. data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb +1 -0
  45. data/entry_types/scrolled/app/helpers/pageflow_scrolled/favicon_helper.rb +21 -0
  46. data/entry_types/scrolled/app/helpers/pageflow_scrolled/react_server_side_rendering_helper.rb +12 -5
  47. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +5 -7
  48. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder +1 -0
  49. data/entry_types/scrolled/app/views/pageflow_scrolled/favicons/_entry.html.erb +10 -0
  50. data/entry_types/scrolled/config/locales/de.yml +655 -0
  51. data/entry_types/scrolled/config/locales/en.yml +522 -0
  52. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +5 -0
  53. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/android-chrome-192x192.png +0 -0
  54. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/android-chrome-512x512.png +0 -0
  55. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/apple-touch-icon.png +0 -0
  56. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/browserconfig.xml +9 -0
  57. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/favicon-16x16.png +0 -0
  58. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/favicon-32x32.png +0 -0
  59. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/favicon.ico +0 -0
  60. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/mstile-150x150.png +0 -0
  61. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/safari-pinned-tab.svg +46 -0
  62. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/site.webmanifest +19 -0
  63. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/unmute.mp3 +0 -0
  64. data/entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake +1 -0
  65. data/entry_types/scrolled/package/contentElements-editor.js +14 -1
  66. data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
  67. data/entry_types/scrolled/package/contentElements-frontend.js +338 -104
  68. data/entry_types/scrolled/package/editor.js +594 -242
  69. data/entry_types/scrolled/package/frontend/{EditableText-4264c349.js → EditableText-43c50894.js} +331 -163
  70. data/entry_types/scrolled/package/frontend/{Wavesurfer-c3c45324.js → Wavesurfer-b88b02e0.js} +0 -3
  71. data/entry_types/scrolled/package/frontend/{components-cfe6a479.js → components-3ead1b4a.js} +509 -91
  72. data/entry_types/scrolled/package/frontend/index.css +2 -2
  73. data/entry_types/scrolled/package/frontend/index.js +2107 -1025
  74. data/entry_types/scrolled/package/package.json +15 -3
  75. data/lib/generators/pageflow/initializer/templates/pageflow.rb +2 -1
  76. data/lib/pageflow/engine.rb +0 -1
  77. data/lib/pageflow/themes.rb +4 -0
  78. data/lib/pageflow/version.rb +1 -1
  79. data/package/config/jest/index.js +7 -2
  80. data/package/config/webpack.js +1 -2
  81. data/package/editor.js +4 -4
  82. data/package/frontend.js +30 -13
  83. data/package/ui.js +99 -32
  84. metadata +25 -11
  85. data/app/assets/javascripts/pageflow/videojs.js +0 -6
  86. data/entry_types/scrolled/config/locales/new/de.yml +0 -601
  87. data/entry_types/scrolled/config/locales/new/en.yml +0 -507
data/entry_types/scrolled/package/frontend/index.css CHANGED
@@ -1,4 +1,4 @@
1
- .ContentElementMargin-module_wrapper__20kIk{margin:1em 0 0}.useScrollPositionLifecycle-module_wrapper__1a6Kr{position:relative}.useScrollPositionLifecycle-module_isActiveProbe__3VKB5{position:absolute;top:0;left:0;bottom:2px;width:1px}.Text-module_h2__34chJ{font-size:66px;font-weight:700}.Text-module_h1__2_5kX{font-size:110px;line-height:1}.Text-module_body__4oWD-{font-size:22px;line-height:1.4}.Text-module_caption__3_6Au{font-size:20px;line-height:1.4}@media (max-width:600px){.Text-module_h2__34chJ{font-size:40px}.Text-module_h1__2_5kX{font-size:66px}}.SelectionRect-module_main__3AOhG{position:relative}.SelectionRect-module_main__3AOhG:after{content:"";position:absolute;top:-.5em;left:-.5em;right:-.5em;bottom:-.5em;pointer-events:none;opacity:.8}.SelectionRect-module_full__3tsQF:after{left:0;right:0}.SelectionRect-module_selected__1PhM6:after{border-left:1px solid;border-right:1px solid}.SelectionRect-module_toolbar__3nPrd{position:absolute;top:-40px;right:-15px;z-index:1;pointer-events:all}.SelectionRect-module_insert__w0Tl0{display:none;text-align:center;position:absolute;width:100%;opacity:.8;pointer-events:none}.SelectionRect-module_insertHovered__VTsDD.SelectionRect-module_insert__w0Tl0{opacity:1}.SelectionRect-module_end__3qOoK .SelectionRect-module_insert-after__3FJ4R,.SelectionRect-module_start__3_nAf .SelectionRect-module_insert-before__2Tyq5{display:block}.SelectionRect-module_insert__w0Tl0:after,.SelectionRect-module_insert__w0Tl0:before{content:"";position:absolute;top:0;width:calc(50% - 5px);height:0;border-bottom:1px solid}.SelectionRect-module_insert__w0Tl0:before{left:-.5em}.SelectionRect-module_insert__w0Tl0:after{right:-.5em}.SelectionRect-module_full__3tsQF .SelectionRect-module_insert__w0Tl0:after,.SelectionRect-module_full__3tsQF .SelectionRect-module_insert__w0Tl0:before{width:calc(50% - 5px + -.5em)}.SelectionRect-module_full__3tsQF .SelectionRect-module_insert__w0Tl0:before{left:0}.SelectionRect-module_full__3tsQF .SelectionRect-module_insert__w0Tl0:after{right:0}.SelectionRect-module_insertButton__1g-ZG{pointer-events:all;border:0;background:none;color:currentColor;display:inline-block;vertical-align:top;position:relative;top:-9px;padding:2px 10px}.SelectionRect-module_insert-before__2Tyq5{top:-.5em}.SelectionRect-module_insert-after__3FJ4R{top:calc(100% + .5em)}.TextPlaceholder-module_placeholder__sgVwx{position:absolute;transform:translateY(-100%);pointer-events:none;opacity:.5}.ContentElementInsertButton-module_container__3dvUS{height:0;position:relative;top:1em;text-align:center;opacity:.8}.ContentElementInsertButton-module_hovered__3Pggi{opacity:1}.ContentElementInsertButton-module_container__3dvUS:after,.ContentElementInsertButton-module_container__3dvUS:before{content:"";border-top:1px solid;width:calc(50% - 20px);position:absolute;top:0}.ContentElementInsertButton-module_container__3dvUS:before{left:0}.ContentElementInsertButton-module_container__3dvUS:after{right:0}.ContentElementInsertButton-module_button__2-eE2{border:0;background:none;color:currentColor;position:relative;top:-8px}.Toolbar-module_Toolbar__1INSj{background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);display:flex;gap:2px}.Toolbar-module_button__de5BW{border:0;background:#fff;padding:10px;opacity:.6}.Toolbar-module_button__de5BW:hover{opacity:1}.Toolbar-module_activeButton__2sOLP{background:#ddd;opacity:1}@media (max-width:460px){.Toolbar-module_collapsible__3sivb .Toolbar-module_button__de5BW{display:none}.Toolbar-module_collapsible__3sivb .Toolbar-module_activeButton__2sOLP,.Toolbar-module_collapsible__3sivb:focus-within .Toolbar-module_button__de5BW,.Toolbar-module_collapsible__3sivb:hover .Toolbar-module_button__de5BW{display:inline-block}}.index-module_container__3dD9z{position:relative}.index-module_hoveringToolbar__31Xpd{position:absolute;z-index:2;top:-10000px;left:-10000px;margin-top:-6px;opacity:0;white-space:nowrap}.index-module_selection__3dUiD{display:none;position:absolute;z-index:1;width:100%;pointer-events:none}.index-module_linkTooltip__36m1K{background-color:#222;border-radius:4px;font-family:Helvetica,"Sans-Serif";font-size:13px;line-height:1;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.index-module_linkTooltip__36m1K:before{content:"";display:block;position:absolute;left:20px;bottom:100%;border:4px solid transparent;border-bottom-color:#222}.index-module_linkTooltip__36m1K a,.index-module_linkTooltip__36m1K button,.index-module_linkTooltip__36m1K input{color:#fff;background-color:transparent;border:0;display:inline-block;padding:10px}.index-module_linkTooltip__36m1K input{outline:none}.index-module_linkTooltip__36m1K button{border:0;cursor:pointer}.index-module_linkTooltip__36m1K svg{padding-left:7px}.SectionDecorator-module_wrapper__3sTk3{position:relative}.SectionDecorator-module_selected__1gcmF>section:before{content:"";display:block;position:absolute;border:1px solid;top:5px;left:5px;right:5px;bottom:5px;z-index:9;pointer-events:none}.SectionDecorator-module_transitionSelected__Wklk6>section:before{content:"";position:absolute;display:block;top:0;width:100%;border-top:2px dotted #fff;z-index:9;background-color:#555;opacity:.7}.SectionDecorator-module_controls__LVEJG{position:absolute;top:-33px;right:0;height:100%;padding-left:20px;z-index:10;display:none}.SectionDecorator-module_selected__1gcmF .SectionDecorator-module_controls__LVEJG,.SectionDecorator-module_transitionSelected__Wklk6 .SectionDecorator-module_controls__LVEJG{display:block}.SectionDecorator-module_transitionSelected__Wklk6 .SectionDecorator-module_editToolbar__18Kjq{visibility:hidden}.SectionDecorator-module_toolbar__2Va1D{position:absolute;padding:10px 0 10px 10px;z-index:10;overflow:hidden}.SectionDecorator-module_editToolbar__18Kjq{position:-webkit-sticky;position:sticky;top:calc(50vh - 30px);margin-top:55px}.SectionDecorator-module_transitionToolbar-before__KipOO{top:0}.SectionDecorator-module_transitionToolbar-after__2_DVO{bottom:-63px}.ContentElement-module_missing__2_1j9{color:#000;background-color:#fff;border-left:5px solid #f44336;padding:.5em;margin:1em 0 0}.TwoColumn-module_group__3Hg2y{margin-left:8%;margin-right:8%}.TwoColumn-module_group-full__2OT4o{margin-left:0;margin-right:0}.TwoColumn-module_inline__1fPfM,.TwoColumn-module_sticky__4LCDO{max-width:500px}.TwoColumn-module_narrow__qAgnL.TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO,.TwoColumn-module_right__Fr52a .TwoColumn-module_inline__1fPfM{margin-left:auto}.TwoColumn-module_wide__xdF_t .TwoColumn-module_sticky__4LCDO{position:-webkit-sticky;position:sticky;float:right;clear:right;top:33%;width:30%;max-width:600px}.TwoColumn-module_wide__xdF_t.TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO{float:left}.Center-module_outer__3Rr0H{margin-left:8%;margin-right:8%}.Center-module_outer-full__3dknO{margin-left:0;margin-right:0}.Center-module_item__1KSs3{margin-left:auto;margin-right:auto;max-width:700px}.Center-module_item-full__1cEuv{margin-left:0;margin-right:0;max-width:none}@media (min-width:950px){.Center-module_inner-left__2z9Ea,.Center-module_inner-right__KBkVt{margin-top:.375em}.Center-module_inner-left__2z9Ea{float:left;width:60%;margin-left:-10%;margin-right:1em;margin-bottom:1em}.Center-module_inner-right__KBkVt{float:right;width:60%;margin-right:-10%;margin-left:1em;margin-bottom:1em}}.Foreground-module_Foreground__13ODU{position:relative;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.Foreground-module_fullFadeHeight__2p9dx{min-height:51vh}.Foreground-module_fullHeight__1vMXb{min-height:100vh}.Foreground-module_paddingBottom__3OtY4{padding-bottom:3em}header svg{fill:#c2c2c2;cursor:pointer}header svg:hover{fill:#00375a}.AppHeader-module_navigationBar__2EFHw{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;position:-webkit-sticky;position:sticky;top:-50px;transition:top .15s;z-index:10000;width:100%;text-align:center;height:0}.AppHeader-module_navigationBarExpanded__18nbf{top:0}.AppHeader-module_navigationBarContentWrapper__2Sf8y{position:relative;z-index:2;background-color:#fff;height:50px}.AppHeader-module_menuIcon__5JKuj{position:absolute}.AppHeader-module_contextIcons__23I_3{position:absolute;top:0;right:0;width:80px;height:50px;padding:0 12px}.AppHeader-module_contextIcon__157kW{float:right;width:40px;height:50px}.AppHeader-module_logo__2E1pn{top:0;left:15px;height:100%}.AppHeader-module_chapterList__2lMMD{padding:0;margin:0;list-style:none}.AppHeader-module_chapterListItem__28zrc{position:relative;display:inline-block;padding:0 15px;border-right:1px solid #e9e9e9}.AppHeader-module_chapterListItem__28zrc:last-of-type{border-right:none}.AppHeader-module_navigationTooltip__1EvCy{opacity:1!important;box-shadow:0 0 .3125rem rgba(0,0,0,.2)}.AppHeader-module_progressBar__17IVu{background-color:hsla(0,0%,76.1%,.8);height:8px;width:100%}.AppHeader-module_progressIndicator__3SlYz{position:absolute;top:0;left:0;width:0;height:100%;background-color:#e10028}@media (max-width:780px){.AppHeader-module_logo__2E1pn{position:inherit}.AppHeader-module_navigationChapters__1dzyV{touch-action:none;display:block;position:fixed;top:60px;left:0;background:hsla(0,0%,100%,.95);width:100vw;height:100vh}.AppHeader-module_navigationChaptersHidden__8AEPA{display:none}.AppHeader-module_chapterList__2lMMD{margin-top:50px}.AppHeader-module_chapterListItem__28zrc{display:list-item;width:80vw;padding:25px 10vw;border-right:none}.AppHeader-module_chapterListItem__28zrc:after,.AppHeader-module_chapterListItem__28zrc:before{display:table;content:" ";border-top:1px solid #646464;width:14%;margin:0 43%;transition:width .15s,margin .15s}.AppHeader-module_chapterListItem__28zrc:hover:after,.AppHeader-module_chapterListItem__28zrc:hover:before{border-top:1px solid #00375a;width:80%;margin:0 10%}.AppHeader-module_chapterListItem__28zrc p{margin-top:0}.AppHeader-module_progressBar__17IVu{height:10px}}.HamburgerIcon-module_burgerMenuIconContainer__26RY4{display:none}.HamburgerIcon-module_burgerMenuIcon__24t-5{top:12px;left:12px;outline:none}@media (max-width:780px){.HamburgerIcon-module_burgerMenuIconContainer__26RY4{display:block}}
1
+ .Toolbar-module_Toolbar__1INSj{background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);display:flex;gap:2px}.Toolbar-module_button__de5BW{border:0;background:#fff;padding:10px;opacity:.6}.Toolbar-module_button__de5BW:hover{opacity:1}.Toolbar-module_activeButton__2sOLP{background:#ddd;opacity:1}@media (max-width:460px){.Toolbar-module_collapsible__3sivb .Toolbar-module_button__de5BW{display:none}.Toolbar-module_collapsible__3sivb .Toolbar-module_activeButton__2sOLP,.Toolbar-module_collapsible__3sivb:focus-within .Toolbar-module_button__de5BW,.Toolbar-module_collapsible__3sivb:hover .Toolbar-module_button__de5BW{display:inline-block}}.ContentElementMargin-module_wrapper__20kIk{margin:1em 0 0}.ContentElement-module_missing__2_1j9{color:#000;background-color:#fff;border-left:5px solid #f44336;padding:.5em;margin:1em 0 0}.Text-module_h2__34chJ{font-size:66px;font-weight:700}.Text-module_h1__2_5kX{font-size:110px;line-height:1}.Text-module_body__4oWD-{font-size:22px;line-height:1.4}.Text-module_caption__3_6Au{font-size:20px;line-height:1.4}@media (max-width:600px){.Text-module_h2__34chJ{font-size:40px}.Text-module_h1__2_5kX{font-size:66px}}.TextPlaceholder-module_placeholder__sgVwx{pointer-events:none;opacity:.5;height:0}.TextPlaceholder-module_placeholder__sgVwx>div{transform:translateY(-100%)}.useScrollPositionLifecycle-module_wrapper__1a6Kr{position:relative}.useScrollPositionLifecycle-module_isActiveProbe__3VKB5{position:absolute;top:0;left:0;bottom:2px;width:1px}.DropTargets-module_target__Z2N2d{position:absolute;height:50%;width:100%;left:-50px;padding-left:50px;padding-bottom:.5em;opacity:.8}.DropTargets-module_target__Z2N2d:before{content:"";position:absolute;display:block;left:50px;right:0}.DropTargets-module_target__Z2N2d.DropTargets-module_isOver__3ksFy:before{border-top:2px solid}.DropTargets-module_before__cAXo1{top:-.5em}.DropTargets-module_before__cAXo1:before{top:-1px}.DropTargets-module_after__2Q8QU{top:50%}.DropTargets-module_after__2Q8QU:before{top:calc(100% - 1px)}.SelectionRect-module_main__3AOhG{position:relative}.SelectionRect-module_main__3AOhG:after,.SelectionRect-module_main__3AOhG:before{content:"";position:absolute;top:-.5em;left:-.5em;right:-.5em;bottom:-.5em;pointer-events:none;opacity:.8}.SelectionRect-module_draggable__3Qp53:not(.SelectionRect-module_full__3tsQF):before{top:5px}.SelectionRect-module_full__3tsQF:after,.SelectionRect-module_full__3tsQF:before{left:0;right:0}.SelectionRect-module_selected__1PhM6:before{border-left:1px solid}.SelectionRect-module_selected__1PhM6:after{border-right:1px solid}.SelectionRect-module_toolbar__3nPrd{position:absolute;top:-40px;right:-15px;z-index:1;pointer-events:auto}.SelectionRect-module_insert__w0Tl0{display:none;text-align:center;position:absolute;width:100%;opacity:.8;pointer-events:none}.SelectionRect-module_insertHovered__VTsDD.SelectionRect-module_insert__w0Tl0{opacity:1}.SelectionRect-module_end__3qOoK .SelectionRect-module_insert-after__3FJ4R,.SelectionRect-module_start__3_nAf .SelectionRect-module_insert-before__2Tyq5{display:block}.SelectionRect-module_insert__w0Tl0:after,.SelectionRect-module_insert__w0Tl0:before{content:"";position:absolute;top:0;width:calc(50% - 5px);height:0;border-bottom:1px solid}.SelectionRect-module_insert__w0Tl0:before{left:-.5em}.SelectionRect-module_insert__w0Tl0:after{right:-.5em}.SelectionRect-module_draggable__3Qp53:not(.SelectionRect-module_full__3tsQF) .SelectionRect-module_insert-before__2Tyq5:before{left:5px;width:calc(50% - 10px - .5em)}.SelectionRect-module_full__3tsQF .SelectionRect-module_insert__w0Tl0:after,.SelectionRect-module_full__3tsQF .SelectionRect-module_insert__w0Tl0:before{width:calc(50% - 5px + -.5em)}.SelectionRect-module_full__3tsQF .SelectionRect-module_insert__w0Tl0:before{left:0}.SelectionRect-module_full__3tsQF .SelectionRect-module_insert__w0Tl0:after{right:0}.SelectionRect-module_insertButton__1g-ZG{pointer-events:auto;border:0;background:none;color:currentColor;display:inline-block;vertical-align:top;position:relative;top:-9px;padding:2px 10px}.SelectionRect-module_insert-before__2Tyq5{top:-.5em}.SelectionRect-module_insert-after__3FJ4R{top:calc(100% + .5em)}.SelectionRect-module_dragHandle__2vVhP{position:absolute;top:-7px;left:10px;transform:translate(-100%,-50%);z-index:1;visibility:hidden;padding:10px;cursor:move}.SelectionRect-module_selected__1PhM6 .SelectionRect-module_dragHandle__2vVhP{visibility:visible}.SelectionRect-module_full__3tsQF .SelectionRect-module_dragHandle__2vVhP{left:0;top:0;transform:translate(0);background:radial-gradient(rgba(0,0,0,.72),transparent 50%)}.SelectionRect-module_dragHandle__2vVhP svg{display:block;color:currentColor;width:15px;height:15px;opacity:.8}.SelectionRect-module_dragHandle__2vVhP:hover svg{opacity:1}.SelectionRect-module_full__3tsQF .SelectionRect-module_dragHandle__2vVhP svg{color:#fff}.ContentElementInsertButton-module_container__3dvUS{height:0;position:relative;top:1em;text-align:center;opacity:.8}.ContentElementInsertButton-module_hovered__3Pggi{opacity:1}.ContentElementInsertButton-module_container__3dvUS:after,.ContentElementInsertButton-module_container__3dvUS:before{content:"";border-top:1px solid;width:calc(50% - 20px);position:absolute;top:0}.ContentElementInsertButton-module_container__3dvUS:before{left:0}.ContentElementInsertButton-module_container__3dvUS:after{right:0}.ContentElementInsertButton-module_button__2-eE2{border:0;background:none;color:currentColor;position:relative;top:-8px}.DropTargets-module_container__3vudG{position:absolute;top:-.5em;left:-50px;width:100%;height:100%;padding:.5em 0 8px 50px}.DropTargets-module_dropTarget__3mmox{position:absolute;left:0;width:100%;opacity:.8}.DropTargets-module_dropIndicator__2zu4d{position:absolute;left:50px;right:0;border-top:2px solid;opacity:0}.DropTargets-module_isOver__2usWn .DropTargets-module_dropIndicator__2zu4d{opacity:1}.Foreground-module_Foreground__13ODU{position:relative;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.Foreground-module_fullFadeHeight__2p9dx{min-height:51vh}.Foreground-module_fullHeight__1vMXb{min-height:100vh}.Foreground-module_inFirstSection__1r-_i{padding-top:58px}.Foreground-module_paddingBottom__3OtY4{padding-bottom:3em}.index-module_container__3dD9z{position:relative}.index-module_hoveringToolbar__31Xpd{position:absolute;z-index:2;top:-10000px;left:-10000px;margin-top:-6px;opacity:0;white-space:nowrap}.index-module_selection__3dUiD{display:none;position:absolute;z-index:1;width:100%;pointer-events:none}.index-module_linkTooltip__36m1K{background-color:#222;border-radius:4px;font-family:Helvetica,Arial,"Sans-Serif";font-size:13px;line-height:1;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.index-module_linkTooltip__36m1K:before{content:"";display:block;position:absolute;left:20px;bottom:100%;border:4px solid transparent;border-bottom-color:#222}.index-module_linkTooltip__36m1K a,.index-module_linkTooltip__36m1K button,.index-module_linkTooltip__36m1K input{color:#fff;background-color:transparent;border:0;display:inline-block;padding:10px}.index-module_linkTooltip__36m1K input{outline:none}.index-module_linkTooltip__36m1K button{border:0;cursor:pointer}.index-module_linkTooltip__36m1K svg{padding-left:7px}.MotifArea-module_root__1_ACd{position:absolute;background:radial-gradient(transparent,currentColor);z-index:2;opacity:0;-webkit-transform:translateZ(0)}.MotifArea-module_visible__18Kln{opacity:.2}.SectionDecorator-module_wrapper__3sTk3{position:relative}.SectionDecorator-module_selected__1gcmF>section:before{content:"";display:block;position:absolute;border:1px solid;top:5px;left:5px;right:5px;bottom:5px;z-index:9;pointer-events:none}.SectionDecorator-module_transitionSelected__Wklk6>section:before{content:"";position:absolute;display:block;top:0;width:100%;border-top:2px dotted #fff;z-index:9;background-color:#555;opacity:.7}.SectionDecorator-module_controls__LVEJG{position:absolute;top:-33px;right:0;height:100%;width:50px;padding-left:20px;z-index:10;display:none}.SectionDecorator-module_selected__1gcmF .SectionDecorator-module_controls__LVEJG,.SectionDecorator-module_transitionSelected__Wklk6 .SectionDecorator-module_controls__LVEJG{display:block}.SectionDecorator-module_transitionSelected__Wklk6 .SectionDecorator-module_editToolbar__18Kjq{visibility:hidden}.SectionDecorator-module_toolbar__2Va1D{position:absolute;padding:10px 0 10px 10px;z-index:10;overflow:hidden}.SectionDecorator-module_transitionToolbar-before__KipOO{top:0}.SectionDecorator-module_transitionToolbar-after__2_DVO{bottom:-63px}.Center-module_outer__3Rr0H{margin-left:8%;margin-right:8%}.Center-module_outer-full__3dknO{margin-left:0;margin-right:0}.Center-module_item__1KSs3{margin-left:auto;margin-right:auto;max-width:700px}.Center-module_item-full__1cEuv{margin-left:0;margin-right:0;max-width:none}.Center-module_clear__jJEap{clear:both}@media (min-width:950px){.Center-module_inner-left__2z9Ea,.Center-module_inner-right__KBkVt{margin-top:.375em;position:relative;z-index:1}.Center-module_inner-left__2z9Ea{float:left;width:60%;margin-left:-10%;margin-right:1em;margin-bottom:1em}.Center-module_inner-right__KBkVt{float:right;width:60%;margin-right:-10%;margin-left:1em;margin-bottom:1em}}.TwoColumn-module_group__3Hg2y{margin-left:8%;margin-right:8%}.TwoColumn-module_group-full__2OT4o{margin-left:0;margin-right:0}.TwoColumn-module_inline__1fPfM,.TwoColumn-module_sticky__4LCDO{max-width:500px}.TwoColumn-module_narrow__qAgnL.TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO,.TwoColumn-module_right__Fr52a .TwoColumn-module_inline__1fPfM{margin-left:auto}.TwoColumn-module_wide__xdF_t .TwoColumn-module_sticky__4LCDO{position:-webkit-sticky;position:sticky;float:right;clear:right;top:33%;width:30%;max-width:600px}.TwoColumn-module_wide__xdF_t.TwoColumn-module_right__Fr52a .TwoColumn-module_sticky__4LCDO{float:left}.AppHeader-module_navigationBar__2EFHw{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;position:fixed;top:-50px;transition:top .15s;z-index:10000;width:100%;text-align:center;height:0}.AppHeader-module_navigationBarExpanded__18nbf{top:0}.AppHeader-module_navigationBarContentWrapper__2Sf8y{position:relative;z-index:2;background-color:#fff;height:50px}.AppHeader-module_menuIcon__5JKuj{position:absolute}.AppHeader-module_contextIcons__23I_3{position:absolute;top:0;right:0;display:flex;overflow:hidden;padding:0 12px 100% 300px;pointer-events:none}.AppHeader-module_contextIcons__23I_3>*{pointer-events:auto}.AppHeader-module_contextIcon__157kW{cursor:pointer;width:40px;height:50px;fill:#c2c2c2}.AppHeader-module_contextIcon__157kW:hover,div:focus-within>.AppHeader-module_contextIcon__157kW{fill:#00375a}.AppHeader-module_logo__2E1pn{top:0;left:15px;height:100%}.AppHeader-module_logo__2E1pn img{height:100%}.AppHeader-module_chapterList__2lMMD{padding:0;margin:0;list-style:none}.AppHeader-module_chapterListItem__28zrc{position:relative;display:inline-block;padding:0 15px;border-right:1px solid #e9e9e9}.AppHeader-module_chapterListItem__28zrc:last-of-type{border-right:none}.AppHeader-module_navigationTooltip__1EvCy{opacity:1!important;box-shadow:0 0 .3125rem rgba(0,0,0,.2)}.AppHeader-module_progressBar__17IVu{position:relative;background-color:hsla(0,0%,76.1%,.8);height:8px;width:100%}.AppHeader-module_progressIndicator__3SlYz{position:absolute;top:0;left:0;width:0;height:100%;background-color:#e10028}@media (max-width:780px){.AppHeader-module_hasChapters__CTJWZ .AppHeader-module_logo__2E1pn{left:65px}.AppHeader-module_navigationChapters__1dzyV{display:block;position:fixed;top:60px;left:0;background:hsla(0,0%,100%,.95);width:100vw;height:calc(100vh - 60px);-ms-scroll-chaining:none;overscroll-behavior:contain;overflow:scroll}.AppHeader-module_navigationChaptersHidden__8AEPA{display:none}.AppHeader-module_chapterList__2lMMD{padding-top:50px;box-sizing:border-box;min-height:101%}.AppHeader-module_chapterListItem__28zrc{display:list-item;width:80vw;padding:25px 10vw;border-right:none}.AppHeader-module_chapterListItem__28zrc:after,.AppHeader-module_chapterListItem__28zrc:before{display:table;content:" ";border-top:1px solid #646464;width:14%;margin:0 43%;transition:width .15s,margin .15s}.AppHeader-module_chapterListItem__28zrc:hover:after,.AppHeader-module_chapterListItem__28zrc:hover:before{border-top:1px solid #00375a;width:80%;margin:0 10%}.AppHeader-module_chapterListItem__28zrc p{margin-top:0}.AppHeader-module_progressBar__17IVu{height:10px}}.HamburgerIcon-module_burgerMenuIconContainer__26RY4{display:none}.HamburgerIcon-module_burgerMenuIcon__24t-5{top:12px;left:12px;outline:none}@media (max-width:780px){.HamburgerIcon-module_burgerMenuIconContainer__26RY4{display:block}}
2
2
 
3
3
  /*!
4
4
  * Hamburgers
@@ -6,4 +6,4 @@
6
6
  * @author Jonathan Suh @jonsuh
7
7
  * @site https://jonsuh.com/hamburgers
8
8
  * @link https://github.com/jonsuh/hamburgers
9
- */.HamburgerIcons-module_hamburger__NnCze{display:inline-block;cursor:pointer;transition-property:opacity,-webkit-filter;transition-property:opacity,filter;transition-property:opacity,filter,-webkit-filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg,.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg:after,.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg:before{background-color:#e10028}.HamburgerIcons-module_hamburger-box__34rgF{width:40px;height:24px;display:inline-block;position:relative}.HamburgerIcons-module_hamburger-inner__187lg{display:block;top:50%;margin-top:-2px}.HamburgerIcons-module_hamburger-inner__187lg,.HamburgerIcons-module_hamburger-inner__187lg:after,.HamburgerIcons-module_hamburger-inner__187lg:before{width:30px;height:4px;background-color:#00375a;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}.HamburgerIcons-module_hamburger-inner__187lg:after,.HamburgerIcons-module_hamburger-inner__187lg:before{content:"";display:block}.HamburgerIcons-module_hamburger-inner__187lg:before{top:-10px}.HamburgerIcons-module_hamburger-inner__187lg:after{bottom:-10px}.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg{top:auto;bottom:0;transition-duration:.13s;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg{transform:translate3d(0,-10px,0) rotate(-45deg);transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg:after{top:0;opacity:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s}.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg:before{top:0;transform:rotate(-90deg);transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s}.ChapterLink-module_chapterLink__v5VRl{line-height:3rem;color:#00375a;text-decoration:none;position:relative;display:block;font-family:inherit;font-weight:700;font-size:1rem;height:50px}.ChapterLink-module_chapterLink__v5VRl:hover,.ChapterLink-module_chapterLinkActive__jl4h5{color:#e10028}.ChapterLink-module_summary__17aoW{display:none}@media (max-width:780px){.ChapterLink-module_summary__17aoW{display:block}}.ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw{border-bottom:3px solid #e10028;width:200px}.ChapterLinkTooltip-module_tooltipHeadline__reew_{margin:5px 0 0;color:#e10028}@media (max-width:780px){.ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw{display:none!important}}.LegalInfoMenu-module_infoIcon__1kTnt svg{width:26px;height:26px;margin:12px 0}.LegalInfoTooltip-module_legalInfoTooltip__ChzOS{width:200px;max-width:200px;text-align:left}.LegalInfoTooltip-module_legalInfoTooltip__ChzOS:after{left:90%!important}.LegalInfoTooltip-module_legalInfoTooltip__ChzOS p{margin:0 0 .5em}.LegalInfoTooltip-module_legalInfoTooltip__ChzOS a{color:#e10028}.SharingMenu-module_shareIcon__1AlDL svg{width:40px;height:40px;margin:5px 0}header .share svg{fill:#00375a}header .share:hover svg{fill:#e10028}.SharingTooltip-module_sharingTooltip__1cljv{width:160px;padding:0!important}.SharingTooltip-module_sharingTooltip__1cljv:after{left:90%!important}.SharingTooltip-module_shareLinkContainer__2MnKN{display:inline-block;width:80px;height:60px;cursor:pointer;color:transparent;text-align:center}.SharingTooltip-module_shareLink__2ySSX{position:relative;color:#00375a;text-decoration:none}.SharingTooltip-module_shareLink__2ySSX:hover{color:#e10028}.SharingTooltip-module_shareIcon__3igrs{width:80px;height:25px;margin-top:5px;margin-bottom:3px}.video-js{display:block;vertical-align:top;box-sizing:border-box;color:#fff;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin:0}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}body.vjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.vjs-full-window .video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0}.video-js.vjs-fullscreen{width:100%!important;height:100%!important;padding-top:0!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1;visibility:visible}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.vjs-poster{display:inline-block;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.vjs-poster,.vjs-poster img{vertical-align:middle;padding:0}.vjs-poster img{display:block;margin:0 auto;max-height:100%;width:100%}.vjs-has-started .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster{display:block}.vjs-using-native-controls .vjs-poster{display:none}.vjs-text-track-display{position:absolute;bottom:0;left:0;right:0;top:0;pointer-events:none}.video-js .vjs-text-track{font-size:17px;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.5)}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.video-js{font-family:inherit!important}.textTracks-module_inset__K7DIL .vjs-text-track-display{bottom:20px}.vjs-text-track-display div{font-family:inherit!important;font-size:20px!important}.vjs-text-track-display>div>div>div{padding:0 4px 2px}.vjs-paused .vjs-text-track-display div{transition:opacity .2s,visibility .2s;opacity:0;visibility:hidden!important}.MediaPlayer-module_mask__3JQDW{position:absolute;top:0;left:0;width:100%;height:100%}.ViewportDependentPillarBoxes-module_opaque__2U9JL{background-color:#000}.ViewportDependentPillarBoxes-module_container__Pj-Fy{position:relative;width:100%;margin:0 auto}.ViewportDependentPillarBoxes-module_content__1IY7b{position:absolute;top:0;left:0;right:0;bottom:0}.Fullscreen-module_root__1N3CI{width:100%;height:100vh;position:relative;overflow:hidden}.AudioPlayer-module_audioPlayer__1Ms73{width:100%;height:100%;transition:transform .2s ease}.AudioPlayer-module_spaceForTextTracks__169MK{height:100%}.AudioPlayer-module_spaceForTextTracksActive__99m7R{height:90px}.AudioPlayer-module_audioPlayer__1Ms73>div{width:100%;height:100%}.AudioPlayer-module_audioPlayer__1Ms73 audio,.AudioPlayer-module_audioPlayer__1Ms73 audio:focus{outline:none}.Image-module_root__1ef3j{background-size:cover;position:absolute;top:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.VideoPlayer-module_videoPlayer__2q9NS{width:100%;height:100%;transition:transform .2s ease}.VideoPlayer-module_videoPlayer__2q9NS>div{width:100%;height:100%}.VideoPlayer-module_videoPlayer__2q9NS video,.VideoPlayer-module_videoPlayer__2q9NS video:focus{outline:none}.VideoPlayer-module_cover__2Rk-J video{-o-object-fit:cover;object-fit:cover}.FillColor-module_FillColor__S1uEG{width:100%}.MotifArea-module_root__1_ACd{position:absolute;background:hsla(0,0%,100%,.2);z-index:2;opacity:0;transition:opacity .2s ease}.MotifArea-module_active__1q4z2{opacity:1}.MotifArea-module_corner__3hB5t{position:absolute;width:10px;height:10px}.MotifArea-module_topLeft__3vHHi{border-top:2px solid #fff;border-left:2px solid #fff}.MotifArea-module_topRight__2gNmC{right:0;border-top:2px solid #fff;border-right:2px solid #fff}.MotifArea-module_bottomLeft__2qEqb{bottom:0;border-bottom:2px solid #fff;border-left:2px solid #fff}.MotifArea-module_bottomRight__3OjTb{right:0;bottom:0;border-bottom:2px solid #fff;border-right:2px solid #fff}.Backdrop-module_Backdrop__1w4UZ{width:100%;z-index:2}.Section-module_Section__Yo58b{position:relative;background-color:#000}.Section-module_invert__3_p7F{background-color:#fff;color:#222}.fadeInBgConceal-module_backdrop__11JGO{position:absolute;height:100%}.fadeInBgConceal-module_backdropInner__1IAYD{position:fixed;top:0;height:100vh;width:100%}.fadeInBgConceal-module_backdrop__11JGO{transition:opacity .5s ease,visibility .5s}.fadeInBgConceal-module_backdrop-below__3E6Uk{opacity:0;visibility:hidden}.fadeInBgFadeOut-module_backdrop__r0YXp{position:absolute;height:100%}.fadeInBgFadeOut-module_backdropInner__IQp87{position:fixed;top:0;height:100vh;width:100%}.fadeInBgFadeOut-module_backdrop__r0YXp .fadeInBgFadeOut-module_backdropInner__IQp87,.fadeInBgFadeOut-module_foreground__Q2vkT{transition:opacity .5s ease,visibility .5s}.fadeInBgFadeOut-module_backdrop-below__2G-Ic .fadeInBgFadeOut-module_backdropInner__IQp87,.fadeInBgFadeOut-module_foreground-above__3pmz9{opacity:0;visibility:hidden}.fadeInBgFadeOutBg-module_backdrop__15ocl{position:absolute;height:100%}.fadeInBgFadeOutBg-module_backdropInner__sAnz6{position:fixed;top:0;height:100vh;width:100%}.fadeInBgFadeOutBg-module_backdrop__15ocl .fadeInBgFadeOutBg-module_backdropInner__sAnz6,.fadeInBgFadeOutBg-module_boxShadow__xUKyj{transition:opacity .5s ease,visibility .5s}.fadeInBgFadeOutBg-module_backdrop-below__1rDT6 .fadeInBgFadeOutBg-module_backdropInner__sAnz6,.fadeInBgFadeOutBg-module_boxShadow-above__2bY0E{opacity:0;visibility:hidden}.fadeInBgScrollOut-module_backdrop__1bSsb{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end}.fadeInBgScrollOut-module_backdropInner__3JZBG{position:-webkit-sticky;position:sticky;bottom:0;width:100%}.fadeInBgScrollOut-module_backdropInner2__q-00L{position:absolute;bottom:0;width:100%}.fadeInBgScrollOut-module_foreground__1ODH9{min-height:100vh}.fadeInBgScrollOut-module_backdrop__1bSsb{transition:opacity .5s ease,visibility .5s}.fadeInBgScrollOut-module_backdrop-below__2Dbkr{opacity:0;visibility:hidden}.fadeInConceal-module_backdrop__1zaRO{position:absolute;height:100%}.fadeInConceal-module_backdropInner__1AIvq{position:fixed;top:0;height:100vh;width:100%}.fadeInConceal-module_backdrop__1zaRO,.fadeInConceal-module_foreground__3giM9{transition:opacity .5s ease,visibility .5s}.fadeInConceal-module_backdrop-below__AWyQe,.fadeInConceal-module_foreground-below__2z5Op{opacity:0;visibility:hidden}.fadeInFadeOut-module_backdrop__Y4xOA{position:absolute;height:100%}.fadeInFadeOut-module_backdropInner__1oRfP{position:fixed;top:0;height:100vh;width:100%}.fadeInFadeOut-module_backdrop__Y4xOA .fadeInFadeOut-module_backdropInner__1oRfP,.fadeInFadeOut-module_foreground__1eleZ{transition:opacity .5s ease,visibility .5s}.fadeInFadeOut-module_backdrop-below__1h2I4 .fadeInFadeOut-module_backdropInner__1oRfP,.fadeInFadeOut-module_foreground-above__249wa,.fadeInFadeOut-module_foreground-below__3mE6f{opacity:0;visibility:hidden}.fadeInFadeOutBg-module_backdrop__2-IF3{position:absolute;height:100%}.fadeInFadeOutBg-module_backdropInner__3r_bo{position:fixed;top:0;height:100vh;width:100%}.fadeInFadeOutBg-module_backdrop__2-IF3 .fadeInFadeOutBg-module_backdropInner__3r_bo,.fadeInFadeOutBg-module_boxShadow__3x7Ki,.fadeInFadeOutBg-module_foreground__24f_M{transition:opacity .5s ease,visibility .5s}.fadeInFadeOutBg-module_backdrop-below__4Ys_2 .fadeInFadeOutBg-module_backdropInner__3r_bo,.fadeInFadeOutBg-module_boxShadow-above__3T2K5,.fadeInFadeOutBg-module_foreground-below__3pTRc{opacity:0;visibility:hidden}.fadeInScrollOut-module_backdrop__2FhBb{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end}.fadeInScrollOut-module_backdropInner__1OfNZ{position:-webkit-sticky;position:sticky;bottom:0;width:100%}.fadeInScrollOut-module_backdropInner2__5bNPT{position:absolute;bottom:0;width:100%}.fadeInScrollOut-module_foreground__3h0EX{min-height:100vh}.fadeInScrollOut-module_backdrop__2FhBb,.fadeInScrollOut-module_foreground__3h0EX{transition:opacity .5s ease,visibility .5s}.fadeInScrollOut-module_backdrop-below__3cRLH,.fadeInScrollOut-module_foreground-below__1Jcql{opacity:0;visibility:hidden}.revealConceal-module_backdrop__dLUhU{position:absolute;height:100%}.revealConceal-module_backdropInner__2k1Z-{position:fixed;top:0;height:100vh;width:100%;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.revealFadeOut-module_backdrop___Q1QF{position:absolute;height:calc(100% + 100vh)}.revealFadeOut-module_backdropInner__17qRn{position:fixed;top:0;height:100vh;width:100%;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.revealFadeOut-module_foreground__1GzBs{transition:opacity .5s ease,visibility .5s}.revealFadeOut-module_foreground-above__3GxOf{opacity:0;visibility:hidden}.revealFadeOutBg-module_backdrop__30OCF{position:absolute;height:calc(100% + 100vh)}.revealFadeOutBg-module_backdropInner__3v3tM{position:fixed;top:0;height:100vh;width:100%;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.revealFadeOutBg-module_boxShadow__1NZRz{transition:opacity 1s ease,visibility 1s}.revealFadeOutBg-module_boxShadow-above__2r4ov{opacity:0;visibility:hidden}.revealScrollOut-module_backdrop__2yOXd{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end}.revealScrollOut-module_backdropInner__211p3{position:-webkit-sticky;position:sticky;bottom:0;width:100%;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.revealScrollOut-module_backdropInner2__v6WqM{position:absolute;bottom:0;width:100%}.scrollInConceal-module_backdrop__2OJJC,.scrollInFadeOut-module_backdrop__1vXJd{position:-webkit-sticky;position:sticky;top:0;height:0}.scrollInFadeOut-module_foreground__3Ikxb{transition:opacity .5s ease,visibility .5s}.scrollInFadeOut-module_foreground-above__6ipm-{opacity:0;visibility:hidden}.scrollInFadeOutBg-module_backdrop__zw95c{position:-webkit-sticky;position:sticky;top:0;height:0}.scrollInFadeOutBg-module_boxShadow__3UxCQ{transition:opacity .5s ease,visibility .5s}.scrollInFadeOutBg-module_boxShadow-above__3kfau{opacity:0;visibility:hidden}.scrollInScrollOut-module_backdrop__XzCge{position:-webkit-sticky;position:sticky;top:0;height:100vh}.scrollInScrollOut-module_foreground__1yyY8{margin-top:-100vh}.GradientShadow-module_shadow__2UiDH{position:absolute;top:0;left:0;width:100%;z-index:1;transition:opacity 1s ease}.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadowBlack__cSr14,.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadowBlack__cSr14{background:linear-gradient(90deg,#000 0,transparent)}@media (min-width:950px){.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadowBlack__cSr14{background:linear-gradient(270deg,#000 0,transparent)}}.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadowBlack__cSr14,.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadowBlack__cSr14{background:#000}.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadowWhite__3Xw2q,.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadowWhite__3Xw2q{background:linear-gradient(90deg,#fff 0,hsla(0,0%,100%,0))}@media (min-width:950px){.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadowWhite__3Xw2q{background:linear-gradient(270deg,#fff 0,hsla(0,0%,100%,0))}}.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadowWhite__3Xw2q,.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadowWhite__3Xw2q{background:#fff}.InvisibleBoxWrapper-module_start__F1nZ7{margin-top:1.375em}.InvisibleBoxWrapper-module_end__nphD-{margin-bottom:1.375em}.GradientBox-module_content__96lDk{position:relative}.GradientBox-module_shadow__2XilX{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.GradientBox-module_long__10s6v .GradientBox-module_shadow__2XilX{bottom:-100vh}.GradientBox-module_gradient__31tJ- .GradientBox-module_withShadow__3mhPR{text-shadow:0 1px 5px #000}.GradientBox-module_gradient__31tJ- .GradientBox-module_shadowDark__3Tv0L{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.3) 100px,rgba(0,0,0,.3))}.GradientBox-module_gradient__31tJ- .GradientBox-module_shadowLight__Bieg6{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.3) 100px,hsla(0,0%,100%,.3))}.CardBox-module_content__36v7J{position:relative}.CardBoxWrapper-module_card__hvRUa{position:relative;margin-top:-1px;padding:1px 1.5em 0}.CardBoxWrapper-module_card__hvRUa:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.CardBoxWrapper-module_cardStart__2NywG{margin-top:3em}.CardBoxWrapper-module_cardEnd__x4Ye6{margin-bottom:3em;padding-bottom:1.5em}.CardBoxWrapper-module_cardStart__2NywG:before{border-top-left-radius:15px;border-top-right-radius:15px}.CardBoxWrapper-module_cardEnd__x4Ye6:before{border-bottom-left-radius:15px;border-bottom-right-radius:15px}.CardBoxWrapper-module_cardBgWhite__xXhg7:before{background-color:#fff}.CardBoxWrapper-module_cardBgBlack__Ahp3s:before{background-color:#101010}.CardBoxWrapper-module_cardBgWhite__xXhg7{color:#000}.CardBoxWrapper-module_cardBgBlack__Ahp3s{color:#fff}.Entry-module_Entry__1nDGh{font-family:Source Sans Pro,sans-serif;background-color:#000;color:#fff}.Entry-module_Entry__1nDGh>div:first-child{padding-top:58px}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[tabindex]:focus,a:focus,button:focus{outline:3px solid #518ad2}.focusOutline-module_focusOutlineDisabled__KV7d- [tabindex]:focus,.focusOutline-module_focusOutlineDisabled__KV7d- a:focus,.focusOutline-module_focusOutlineDisabled__KV7d- button:focus{outline:none}.Figure-module_root__3FC-x{margin:0}.Figure-module_root__3FC-x>figcaption{padding:3px 10px 5px;background-color:#fff;color:#222}.Figure-module_invert___0BJP>figcaption{background-color:#101010;color:#fff}.Waveform-module_container__1Dxdv{position:relative;width:100%;height:90px;bottom:1px}.Waveform-module_menus__1mOnJ{position:absolute;bottom:-5px;right:0;z-index:5}.Waveform-module_timeDisplay__1v4Tl{position:relative;bottom:20px}.Waveform-module_playControl__QWTsJ{z-index:5;position:absolute;top:32.5%;transform:scale(2)}.Waveform-module_waveWrapper__3gamc{position:relative;pointer-events:all;height:100%}.TimeDisplay-module_timeDisplay__2UwqM{margin:0 7px}.TimeDisplay-module_time__li1ZU{line-height:24px;font-size:15px;padding:0 4px;color:currentColor}.MenuBarButton-module_icon__2h8__{width:25px;height:25px;fill:currentColor}.MenuBarButton-module_subMenuItemAnnotation__32Quc{color:red;font-size:70%;vertical-align:5px;padding-left:3px}.MenuBarButton-module_subMenu__f-E-X{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .5s,visibility .5s;position:absolute;right:0;bottom:31px;margin:0;padding:5px;background-color:rgba(17,17,17,.9);border-radius:2px}.MenuBarButton-module_subMenuExpanded__2UvkJ .MenuBarButton-module_subMenu__f-E-X{visibility:visible;opacity:1;pointer-events:all;transition:none}.MenuBarButton-module_subMenuItem__1pyn_{position:relative;list-style:none}.MenuBarButton-module_subMenuItemIcon__3iaB-{position:absolute;top:8px;left:5px;width:12px;height:12px;fill:#fff}.MenuBarButton-module_subMenuItemButton__2QnUz{width:100%;color:#fff;white-space:nowrap}button.MenuBarButton-module_subMenuItemButton__2QnUz{padding:5px 10px 5px 25px}.utils-module_clip__34eot{clip:rect(0,auto,auto,0);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.utils-module_unstyledButton__3rgne{border:0;padding:0;background-color:transparent;text-align:initial}.ControlBar-module_transparent__eS4af{opacity:0}.ControlBar-module_lightBackground__3-tGf{background:hsla(0,0%,100%,.2)}.ControlBar-module_darkBackground__31Wv7{background:rgba(0,0,0,.2)}.ControlBar-module_controlBarContainer__1cxRO{color:currentColor;width:100%;display:flex;align-items:center;position:relative;transition:opacity .2s ease}.ControlBar-module_controlBarContainer__1cxRO.ControlBar-module_inset__JvBh9{margin-top:-32px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}.ControlBar-module_button___4aXE{width:32px;height:32px;margin-right:4px;display:flex;align-items:center;justify-content:center;color:currentColor}.ControlBar-module_button___4aXE svg{fill:currentColor;cursor:pointer}.ProgressIndicators-module_container__1QiQJ{flex-grow:1}.ProgressIndicators-module_wrapper__2PCVv{margin:0 10px;position:relative}.ProgressIndicators-module_draggable__1iAE8{height:32px;padding:13px 0;box-sizing:border-box;cursor:pointer}.ProgressIndicators-module_bars__2-ddd{position:relative;height:6px;border-radius:3.5px}.ProgressIndicators-module_progressBar__2PYn-{position:absolute;left:0;height:6px;border-radius:2.5px;background:currentColor}.ProgressIndicators-module_background__-x5f_{opacity:.1;width:100%}.ProgressIndicators-module_loadingProgressBar__YD2GH{opacity:.1}.ProgressIndicators-module_sliderHandle__3ArIf{width:14px;height:14px;margin-left:-6.5px;border-radius:6.5px;position:absolute;top:-4px;background:currentColor;opacity:0;transition:opacity .1s}.ProgressIndicators-module_container__1QiQJ:hover .ProgressIndicators-module_sliderHandle__3ArIf,.ProgressIndicators-module_dragging__3yY3t .ProgressIndicators-module_sliderHandle__3ArIf{opacity:1}.SectionThumbnail-module_crop__Q1nZj{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.SectionThumbnail-module_scale__2tKDG{transform:scale(.2);transform-origin:0 0;width:500%}
9
+ */.HamburgerIcons-module_hamburger__NnCze{display:inline-block;cursor:pointer;transition-property:opacity,-webkit-filter;transition-property:opacity,filter;transition-property:opacity,filter,-webkit-filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg,.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg:after,.HamburgerIcons-module_hamburger__NnCze.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg:before{background-color:#e10028}.HamburgerIcons-module_hamburger-box__34rgF{width:40px;height:24px;display:inline-block;position:relative}.HamburgerIcons-module_hamburger-inner__187lg{display:block;top:50%;margin-top:-2px}.HamburgerIcons-module_hamburger-inner__187lg,.HamburgerIcons-module_hamburger-inner__187lg:after,.HamburgerIcons-module_hamburger-inner__187lg:before{width:30px;height:4px;background-color:#00375a;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}.HamburgerIcons-module_hamburger-inner__187lg:after,.HamburgerIcons-module_hamburger-inner__187lg:before{content:"";display:block}.HamburgerIcons-module_hamburger-inner__187lg:before{top:-10px}.HamburgerIcons-module_hamburger-inner__187lg:after{bottom:-10px}.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg{top:auto;bottom:0;transition-duration:.13s;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg:after{top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear}.HamburgerIcons-module_hamburger--collapse__gRQFa .HamburgerIcons-module_hamburger-inner__187lg:before{transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg{transform:translate3d(0,-10px,0) rotate(-45deg);transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg:after{top:0;opacity:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s}.HamburgerIcons-module_hamburger--collapse__gRQFa.HamburgerIcons-module_is-active__10qoY .HamburgerIcons-module_hamburger-inner__187lg:before{top:0;transform:rotate(-90deg);transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s}.ChapterLink-module_chapterLink__v5VRl{line-height:3rem;color:#00375a;text-decoration:none;position:relative;display:block;font-family:inherit;font-weight:700;font-size:1rem;height:50px}.ChapterLink-module_chapterLink__v5VRl:hover,.ChapterLink-module_chapterLinkActive__jl4h5{color:#e10028}.ChapterLink-module_summary__17aoW{display:none}@media (max-width:780px){.ChapterLink-module_summary__17aoW{display:block}}.ChapterLink-module_tooltipHeadline__27y4y{margin:5px 0 0;color:#e10028}@media (max-width:780px){.ChapterLink-module_tooltipBubble__2sxYY{display:none!important}}.Tooltip-module_container__3V63U{position:relative;display:inline-block}.Tooltip-module_bubble__FIL1C{position:absolute;top:100%;left:50%;opacity:0;visibility:hidden;z-index:1;background:#fff;border-radius:5px;box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);font-size:13px;width:180px;transform-origin:50% 0;transform:translateX(-50%);transition:visibility .1s linear,opacity .1s linear}.Tooltip-module_container__3V63U:focus-within .Tooltip-module_bubble__FIL1C,.Tooltip-module_fixed__3NGyG .Tooltip-module_bubble__FIL1C,.Tooltip-module_openOnHover__1EeI5:hover .Tooltip-module_bubble__FIL1C{-webkit-animation:Tooltip-module_fadeIn__3g9QH .1s ease-out 0s 1 alternate;animation:Tooltip-module_fadeIn__3g9QH .1s ease-out 0s 1 alternate;opacity:1;visibility:visible}.Tooltip-module_openOnHover__1EeI5 .Tooltip-module_bubble__FIL1C{pointer-events:none}@-webkit-keyframes Tooltip-module_fadeIn__3g9QH{0%{transform:translateX(-50%) scale(.9)}to{transform:translateX(-50%) scale(1)}}@keyframes Tooltip-module_fadeIn__3g9QH{0%{transform:translateX(-50%) scale(.9)}to{transform:translateX(-50%) scale(1)}}.Tooltip-module_inner__E2hsp{position:relative;z-index:2;background:#fff;border-radius:5px;padding:10px}.Tooltip-module_highlight__2NpuQ .Tooltip-module_inner__E2hsp{border-bottom:3px solid #e10028}.Tooltip-module_arrow__3LxXo{position:absolute;width:5px;height:5px;background:#fff;box-shadow:1px 1px 3px 0 rgba(0,0,0,.2),1px 1px 4px 0 rgba(0,0,0,.14),0 0 8px 0 rgba(0,0,0,.12);border:4px solid transparent;z-index:1;transform:translateX(-50%) translateY(50%) rotate(45deg);bottom:100%;left:50%}.LegalInfoMenu-module_infoIcon__1kTnt svg{width:26px;height:26px;margin:12px 7px}.LegalInfoMenu-module_legalInfoTooltip__306kT{text-align:left}.LegalInfoMenu-module_legalInfoTooltip__306kT:after{left:90%!important}.LegalInfoMenu-module_legalInfoTooltip__306kT p{margin:0 0 .5em}.LegalInfoMenu-module_legalInfoTooltip__306kT a{color:#e10028}.SharingMenu-module_shareIcon__1AlDL svg{width:40px;height:40px;margin:5px 0}header .share svg{fill:#00375a}header .share:hover svg{fill:#e10028}.SharingMenu-module_sharingTooltip__3_aAF{width:160px;padding:0!important}.SharingMenu-module_sharingTooltip__3_aAF:after{left:90%!important}.SharingMenu-module_shareLinkContainer__2_8B3{display:inline-block;width:80px;height:60px;cursor:pointer;color:transparent;text-align:center}.SharingMenu-module_shareLink__uTnVm{position:relative;color:#00375a;text-decoration:none}.SharingMenu-module_shareLink__uTnVm:hover{color:#e10028}.SharingMenu-module_shareIcon__1AlDL{width:80px;height:25px;margin-top:5px;margin-bottom:3px}.ToggleMuteButton-module_button__iFL79 svg{fill:#00375a;width:35px;height:35px;margin:7px 2px}.ToggleMuteButton-module_animate__20Dhc{position:relative}.ToggleMuteButton-module_animate__20Dhc:before{content:"";display:block;position:absolute;top:50%;left:50%;margin:-5px;z-index:-1;width:10px;height:10px;background-color:#ddd;border-radius:5px;-webkit-animation:ToggleMuteButton-module_pulse__3HhQK .5s ease .2s 1;animation:ToggleMuteButton-module_pulse__3HhQK .5s ease .2s 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;pointer-events:none}@-webkit-keyframes ToggleMuteButton-module_pulse__3HhQK{0%{opacity:.8}to{transform:scale(40);opacity:0}}@keyframes ToggleMuteButton-module_pulse__3HhQK{0%{opacity:.8}to{transform:scale(40);opacity:0}}.SkipLinks-module_link__2BgJr{position:absolute;z-index:10000;top:-1000em;left:-1000em;display:block;border:1px solid #eee;border-radius:5px;padding:5px;background:#00375a;text-align:center;line-height:25px;color:#fff}.SkipLinks-module_link__2BgJr:focus{left:13.8%;top:13%}.video-js{display:block;vertical-align:top;box-sizing:border-box;color:#fff;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin:0}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}body.vjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.vjs-full-window .video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0}.video-js.vjs-fullscreen{width:100%!important;height:100%!important;padding-top:0!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1;visibility:visible}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.vjs-poster{display:inline-block;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.vjs-poster,.vjs-poster img{vertical-align:middle;padding:0}.vjs-poster img{display:block;margin:0 auto;max-height:100%;width:100%}.vjs-has-started .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster{display:block}.vjs-using-native-controls .vjs-poster{display:none}.vjs-text-track-display{position:absolute;bottom:0;left:0;right:0;top:0;pointer-events:none}.video-js .vjs-text-track{font-size:17px;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.5)}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.video-js{font-family:inherit!important}.vjs-text-track-display{z-index:2}.textTracks-module_inset__K7DIL .vjs-text-track-display{bottom:40px}.vjs-text-track-display div{font-family:inherit!important;font-size:20px!important}.vjs-text-track-display>div>div>div{padding:0 4px 2px}.vjs-paused .vjs-text-track-display div{transition:opacity .2s,visibility .2s;opacity:0;visibility:hidden!important}.MediaPlayer-module_wrapper__1cSGR,.MediaPlayer-module_wrapper__1cSGR div,.MediaPlayer-module_wrapper__1cSGR img{width:100%;height:100%}.MediaPlayer-module_wrapper__1cSGR audio,.MediaPlayer-module_wrapper__1cSGR audio:focus,.MediaPlayer-module_wrapper__1cSGR video,.MediaPlayer-module_wrapper__1cSGR video:focus{outline:none}.MediaPlayer-module_wrapper__1cSGR img{position:absolute;top:0;left:0;-o-object-fit:contain;object-fit:contain;background:#000}.MediaPlayer-module_cover__2wGez img,.MediaPlayer-module_cover__2wGez video{-o-object-fit:cover;object-fit:cover}.ViewportDependentPillarBoxes-module_opaque__2U9JL{background-color:#000}.ViewportDependentPillarBoxes-module_container__Pj-Fy{position:relative;width:100%;margin:0 auto}.ViewportDependentPillarBoxes-module_content__1IY7b{position:absolute;top:0;left:0;right:0;bottom:0}.Fullscreen-module_root__1N3CI{width:100%;height:100vh;position:relative;overflow:hidden}.AudioPlayer-module_spaceForTextTracks__169MK{height:100%}.AudioPlayer-module_spaceForTextTracksActive__99m7R{height:90px}.FillColor-module_FillColor__S1uEG{width:100%}.Image-module_root__1ef3j{background-size:cover;position:absolute;top:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.Backdrop-module_Backdrop__1w4UZ{width:100%;z-index:2}.Backdrop-module_defaultBackground__1YQQL{background-color:#333}.Section-module_Section__Yo58b{position:relative;background-color:#000}.Section-module_invert__3_p7F{background-color:#fff;color:#222}.fadeInBgConceal-module_backdrop__11JGO{position:absolute;height:100%}.fadeInBgConceal-module_backdropInner__1IAYD{position:fixed;top:0;height:100vh;width:100%}.fadeInBgConceal-module_backdrop__11JGO{transition:opacity .5s ease,visibility .5s}.fadeInBgConceal-module_backdrop-below__3E6Uk{opacity:0;visibility:hidden}.fadeInBgFadeOut-module_backdrop__r0YXp{position:absolute;height:100%}.fadeInBgFadeOut-module_backdropInner__IQp87{position:fixed;top:0;height:100vh;width:100%}.fadeInBgFadeOut-module_backdrop__r0YXp .fadeInBgFadeOut-module_backdropInner__IQp87,.fadeInBgFadeOut-module_foreground__Q2vkT{transition:opacity .5s ease,visibility .5s}.fadeInBgFadeOut-module_backdrop-below__2G-Ic .fadeInBgFadeOut-module_backdropInner__IQp87,.fadeInBgFadeOut-module_foreground-above__3pmz9{opacity:0;visibility:hidden}.fadeInBgFadeOutBg-module_backdrop__15ocl{position:absolute;height:100%}.fadeInBgFadeOutBg-module_backdropInner__sAnz6{position:fixed;top:0;height:100vh;width:100%}.fadeInBgFadeOutBg-module_backdrop__15ocl .fadeInBgFadeOutBg-module_backdropInner__sAnz6,.fadeInBgFadeOutBg-module_boxShadow__xUKyj{transition:opacity .5s ease,visibility .5s}.fadeInBgFadeOutBg-module_backdrop-below__1rDT6 .fadeInBgFadeOutBg-module_backdropInner__sAnz6,.fadeInBgFadeOutBg-module_boxShadow-above__2bY0E{opacity:0;visibility:hidden}.fadeInBgScrollOut-module_backdrop__1bSsb{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end}.fadeInBgScrollOut-module_backdropInner__3JZBG{position:-webkit-sticky;position:sticky;bottom:0;width:100%}.fadeInBgScrollOut-module_backdropInner2__q-00L{position:absolute;bottom:0;width:100%}.fadeInBgScrollOut-module_foreground__1ODH9{min-height:100vh}.fadeInBgScrollOut-module_backdrop__1bSsb{transition:opacity .5s ease,visibility .5s}.fadeInBgScrollOut-module_backdrop-below__2Dbkr{opacity:0;visibility:hidden}.fadeInConceal-module_backdrop__1zaRO{position:absolute;height:100%}.fadeInConceal-module_backdropInner__1AIvq{position:fixed;top:0;height:100vh;width:100%}.fadeInConceal-module_backdrop__1zaRO,.fadeInConceal-module_foreground__3giM9{transition:opacity .5s ease,visibility .5s}.fadeInConceal-module_backdrop-below__AWyQe,.fadeInConceal-module_foreground-below__2z5Op{opacity:0;visibility:hidden}.fadeInFadeOut-module_backdrop__Y4xOA{position:absolute;height:100%}.fadeInFadeOut-module_backdropInner__1oRfP{position:fixed;top:0;height:100vh;width:100%}.fadeInFadeOut-module_backdrop__Y4xOA .fadeInFadeOut-module_backdropInner__1oRfP,.fadeInFadeOut-module_foreground__1eleZ{transition:opacity .5s ease,visibility .5s}.fadeInFadeOut-module_backdrop-below__1h2I4 .fadeInFadeOut-module_backdropInner__1oRfP,.fadeInFadeOut-module_foreground-above__249wa,.fadeInFadeOut-module_foreground-below__3mE6f{opacity:0;visibility:hidden}.fadeInFadeOutBg-module_backdrop__2-IF3{position:absolute;height:100%}.fadeInFadeOutBg-module_backdropInner__3r_bo{position:fixed;top:0;height:100vh;width:100%}.fadeInFadeOutBg-module_backdrop__2-IF3 .fadeInFadeOutBg-module_backdropInner__3r_bo,.fadeInFadeOutBg-module_boxShadow__3x7Ki,.fadeInFadeOutBg-module_foreground__24f_M{transition:opacity .5s ease,visibility .5s}.fadeInFadeOutBg-module_backdrop-below__4Ys_2 .fadeInFadeOutBg-module_backdropInner__3r_bo,.fadeInFadeOutBg-module_boxShadow-above__3T2K5,.fadeInFadeOutBg-module_foreground-below__3pTRc{opacity:0;visibility:hidden}.fadeInScrollOut-module_backdrop__2FhBb{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end}.fadeInScrollOut-module_backdropInner__1OfNZ{position:-webkit-sticky;position:sticky;bottom:0;width:100%}.fadeInScrollOut-module_backdropInner2__5bNPT{position:absolute;bottom:0;width:100%}.fadeInScrollOut-module_foreground__3h0EX{min-height:100vh}.fadeInScrollOut-module_backdrop__2FhBb,.fadeInScrollOut-module_foreground__3h0EX{transition:opacity .5s ease,visibility .5s}.fadeInScrollOut-module_backdrop-below__3cRLH,.fadeInScrollOut-module_foreground-below__1Jcql{opacity:0;visibility:hidden}.revealConceal-module_backdrop__dLUhU{position:absolute;height:100%}.revealConceal-module_backdropInner__2k1Z-{position:fixed;top:0;height:100vh;width:100%;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.revealFadeOut-module_backdrop___Q1QF{position:absolute;height:calc(100% + 100vh)}.revealFadeOut-module_backdropInner__17qRn{position:fixed;top:0;height:100vh;width:100%;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.revealFadeOut-module_foreground__1GzBs{transition:opacity .5s ease,visibility .5s}.revealFadeOut-module_foreground-above__3GxOf{opacity:0;visibility:hidden}.revealFadeOutBg-module_backdrop__30OCF{position:absolute;height:calc(100% + 100vh)}.revealFadeOutBg-module_backdropInner__3v3tM{position:fixed;top:0;height:100vh;width:100%;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.revealFadeOutBg-module_boxShadow__1NZRz{transition:opacity 1s ease,visibility 1s}.revealFadeOutBg-module_boxShadow-above__2r4ov{opacity:0;visibility:hidden}.revealScrollOut-module_backdrop__2yOXd{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end}.revealScrollOut-module_backdropInner__211p3{position:-webkit-sticky;position:sticky;bottom:0;width:100%;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.revealScrollOut-module_backdropInner2__v6WqM{position:absolute;bottom:0;width:100%}.scrollInConceal-module_backdrop__2OJJC,.scrollInFadeOut-module_backdrop__1vXJd{position:-webkit-sticky;position:sticky;top:0;height:0}.scrollInFadeOut-module_foreground__3Ikxb{transition:opacity .5s ease,visibility .5s}.scrollInFadeOut-module_foreground-above__6ipm-{opacity:0;visibility:hidden}.scrollInFadeOutBg-module_backdrop__zw95c{position:-webkit-sticky;position:sticky;top:0;height:0}.scrollInFadeOutBg-module_boxShadow__3UxCQ{transition:opacity .5s ease,visibility .5s}.scrollInFadeOutBg-module_boxShadow-above__3kfau{opacity:0;visibility:hidden}.scrollInScrollOut-module_backdrop__XzCge{position:-webkit-sticky;position:sticky;top:0;height:100vh}.scrollInScrollOut-module_foreground__1yyY8{margin-top:-100vh}.GradientShadow-module_shadow__2UiDH{position:absolute;top:0;left:0;width:100%;z-index:1;transition:opacity 1s ease}.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadowBlack__cSr14,.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadowBlack__cSr14{background:linear-gradient(90deg,#000 0,transparent)}@media (min-width:950px){.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadowBlack__cSr14{background:linear-gradient(270deg,#000 0,transparent)}}.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadowBlack__cSr14,.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadowBlack__cSr14{background:rgba(0,0,0,.9)}.GradientShadow-module_align-left__3qcNM .GradientShadow-module_shadowWhite__3Xw2q,.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadowWhite__3Xw2q{background:linear-gradient(90deg,#fff 0,hsla(0,0%,100%,0))}@media (min-width:950px){.GradientShadow-module_align-right__3iXZs .GradientShadow-module_shadowWhite__3Xw2q{background:linear-gradient(270deg,#fff 0,hsla(0,0%,100%,0))}}.GradientShadow-module_align-center__2C7cl .GradientShadow-module_shadowWhite__3Xw2q,.GradientShadow-module_intersecting__h6vpz .GradientShadow-module_shadowWhite__3Xw2q{background:hsla(0,0%,100%,.9)}.InvisibleBoxWrapper-module_start__F1nZ7{margin-top:1.375em}.InvisibleBoxWrapper-module_end__nphD-{margin-bottom:1.375em}.GradientBox-module_content__96lDk{position:relative}.GradientBox-module_shadow__2XilX{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.GradientBox-module_long__10s6v .GradientBox-module_shadow__2XilX{bottom:-100vh}.GradientBox-module_gradient__31tJ- .GradientBox-module_withShadow__3mhPR{text-shadow:0 1px 5px #000}.GradientBox-module_gradient__31tJ- .GradientBox-module_shadowDark__3Tv0L{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 100px,rgba(0,0,0,.5))}.GradientBox-module_gradient__31tJ- .GradientBox-module_shadowLight__Bieg6{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.5) 100px,hsla(0,0%,100%,.5))}.CardBox-module_content__36v7J{position:relative}.CardBoxWrapper-module_card__hvRUa{position:relative;margin-top:-1px;padding:1px 1.5em 0}.CardBoxWrapper-module_card__hvRUa:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.CardBoxWrapper-module_cardStart__2NywG{margin-top:3em}.CardBoxWrapper-module_cardEnd__x4Ye6{margin-bottom:3em;padding-bottom:1.5em}.CardBoxWrapper-module_cardStart__2NywG:before{border-top-left-radius:15px;border-top-right-radius:15px}.CardBoxWrapper-module_cardEnd__x4Ye6:before{border-bottom-left-radius:15px;border-bottom-right-radius:15px}.CardBoxWrapper-module_cardBgWhite__xXhg7:before{background-color:#fff}.CardBoxWrapper-module_cardBgBlack__Ahp3s:before{background-color:#101010}.CardBoxWrapper-module_cardBgWhite__xXhg7{color:#000}.CardBoxWrapper-module_cardBgBlack__Ahp3s{color:#fff}.Entry-module_Entry__1nDGh{font-family:Source Sans Pro,sans-serif;background-color:#000;color:#fff}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[tabindex]:focus,a:focus,button:focus{outline:3px solid #518ad2}.focusOutline-module_focusOutlineDisabled__KV7d- [tabindex]:focus,.focusOutline-module_focusOutlineDisabled__KV7d- a:focus,.focusOutline-module_focusOutlineDisabled__KV7d- button:focus{outline:none}.OptIn-module_optIn__3nHo1{padding:15px;display:flex;flex-direction:column;width:100%;height:100%;text-align:center;align-items:center;justify-content:center;box-sizing:border-box}.OptIn-module_optInIcon__3-81I svg{fill:currentColor;height:90px}.OptIn-module_optInMessage__1OfTR{margin:1em 0 1.5em}@media (max-width:600px){.OptIn-module_optInIcon__3-81I svg{height:50px}.OptIn-module_optInMessage__1OfTR{margin:.5em 0 1em}}@media (max-width:400px){.OptIn-module_optInIcon__3-81I{display:none}}.OptIn-module_optInButton__1LhtX{padding:10px;background-color:transparent;color:currentColor;border:1px solid;border-radius:4px;cursor:pointer}.OptOutInfo-module_optOut__2Q3d5{display:flex;background-color:#111;color:#fff;box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);transition:opacity .2s ease,visibility .2s linear;pointer-events:auto}.OptOutInfo-module_tooltip__2bpU0{order:0;position:relative;display:none;align-items:center;padding:5px 5px 5px 10px}.OptOutInfo-module_optOut__2Q3d5:focus-within .OptOutInfo-module_tooltip__2bpU0,.OptOutInfo-module_optOut__2Q3d5:hover .OptOutInfo-module_tooltip__2bpU0{display:flex}.OptOutInfo-module_tooltip__2bpU0 a{color:currentColor}.OptOutInfo-module_icon__1kL6Q{order:1;position:relative}.OptOutInfo-module_icon__1kL6Q svg{fill:#c2c2c2;width:26px;height:26px;margin:7px 7px 3px}.OptOutInfo-module_optOut__2Q3d5{position:absolute;right:-15px;bottom:25%}.OptOutInfo-module_optOut__2Q3d5.OptOutInfo-module_full__s_Ono{right:0}.Figure-module_root__3FC-x{margin:0}.Figure-module_root__3FC-x>figcaption{padding:3px 10px 5px;background-color:#fff;color:#222}.Figure-module_invert___0BJP>figcaption{background-color:#101010;color:#fff}.Waveform-module_container__1Dxdv{position:relative;z-index:1;width:100%;min-height:140px}.Waveform-module_clickMask__3LYAT{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.Waveform-module_menuBar__342n-{position:absolute;bottom:0;right:0;width:100%;height:40px;z-index:2;display:flex;align-items:center;justify-content:flex-end}.Waveform-module_timeDisplay__1v4Tl{position:relative;bottom:20px}.Waveform-module_playControl__QWTsJ{color:#fff;z-index:1;position:absolute;bottom:78px;left:30px}.Waveform-module_playControl__QWTsJ svg{transform:scale(2)}.Waveform-module_waveWrapper__3gamc{position:absolute;bottom:48px;width:98%;margin:0 1%;height:90px;z-index:1}.TimeDisplay-module_timeDisplay__2UwqM{margin:0 2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.TimeDisplay-module_time__li1ZU{line-height:24px;font-size:15px;padding:0 4px;color:currentColor}.MenuBarButton-module_icon__2h8__{width:25px;height:25px;fill:currentColor}.MenuBarButton-module_subMenuItemAnnotation__32Quc{color:red;font-size:70%;vertical-align:5px;padding-left:3px}.MenuBarButton-module_subMenu__f-E-X{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .5s,visibility .5s;position:absolute;right:0;bottom:39px;margin:0;padding:5px;background-color:rgba(17,17,17,.9);border-radius:2px}.MenuBarButton-module_subMenuExpanded__2UvkJ .MenuBarButton-module_subMenu__f-E-X{visibility:visible;opacity:1;pointer-events:auto;transition:none}.MenuBarButton-module_subMenuItem__1pyn_{position:relative;list-style:none}.MenuBarButton-module_subMenuItemIcon__3iaB-{position:absolute;top:8px;left:5px;width:12px;height:12px;fill:#fff}.MenuBarButton-module_subMenuItemButton__2QnUz{width:100%;color:#fff;cursor:pointer;white-space:nowrap}button.MenuBarButton-module_subMenuItemButton__2QnUz{padding:5px 10px 5px 25px}.ControlBar-module_container__1GH64{position:relative}.ControlBar-module_transparent__eS4af{opacity:0}.ControlBar-module_lightBackground__3-tGf{background:hsla(0,0%,100%,.2)}.ControlBar-module_darkBackground__31Wv7{background:rgba(0,0,0,.2)}.ControlBar-module_controlBarContainer__1cxRO{width:100%;display:flex;align-items:center;transition:opacity .2s ease}.ControlBar-module_inset__JvBh9{position:absolute;bottom:0;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}.ControlBar-module_button___4aXE{width:40px;height:40px;margin:0 2px;display:flex;align-items:center;justify-content:center;color:currentColor;cursor:pointer}.ControlBar-module_button___4aXE svg{fill:currentColor;width:30px;height:30px}.utils-module_clip__34eot{clip:rect(0,auto,auto,0);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.utils-module_unstyledButton__3rgne{border:0;padding:0;background-color:transparent;text-align:initial}.BigPlayPauseButton-module_container__19sKj{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.BigPlayPauseButton-module_hideCursor__2Hyys{cursor:none}.BigPlayPauseButton-module_button__10g4Q{background:radial-gradient(rgba(0,0,0,.5),transparent 60%);width:64px;height:64px;display:flex;align-items:center;justify-content:center;-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.BigPlayPauseButton-module_button__10g4Q svg{fill:#fff;width:56px;height:56px}.BigPlayPauseButton-module_hidden__1KUzr{opacity:0}.BigPlayPauseButton-module_animated__1MMNq{-webkit-animation-name:BigPlayPauseButton-module_fadeOut__2vcA_;animation-name:BigPlayPauseButton-module_fadeOut__2vcA_}.BigPlayPauseButton-module_fadeIn__1Ge1-{-webkit-animation-name:BigPlayPauseButton-module_fadeIn__1Ge1-;animation-name:BigPlayPauseButton-module_fadeIn__1Ge1-}@-webkit-keyframes BigPlayPauseButton-module_fadeOut__2vcA_{to{opacity:0;transform:scale(1.5)}}@keyframes BigPlayPauseButton-module_fadeOut__2vcA_{to{opacity:0;transform:scale(1.5)}}@-webkit-keyframes BigPlayPauseButton-module_fadeIn__1Ge1-{0%{opacity:0;transform:scale(1.3)}}@keyframes BigPlayPauseButton-module_fadeIn__1Ge1-{0%{opacity:0;transform:scale(1.3)}}.ProgressIndicators-module_container__1QiQJ{flex-grow:1}.ProgressIndicators-module_wrapper__2PCVv{margin:0 10px;position:relative}.ProgressIndicators-module_draggable__1iAE8{height:32px;padding:13px 0;box-sizing:border-box;cursor:pointer}.ProgressIndicators-module_bars__2-ddd{position:relative;height:6px;border-radius:3.5px}.ProgressIndicators-module_progressBar__2PYn-{position:absolute;left:0;height:6px;border-radius:2.5px;background:currentColor}.ProgressIndicators-module_background__-x5f_{opacity:.1;width:100%}.ProgressIndicators-module_loadingProgressBar__YD2GH{opacity:.1}.ProgressIndicators-module_sliderHandle__3ArIf{width:14px;height:14px;margin-left:-6.5px;border-radius:6.5px;position:absolute;top:-4px;background:currentColor;opacity:0;transition:opacity .1s}.ProgressIndicators-module_container__1QiQJ:hover .ProgressIndicators-module_sliderHandle__3ArIf,.ProgressIndicators-module_dragging__3yY3t .ProgressIndicators-module_sliderHandle__3ArIf{opacity:1}.SectionThumbnail-module_crop__Q1nZj{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.SectionThumbnail-module_scale__2tKDG{transform:scale(.2);transform-origin:0 0;width:500%}
data/entry_types/scrolled/package/frontend/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import regeneratorRuntime from 'regenerator-runtime';
1
2
  import 'core-js/modules/es.symbol';
2
3
  import 'core-js/modules/es.symbol.description';
3
4
  import 'core-js/modules/es.symbol.async-iterator';
@@ -14,6 +15,7 @@ import 'core-js/modules/es.symbol.to-string-tag';
14
15
  import 'core-js/modules/es.symbol.unscopables';
15
16
  import 'core-js/modules/es.array.concat';
16
17
  import 'core-js/modules/es.array.fill';
18
+ import 'core-js/modules/es.array.find';
17
19
  import 'core-js/modules/es.json.to-string-tag';
18
20
  import 'core-js/modules/es.map';
19
21
  import 'core-js/modules/es.math.to-string-tag';
@@ -69,18 +71,61 @@ import 'core-js/modules/esnext.symbol.pattern-match';
69
71
  import 'core-js/modules/web.dom-collections.iterator';
70
72
  import 'intersection-observer';
71
73
  import 'regenerator-runtime/runtime.js';
72
- import React, { useLayoutEffect, useEffect, useRef, useState, createContext, useMemo, useContext, useReducer, useCallback, Suspense } from 'react';
74
+ import React, { useLayoutEffect, useEffect, useRef, createContext, useContext, useState, useCallback, useMemo, useReducer, Suspense } from 'react';
73
75
  import ReactDOM from 'react-dom';
74
- import { _ as _defineProperty, u as useI18n, a as _objectWithoutProperties, b as useFileRights, c as useLegalInfo, d as useCredits, P as PhonePlatformContext, e as useShareUrl, f as useShareProviders, g as useTheme, h as _slicedToArray, i as useEntryStructure, j as createScrollPositionLifecycleProvider, k as createScrollPositionLifecycleHook, l as _objectSpread2, m as useEntryMetadata, n as useNestedFiles, o as useFile, p as useMediaQuery, w as withInlineEditingDecorator, F as Foreground, L as Layout, q as usePostMessageListener, r as withInlineEditingAlternative, E as EntryStateProvider, s as LocaleProvider, T as Text, t as _toConsumableArray, v as useAvailableQualities, x as useEntryStateDispatch, y as useSectionStructure, S as StaticPreview, z as setupI18n, A as loadInlineEditingComponents } from './EditableText-4264c349.js';
75
- export { I as EditableText, s as LocaleProvider, T as Text, B as frontend, z as setupI18n, C as useContentElementConfigurationUpdate, D as useContentElementEditorCommandSubscription, G as useContentElementEditorState, H as useContentElementLifecycle, o as useFile, u as useI18n, K as useLocale, J as useOnScreen } from './EditableText-4264c349.js';
76
+ import { _ as _slicedToArray, u as useI18n, a as _defineProperty, b as _objectWithoutProperties, c as useFileRights, d as useLegalInfo, e as useCredits, P as PhonePlatformContext, f as useShareProviders, g as useShareUrl, h as useTheme, i as useChapters, j as createScrollPositionLifecycleProvider, k as createScrollPositionLifecycleHook, l as useEntryStructure, m as _objectSpread2, n as useIsStaticPreview, o as useEntryMetadata, p as useNestedFiles, q as useFile, M as MotifArea, r as useMediaQuery, s as useSectionContentElements, w as withInlineEditingDecorator, F as Foreground, L as Layout, t as usePostMessageListener, v as withInlineEditingAlternative, E as EntryStateProvider, x as LocaleProvider, T as Text, y as _toConsumableArray, z as useAvailableQualities, A as useEntryStateDispatch, B as useSection, S as StaticPreview, C as loadInlineEditingComponents, D as setupI18n } from './EditableText-43c50894.js';
77
+ export { N as EditableText, x as LocaleProvider, T as Text, G as frontend, D as setupI18n, H as useContentElementConfigurationUpdate, I as useContentElementEditorCommandSubscription, J as useContentElementEditorState, K as useContentElementLifecycle, q as useFile, u as useI18n, n as useIsStaticPreview, Q as useLocale, O as useOnScreen } from './EditableText-43c50894.js';
76
78
  import classNames from 'classnames';
77
- import ReactTooltip from 'react-tooltip';
79
+ import 'use-context-selector';
80
+ import 'reselect';
78
81
  import 'i18n-js';
79
- import { events, browser, documentHiddenState, PlayerSourceIDMap, media, MultiPlayer, settings } from 'pageflow/frontend';
82
+ import 'slugify';
83
+ import { media, events, browser, documentHiddenState, PlayerSourceIDMap, MultiPlayer, settings, cookies } from 'pageflow/frontend';
84
+ import stripTags from 'striptags';
80
85
  import { _ as _createClass, a as _classCallCheck } from './getPrototypeOf-63c7c8e8.js';
81
86
  import BackboneEvents from 'backbone-events-standalone';
87
+ import { useContentElementEditorState } from 'pageflow-scrolled/frontend';
82
88
  import Measure from 'react-measure';
83
89
  import { DraggableCore } from 'react-draggable';
90
+ import invert from 'invert-color';
91
+
92
+ var regenerator = regeneratorRuntime;
93
+
94
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
95
+ try {
96
+ var info = gen[key](arg);
97
+ var value = info.value;
98
+ } catch (error) {
99
+ reject(error);
100
+ return;
101
+ }
102
+
103
+ if (info.done) {
104
+ resolve(value);
105
+ } else {
106
+ Promise.resolve(value).then(_next, _throw);
107
+ }
108
+ }
109
+
110
+ function _asyncToGenerator(fn) {
111
+ return function () {
112
+ var self = this,
113
+ args = arguments;
114
+ return new Promise(function (resolve, reject) {
115
+ var gen = fn.apply(self, args);
116
+
117
+ function _next(value) {
118
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
119
+ }
120
+
121
+ function _throw(err) {
122
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
123
+ }
124
+
125
+ _next(undefined);
126
+ });
127
+ };
128
+ }
84
129
 
85
130
  // This prevents `fetch()` from being imported in a Node test environment
86
131
 
@@ -159,35 +204,70 @@ useScrollPosition.defaultProps = {
159
204
  wait: null
160
205
  };
161
206
 
162
- function useNativeScrollPrevention(ref) {
207
+ function usePrevious(value) {
208
+ var ref = useRef();
163
209
  useEffect(function () {
164
- function preventNativeScroll(e) {
165
- e.preventDefault();
166
- }
210
+ ref.current = value;
211
+ });
212
+ return ref.current;
213
+ }
167
214
 
168
- var current = ref.current;
215
+ var MediaMutedContext = createContext(false);
216
+ function MediaMutedProvider(_ref) {
217
+ var children = _ref.children;
169
218
 
170
- if (current) {
171
- current.addEventListener('touchmove', preventNativeScroll);
172
- current.addEventListener('mousewheel', preventNativeScroll);
173
- }
219
+ var _useState = useState(media.muted),
220
+ _useState2 = _slicedToArray(_useState, 2),
221
+ value = _useState2[0],
222
+ setValue = _useState2[1];
174
223
 
224
+ useEffect(function () {
225
+ media.on('change:muted', setValue);
175
226
  return function () {
176
- if (current) {
177
- current.removeEventListener('touchmove', preventNativeScroll);
178
- current.removeEventListener('mousewheel', preventNativeScroll);
179
- }
227
+ return media.off('change:muted', setValue);
180
228
  };
181
- }, [ref]);
229
+ }, []);
230
+ return (
231
+ /*#__PURE__*/
232
+ React.createElement(MediaMutedContext.Provider, {
233
+ value: value
234
+ }, children)
235
+ );
236
+ }
237
+ /**
238
+ * Returns boolean indicating whether the entry is currently muted.
239
+ */
240
+
241
+ function useMediaMuted() {
242
+ return useContext(MediaMutedContext);
243
+ }
244
+ function useOnUnmuteMedia(callback) {
245
+ var muted = useMediaMuted();
246
+ var wasMuted = usePrevious(muted);
247
+ useIsomorphicLayoutEffect(function () {
248
+ if (wasMuted && !muted) {
249
+ callback();
250
+ }
251
+ }, [wasMuted, muted, callback]);
252
+ }
253
+
254
+ function isBlank(html) {
255
+ return !!stripTags(html).match(/^\s*$/);
256
+ }
257
+ function presence(html) {
258
+ return isBlank(html) ? null : html;
182
259
  }
183
260
 
184
- var styles = {"navigationBar":"AppHeader-module_navigationBar__2EFHw","navigationBarExpanded":"AppHeader-module_navigationBarExpanded__18nbf","navigationBarContentWrapper":"AppHeader-module_navigationBarContentWrapper__2Sf8y","menuIcon":"AppHeader-module_menuIcon__5JKuj","contextIcons":"AppHeader-module_contextIcons__23I_3","contextIcon":"AppHeader-module_contextIcon__157kW","logo":"AppHeader-module_logo__2E1pn","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","navigationTooltip":"AppHeader-module_navigationTooltip__1EvCy","progressBar":"AppHeader-module_progressBar__17IVu","progressIndicator":"AppHeader-module_progressIndicator__3SlYz","navigationChapters":"AppHeader-module_navigationChapters__1dzyV","navigationChaptersHidden":"AppHeader-module_navigationChaptersHidden__8AEPA"};
261
+ var styles = {"navigationBar":"AppHeader-module_navigationBar__2EFHw","navigationBarExpanded":"AppHeader-module_navigationBarExpanded__18nbf","navigationBarContentWrapper":"AppHeader-module_navigationBarContentWrapper__2Sf8y","menuIcon":"AppHeader-module_menuIcon__5JKuj","contextIcons":"AppHeader-module_contextIcons__23I_3","contextIcon":"AppHeader-module_contextIcon__157kW utils-module_unstyledButton__3rgne","logo":"AppHeader-module_logo__2E1pn","chapterList":"AppHeader-module_chapterList__2lMMD","chapterListItem":"AppHeader-module_chapterListItem__28zrc","navigationTooltip":"AppHeader-module_navigationTooltip__1EvCy","progressBar":"AppHeader-module_progressBar__17IVu","progressIndicator":"AppHeader-module_progressIndicator__3SlYz","hasChapters":"AppHeader-module_hasChapters__CTJWZ","navigationChapters":"AppHeader-module_navigationChapters__1dzyV","navigationChaptersHidden":"AppHeader-module_navigationChaptersHidden__8AEPA"};
185
262
 
186
263
  var styles$1 = {"burgerMenuIconContainer":"HamburgerIcon-module_burgerMenuIconContainer__26RY4","burgerMenuIcon":"HamburgerIcon-module_burgerMenuIcon__24t-5"};
187
264
 
188
265
  var hamburgerIconStyles = {"hamburger":"HamburgerIcons-module_hamburger__NnCze","is-active":"HamburgerIcons-module_is-active__10qoY","hamburger-inner":"HamburgerIcons-module_hamburger-inner__187lg","hamburger-box":"HamburgerIcons-module_hamburger-box__34rgF","hamburger--collapse":"HamburgerIcons-module_hamburger--collapse__gRQFa"};
189
266
 
190
267
  function HamburgerIcon(props) {
268
+ var _useI18n = useI18n(),
269
+ t = _useI18n.t;
270
+
191
271
  return (
192
272
  /*#__PURE__*/
193
273
  React.createElement("div", {
@@ -196,6 +276,7 @@ function HamburgerIcon(props) {
196
276
  /*#__PURE__*/
197
277
  React.createElement("button", {
198
278
  className: classNames(styles.menuIcon, styles$1.burgerMenuIcon, hamburgerIconStyles.hamburger, hamburgerIconStyles['hamburger--collapse'], _defineProperty({}, hamburgerIconStyles['is-active'], !props.mobileNavHidden)),
279
+ title: props.mobileNavHidden ? t('pageflow_scrolled.public.navigation.open_mobile_menu') : t('pageflow_scrolled.public.navigation.close_mobile_menu'),
199
280
  type: "button",
200
281
  onClick: props.onClick
201
282
  },
@@ -210,68 +291,154 @@ function HamburgerIcon(props) {
210
291
  );
211
292
  }
212
293
 
213
- var styles$2 = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5","summary":"ChapterLink-module_summary__17aoW"};
294
+ var styles$2 = {"chapterLink":"ChapterLink-module_chapterLink__v5VRl","chapterLinkActive":"ChapterLink-module_chapterLinkActive__jl4h5","summary":"ChapterLink-module_summary__17aoW","tooltipHeadline":"ChapterLink-module_tooltipHeadline__27y4y","tooltipBubble":"ChapterLink-module_tooltipBubble__2sxYY"};
214
295
 
215
- var styles$3 = {"chapterLinkTooltip":"ChapterLinkTooltip-module_chapterLinkTooltip__cCfsw","tooltipHeadline":"ChapterLinkTooltip-module_tooltipHeadline__reew_"};
296
+ var styles$3 = {"container":"Tooltip-module_container__3V63U","bubble":"Tooltip-module_bubble__FIL1C","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"};
216
297
 
217
- function ChapterLinkTooltip(props) {
218
- var _useI18n = useI18n(),
219
- t = _useI18n.t;
298
+ function Tooltip(_ref) {
299
+ var _classNames;
220
300
 
301
+ var bubbleClassName = _ref.bubbleClassName,
302
+ arrowPos = _ref.arrowPos,
303
+ children = _ref.children,
304
+ content = _ref.content,
305
+ fixed = _ref.fixed,
306
+ highlight = _ref.highlight,
307
+ openOnHover = _ref.openOnHover,
308
+ verticalOffset = _ref.verticalOffset,
309
+ horizontalOffset = _ref.horizontalOffset;
221
310
  return (
222
311
  /*#__PURE__*/
223
- React.createElement(ReactTooltip, {
224
- id: props.chapterLinkId,
225
- type: "light",
226
- place: "bottom",
227
- effect: "solid",
228
- className: classNames(styles.navigationTooltip, styles$3.chapterLinkTooltip)
229
- },
230
- /*#__PURE__*/
231
- React.createElement("div", null,
232
- /*#__PURE__*/
233
- React.createElement("h3", {
234
- className: styles$3.tooltipHeadline
235
- }, t('pageflow_scrolled.public.navigation.chapter'), " ", props.chapterIndex),
236
- /*#__PURE__*/
237
- React.createElement("p", {
238
- dangerouslySetInnerHTML: {
239
- __html: props.summary
240
- }
241
- })))
312
+ React.createElement("div", {
313
+ className: classNames(styles$3.container, (_classNames = {}, _defineProperty(_classNames, styles$3.openOnHover, openOnHover), _defineProperty(_classNames, styles$3.fixed, fixed), _classNames)),
314
+ onClick: fixFocusHandlingSafari
315
+ }, children,
316
+ /*#__PURE__*/
317
+ React.createElement(Bubble, {
318
+ className: bubbleClassName,
319
+ highlight: highlight,
320
+ arrowPos: arrowPos,
321
+ verticalOffset: verticalOffset,
322
+ horizontalOffset: horizontalOffset
323
+ }, content))
242
324
  );
243
325
  }
326
+ function Bubble(_ref2) {
327
+ var className = _ref2.className,
328
+ arrowPos = _ref2.arrowPos,
329
+ children = _ref2.children,
330
+ highlight = _ref2.highlight,
331
+ horizontalOffset = _ref2.horizontalOffset,
332
+ verticalOffset = _ref2.verticalOffset;
333
+ var inlineStyle = {
334
+ marginLeft: horizontalOffset,
335
+ marginTop: verticalOffset
336
+ }; // Negative tabIndex ensures element can take focus but does not
337
+ // come up in tab order. This ensures the tooltip stays expanded
338
+ // when text in the legal info menu is selected.
244
339
 
245
- function ChapterLink(props) {
246
340
  return (
247
341
  /*#__PURE__*/
248
- React.createElement("div", null,
342
+ React.createElement("div", {
343
+ style: inlineStyle,
344
+ tabIndex: "-1",
345
+ className: classNames(className, styles$3.bubble, _defineProperty({}, styles$3.highlight, highlight))
346
+ },
249
347
  /*#__PURE__*/
250
- React.createElement("a", {
251
- className: classNames(styles$2.chapterLink, _defineProperty({}, styles$2.chapterLinkActive, props.active)),
252
- href: "#chapter-".concat(props.permaId),
253
- onClick: function onClick() {
254
- return props.handleMenuClick(props.chapterLinkId);
348
+ React.createElement("div", {
349
+ style: {
350
+ left: arrowPos
255
351
  },
256
- "data-tip": true,
257
- "data-for": props.chapterLinkId
258
- }, props.title),
259
- /*#__PURE__*/
260
- React.createElement("p", {
261
- className: styles$2.summary,
262
- dangerouslySetInnerHTML: {
263
- __html: props.summary
264
- }
352
+ className: styles$3.arrow
265
353
  }),
266
354
  /*#__PURE__*/
267
- React.createElement(ChapterLinkTooltip, Object.assign({
268
- chapterIndex: props.chapterIndex,
269
- chapterLinkId: props.chapterLinkId
270
- }, props)))
355
+ React.createElement("div", {
356
+ className: styles$3.inner
357
+ }, children))
358
+ );
359
+ } // Safari does not focus buttons after they are clicked [1]. Focus
360
+ // manually to ensure `focus-within` selector that opens the tooltip
361
+ // applies.
362
+ //
363
+ // [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
364
+
365
+ function fixFocusHandlingSafari(event) {
366
+ if (!event.target.closest) {
367
+ // IE does not support closest, but also does not need this fix.
368
+ return;
369
+ }
370
+
371
+ var button = event.target.closest('button');
372
+
373
+ if (button) {
374
+ button.focus();
375
+ }
376
+ }
377
+
378
+ Tooltip.defaultProps = {
379
+ arrowPos: '50%',
380
+ fixed: false,
381
+ openOnHover: false,
382
+ verticalOffset: 7,
383
+ horizontalOffset: 0
384
+ };
385
+
386
+ function ChapterLink(props) {
387
+ var _useI18n = useI18n(),
388
+ t = _useI18n.t;
389
+
390
+ var item =
391
+ /*#__PURE__*/
392
+ React.createElement("div", null,
393
+ /*#__PURE__*/
394
+ React.createElement("a", {
395
+ className: classNames(styles$2.chapterLink, _defineProperty({}, styles$2.chapterLinkActive, props.active)),
396
+ href: "#".concat(props.chapterSlug),
397
+ onClick: function onClick() {
398
+ return props.handleMenuClick(props.chapterLinkId);
399
+ }
400
+ }, presence(props.title) || t('pageflow_scrolled.public.navigation.chapter', {
401
+ number: props.chapterIndex
402
+ })), !isBlank(props.summary) &&
403
+ /*#__PURE__*/
404
+ React.createElement("p", {
405
+ className: styles$2.summary,
406
+ dangerouslySetInnerHTML: {
407
+ __html: props.summary
408
+ }
409
+ }));
410
+
411
+ if (isBlank(props.summary)) {
412
+ return item;
413
+ }
414
+
415
+ var content =
416
+ /*#__PURE__*/
417
+ React.createElement(React.Fragment, null,
418
+ /*#__PURE__*/
419
+ React.createElement("h3", {
420
+ className: styles$2.tooltipHeadline
421
+ }, t('pageflow_scrolled.public.navigation.chapter', {
422
+ number: props.chapterIndex
423
+ })),
424
+ /*#__PURE__*/
425
+ React.createElement("p", {
426
+ dangerouslySetInnerHTML: {
427
+ __html: props.summary
428
+ }
429
+ }));
430
+ return (
431
+ /*#__PURE__*/
432
+ React.createElement(Tooltip, {
433
+ content: content,
434
+ openOnHover: true,
435
+ highlight: true,
436
+ bubbleClassName: styles$2.tooltipBubble
437
+ }, item)
271
438
  );
272
439
  }
273
440
 
274
- var styles$4 = {"infoIcon":"LegalInfoMenu-module_infoIcon__1kTnt"};
441
+ var styles$4 = {"infoIcon":"LegalInfoMenu-module_infoIcon__1kTnt","legalInfoTooltip":"LegalInfoMenu-module_legalInfoTooltip__306kT"};
275
442
 
276
443
  function _extends() {
277
444
  _extends = Object.assign || function (target) {
@@ -304,8 +471,6 @@ var InfoIcon = (function (_ref) {
304
471
  }));
305
472
  });
306
473
 
307
- var styles$5 = {"legalInfoTooltip":"LegalInfoTooltip-module_legalInfoTooltip__ChzOS"};
308
-
309
474
  function LegalInfoLink(props) {
310
475
  return (
311
476
  /*#__PURE__*/
@@ -321,69 +486,52 @@ function LegalInfoLink(props) {
321
486
  );
322
487
  }
323
488
 
324
- function LegalInfoTooltip() {
489
+ function LegalInfoMenu(props) {
325
490
  var fileRights = useFileRights();
326
491
  var legalInfo = useLegalInfo();
327
492
  var credits = useCredits();
328
- return (
329
- /*#__PURE__*/
330
- React.createElement(ReactTooltip, {
331
- id: 'legalInfoTooltip',
332
- type: 'light',
333
- place: 'bottom',
334
- effect: 'solid',
335
- event: 'click',
336
- globalEventOff: 'click',
337
- clickable: true,
338
- offset: {
339
- right: -97
340
- },
341
- className: classNames(styles.navigationTooltip, styles$5.legalInfoTooltip)
342
- },
343
- /*#__PURE__*/
344
- React.createElement("div", {
345
- onMouseLeave: function onMouseLeave() {
346
- ReactTooltip.hide();
347
- }
348
- }, credits &&
349
- /*#__PURE__*/
350
- React.createElement("p", {
351
- dangerouslySetInnerHTML: {
352
- __html: credits
353
- }
354
- }), fileRights &&
355
- /*#__PURE__*/
356
- React.createElement("p", null, fileRights),
357
- /*#__PURE__*/
358
- React.createElement(LegalInfoLink, legalInfo.imprint),
359
- /*#__PURE__*/
360
- React.createElement(LegalInfoLink, legalInfo.copyright),
361
- /*#__PURE__*/
362
- React.createElement(LegalInfoLink, legalInfo.privacy)))
363
- );
364
- }
365
493
 
366
- function LegalInfoMenu(props) {
494
+ var _useI18n = useI18n(),
495
+ t = _useI18n.t;
496
+
497
+ var content =
498
+ /*#__PURE__*/
499
+ React.createElement("div", {
500
+ className: styles$4.legalInfoTooltip
501
+ }, credits &&
502
+ /*#__PURE__*/
503
+ React.createElement("p", {
504
+ dangerouslySetInnerHTML: {
505
+ __html: credits
506
+ }
507
+ }), fileRights &&
508
+ /*#__PURE__*/
509
+ React.createElement("p", null, fileRights),
510
+ /*#__PURE__*/
511
+ React.createElement(LegalInfoLink, legalInfo.imprint),
512
+ /*#__PURE__*/
513
+ React.createElement(LegalInfoLink, legalInfo.copyright),
514
+ /*#__PURE__*/
515
+ React.createElement(LegalInfoLink, legalInfo.privacy));
367
516
  return (
368
517
  /*#__PURE__*/
369
- React.createElement("div", null,
518
+ React.createElement(Tooltip, {
519
+ horizontalOffset: -30,
520
+ arrowPos: 120,
521
+ content: content
522
+ },
370
523
  /*#__PURE__*/
371
- React.createElement("a", {
524
+ React.createElement("button", {
372
525
  className: classNames(styles.contextIcon, styles$4.infoIcon),
373
- "data-tip": true,
374
- "data-for": 'legalInfoTooltip',
375
- onMouseEnter: function onMouseEnter() {
376
- ReactTooltip.hide();
377
- }
526
+ "aria-haspopup": "true",
527
+ title: t('pageflow_scrolled.public.navigation.legal_info')
378
528
  },
379
529
  /*#__PURE__*/
380
- React.createElement(InfoIcon, null)),
381
- /*#__PURE__*/
382
- React.createElement(LegalInfoTooltip, null))
530
+ React.createElement(InfoIcon, null)))
383
531
  );
384
532
  }
385
533
 
386
- var styles$6 = {"shareIcon":"SharingMenu-module_shareIcon__1AlDL"};
534
+ var styles$5 = {"shareIcon":"SharingMenu-module_shareIcon__1AlDL","sharingTooltip":"SharingMenu-module_sharingTooltip__3_aAF","shareLinkContainer":"SharingMenu-module_shareLinkContainer__2_8B3","shareLink":"SharingMenu-module_shareLink__uTnVm"};
387
535
 
388
536
  function _extends$1() {
389
537
  _extends$1 = Object.assign || function (target) {
@@ -414,18 +562,19 @@ var ShareIcon = (function (_ref) {
414
562
  }));
415
563
  });
416
564
 
417
- var styles$7 = {"sharingTooltip":"SharingTooltip-module_sharingTooltip__1cljv","shareLinkContainer":"SharingTooltip-module_shareLinkContainer__2MnKN","shareLink":"SharingTooltip-module_shareLink__2ySSX","shareIcon":"SharingTooltip-module_shareIcon__3igrs"};
418
-
419
565
  function usePhonePlatform() {
420
566
  return React.useContext(PhonePlatformContext);
421
567
  }
422
568
 
423
- function SharingTooltip() {
569
+ function SharingMenu() {
424
570
  var isPhonePlatform = usePhonePlatform();
425
- var shareUrl = useShareUrl();
426
571
  var shareProviders = useShareProviders({
427
572
  isPhonePlatform: isPhonePlatform
428
573
  });
574
+ var shareUrl = useShareUrl();
575
+
576
+ var _useI18n = useI18n(),
577
+ t = _useI18n.t;
429
578
 
430
579
  function renderShareLinks(shareProviders) {
431
580
  return shareProviders.map(function (shareProvider) {
@@ -434,77 +583,162 @@ function SharingTooltip() {
434
583
  /*#__PURE__*/
435
584
  React.createElement("div", {
436
585
  key: shareProvider.name,
437
- className: styles$7.shareLinkContainer
586
+ className: styles$5.shareLinkContainer
438
587
  },
439
588
  /*#__PURE__*/
440
589
  React.createElement("a", {
441
- className: classNames('share', styles$7.shareLink),
590
+ className: classNames('share', styles$5.shareLink),
442
591
  href: shareProvider.url.replace('%{url}', shareUrl),
443
- target: '_blank'
592
+ target: '_blank',
593
+ rel: "noopener noreferrer"
444
594
  },
445
595
  /*#__PURE__*/
446
596
  React.createElement(Icon, {
447
- className: styles$7.shareIcon
597
+ className: styles$5.shareIcon
448
598
  }), shareProvider.name))
449
599
  );
450
600
  });
451
601
  }
452
- return (
453
- /*#__PURE__*/
454
- React.createElement(ReactTooltip, {
455
- id: 'sharingTooltip',
456
- type: 'light',
457
- place: 'bottom',
458
- effect: 'solid',
459
- event: 'click',
460
- globalEventOff: 'click',
461
- clickable: true,
462
- offset: {
463
- right: -64
464
- },
465
- className: classNames(styles.navigationTooltip, styles$7.sharingTooltip)
466
- },
467
- /*#__PURE__*/
468
- React.createElement("div", {
469
- onMouseLeave: function onMouseLeave() {
470
- ReactTooltip.hide();
471
- }
472
- }, renderShareLinks(shareProviders)))
473
- );
474
- }
475
-
476
- function SharingMenu() {
477
- var isPhonePlatform = usePhonePlatform();
478
- var shareProviders = useShareProviders({
479
- isPhonePlatform: isPhonePlatform
480
- });
481
602
 
482
603
  if (shareProviders.length > 0) {
483
604
  return (
484
605
  /*#__PURE__*/
485
- React.createElement("div", null,
486
- /*#__PURE__*/
487
- React.createElement("a", {
488
- className: classNames(styles.contextIcon, styles$6.shareIcon),
489
- "data-tip": true,
490
- "data-for": 'sharingTooltip',
491
- onMouseEnter: function onMouseEnter() {
492
- ReactTooltip.hide();
493
- }
606
+ React.createElement(Tooltip, {
607
+ horizontalOffset: -70,
608
+ arrowPos: 160,
609
+ content: renderShareLinks(shareProviders)
494
610
  },
495
611
  /*#__PURE__*/
496
- React.createElement(ShareIcon, null)),
612
+ React.createElement("button", {
613
+ className: classNames(styles.contextIcon),
614
+ title: t('pageflow_scrolled.public.navigation.share')
615
+ },
497
616
  /*#__PURE__*/
498
- React.createElement(SharingTooltip, null))
617
+ React.createElement(ShareIcon, null)))
499
618
  );
500
619
  } else {
501
620
  return null;
502
621
  }
503
622
  }
504
623
 
624
+ var styles$6 = {"button":"ToggleMuteButton-module_button__iFL79","animate":"ToggleMuteButton-module_animate__20Dhc","pulse":"ToggleMuteButton-module_pulse__3HhQK"};
625
+
626
+ function _extends$2() {
627
+ _extends$2 = Object.assign || function (target) {
628
+ for (var i = 1; i < arguments.length; i++) {
629
+ var source = arguments[i];
630
+
631
+ for (var key in source) {
632
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
633
+ target[key] = source[key];
634
+ }
635
+ }
636
+ }
637
+
638
+ return target;
639
+ };
640
+
641
+ return _extends$2.apply(this, arguments);
642
+ }
643
+ var MutedIcon = (function (_ref) {
644
+ var _ref$styles = _ref.styles,
645
+ styles = _ref$styles === void 0 ? {} : _ref$styles,
646
+ props = _objectWithoutProperties(_ref, ["styles"]);
647
+
648
+ return React.createElement("svg", _extends$2({
649
+ "aria-hidden": "true",
650
+ "data-prefix": "fas",
651
+ "data-icon": "volume-mute",
652
+ className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
653
+ xmlns: "http://www.w3.org/2000/svg",
654
+ viewBox: "0 0 512 512"
655
+ }, props), React.createElement("path", {
656
+ d: "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"
657
+ }));
658
+ });
659
+
660
+ function _extends$3() {
661
+ _extends$3 = Object.assign || function (target) {
662
+ for (var i = 1; i < arguments.length; i++) {
663
+ var source = arguments[i];
664
+
665
+ for (var key in source) {
666
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
667
+ target[key] = source[key];
668
+ }
669
+ }
670
+ }
671
+
672
+ return target;
673
+ };
674
+
675
+ return _extends$3.apply(this, arguments);
676
+ }
677
+ var UnmutedIcon = (function (_ref) {
678
+ var _ref$styles = _ref.styles,
679
+ styles = _ref$styles === void 0 ? {} : _ref$styles,
680
+ props = _objectWithoutProperties(_ref, ["styles"]);
681
+
682
+ return React.createElement("svg", _extends$3({
683
+ "aria-hidden": "true",
684
+ "data-prefix": "fas",
685
+ "data-icon": "volume-mute",
686
+ className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
687
+ xmlns: "http://www.w3.org/2000/svg",
688
+ viewBox: "0 0 512 512"
689
+ }, props), React.createElement("path", {
690
+ d: "M232.36 64.01a24.007 24.007 0 00-1.176.002c-5.703.15-11.464 2.348-16.155 7.039L126.061 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-14.293-11.514-23.733-23.64-24.01zm149.5 31.994c-8.107-.16-16.098 3.814-20.75 11.217-7.09 11.28-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256c0-63.53-32.06-121.94-85.77-156.24a23.808 23.808 0 00-12.37-3.756zm-55.032 80.174c-8.51-.046-16.795 4.42-21.209 12.402-6.39 11.61-2.159 26.2 9.451 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88 0-31.88-17.54-61.32-45.78-76.86a23.987 23.987 0 00-11.402-2.952z"
691
+ }));
692
+ });
693
+
694
+ function ToggleMuteButton() {
695
+ var muted = useMediaMuted();
696
+
697
+ var _useI18n = useI18n(),
698
+ t = _useI18n.t;
699
+
700
+ useUnmuteSound();
701
+ return (
702
+ /*#__PURE__*/
703
+ React.createElement("div", {
704
+ className: classNames(_defineProperty({}, styles$6.animate, !muted))
705
+ },
706
+ /*#__PURE__*/
707
+ React.createElement("button", {
708
+ className: classNames(styles.contextIcon, styles$6.button),
709
+ title: muted ? t('pageflow_scrolled.public.navigation.unmute') : t('pageflow_scrolled.public.navigation.mute'),
710
+ onClick: function onClick() {
711
+ return media.mute(!muted);
712
+ }
713
+ }, muted ?
714
+ /*#__PURE__*/
715
+ React.createElement(MutedIcon, null) :
716
+ /*#__PURE__*/
717
+ React.createElement(UnmutedIcon, null)))
718
+ );
719
+ }
720
+
721
+ function useUnmuteSound() {
722
+ var theme = useTheme();
723
+ var audio = useRef();
724
+ useEffect(function () {
725
+ audio.current = new Audio(theme.assets.unmute);
726
+ }, [theme.assets.unmute]);
727
+ useOnUnmuteMedia(useCallback(function () {
728
+ return audio.current.play();
729
+ }, []));
730
+ }
731
+
505
732
  function Logo() {
506
733
  var theme = useTheme();
507
734
  return (
735
+ /*#__PURE__*/
736
+ React.createElement("a", {
737
+ target: "_blank",
738
+ rel: "noopener noreferrer",
739
+ href: theme.options.logoUrl,
740
+ className: classNames(styles.menuIcon, styles.logo)
741
+ },
508
742
  /*#__PURE__*/
509
743
  React.createElement("picture", null,
510
744
  /*#__PURE__*/
@@ -520,24 +754,51 @@ function Logo() {
520
754
  /*#__PURE__*/
521
755
  React.createElement("img", {
522
756
  src: theme.assets.logoDesktop,
523
- alt: theme.options.logoAltText,
524
- className: classNames(styles.menuIcon, styles.logo)
525
- }))
757
+ alt: theme.options.logoAltText
758
+ })))
526
759
  );
527
760
  }
528
761
 
529
- function AppHeader(props) {
530
- var _useState = useState(true),
531
- _useState2 = _slicedToArray(_useState, 2),
532
- navExpanded = _useState2[0],
533
- setNavExpanded = _useState2[1];
762
+ var styles$7 = {"link":"SkipLinks-module_link__2BgJr"};
534
763
 
535
- var _useState3 = useState(true),
536
- _useState4 = _slicedToArray(_useState3, 2),
537
- mobileNavHidden = _useState4[0],
538
- setMobileNavHidden = _useState4[1];
764
+ function SkipLinks() {
765
+ var _useI18n = useI18n(),
766
+ t = _useI18n.t;
539
767
 
540
- var _useState5 = useState(0),
768
+ function scrollDown() {
769
+ setTimeout(function () {
770
+ window.scrollTo(0, 50);
771
+ }, 50);
772
+ }
773
+
774
+ return (
775
+ /*#__PURE__*/
776
+ React.createElement("div", {
777
+ id: "skipLinks"
778
+ },
779
+ /*#__PURE__*/
780
+ React.createElement("a", {
781
+ href: "#goToContent",
782
+ className: styles$7.link,
783
+ onClick: scrollDown
784
+ }, t('pageflow_scrolled.public.navigation_skip_links.content')))
785
+ );
786
+ }
787
+
788
+ function AppHeader(props) {
789
+ var _chapters$, _chapters$2, _classNames2;
790
+
791
+ var _useState = useState(true),
792
+ _useState2 = _slicedToArray(_useState, 2),
793
+ navExpanded = _useState2[0],
794
+ setNavExpanded = _useState2[1];
795
+
796
+ var _useState3 = useState(true),
797
+ _useState4 = _slicedToArray(_useState3, 2),
798
+ mobileNavHidden = _useState4[0],
799
+ setMobileNavHidden = _useState4[1];
800
+
801
+ var _useState5 = useState(0),
541
802
  _useState6 = _slicedToArray(_useState5, 2),
542
803
  readingProgress = _useState6[0],
543
804
  setReadingProgress = _useState6[1];
@@ -547,16 +808,7 @@ function AppHeader(props) {
547
808
  activeChapterLink = _useState8[0],
548
809
  setActiveChapterLink = _useState8[1];
549
810
 
550
- var entryStructure = useEntryStructure();
551
- var ref = useRef();
552
- useNativeScrollPrevention(ref);
553
- var chapters = entryStructure.map(function (chapter) {
554
- return {
555
- permaId: chapter.permaId,
556
- title: chapter.title,
557
- summary: chapter.summary
558
- };
559
- });
811
+ var chapters = useChapters();
560
812
  useScrollPosition(function (_ref) {
561
813
  var prevPos = _ref.prevPos,
562
814
  currPos = _ref.currPos;
@@ -572,6 +824,10 @@ function AppHeader(props) {
572
824
  var progress = Math.min(100, Math.abs(current / total) * 100);
573
825
  setReadingProgress(progress);
574
826
  }, [readingProgress], null, false, 1);
827
+ useOnUnmuteMedia(useCallback(function () {
828
+ return setNavExpanded(true);
829
+ }, []));
830
+ var hasChapters = chapters.length > 1 || !isBlank((_chapters$ = chapters[0]) === null || _chapters$ === void 0 ? void 0 : _chapters$.title) || !isBlank((_chapters$2 = chapters[0]) === null || _chapters$2 === void 0 ? void 0 : _chapters$2.summary);
575
831
 
576
832
  function handleProgressBarMouseEnter() {
577
833
  setNavExpanded(true);
@@ -587,9 +843,7 @@ function AppHeader(props) {
587
843
  }
588
844
 
589
845
  function renderChapterLinks(chapters) {
590
- return chapters.filter(function (chapterConfiguration) {
591
- return chapterConfiguration.title && chapterConfiguration.summary;
592
- }).map(function (chapter, index) {
846
+ return chapters.map(function (chapter, index) {
593
847
  var chapterIndex = index + 1;
594
848
  var chapterLinkId = "chapterLink".concat(chapterIndex);
595
849
  return (
@@ -608,40 +862,53 @@ function AppHeader(props) {
608
862
  );
609
863
  });
610
864
  }
865
+
866
+ function renderNav() {
867
+ if (!hasChapters) {
868
+ return null;
869
+ }
870
+
871
+ return (
872
+ /*#__PURE__*/
873
+ React.createElement("nav", {
874
+ className: classNames(styles.navigationChapters, _defineProperty({}, styles.navigationChaptersHidden, mobileNavHidden)),
875
+ role: "navigation"
876
+ },
877
+ /*#__PURE__*/
878
+ React.createElement("ul", {
879
+ className: styles.chapterList
880
+ }, renderChapterLinks(chapters)))
881
+ );
882
+ }
883
+
611
884
  return (
612
885
  /*#__PURE__*/
613
886
  React.createElement("header", {
614
- className: classNames(styles.navigationBar, _defineProperty({}, styles.navigationBarExpanded, navExpanded))
887
+ className: classNames(styles.navigationBar, (_classNames2 = {}, _defineProperty(_classNames2, styles.navigationBarExpanded, navExpanded || !mobileNavHidden), _defineProperty(_classNames2, styles.hasChapters, hasChapters), _classNames2))
615
888
  },
616
889
  /*#__PURE__*/
617
890
  React.createElement("div", {
618
891
  className: styles.navigationBarContentWrapper
619
- },
892
+ }, hasChapters &&
620
893
  /*#__PURE__*/
621
894
  React.createElement(HamburgerIcon, {
622
895
  onClick: handleBurgerMenuClick,
623
896
  mobileNavHidden: mobileNavHidden
624
897
  }),
625
898
  /*#__PURE__*/
626
- React.createElement(Logo, null),
627
- /*#__PURE__*/
628
- React.createElement("nav", {
629
- className: classNames(styles.navigationChapters, _defineProperty({}, styles.navigationChaptersHidden, mobileNavHidden)),
630
- role: "navigation",
631
- ref: ref
632
- },
899
+ React.createElement(SkipLinks, null),
633
900
  /*#__PURE__*/
634
- React.createElement("ul", {
635
- className: styles.chapterList
636
- }, renderChapterLinks(chapters))),
901
+ React.createElement(Logo, null), renderNav(),
637
902
  /*#__PURE__*/
638
903
  React.createElement("div", {
639
904
  className: classNames(styles.contextIcons)
640
905
  },
641
906
  /*#__PURE__*/
642
- React.createElement(SharingMenu, null),
907
+ React.createElement(ToggleMuteButton, null),
643
908
  /*#__PURE__*/
644
- React.createElement(LegalInfoMenu, null))),
909
+ React.createElement(LegalInfoMenu, null),
910
+ /*#__PURE__*/
911
+ React.createElement(SharingMenu, null))),
645
912
  /*#__PURE__*/
646
913
  React.createElement("div", {
647
914
  className: styles.progressBar,
@@ -740,7 +1007,7 @@ function () {
740
1007
  key: "update",
741
1008
  value: function update() {
742
1009
  if (!this.disabled) {
743
- if (this.backgroundMedia.muted || this.atmoSourceId == undefined) {
1010
+ if (this.backgroundMedia.muted) {
744
1011
  this.multiPlayer.fadeOutAndPause();
745
1012
  } else {
746
1013
  this.multiPlayer.fadeTo(this.atmoSourceId);
@@ -809,10 +1076,7 @@ function AtmoProvider(_ref) {
809
1076
  var currentAtmo = atmoConfig.current;
810
1077
 
811
1078
  if (currentAtmo.atmo) {
812
- if (sources) {
813
- currentAtmo.pool.mapSources(audioFilePermaId, sources);
814
- }
815
-
1079
+ currentAtmo.pool.mapSources(audioFilePermaId, sources);
816
1080
  currentAtmo.atmo.atmoSourceId = audioFilePermaId;
817
1081
  currentAtmo.atmo.update();
818
1082
  }
@@ -840,14 +1104,13 @@ function useAtmo() {
840
1104
 
841
1105
  function PlayerContainer(_ref) {
842
1106
  var filePermaId = _ref.filePermaId,
843
- className = _ref.className,
844
1107
  sources = _ref.sources,
845
1108
  textTrackSources = _ref.textTrackSources,
846
- poster = _ref.poster,
847
1109
  type = _ref.type,
848
1110
  playsInline = _ref.playsInline,
849
1111
  loop = _ref.loop,
850
1112
  controls = _ref.controls,
1113
+ altText = _ref.altText,
851
1114
  mediaEventsContextData = _ref.mediaEventsContextData,
852
1115
  atmoDuringPlayback = _ref.atmoDuringPlayback,
853
1116
  onSetup = _ref.onSetup,
@@ -861,17 +1124,16 @@ function PlayerContainer(_ref) {
861
1124
  var player = media.getPlayer(sources, {
862
1125
  textTrackSources: textTrackSources,
863
1126
  filePermaId: filePermaId,
864
- poster: poster,
865
1127
  tagName: type,
866
1128
  playsInline: playsInline,
867
1129
  loop: loop,
868
1130
  controls: controls,
869
1131
  hooks: atmoDuringPlayback ? atmo.createMediaPlayerHooks(atmoDuringPlayback) : {},
870
1132
  //create hooks only for inline media players
871
- mediaEventsContextData: mediaEventsContextData
1133
+ mediaEventsContextData: mediaEventsContextData,
1134
+ altText: altText
872
1135
  });
873
- var playerElement = player.el();
874
- playerWrapper.appendChild(playerElement);
1136
+ playerWrapper.appendChild(player.el());
875
1137
 
876
1138
  if (onSetup) {
877
1139
  onSetup(player);
@@ -879,7 +1141,7 @@ function PlayerContainer(_ref) {
879
1141
 
880
1142
  return function () {
881
1143
  media.releasePlayer(player);
882
- playerWrapper.innerHTML = '';
1144
+ playerWrapper.removeChild(player.el());
883
1145
 
884
1146
  if (onDispose) {
885
1147
  onDispose();
@@ -890,7 +1152,6 @@ function PlayerContainer(_ref) {
890
1152
  return (
891
1153
  /*#__PURE__*/
892
1154
  React.createElement("div", {
893
- className: className,
894
1155
  ref: playerWrapperRef
895
1156
  })
896
1157
  );
@@ -926,7 +1187,7 @@ function deepEqual(a, b) {
926
1187
  }
927
1188
 
928
1189
  function areEqual(prevProps, nextProps) {
929
- return prevProps.type === nextProps.type && prevProps.playsInline === nextProps.playsInline && prevProps.poster === nextProps.poster && prevProps.loop === nextProps.loop && prevProps.controls === nextProps.controls && prevProps.atmoDuringPlayback === nextProps.atmoDuringPlayback && deepEqual(prevProps.sources, nextProps.sources) && deepEqual(prevProps.textTrackSources, nextProps.textTrackSources);
1190
+ 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);
930
1191
  }
931
1192
 
932
1193
  var PlayerContainer$1 = React.memo(PlayerContainer, areEqual);
@@ -937,6 +1198,9 @@ function watchPlayer (player, actions) {
937
1198
  player.on('loadedmetadata', function () {
938
1199
  return actions.metaDataLoaded(player.currentTime(), player.duration());
939
1200
  });
1201
+ player.on('loadeddata', function () {
1202
+ return actions.dataLoaded();
1203
+ });
940
1204
  player.on('progress', function () {
941
1205
  return actions.progress(player.bufferedEnd());
942
1206
  });
@@ -958,6 +1222,7 @@ function watchPlayer (player, actions) {
958
1222
  }
959
1223
  function unwatchPlayer(player, actions) {
960
1224
  player.off('loadedmetadata');
1225
+ player.off('loadeddata');
961
1226
  player.off('progress');
962
1227
  player.off('play', actions.playing);
963
1228
  player.off('playfailed', actions.playFailed);
@@ -983,7 +1248,7 @@ function applyPlayerState(player, playerState, playerActions) {
983
1248
  player.prebuffer().then(playerActions.prebuffered);
984
1249
  }
985
1250
 
986
- if (playerState.isPlaying) {
1251
+ if (playerState.shouldPlay) {
987
1252
  player.play();
988
1253
  }
989
1254
 
@@ -1008,7 +1273,7 @@ function updatePlayerState(player, prevPlayerState, playerState, playerActions)
1008
1273
  player.playOrPlayOnLoad();
1009
1274
  }
1010
1275
  } else if (prevPlayerState.shouldPlay && !playerState.shouldPlay && playerState.isPlaying) {
1011
- if (playerState.fadeDuration) {
1276
+ if (playerState.fadeDuration && !player.muted()) {
1012
1277
  player.fadeOutAndPause(playerState.fadeDuration);
1013
1278
  } else {
1014
1279
  player.pause();
@@ -1024,6 +1289,10 @@ function updatePlayerState(player, prevPlayerState, playerState, playerActions)
1024
1289
  }
1025
1290
  }
1026
1291
 
1292
+ function updateObjectPosition(player, x, y) {
1293
+ player.getMediaElement().style.objectPosition = typeof x !== 'undefined' && typeof y !== 'undefined' ? "".concat(x, "% ").concat(y, "%") : '';
1294
+ }
1295
+
1027
1296
  function getEventObject(sectionIndex, entryStructure) {
1028
1297
  var getSectionChapterTitle = function getSectionChapterTitle(sectionIndex) {
1029
1298
  var _entryStructure$filte;
@@ -1092,7 +1361,7 @@ function getTextTrackSources(textTrackFiles, textTracksDisabled) {
1092
1361
 
1093
1362
  var textTrackStyles = {"inset":"textTracks-module_inset__K7DIL"};
1094
1363
 
1095
- var styles$8 = {"-webkit-mask":"MediaPlayer-module_mask__3JQDW","mask":"MediaPlayer-module_mask__3JQDW"};
1364
+ var styles$8 = {"wrapper":"MediaPlayer-module_wrapper__1cSGR","cover":"MediaPlayer-module_cover__2wGez"};
1096
1365
 
1097
1366
  var PLAY = 'MEDIA_PLAY';
1098
1367
  var PLAYING = 'MEDIA_PLAYING';
@@ -1103,6 +1372,7 @@ var PLAY_AND_FADE_IN = 'MEDIA_PLAY_AND_FADE_IN';
1103
1372
  var FADE_OUT_AND_PAUSE = 'MEDIA_FADE_OUT_AND_PAUSE';
1104
1373
  var CHANGE_VOLUME_FACTOR = 'CHANGE_VOLUME_FACTOR';
1105
1374
  var META_DATA_LOADED = 'MEDIA_META_DATA_LOADED';
1375
+ var DATA_LOADED = 'MEDIA_DATA_LOADED';
1106
1376
  var PROGRESS = 'MEDIA_PROGRESS';
1107
1377
  var TIME_UPDATE = 'MEDIA_TIME_UPDATE';
1108
1378
  var ENDED = 'MEDIA_ENDED';
@@ -1115,30 +1385,39 @@ var PREBUFFER = 'MEDIA_PREBUFFER';
1115
1385
  var PREBUFFERED = 'MEDIA_PREBUFFERED';
1116
1386
  var BUFFER_UNDERRUN = 'MEDIA_BUFFER_UNDERRUN';
1117
1387
  var BUFFER_UNDERRUN_CONTINUE = 'MEDIA_BUFFER_UNDERRUN_CONTINUE';
1118
- var CONTROLS_ENTERED = 'MEDIA_CONTROLS_ENTERED';
1119
- var CONTROLS_LEFT = 'MEDIA_CONTROLS_LEFT';
1388
+ var MOUSE_ENTERED = 'MEDIA_MOUSE_ENTERED';
1389
+ var MOUSE_LEFT = 'MEDIA_MOUSE_LEFT';
1390
+ var MOUSE_ENTERED_CONTROLS = 'MEDIA_MOUSE_ENTERED_CONTROLS';
1391
+ var MOUSE_LEFT_CONTROLS = 'MEDIA_MOUSE_LEFT_CONTROLS';
1120
1392
  var FOCUS_ENTERED_CONTROLS = 'MEDIA_FOCUS_ENTERED_CONTROLS';
1121
1393
  var FOCUS_LEFT_CONTROLS = 'MEDIA_FOCUS_LEFT_CONTROLS';
1122
1394
  var USER_INTERACTION = 'MEDIA_USER_INTERACTION';
1123
1395
  var USER_IDLE = 'MEDIA_USER_IDLE';
1124
1396
  var SAVE_MEDIA_ELEMENT_ID = 'MEDIA_SAVE_MEDIA_ELEMENT_ID';
1125
1397
  var DISCARD_MEDIA_ELEMENT_ID = 'MEDIA_DISCARD_MEDIA_ELEMENT_ID';
1126
- var isBlessed = false;
1127
1398
  function createActions(dispatch) {
1128
1399
  return {
1129
1400
  playBlessed: function playBlessed() {
1130
- if (!isBlessed) {
1131
- media.mute(false);
1132
- isBlessed = true;
1133
- }
1401
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
1402
+ via = _ref.via;
1134
1403
 
1404
+ media.mute(false);
1135
1405
  dispatch({
1136
- type: PLAY
1406
+ type: PLAY,
1407
+ payload: {
1408
+ via: via
1409
+ }
1137
1410
  });
1138
1411
  },
1139
1412
  play: function play() {
1413
+ var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
1414
+ via = _ref2.via;
1415
+
1140
1416
  dispatch({
1141
- type: PLAY
1417
+ type: PLAY,
1418
+ payload: {
1419
+ via: via
1420
+ }
1142
1421
  });
1143
1422
  },
1144
1423
  playing: function playing() {
@@ -1152,8 +1431,14 @@ function createActions(dispatch) {
1152
1431
  });
1153
1432
  },
1154
1433
  pause: function pause() {
1434
+ var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
1435
+ via = _ref3.via;
1436
+
1155
1437
  dispatch({
1156
- type: PAUSE
1438
+ type: PAUSE,
1439
+ payload: {
1440
+ via: via
1441
+ }
1157
1442
  });
1158
1443
  },
1159
1444
  paused: function paused() {
@@ -1162,18 +1447,26 @@ function createActions(dispatch) {
1162
1447
  });
1163
1448
  },
1164
1449
  playAndFadeIn: function playAndFadeIn(fadeDuration) {
1450
+ var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
1451
+ via = _ref4.via;
1452
+
1165
1453
  dispatch({
1166
1454
  type: PLAY_AND_FADE_IN,
1167
1455
  payload: {
1168
- fadeDuration: fadeDuration
1456
+ fadeDuration: fadeDuration,
1457
+ via: via
1169
1458
  }
1170
1459
  });
1171
1460
  },
1172
1461
  fadeOutAndPause: function fadeOutAndPause(fadeDuration) {
1462
+ var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
1463
+ via = _ref5.via;
1464
+
1173
1465
  dispatch({
1174
1466
  type: FADE_OUT_AND_PAUSE,
1175
1467
  payload: {
1176
- fadeDuration: fadeDuration
1468
+ fadeDuration: fadeDuration,
1469
+ via: via
1177
1470
  }
1178
1471
  });
1179
1472
  },
@@ -1195,6 +1488,11 @@ function createActions(dispatch) {
1195
1488
  }
1196
1489
  });
1197
1490
  },
1491
+ dataLoaded: function dataLoaded() {
1492
+ dispatch({
1493
+ type: DATA_LOADED
1494
+ });
1495
+ },
1198
1496
  progress: function progress(bufferedEnd) {
1199
1497
  dispatch({
1200
1498
  type: PROGRESS,
@@ -1268,14 +1566,24 @@ function createActions(dispatch) {
1268
1566
  type: BUFFER_UNDERRUN_CONTINUE
1269
1567
  });
1270
1568
  },
1271
- controlsEntered: function controlsEntered() {
1569
+ mouseEntered: function mouseEntered() {
1570
+ dispatch({
1571
+ type: MOUSE_ENTERED
1572
+ });
1573
+ },
1574
+ mouseLeft: function mouseLeft() {
1575
+ dispatch({
1576
+ type: MOUSE_LEFT
1577
+ });
1578
+ },
1579
+ mouseEnteredControls: function mouseEnteredControls() {
1272
1580
  dispatch({
1273
- type: CONTROLS_ENTERED
1581
+ type: MOUSE_ENTERED_CONTROLS
1274
1582
  });
1275
1583
  },
1276
- controlsLeft: function controlsLeft() {
1584
+ mouseLeftControls: function mouseLeftControls() {
1277
1585
  dispatch({
1278
- type: CONTROLS_LEFT
1586
+ type: MOUSE_LEFT_CONTROLS
1279
1587
  });
1280
1588
  },
1281
1589
  userInteraction: function userInteraction() {
@@ -1318,9 +1626,8 @@ function getInitialPlayerState() {
1318
1626
  return {
1319
1627
  isPlaying: false,
1320
1628
  shouldPlay: false,
1321
- shouldPause: false,
1322
- hasPlayed: false,
1323
1629
  unplayed: true,
1630
+ dataLoaded: false,
1324
1631
  isLoading: true,
1325
1632
  playFailed: false,
1326
1633
  duration: 0,
@@ -1332,6 +1639,7 @@ function getInitialPlayerState() {
1332
1639
  currentTime: 0,
1333
1640
  mediaElementId: undefined,
1334
1641
  shouldSeekTo: undefined,
1642
+ userHovering: false,
1335
1643
  userHoveringControls: false,
1336
1644
  focusInsideControls: false,
1337
1645
  userIdle: false,
@@ -1344,29 +1652,32 @@ function playerStateReducer(state, action) {
1344
1652
  return _objectSpread2(_objectSpread2({}, state), {}, {
1345
1653
  isLoading: true,
1346
1654
  shouldPlay: true,
1347
- playFailed: false
1655
+ playFailed: false,
1656
+ unplayed: false,
1657
+ lastControlledVia: action.payload.via
1348
1658
  });
1349
1659
 
1350
1660
  case PLAYING:
1351
1661
  return _objectSpread2(_objectSpread2({}, state), {}, {
1352
1662
  shouldPlay: true,
1353
1663
  isPlaying: true,
1354
- userIdle: false,
1355
- unplayed: false
1664
+ userIdle: false
1356
1665
  });
1357
1666
 
1358
1667
  case PLAY_AND_FADE_IN:
1359
1668
  return _objectSpread2(_objectSpread2({}, state), {}, {
1360
1669
  shouldPlay: true,
1361
1670
  fadeDuration: action.payload.fadeDuration,
1362
- isLoading: true
1671
+ isLoading: true,
1672
+ lastControlledVia: action.payload.via
1363
1673
  });
1364
1674
 
1365
1675
  case FADE_OUT_AND_PAUSE:
1366
1676
  return _objectSpread2(_objectSpread2({}, state), {}, {
1367
1677
  shouldPlay: false,
1368
1678
  fadeDuration: action.payload.fadeDuration,
1369
- isLoading: false
1679
+ isLoading: false,
1680
+ lastControlledVia: action.payload.via
1370
1681
  });
1371
1682
 
1372
1683
  case PLAY_FAILED:
@@ -1383,16 +1694,13 @@ function playerStateReducer(state, action) {
1383
1694
  shouldPlay: false,
1384
1695
  isLoading: false,
1385
1696
  fadeDuration: null,
1386
- shouldPause: true
1697
+ lastControlledVia: action.payload.via
1387
1698
  });
1388
1699
 
1389
1700
  case PAUSED:
1390
- state.shouldPause = false;
1391
-
1392
1701
  if (state.bufferUnderrun) {
1393
1702
  return _objectSpread2(_objectSpread2({}, state), {}, {
1394
- isPlaying: false,
1395
- hasPlayed: true
1703
+ isPlaying: false
1396
1704
  });
1397
1705
  } else {
1398
1706
  return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -1430,6 +1738,11 @@ function playerStateReducer(state, action) {
1430
1738
  duration: action.payload.duration
1431
1739
  });
1432
1740
 
1741
+ case DATA_LOADED:
1742
+ return _objectSpread2(_objectSpread2({}, state), {}, {
1743
+ dataLoaded: true
1744
+ });
1745
+
1433
1746
  case PROGRESS:
1434
1747
  return _objectSpread2(_objectSpread2({}, state), {}, {
1435
1748
  bufferedEnd: action.payload.bufferedEnd
@@ -1445,7 +1758,9 @@ function playerStateReducer(state, action) {
1445
1758
  case ENDED:
1446
1759
  return _objectSpread2(_objectSpread2({}, state), {}, {
1447
1760
  shouldPlay: false,
1448
- isPlaying: false
1761
+ isPlaying: false,
1762
+ unplayed: true,
1763
+ lastControlledVia: null
1449
1764
  });
1450
1765
 
1451
1766
  case WAITING:
@@ -1473,12 +1788,22 @@ function playerStateReducer(state, action) {
1473
1788
  bufferUnderrun: false
1474
1789
  });
1475
1790
 
1476
- case CONTROLS_ENTERED:
1791
+ case MOUSE_ENTERED:
1792
+ return _objectSpread2(_objectSpread2({}, state), {}, {
1793
+ userHovering: true
1794
+ });
1795
+
1796
+ case MOUSE_LEFT:
1797
+ return _objectSpread2(_objectSpread2({}, state), {}, {
1798
+ userHovering: false
1799
+ });
1800
+
1801
+ case MOUSE_ENTERED_CONTROLS:
1477
1802
  return _objectSpread2(_objectSpread2({}, state), {}, {
1478
1803
  userHoveringControls: true
1479
1804
  });
1480
1805
 
1481
- case CONTROLS_LEFT:
1806
+ case MOUSE_LEFT_CONTROLS:
1482
1807
  return _objectSpread2(_objectSpread2({}, state), {}, {
1483
1808
  userHoveringControls: false
1484
1809
  });
@@ -1512,6 +1837,8 @@ function playerStateReducer(state, action) {
1512
1837
 
1513
1838
  case DISCARD_MEDIA_ELEMENT_ID:
1514
1839
  return _objectSpread2(_objectSpread2({}, state), {}, {
1840
+ dataLoaded: false,
1841
+ isPlaying: false,
1515
1842
  mediaElementId: null
1516
1843
  });
1517
1844
 
@@ -1538,18 +1865,48 @@ function usePlayerState() {
1538
1865
  }
1539
1866
 
1540
1867
  function MediaPlayer(props) {
1541
- if (!props.isPrepared) {
1868
+ var isStaticPreview = useIsStaticPreview();
1869
+ var load = props.load === 'auto' && isStaticPreview ? 'poster' : props.load;
1870
+ return (
1871
+ /*#__PURE__*/
1872
+ React.createElement("div", {
1873
+ className: classNames(styles$8.wrapper, styles$8[props.fit], _defineProperty({}, textTrackStyles.inset, props.textTracksInset))
1874
+ }, load === 'auto' &&
1875
+ /*#__PURE__*/
1876
+ React.createElement(PreparedMediaPlayer, props), load !== 'none' &&
1877
+ /*#__PURE__*/
1878
+ React.createElement(Poster, {
1879
+ imageUrl: props.posterImageUrl,
1880
+ objectPosition: props.objectPosition,
1881
+ hide: props.type === 'video' && load !== 'poster' && props.playerState.dataLoaded && !props.playerState.unplayed
1882
+ }))
1883
+ );
1884
+ }
1885
+ MediaPlayer.defaultProps = {
1886
+ load: 'auto'
1887
+ };
1888
+
1889
+ function Poster(_ref) {
1890
+ var imageUrl = _ref.imageUrl,
1891
+ objectPosition = _ref.objectPosition,
1892
+ hide = _ref.hide;
1893
+
1894
+ if (!imageUrl) {
1542
1895
  return null;
1543
1896
  }
1544
1897
 
1545
1898
  return (
1546
1899
  /*#__PURE__*/
1547
- React.createElement(PreparedMediaPlayer, props)
1900
+ React.createElement("img", {
1901
+ src: imageUrl,
1902
+ alt: "",
1903
+ style: {
1904
+ display: hide ? 'none' : undefined,
1905
+ objectPosition: objectPosition && "".concat(objectPosition.x, "% ").concat(objectPosition.y, "%")
1906
+ }
1907
+ })
1548
1908
  );
1549
1909
  }
1550
- MediaPlayer.defaultProps = {
1551
- isPrepared: true
1552
- };
1553
1910
 
1554
1911
  function PreparedMediaPlayer(props) {
1555
1912
  var playerRef = useRef();
@@ -1564,6 +1921,7 @@ function PreparedMediaPlayer(props) {
1564
1921
  });
1565
1922
  watchPlayer(newPlayer, props.playerActions);
1566
1923
  applyPlayerState(newPlayer, props.playerState, props.playerActions);
1924
+ updateObjectPosition(newPlayer, props.objectPosition.x, props.objectPosition.y);
1567
1925
  };
1568
1926
 
1569
1927
  var onDispose = function onDispose() {
@@ -1587,33 +1945,33 @@ function PreparedMediaPlayer(props) {
1587
1945
  updateTextTracksMode(player, props.textTracks.activeFileId);
1588
1946
  }
1589
1947
  }, [props.textTracks.activeFileId]);
1948
+ useEffect(function () {
1949
+ var player = playerRef.current;
1950
+
1951
+ if (player) {
1952
+ updateObjectPosition(player, props.objectPosition.x, props.objectPosition.y);
1953
+ }
1954
+ }, [props.objectPosition.x, props.objectPosition.y]);
1590
1955
  return (
1591
- /*#__PURE__*/
1592
- React.createElement(React.Fragment, null,
1593
1956
  /*#__PURE__*/
1594
1957
  React.createElement(PlayerContainer$1, {
1595
- className: classNames(props.className, _defineProperty({}, textTrackStyles.inset, props.textTracksInset)),
1596
1958
  type: props.type,
1597
1959
  sources: appendSuffix(props.sources, props.sourceUrlSuffix),
1598
1960
  textTrackSources: getTextTrackSources(props.textTracks.files, props.textTracksDisabled),
1599
1961
  filePermaId: props.filePermaId,
1600
- poster: props.posterImageUrl,
1601
1962
  loop: props.loop,
1602
1963
  controls: props.controls,
1603
1964
  playsInline: props.playsInline,
1604
1965
  mediaEventsContextData: eventContextData,
1605
1966
  atmoDuringPlayback: props.atmoDuringPlayback,
1606
1967
  onSetup: onSetup,
1607
- onDispose: onDispose
1608
- }),
1609
- /*#__PURE__*/
1610
- React.createElement("div", {
1611
- className: styles$8.mask,
1612
- onClick: props.onClick
1613
- }))
1968
+ onDispose: onDispose,
1969
+ altText: props.altText
1970
+ })
1614
1971
  );
1615
1972
  }
1616
1973
  PreparedMediaPlayer.defaultProps = {
1974
+ objectPosition: {},
1617
1975
  textTracks: {
1618
1976
  files: []
1619
1977
  }
@@ -1762,32 +2120,6 @@ function addDisplayLabel(textTrackFile, t) {
1762
2120
  });
1763
2121
  }
1764
2122
 
1765
- var MediaMutedContext = createContext(false);
1766
- function MediaMutedProvider(_ref) {
1767
- var children = _ref.children;
1768
-
1769
- var _useState = useState(media.muted),
1770
- _useState2 = _slicedToArray(_useState, 2),
1771
- value = _useState2[0],
1772
- setValue = _useState2[1];
1773
-
1774
- useEffect(function () {
1775
- media.on('change:muted', setValue);
1776
- return function () {
1777
- return media.off('change:muted', setValue);
1778
- };
1779
- }, []);
1780
- return (
1781
- /*#__PURE__*/
1782
- React.createElement(MediaMutedContext.Provider, {
1783
- value: value
1784
- }, children)
1785
- );
1786
- }
1787
- function useMediaMuted() {
1788
- return useContext(MediaMutedContext);
1789
- }
1790
-
1791
2123
  var styles$9 = {"opaque":"ViewportDependentPillarBoxes-module_opaque__2U9JL","container":"ViewportDependentPillarBoxes-module_container__Pj-Fy","content":"ViewportDependentPillarBoxes-module_content__1IY7b"};
1792
2124
 
1793
2125
  var styles$a = {"root":"Fullscreen-module_root__1N3CI"};
@@ -1943,28 +2275,24 @@ function AudioStructuredData(_ref) {
1943
2275
  );
1944
2276
  }
1945
2277
 
1946
- var styles$b = {"audioPlayer":"AudioPlayer-module_audioPlayer__1Ms73","spaceForTextTracks":"AudioPlayer-module_spaceForTextTracks__169MK","spaceForTextTracksActive":"AudioPlayer-module_spaceForTextTracksActive__99m7R"};
2278
+ var styles$b = {"spaceForTextTracks":"AudioPlayer-module_spaceForTextTracks__169MK","spaceForTextTracksActive":"AudioPlayer-module_spaceForTextTracksActive__99m7R"};
1947
2279
 
1948
2280
  /**
1949
2281
  * Render audio file in MediaPlayer.
1950
2282
  *
1951
2283
  * @param {Object} props
1952
- * @param {number} props.id - Perma id of the audio file.
1953
- * @param {number} [props.posterId] - Perma id of the poster image file.
2284
+ * @param {Object} props.audioFile - Audio file obtained via `useFile`.
2285
+ * @param {number} [props.posterImageFile] - Poster image file obtained via `useFile`.
1954
2286
  * @param {number} [props.defaultTextTrackFileId] - Perma id of default text track file.
1955
2287
  * @param {String} [props.position] - Position of parent content element.
1956
- * @param {boolean} [props.isPrepared] - Control lazy loading.
2288
+ * @param {string} [props.load] - Control lazy loading. `"auto"` (default), `"poster"` or `"none"`.
1957
2289
  */
1958
2290
 
1959
- function AudioPlayer(props) {
1960
- var audioFile = useFile({
1961
- collectionName: 'audioFiles',
1962
- permaId: props.id
1963
- });
1964
- var posterImage = useFile({
1965
- collectionName: 'imageFiles',
1966
- permaId: props.posterId
1967
- });
2291
+ function AudioPlayer(_ref) {
2292
+ var audioFile = _ref.audioFile,
2293
+ posterImageFile = _ref.posterImageFile,
2294
+ props = _objectWithoutProperties(_ref, ["audioFile", "posterImageFile"]);
2295
+
1968
2296
  var textTracks = useTextTracks({
1969
2297
  file: audioFile,
1970
2298
  defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
@@ -1975,22 +2303,22 @@ function AudioPlayer(props) {
1975
2303
  return (
1976
2304
  /*#__PURE__*/
1977
2305
  React.createElement(ViewportDependentPillarBoxes, {
1978
- file: posterImage,
2306
+ file: posterImageFile,
1979
2307
  position: props.position
1980
2308
  },
1981
2309
  /*#__PURE__*/
1982
2310
  React.createElement("div", {
1983
- className: classNames(styles$b.spaceForTextTracks, _defineProperty({}, styles$b.spaceForTextTracksActive, !posterImage && textTracks.files.length))
2311
+ className: classNames(styles$b.spaceForTextTracks, _defineProperty({}, styles$b.spaceForTextTracksActive, !posterImageFile && textTracks.files.length))
1984
2312
  },
1985
2313
  /*#__PURE__*/
1986
2314
  React.createElement(MediaPlayer, Object.assign({
1987
- className: styles$b.audioPlayer,
1988
2315
  type: 'audio',
1989
2316
  textTracks: textTracks,
1990
- filePermaId: props.id,
2317
+ filePermaId: audioFile.permaId,
1991
2318
  sources: processSources(audioFile),
1992
- textTracksInset: props.position === 'full',
1993
- posterImageUrl: posterImage && posterImage.isReady ? posterImage.urls.large : undefined
2319
+ textTracksInset: !!posterImageFile,
2320
+ posterImageUrl: posterImageFile && posterImageFile.isReady ? posterImageFile.urls.large : undefined,
2321
+ altText: audioFile.configuration.alt
1994
2322
  }, props)),
1995
2323
  /*#__PURE__*/
1996
2324
  React.createElement(AudioStructuredData, {
@@ -2031,14 +2359,6 @@ function processSources(audioFile) {
2031
2359
  return sources;
2032
2360
  }
2033
2361
 
2034
- function usePrevious(value) {
2035
- var ref = useRef();
2036
- useEffect(function () {
2037
- ref.current = value;
2038
- });
2039
- return ref.current;
2040
- }
2041
-
2042
2362
  function SectionAtmo(props) {
2043
2363
  var audioFile = useFile({
2044
2364
  collectionName: 'audioFiles',
@@ -2073,89 +2393,186 @@ function SectionAtmo(props) {
2073
2393
  return null;
2074
2394
  }
2075
2395
 
2076
- var styles$c = {"root":"Image-module_root__1ef3j"};
2396
+ function getSize(el) {
2397
+ if (!el) {
2398
+ return {
2399
+ left: 0,
2400
+ top: 0,
2401
+ width: 0,
2402
+ height: 0,
2403
+ bottom: 0
2404
+ };
2405
+ }
2077
2406
 
2078
- function ImageStructuredData(_ref) {
2079
- var file = _ref.file;
2080
- var entryMedadata = useEntryMetadata();
2081
- var data = {
2082
- '@context': 'http://schema.org',
2083
- '@type': 'ImageObject',
2084
- name: file.basename,
2085
- description: file.configuration.alt,
2086
- url: ensureProtocol('https', file.urls.large),
2087
- width: file.width,
2088
- height: file.height,
2089
- datePublished: entryMedadata.publishedAt,
2090
- uploadDate: file.createdAt,
2091
- copyrightHolder: {
2092
- '@type': 'Organization',
2093
- name: file.rights
2094
- }
2407
+ return {
2408
+ left: el.offsetLeft,
2409
+ top: el.offsetTop,
2410
+ width: el.offsetWidth,
2411
+ height: el.offsetHeight,
2412
+ bottom: el.offsetParent ? el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight : 0
2095
2413
  };
2096
- return (
2097
- /*#__PURE__*/
2098
- React.createElement(StructuredData, {
2099
- data: data
2100
- })
2101
- );
2102
2414
  }
2103
2415
 
2104
- /**
2105
- * Render an image file.
2106
- *
2107
- * @param {Object} props
2108
- * @param {number} props.id - Perma id of the image file.
2109
- * @param {number} [props.variant] - Paperclip style to use. Defaults to large.
2110
- * @param {boolean} [props.structuredData] - Whether to render a JSON+LD script tag.
2111
- */
2416
+ function useDimension() {
2417
+ var _useState = useState(getSize(null)),
2418
+ _useState2 = _slicedToArray(_useState, 2),
2419
+ componentSize = _useState2[0],
2420
+ setComponentSize = _useState2[1];
2112
2421
 
2113
- function Image(props) {
2114
- var image = useFile({
2115
- collectionName: 'imageFiles',
2116
- permaId: props.id
2117
- });
2422
+ var _useState3 = useState(null),
2423
+ _useState4 = _slicedToArray(_useState3, 2),
2424
+ currentNode = _useState4[0],
2425
+ setCurrentNode = _useState4[1];
2118
2426
 
2119
- if (image && image.isReady && props.isPrepared) {
2120
- return (
2121
- /*#__PURE__*/
2122
- React.createElement(React.Fragment, null, renderImageTag(props, image), renderStructuredData(props, image))
2123
- );
2124
- }
2427
+ var measuredRef = useCallback(function (node) {
2428
+ setCurrentNode(node);
2429
+ setComponentSize(getSize(node));
2430
+ }, []);
2431
+ useEffect(function () {
2432
+ function handleResize() {
2433
+ setComponentSize(getSize(currentNode));
2434
+ }
2125
2435
 
2126
- return null;
2436
+ if (!currentNode) {
2437
+ return;
2438
+ }
2439
+
2440
+ handleResize();
2441
+ window.addEventListener('resize', handleResize);
2442
+ return function () {
2443
+ window.removeEventListener('resize', handleResize);
2444
+ };
2445
+ }, [currentNode]);
2446
+ return [componentSize, measuredRef];
2127
2447
  }
2128
2448
 
2129
- function renderImageTag(props, image) {
2130
- var focusX = typeof image.configuration.focusX === 'undefined' ? 50 : image.configuration.focusX;
2131
- var focusY = typeof image.configuration.focusY === 'undefined' ? 50 : image.configuration.focusY;
2449
+ var styles$c = {"FillColor":"FillColor-module_FillColor__S1uEG"};
2450
+
2451
+ function FillColor(props) {
2132
2452
  return (
2133
2453
  /*#__PURE__*/
2134
- React.createElement("img", {
2135
- className: classNames(styles$c.root),
2136
- src: image.urls[props.variant],
2454
+ React.createElement("div", {
2455
+ className: styles$c.FillColor,
2137
2456
  style: {
2138
- objectPosition: "".concat(focusX, "% ").concat(focusY, "%")
2457
+ backgroundColor: props.color
2139
2458
  }
2140
- })
2459
+ },
2460
+ /*#__PURE__*/
2461
+ React.createElement(Fullscreen, null))
2141
2462
  );
2142
2463
  }
2143
2464
 
2144
- function renderStructuredData(props, file) {
2145
- if (props.structuredData && file) {
2146
- return (
2147
- /*#__PURE__*/
2148
- React.createElement(ImageStructuredData, {
2149
- file: file
2150
- })
2151
- );
2152
- }
2153
- }
2154
-
2155
- Image.defaultProps = {
2156
- isPrepared: true,
2157
- variant: 'large'
2158
- };
2465
+ /**
2466
+ * Extend image or video file with position/motif area related
2467
+ * properties that are needed to use the file as a section backdrop.
2468
+ *
2469
+ * The added properties are:
2470
+ *
2471
+ * `cropPosition`: Position in percent that can be used as
2472
+ * `background-position` or `object-position` to center the given
2473
+ * motif area in the container.
2474
+ *
2475
+ * `motifAreaOffsetRect`: Pixel position and size of the motif area in
2476
+ * the container assuming the crop position has been applied.
2477
+ *
2478
+ * `motifArea`: Either the passed motif area object or the motif area
2479
+ * from the legacy file configuration if no motif area has been
2480
+ * passed.
2481
+ *
2482
+ * @param {Object} options
2483
+ * @param {Object} options.file - Image or video file obtained via
2484
+ * `useFile`.
2485
+ * @param {Object} options.motifArea - Section specific setting
2486
+ * specifying motif area rect in percent.
2487
+ * @param {Object} options.containerDimension - Width and height in
2488
+ * pixels of the container (normally the backdrop) the file shall be
2489
+ * displayed as background of.
2490
+ *
2491
+ * @private
2492
+ */
2493
+ function useBackgroundFile(_ref) {
2494
+ var file = _ref.file,
2495
+ motifArea = _ref.motifArea,
2496
+ containerDimension = _ref.containerDimension;
2497
+
2498
+ if (!file) {
2499
+ return null;
2500
+ } // Calculate scale factor required to make the file cover the container:
2501
+
2502
+
2503
+ var originalRatio = file.width / file.height;
2504
+ var containerRatio = containerDimension.width / containerDimension.height;
2505
+ var scale = containerRatio > originalRatio ? containerDimension.width / file.width : containerDimension.height / file.height; // Calculate the pixel size the image will have inside the container:
2506
+
2507
+ var displayFileWidth = file.width * scale;
2508
+ var displayFileHeight = file.height * scale; // Calculate the pixel position of the center of the motif area in
2509
+ // the scaled image:
2510
+
2511
+ var motifCenterX = motifArea ? motifArea.left + motifArea.width / 2 : 50;
2512
+ var motifCenterY = motifArea ? motifArea.top + motifArea.height / 2 : 50;
2513
+ var displayMotifCenterX = motifCenterX * displayFileWidth / 100;
2514
+ var displayMotifCenterY = motifCenterY * displayFileHeight / 100; // If the x-axis position (inside the image) of the center of the
2515
+ // motif area is smaller than `A = containerDimension.width / 2`, we
2516
+ // need to set the crop position to 0% to ensure that the full width
2517
+ // motif area is visible:
2518
+ //
2519
+ // center of motif area
2520
+ // |
2521
+ // oXXXXXooo...........
2522
+ // |-A-|
2523
+ //
2524
+ // Legend:
2525
+ // o: Part of the image that is visible in the container
2526
+ // .: Part of the image that is clipped
2527
+ // X: Part of the motif area that is visible in the container
2528
+ // x: Part of the motif area that is clipped
2529
+ //
2530
+ // If the x-axis position (inside the image) of the center of the
2531
+ // motif area is greater than
2532
+ // `B = image.width - containerDimension.width / 2`, we need to set the
2533
+ // crop position to 100%:
2534
+ //
2535
+ // ............oooXXXXXo
2536
+ // |-------B-------|
2537
+ //
2538
+ // For positions between A and B we want to linearly shift the crop
2539
+ // position to ensure the center of the motif area is centered in
2540
+ // the container:
2541
+ //
2542
+ // ...ooXXXXXoo.........
2543
+ //
2544
+ // This also applies if the motif area is wider than the container:
2545
+ //
2546
+ // .xxXXXXXXXXXxx.......
2547
+ //
2548
+
2549
+ var Ax = containerDimension.width / 2;
2550
+ var Ay = containerDimension.height / 2;
2551
+ var Bx = displayFileWidth - containerDimension.width / 2;
2552
+ var By = displayFileHeight - containerDimension.height / 2;
2553
+ var cropPosition = {
2554
+ x: Bx - Ax > 0 ? Math.min(100, Math.max(0, (displayMotifCenterX - Ax) / (Bx - Ax) * 100)) : 50,
2555
+ y: By - Ay > 0 ? Math.min(100, Math.max(0, (displayMotifCenterY - Ay) / (By - Ay) * 100)) : 50
2556
+ }; // Calculate the amount of pixels the image will be shifted
2557
+ // when the crop position is applied:
2558
+
2559
+ var cropLeft = (displayFileWidth - containerDimension.width) * cropPosition.x / 100;
2560
+ var cropTop = (displayFileHeight - containerDimension.height) * cropPosition.y / 100; // Calculate the pixel position and dimension of the motif area
2561
+ // relative to the container assuming the crop position has been
2562
+ // applied:
2563
+
2564
+ var motifAreaOffsetRect = motifArea && {
2565
+ top: Math.round(displayFileHeight * motifArea.top / 100 - cropTop),
2566
+ left: Math.round(displayFileWidth * motifArea.left / 100 - cropLeft),
2567
+ width: Math.round(displayFileWidth * motifArea.width / 100),
2568
+ height: Math.round(displayFileHeight * motifArea.height / 100)
2569
+ };
2570
+ return _objectSpread2(_objectSpread2({}, file), {}, {
2571
+ cropPosition: cropPosition,
2572
+ motifArea: motifArea,
2573
+ motifAreaOffsetRect: motifAreaOffsetRect
2574
+ });
2575
+ }
2159
2576
 
2160
2577
  function useVideoQualitySetting() {
2161
2578
  var _useSetting = useSetting('videoQuality'),
@@ -2166,9 +2583,38 @@ function useVideoQualitySetting() {
2166
2583
  return [value || 'auto', setValue];
2167
2584
  }
2168
2585
 
2586
+ browser.feature('dash', function () {
2587
+ return true;
2588
+ });
2589
+ browser.feature('video', function () {
2590
+ return true;
2591
+ });
2592
+ browser.feature('highdef', function () {
2593
+ return true;
2594
+ });
2169
2595
  function sources(videoFile) {
2170
2596
  var quality = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
2171
2597
 
2598
+ if (typeof window !== 'undefined') {
2599
+ if (!browser.has('video')) {
2600
+ return [];
2601
+ }
2602
+
2603
+ if (!browser.has('highdef')) {
2604
+ return [{
2605
+ type: 'video/mp4',
2606
+ src: videoFile.urls.high
2607
+ }];
2608
+ }
2609
+
2610
+ if (!browser.has('dash')) {
2611
+ return [{
2612
+ type: 'video/mp4',
2613
+ src: videoFile.urls['4k'] || videoFile.urls.fullhd || videoFile.urls.high
2614
+ }];
2615
+ }
2616
+ }
2617
+
2172
2618
  if (quality === 'auto') {
2173
2619
  var result = [{
2174
2620
  type: 'application/x-mpegURL',
@@ -2198,8 +2644,6 @@ function sources(videoFile) {
2198
2644
  }
2199
2645
  }
2200
2646
 
2201
- var styles$d = {"videoPlayer":"VideoPlayer-module_videoPlayer__2q9NS","cover":"VideoPlayer-module_cover__2Rk-J"};
2202
-
2203
2647
  function VideoStructuredData(_ref) {
2204
2648
  var file = _ref.file;
2205
2649
  var entryMedadata = useEntryMetadata();
@@ -2232,27 +2676,23 @@ function VideoStructuredData(_ref) {
2232
2676
  * Render video file in MediaPlayer.
2233
2677
  *
2234
2678
  * @param {Object} props
2235
- * @param {number} props.id - Perma id of the video file.
2236
- * @param {number} [props.posterId] - Perma id of the poster image file.
2679
+ * @param {Object} props.videoFile - Video file obtained via `useFile`.
2680
+ * @param {number} [props.posterImageFile] - Poster image file obtained via `useFile`.
2237
2681
  * @param {number} [props.defaultTextTrackFileId] - Perma id of default text track file.
2238
- * @param {boolean} [props.isPrepared] - Control lazy loading.
2682
+ * @param {string} [props.load] - Control lazy loading. `"auto"` (default), `"poster"` or `"none"`.
2239
2683
  * @param {String} [props.fit] - `"contain"` (default) or `"cover"`.
2240
2684
  * @param {String} [props.position] - Position of parent content element.
2241
2685
  */
2242
2686
 
2243
- function VideoPlayer(props) {
2687
+ function VideoPlayer(_ref) {
2688
+ var videoFile = _ref.videoFile,
2689
+ posterImageFile = _ref.posterImageFile,
2690
+ props = _objectWithoutProperties(_ref, ["videoFile", "posterImageFile"]);
2691
+
2244
2692
  var _useVideoQualitySetti = useVideoQualitySetting(),
2245
2693
  _useVideoQualitySetti2 = _slicedToArray(_useVideoQualitySetti, 1),
2246
2694
  activeQuality = _useVideoQualitySetti2[0];
2247
2695
 
2248
- var videoFile = useFile({
2249
- collectionName: 'videoFiles',
2250
- permaId: props.id
2251
- });
2252
- var posterImage = useFile({
2253
- collectionName: 'imageFiles',
2254
- permaId: props.posterId
2255
- });
2256
2696
  var textTracks = useTextTracks({
2257
2697
  file: videoFile,
2258
2698
  defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
@@ -2266,13 +2706,15 @@ function VideoPlayer(props) {
2266
2706
  React.createElement(React.Fragment, null,
2267
2707
  /*#__PURE__*/
2268
2708
  React.createElement(MediaPlayer, Object.assign({
2269
- className: classNames(styles$d.videoPlayer, styles$d[props.fit]),
2270
2709
  type: 'video',
2710
+ fit: props.fit,
2271
2711
  textTracks: textTracks,
2272
- filePermaId: props.id,
2712
+ filePermaId: videoFile.permaId,
2273
2713
  sources: sources(videoFile, activeQuality),
2274
- textTracksInset: props.position === 'full',
2275
- posterImageUrl: posterImage && posterImage.isReady ? posterImage.urls.large : undefined
2714
+ textTracksInset: true,
2715
+ posterImageUrl: posterImageFile && posterImageFile.isReady ? posterImageFile.urls.large : videoFile.urls.posterLarge,
2716
+ altText: videoFile.configuration.alt,
2717
+ objectPosition: props.fit === 'cover' ? videoFile.cropPosition : undefined
2276
2718
  }, props)),
2277
2719
  /*#__PURE__*/
2278
2720
  React.createElement(VideoStructuredData, {
@@ -2299,11 +2741,11 @@ VideoPlayer.defaultProps = {
2299
2741
  };
2300
2742
  var fallbackAspectRatio = 0.5625;
2301
2743
 
2302
- function Positioner(_ref) {
2303
- var children = _ref.children,
2304
- fit = _ref.fit,
2305
- file = _ref.file,
2306
- position = _ref.position;
2744
+ function Positioner(_ref2) {
2745
+ var children = _ref2.children,
2746
+ fit = _ref2.fit,
2747
+ file = _ref2.file,
2748
+ position = _ref2.position;
2307
2749
 
2308
2750
  if (fit === 'contain') {
2309
2751
  return (
@@ -2320,302 +2762,17 @@ function Positioner(_ref) {
2320
2762
  }
2321
2763
  }
2322
2764
 
2323
- var styles$e = {"FillColor":"FillColor-module_FillColor__S1uEG"};
2324
-
2325
- function FillColor(props) {
2326
- return (
2327
- /*#__PURE__*/
2328
- React.createElement("div", {
2329
- className: styles$e.FillColor,
2330
- style: {
2331
- backgroundColor: props.color
2332
- }
2333
- },
2334
- /*#__PURE__*/
2335
- React.createElement(Fullscreen, null))
2336
- );
2337
- }
2338
-
2339
- var styles$f = {"root":"MotifArea-module_root__1_ACd","active":"MotifArea-module_active__1q4z2","corner":"MotifArea-module_corner__3hB5t","topLeft":"MotifArea-module_topLeft__3vHHi MotifArea-module_corner__3hB5t","topRight":"MotifArea-module_topRight__2gNmC MotifArea-module_corner__3hB5t","bottomLeft":"MotifArea-module_bottomLeft__2qEqb MotifArea-module_corner__3hB5t","bottomRight":"MotifArea-module_bottomRight__3OjTb MotifArea-module_corner__3hB5t"};
2340
-
2341
- var MotifArea = function MotifArea(props) {
2342
- var image = useFile({
2343
- collectionName: 'imageFiles',
2344
- permaId: props.imageId
2345
- });
2346
- var lastPosition = useRef();
2347
- var position = (image === null || image === void 0 ? void 0 : image.isReady) && getPosition(props, image);
2348
- var elementRef = useRef();
2349
- var onUpdate = props.onUpdate;
2350
- var setElementRef = useCallback(function (element) {
2351
- elementRef.current = element;
2352
- onUpdate(element);
2353
- }, [elementRef, onUpdate]);
2354
- useEffect(function () {
2355
- if (lastPosition.current && position && (lastPosition.current.top !== position.top || lastPosition.current.left !== position.left || lastPosition.current.width !== position.width || lastPosition.current.height !== position.height)) {
2356
- onUpdate(elementRef.current);
2357
- }
2358
-
2359
- lastPosition.current = position;
2360
- });
2361
-
2362
- if (!position) {
2363
- return null;
2364
- }
2365
-
2366
- return (
2367
- /*#__PURE__*/
2368
- React.createElement("div", {
2369
- ref: setElementRef,
2370
- className: classNames(styles$f.root, _defineProperty({}, styles$f.active, props.active)),
2371
- style: position,
2372
- onMouseEnter: props.onMouseEnter,
2373
- onMouseLeave: props.onMouseLeave
2374
- },
2375
- /*#__PURE__*/
2376
- React.createElement("div", {
2377
- className: styles$f.topLeft
2378
- }),
2379
- /*#__PURE__*/
2380
- React.createElement("div", {
2381
- className: styles$f.topRight
2382
- }),
2383
- /*#__PURE__*/
2384
- React.createElement("div", {
2385
- className: styles$f.bottomLeft
2386
- }),
2387
- /*#__PURE__*/
2388
- React.createElement("div", {
2389
- className: styles$f.bottomRight
2390
- }))
2391
- );
2392
- };
2393
- MotifArea.defaultProps = {
2394
- onUpdate: function onUpdate() {}
2395
- };
2396
-
2397
- function getPosition(props, image) {
2398
- var originalRatio = image.width / image.height;
2399
- var containerRatio = props.containerWidth / props.containerHeight;
2400
- var scale = containerRatio > originalRatio ? props.containerWidth / image.width : props.containerHeight / image.height;
2401
- var contentWidth = image.width * scale;
2402
- var contentHeight = image.height * scale;
2403
- var focusX = image.configuration.focusX === undefined ? 50 : image.configuration.focusX;
2404
- var focusY = image.configuration.focusY === undefined ? 50 : image.configuration.focusY;
2405
- var cropLeft = (contentWidth - props.containerWidth) * focusX / 100;
2406
- var cropTop = (contentHeight - props.containerHeight) * focusY / 100;
2407
- var motifArea = image.configuration.motifArea || {
2408
- top: 0,
2409
- left: 0,
2410
- width: 0,
2411
- height: 0
2412
- };
2413
- return {
2414
- top: Math.round(contentHeight * motifArea.top / 100 - cropTop),
2415
- left: Math.round(contentWidth * motifArea.left / 100 - cropLeft),
2416
- width: Math.round(contentWidth * motifArea.width / 100),
2417
- height: Math.round(contentHeight * motifArea.height / 100)
2418
- };
2419
- }
2420
-
2421
- function getSize(el) {
2422
- if (!el) {
2423
- return {
2424
- left: 0,
2425
- top: 0,
2426
- width: 0,
2427
- height: 0
2428
- };
2429
- }
2430
-
2431
- return {
2432
- left: el.offsetLeft,
2433
- top: el.offsetTop,
2434
- width: el.offsetWidth,
2435
- height: el.offsetHeight
2436
- };
2437
- }
2438
-
2439
- function useDimension() {
2440
- var _useState = useState(getSize(null)),
2441
- _useState2 = _slicedToArray(_useState, 2),
2442
- componentSize = _useState2[0],
2443
- setComponentSize = _useState2[1];
2444
-
2445
- var _useState3 = useState(null),
2446
- _useState4 = _slicedToArray(_useState3, 2),
2447
- currentNode = _useState4[0],
2448
- setCurrentNode = _useState4[1];
2449
-
2450
- var measuredRef = useCallback(function (node) {
2451
- setCurrentNode(node);
2452
- setComponentSize(getSize(node));
2453
- }, []);
2454
- useEffect(function () {
2455
- function handleResize() {
2456
- setComponentSize(getSize(currentNode));
2457
- }
2458
-
2459
- if (!currentNode) {
2460
- return;
2461
- }
2462
-
2463
- handleResize();
2464
- window.addEventListener('resize', handleResize);
2465
- return function () {
2466
- window.removeEventListener('resize', handleResize);
2467
- };
2468
- }, [currentNode]);
2469
- return [componentSize, measuredRef];
2470
- }
2471
-
2472
- function usePortraitOrientation() {
2473
- return useMediaQuery('(orientation: portrait)');
2474
- }
2475
-
2476
- var styles$g = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ"};
2477
-
2478
- function Backdrop(props) {
2479
- var _useDimension = useDimension(),
2480
- _useDimension2 = _slicedToArray(_useDimension, 2),
2481
- containerDimension = _useDimension2[0],
2482
- setContainerRef = _useDimension2[1];
2483
-
2484
- return (
2485
- /*#__PURE__*/
2486
- React.createElement("div", {
2487
- className: classNames(styles$g.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
2488
- },
2489
- /*#__PURE__*/
2490
- React.createElement("div", {
2491
- className: props.transitionStyles.backdropInner
2492
- },
2493
- /*#__PURE__*/
2494
- React.createElement("div", {
2495
- className: props.transitionStyles.backdropInner2
2496
- }, props.children(renderContent(props, containerDimension, setContainerRef)))))
2497
- );
2498
- }
2499
- Backdrop.defaultProps = {
2500
- children: function children(_children) {
2501
- return _children;
2502
- },
2503
- transitionStyles: {}
2504
- };
2505
-
2506
- function renderContent(props, containerDimension, setContainerRef) {
2507
- if (props.video) {
2508
- return (
2509
- /*#__PURE__*/
2510
- React.createElement(Fullscreen, {
2511
- ref: setContainerRef
2512
- },
2513
- /*#__PURE__*/
2514
- React.createElement(BackgroundVideo, props))
2515
- );
2516
- } else if (props.color || props.image && props.image.toString().startsWith('#')) {
2517
- return (
2518
- /*#__PURE__*/
2519
- React.createElement(FillColor, {
2520
- color: props.color || props.image
2521
- })
2522
- );
2523
- } else {
2524
- return (
2525
- /*#__PURE__*/
2526
- React.createElement(Fullscreen, {
2527
- ref: setContainerRef
2528
- }, renderBackgroundImage(props, containerDimension))
2529
- );
2530
- }
2531
- }
2532
-
2533
- function renderBackgroundImage(props, containerDimension) {
2534
- if (props.image && props.imageMobile) {
2535
- return (
2536
- /*#__PURE__*/
2537
- React.createElement(OrientationAwareBackgroundImage, {
2538
- image: props.image,
2539
- imageMobile: props.imageMobile,
2540
- onMotifAreaUpdate: props.onMotifAreaUpdate,
2541
- containerDimension: containerDimension
2542
- })
2543
- );
2544
- } else {
2545
- return (
2546
- /*#__PURE__*/
2547
- React.createElement(BackgroundImage, {
2548
- image: props.image || props.imageMobile,
2549
- onMotifAreaUpdate: props.onMotifAreaUpdate,
2550
- containerDimension: containerDimension
2551
- })
2552
- );
2553
- }
2554
- }
2555
-
2556
- function OrientationAwareBackgroundImage(_ref) {
2557
- var image = _ref.image,
2765
+ function BackgroundVideo(_ref) {
2766
+ var video = _ref.video,
2558
2767
  onMotifAreaUpdate = _ref.onMotifAreaUpdate,
2559
- imageMobile = _ref.imageMobile,
2560
2768
  containerDimension = _ref.containerDimension;
2561
- var mobile = usePortraitOrientation();
2562
-
2563
- if (mobile) {
2564
- return (
2565
- /*#__PURE__*/
2566
- React.createElement(BackgroundImage, {
2567
- image: imageMobile,
2568
- onMotifAreaUpdate: onMotifAreaUpdate,
2569
- containerDimension: containerDimension
2570
- })
2571
- );
2572
- } else {
2573
- return (
2574
- /*#__PURE__*/
2575
- React.createElement(BackgroundImage, {
2576
- image: image,
2577
- onMotifAreaUpdate: onMotifAreaUpdate,
2578
- containerDimension: containerDimension
2579
- })
2580
- );
2581
- }
2582
- }
2583
-
2584
- function BackgroundImage(_ref2) {
2585
- var image = _ref2.image,
2586
- onMotifAreaUpdate = _ref2.onMotifAreaUpdate,
2587
- containerDimension = _ref2.containerDimension;
2588
-
2589
- var _useSectionLifecycle = useSectionLifecycle(),
2590
- isPrepared = _useSectionLifecycle.isPrepared;
2591
-
2592
- return (
2593
- /*#__PURE__*/
2594
- React.createElement(React.Fragment, null,
2595
- /*#__PURE__*/
2596
- React.createElement(Image, {
2597
- id: image,
2598
- isPrepared: isPrepared,
2599
- structuredData: true
2600
- }),
2601
- /*#__PURE__*/
2602
- React.createElement(MotifArea, {
2603
- key: image,
2604
- onUpdate: onMotifAreaUpdate,
2605
- imageId: image,
2606
- containerWidth: containerDimension.width,
2607
- containerHeight: containerDimension.height
2608
- }))
2609
- );
2610
- }
2611
2769
 
2612
- function BackgroundVideo(props) {
2613
2770
  var _usePlayerState = usePlayerState(),
2614
2771
  _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
2615
2772
  playerState = _usePlayerState2[0],
2616
2773
  playerActions = _usePlayerState2[1];
2617
2774
 
2618
- var _useSectionLifecycle2 = useSectionLifecycle({
2775
+ var _useSectionLifecycle = useSectionLifecycle({
2619
2776
  onVisible: function onVisible() {
2620
2777
  playerActions.changeVolumeFactor(0, 0);
2621
2778
  playerActions.play();
@@ -2630,7 +2787,8 @@ function BackgroundVideo(props) {
2630
2787
  playerActions.pause();
2631
2788
  }
2632
2789
  }),
2633
- isPrepared = _useSectionLifecycle2.isPrepared;
2790
+ shouldLoad = _useSectionLifecycle.shouldLoad,
2791
+ shouldPrepare = _useSectionLifecycle.shouldPrepare;
2634
2792
 
2635
2793
  useEffect(function () {
2636
2794
  var documentState = documentHiddenState(function (visibilityState) {
@@ -2645,22 +2803,300 @@ function BackgroundVideo(props) {
2645
2803
  };
2646
2804
  }, [playerActions]);
2647
2805
  return (
2806
+ /*#__PURE__*/
2807
+ React.createElement(React.Fragment, null,
2648
2808
  /*#__PURE__*/
2649
2809
  React.createElement(VideoPlayer, {
2650
- isPrepared: isPrepared,
2810
+ load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
2651
2811
  playerState: playerState,
2652
2812
  playerActions: playerActions,
2653
- id: props.video,
2813
+ videoFile: video,
2654
2814
  textTracksDisabled: true,
2655
2815
  fit: "cover",
2656
2816
  loop: true,
2657
2817
  playsInline: true
2658
- })
2659
- );
2660
- }
2661
-
2662
- function isIntersectingX(rectA, rectB) {
2663
- return rectA.left < rectB.right && rectA.right > rectB.left || rectB.left < rectA.right && rectB.right > rectA.left;
2818
+ }),
2819
+ /*#__PURE__*/
2820
+ React.createElement(MotifArea, {
2821
+ key: video.permaId,
2822
+ onUpdate: onMotifAreaUpdate,
2823
+ file: video,
2824
+ containerWidth: containerDimension.width,
2825
+ containerHeight: containerDimension.height
2826
+ }))
2827
+ );
2828
+ }
2829
+
2830
+ function usePortraitOrientation() {
2831
+ return useMediaQuery('(orientation: portrait)');
2832
+ }
2833
+
2834
+ var styles$d = {"root":"Image-module_root__1ef3j"};
2835
+
2836
+ function ImageStructuredData(_ref) {
2837
+ var file = _ref.file;
2838
+ var entryMedadata = useEntryMetadata();
2839
+ var data = {
2840
+ '@context': 'http://schema.org',
2841
+ '@type': 'ImageObject',
2842
+ name: file.basename,
2843
+ description: file.configuration.alt,
2844
+ url: ensureProtocol('https', file.urls.large),
2845
+ width: file.width,
2846
+ height: file.height,
2847
+ datePublished: entryMedadata.publishedAt,
2848
+ uploadDate: file.createdAt,
2849
+ copyrightHolder: {
2850
+ '@type': 'Organization',
2851
+ name: file.rights
2852
+ }
2853
+ };
2854
+ return (
2855
+ /*#__PURE__*/
2856
+ React.createElement(StructuredData, {
2857
+ data: data
2858
+ })
2859
+ );
2860
+ }
2861
+
2862
+ /**
2863
+ * Render an image file.
2864
+ *
2865
+ * @param {Object} props
2866
+ * @param {Object} props.imageFile - Image file obtained via `useFile`.
2867
+ * @param {string} [props.variant] - Paperclip style to use. Defaults to large.
2868
+ * @param {boolean} [props.load] - Whether to load the image. Can be used for lazy loading.
2869
+ * @param {boolean} [props.structuredData] - Whether to render a JSON+LD script tag.
2870
+ */
2871
+
2872
+ function Image(_ref) {
2873
+ var imageFile = _ref.imageFile,
2874
+ props = _objectWithoutProperties(_ref, ["imageFile"]);
2875
+
2876
+ if (imageFile && imageFile.isReady && props.load) {
2877
+ return (
2878
+ /*#__PURE__*/
2879
+ React.createElement(React.Fragment, null, renderImageTag(props, imageFile), renderStructuredData(props, imageFile))
2880
+ );
2881
+ }
2882
+
2883
+ return null;
2884
+ }
2885
+
2886
+ function renderImageTag(props, imageFile) {
2887
+ var cropPositionX = imageFile.cropPosition ? imageFile.cropPosition.x : 50;
2888
+ var cropPositionY = imageFile.cropPosition ? imageFile.cropPosition.y : 50;
2889
+ return (
2890
+ /*#__PURE__*/
2891
+ React.createElement("img", {
2892
+ className: classNames(styles$d.root),
2893
+ src: imageFile.urls[props.variant],
2894
+ alt: imageFile.configuration.alt ? imageFile.configuration.alt : '',
2895
+ style: {
2896
+ objectPosition: "".concat(cropPositionX, "% ").concat(cropPositionY, "%")
2897
+ }
2898
+ })
2899
+ );
2900
+ }
2901
+
2902
+ function renderStructuredData(props, file) {
2903
+ if (props.structuredData && file) {
2904
+ return (
2905
+ /*#__PURE__*/
2906
+ React.createElement(ImageStructuredData, {
2907
+ file: file
2908
+ })
2909
+ );
2910
+ }
2911
+ }
2912
+
2913
+ Image.defaultProps = {
2914
+ load: true,
2915
+ variant: 'large'
2916
+ };
2917
+
2918
+ function BackgroundImage(_ref) {
2919
+ var image = _ref.image,
2920
+ onMotifAreaUpdate = _ref.onMotifAreaUpdate,
2921
+ containerDimension = _ref.containerDimension;
2922
+
2923
+ var _useSectionLifecycle = useSectionLifecycle(),
2924
+ shouldLoad = _useSectionLifecycle.shouldLoad;
2925
+
2926
+ return (
2927
+ /*#__PURE__*/
2928
+ React.createElement(React.Fragment, null,
2929
+ /*#__PURE__*/
2930
+ React.createElement(Image, {
2931
+ imageFile: image,
2932
+ load: shouldLoad,
2933
+ structuredData: true
2934
+ }),
2935
+ /*#__PURE__*/
2936
+ React.createElement(MotifArea, {
2937
+ key: image === null || image === void 0 ? void 0 : image.permaId,
2938
+ onUpdate: onMotifAreaUpdate,
2939
+ file: image,
2940
+ containerWidth: containerDimension.width,
2941
+ containerHeight: containerDimension.height
2942
+ }))
2943
+ );
2944
+ }
2945
+
2946
+ function OrientationAwareBackgroundImage(_ref) {
2947
+ var image = _ref.image,
2948
+ onMotifAreaUpdate = _ref.onMotifAreaUpdate,
2949
+ imageMobile = _ref.imageMobile,
2950
+ containerDimension = _ref.containerDimension;
2951
+ var mobile = usePortraitOrientation();
2952
+
2953
+ if (mobile) {
2954
+ return (
2955
+ /*#__PURE__*/
2956
+ React.createElement(BackgroundImage, {
2957
+ image: imageMobile,
2958
+ onMotifAreaUpdate: onMotifAreaUpdate,
2959
+ containerDimension: containerDimension
2960
+ })
2961
+ );
2962
+ } else {
2963
+ return (
2964
+ /*#__PURE__*/
2965
+ React.createElement(BackgroundImage, {
2966
+ image: image,
2967
+ onMotifAreaUpdate: onMotifAreaUpdate,
2968
+ containerDimension: containerDimension
2969
+ })
2970
+ );
2971
+ }
2972
+ }
2973
+
2974
+ function BackgroundAsset(props) {
2975
+ var video = useBackgroundFile({
2976
+ file: useFile({
2977
+ collectionName: 'videoFiles',
2978
+ permaId: props.video
2979
+ }),
2980
+ motifArea: props.videoMotifArea,
2981
+ containerDimension: props.containerDimension
2982
+ });
2983
+ var image = useBackgroundFile({
2984
+ file: useFile({
2985
+ collectionName: 'imageFiles',
2986
+ permaId: props.image
2987
+ }),
2988
+ motifArea: props.imageMotifArea,
2989
+ containerDimension: props.containerDimension
2990
+ });
2991
+ var imageMobile = useBackgroundFile({
2992
+ file: useFile({
2993
+ collectionName: 'imageFiles',
2994
+ permaId: props.imageMobile
2995
+ }),
2996
+ motifArea: props.imageMobileMotifArea,
2997
+ containerDimension: props.containerDimension
2998
+ });
2999
+
3000
+ if (video) {
3001
+ return (
3002
+ /*#__PURE__*/
3003
+ React.createElement(Fullscreen, {
3004
+ ref: props.setContainerRef
3005
+ },
3006
+ /*#__PURE__*/
3007
+ React.createElement(BackgroundVideo, {
3008
+ video: video,
3009
+ onMotifAreaUpdate: props.onMotifAreaUpdate,
3010
+ containerDimension: props.containerDimension
3011
+ }))
3012
+ );
3013
+ } else if (props.color || props.image && props.image.toString().startsWith('#')) {
3014
+ return (
3015
+ /*#__PURE__*/
3016
+ React.createElement(FillColor, {
3017
+ color: props.color || props.image
3018
+ })
3019
+ );
3020
+ } else {
3021
+ return (
3022
+ /*#__PURE__*/
3023
+ React.createElement(Fullscreen, {
3024
+ ref: props.setContainerRef
3025
+ }, renderBackgroundImage({
3026
+ image: image,
3027
+ imageMobile: imageMobile,
3028
+ onMotifAreaUpdate: props.onMotifAreaUpdate,
3029
+ containerDimension: props.containerDimension
3030
+ }))
3031
+ );
3032
+ }
3033
+ }
3034
+
3035
+ function renderBackgroundImage(_ref) {
3036
+ var image = _ref.image,
3037
+ imageMobile = _ref.imageMobile,
3038
+ onMotifAreaUpdate = _ref.onMotifAreaUpdate,
3039
+ containerDimension = _ref.containerDimension;
3040
+
3041
+ if (image && imageMobile) {
3042
+ return (
3043
+ /*#__PURE__*/
3044
+ React.createElement(OrientationAwareBackgroundImage, {
3045
+ image: image,
3046
+ imageMobile: imageMobile,
3047
+ onMotifAreaUpdate: onMotifAreaUpdate,
3048
+ containerDimension: containerDimension
3049
+ })
3050
+ );
3051
+ } else {
3052
+ return (
3053
+ /*#__PURE__*/
3054
+ React.createElement(BackgroundImage, {
3055
+ image: image || imageMobile,
3056
+ onMotifAreaUpdate: onMotifAreaUpdate,
3057
+ containerDimension: containerDimension
3058
+ })
3059
+ );
3060
+ }
3061
+ }
3062
+
3063
+ var styles$e = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","defaultBackground":"Backdrop-module_defaultBackground__1YQQL"};
3064
+
3065
+ function Backdrop(props) {
3066
+ var _useDimension = useDimension(),
3067
+ _useDimension2 = _slicedToArray(_useDimension, 2),
3068
+ containerDimension = _useDimension2[0],
3069
+ setContainerRef = _useDimension2[1];
3070
+
3071
+ return (
3072
+ /*#__PURE__*/
3073
+ React.createElement("div", {
3074
+ className: classNames(styles$e.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
3075
+ },
3076
+ /*#__PURE__*/
3077
+ React.createElement("div", {
3078
+ className: props.transitionStyles.backdropInner
3079
+ },
3080
+ /*#__PURE__*/
3081
+ React.createElement("div", {
3082
+ className: classNames(styles$e.defaultBackground, props.transitionStyles.backdropInner2)
3083
+ }, props.children(
3084
+ /*#__PURE__*/
3085
+ React.createElement(BackgroundAsset, Object.assign({}, props, {
3086
+ containerDimension: containerDimension,
3087
+ setContainerRef: setContainerRef
3088
+ }))))))
3089
+ );
3090
+ }
3091
+ Backdrop.defaultProps = {
3092
+ children: function children(_children) {
3093
+ return _children;
3094
+ },
3095
+ transitionStyles: {}
3096
+ };
3097
+
3098
+ function isIntersectingX(rectA, rectB) {
3099
+ return rectA.left < rectB.right && rectA.right > rectB.left || rectB.left < rectA.right && rectB.right > rectA.left;
2664
3100
  }
2665
3101
 
2666
3102
  function getBoundingClientRect(el) {
@@ -2679,6 +3115,12 @@ function getBoundingClientRect(el) {
2679
3115
  }
2680
3116
 
2681
3117
  function useBoundingClientRect() {
3118
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
3119
+ _ref$updateOnScrollAn = _ref.updateOnScrollAndResize,
3120
+ updateOnScrollAndResize = _ref$updateOnScrollAn === void 0 ? true : _ref$updateOnScrollAn,
3121
+ _ref$dependencies = _ref.dependencies,
3122
+ dependencies = _ref$dependencies === void 0 ? [] : _ref$dependencies;
3123
+
2682
3124
  var _useState = useState(getBoundingClientRect(null)),
2683
3125
  _useState2 = _slicedToArray(_useState, 2),
2684
3126
  boundingClientRect = _useState2[0],
@@ -2693,12 +3135,17 @@ function useBoundingClientRect() {
2693
3135
  setCurrentNode(node);
2694
3136
  setBoundingClientRect(getBoundingClientRect(node));
2695
3137
  }, []);
3138
+ useIsomorphicLayoutEffect(function () {
3139
+ if (dependencies.length && currentNode) {
3140
+ setBoundingClientRect(getBoundingClientRect(currentNode));
3141
+ }
3142
+ }, dependencies);
2696
3143
  useEffect(function () {
2697
3144
  function handler() {
2698
3145
  setBoundingClientRect(getBoundingClientRect(currentNode));
2699
3146
  }
2700
3147
 
2701
- if (!currentNode) {
3148
+ if (!currentNode || !updateOnScrollAndResize) {
2702
3149
  return;
2703
3150
  }
2704
3151
 
@@ -2708,10 +3155,177 @@ function useBoundingClientRect() {
2708
3155
  window.removeEventListener('resize', handler);
2709
3156
  window.removeEventListener('scroll', handler);
2710
3157
  };
2711
- }, [currentNode]);
3158
+ }, [currentNode, updateOnScrollAndResize]);
2712
3159
  return [boundingClientRect, measureRef];
2713
3160
  }
2714
3161
 
3162
+ /**
3163
+ * Handles the state of the section layout based on the current
3164
+ * position of content and motif area. Returns an array of the form:
3165
+ *
3166
+ * [
3167
+ * {
3168
+ * isContentPadded, // true if motif and content will
3169
+ * // not fit side by side.
3170
+ *
3171
+ * intersectionRatioY, // Ratio of the motif area that is
3172
+ * // covered by the content given the
3173
+ * // current scroll position if motif
3174
+ * // is exposed.
3175
+ *
3176
+ * paddingTop, // Distance to shift down the content
3177
+ * // to ensure the motif area can be
3178
+ * // seen when entering the section.
3179
+ *
3180
+ * minHeight, // Min Height of the section to ensure
3181
+ * // the motif area can be seen.
3182
+ * },
3183
+ * setMotifAreaRectRef, // Assign motif area element that shall be
3184
+ * // measured.
3185
+ *
3186
+ * setContentAreaRef // Assign content area element that
3187
+ * // shall be measured.
3188
+ * ]
3189
+ *
3190
+ * @param {Object} options
3191
+ * @param {string[]} transitions - Names of the section's enter and exit
3192
+ * transitions.
3193
+ * @param {boolean} fullHeight - Whether the section has full or dynamic
3194
+ * height.
3195
+ * @param {boolean} empty - Whether the section contains content
3196
+ * elements.
3197
+ * @param {boolean} exposeMotifArea - Whether to pad content down if it
3198
+ * would otherwise intersect with the motif area.
3199
+ *
3200
+ * @private
3201
+ */
3202
+
3203
+ function useMotifAreaState() {
3204
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
3205
+ transitions = _ref.transitions,
3206
+ fullHeight = _ref.fullHeight,
3207
+ empty = _ref.empty,
3208
+ exposeMotifArea = _ref.exposeMotifArea,
3209
+ updateOnScrollAndResize = _ref.updateOnScrollAndResize;
3210
+
3211
+ var _useBoundingClientRec = useBoundingClientRect({
3212
+ updateOnScrollAndResize: updateOnScrollAndResize
3213
+ }),
3214
+ _useBoundingClientRec2 = _slicedToArray(_useBoundingClientRec, 2),
3215
+ motifAreaRect = _useBoundingClientRec2[0],
3216
+ setMotifAreaRectRef = _useBoundingClientRec2[1];
3217
+
3218
+ var _useDimension = useDimension(),
3219
+ _useDimension2 = _slicedToArray(_useDimension, 2),
3220
+ motifAreaDimension = _useDimension2[0],
3221
+ setMotifAreaDimensionRef = _useDimension2[1];
3222
+
3223
+ var _useState = useState(false),
3224
+ _useState2 = _slicedToArray(_useState, 2),
3225
+ isPadded = _useState2[0],
3226
+ setIsPadded = _useState2[1];
3227
+
3228
+ var setMotifAreaRef = useCallback(function (node) {
3229
+ setMotifAreaRectRef(node);
3230
+ setMotifAreaDimensionRef(node);
3231
+ }, [setMotifAreaRectRef, setMotifAreaDimensionRef]);
3232
+
3233
+ var _useBoundingClientRec3 = useBoundingClientRect({
3234
+ updateOnScrollAndResize: updateOnScrollAndResize,
3235
+ dependencies: [isPadded]
3236
+ }),
3237
+ _useBoundingClientRec4 = _slicedToArray(_useBoundingClientRec3, 2),
3238
+ contentAreaRect = _useBoundingClientRec4[0],
3239
+ setContentAreaRef = _useBoundingClientRec4[1];
3240
+
3241
+ var isContentPadded = exposeMotifArea && isIntersectingX(motifAreaRect, contentAreaRect) && motifAreaRect.height > 0 && !empty;
3242
+ var paddingTop = getMotifAreaPadding(isContentPadded, transitions, motifAreaDimension); // Force measuring content area again since applying the padding
3243
+ // changes the intersection ratio.
3244
+
3245
+ var willBePadded = paddingTop > 0;
3246
+ useEffect(function () {
3247
+ setIsPadded(willBePadded);
3248
+ }, [willBePadded]);
3249
+ return [{
3250
+ paddingTop: paddingTop,
3251
+ isContentPadded: isContentPadded,
3252
+ minHeight: getMotifAreaMinHeight(fullHeight, transitions, motifAreaDimension),
3253
+ intersectionRatioY: getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect)
3254
+ }, setMotifAreaRef, setContentAreaRef];
3255
+ }
3256
+
3257
+ function getMotifAreaPadding(isContentPadded, transitions, motifAreaDimension) {
3258
+ if (!isContentPadded) {
3259
+ return;
3260
+ }
3261
+
3262
+ if (transitions[0] === 'fadeIn' || transitions[0] === 'fadeInBg') {
3263
+ // Once the section has become active, the backdrop becomes
3264
+ // visible all at once. Motif area aware background positioning
3265
+ // ensures that the motif area is within the viewport. Still, when
3266
+ // scrolling fast, the top of the section will already have
3267
+ // reached the top of the viewport once the fade transitions ends.
3268
+ //
3269
+ // If the motif area is at the top of the backdrop, adding its
3270
+ // height as padding is enough to ensure that the content does not
3271
+ // immediately start intersecting.
3272
+ //
3273
+ // If the motif area is at the bottom of the backdrop, additional
3274
+ // padding is needed to prevent the content from hiding the motif
3275
+ // right at the start. Adding the full top distance of the motif
3276
+ // area, though, means a full viewport height has to be scrolled
3277
+ // by after the content of the previous section has been faded out
3278
+ // before the content of the section enters the viewport.
3279
+ // Subjectively, this feels like to little feedback that more
3280
+ // content is coming. We therefore reduce the additional distance
3281
+ // by a third.
3282
+ return motifAreaDimension.top * 2 / 3 + motifAreaDimension.height;
3283
+ }
3284
+
3285
+ if (transitions[0] === 'reveal') {
3286
+ // The backdrop remains in a fixed position while the content is
3287
+ // being scrolled in. Shifting the content down by the height of
3288
+ // the motif area means the motif area will be completely visible
3289
+ // when the top of the section aligns with the top of the motif
3290
+ // area.
3291
+ //
3292
+ // For exit transition `scrollOut`, the min height determined
3293
+ // below, ensures that the top of the section can actually reach
3294
+ // that position before the section begins to scroll.
3295
+ return motifAreaDimension.height;
3296
+ } else {
3297
+ // In the remaining `scrollIn` case, content and backdrop move in
3298
+ // together. We need to shift content down below the motif.
3299
+ return motifAreaDimension.top + motifAreaDimension.height;
3300
+ }
3301
+ }
3302
+
3303
+ function getMotifAreaMinHeight(fullHeight, transitions, motifAreaDimension) {
3304
+ if (fullHeight) {
3305
+ return;
3306
+ }
3307
+
3308
+ if (transitions[0] === 'reveal') {
3309
+ if (transitions[1] === 'conceal') {
3310
+ // Ensure section is tall enough to reveal the full height of
3311
+ // the motif area once the section passes it.
3312
+ return motifAreaDimension.height;
3313
+ } else {
3314
+ // Ensure backdrop can be revealed far enough before the section
3315
+ // starts scrolling.
3316
+ return motifAreaDimension.bottom + motifAreaDimension.height;
3317
+ }
3318
+ } else {
3319
+ // Ensure motif is visible in scrolled in section.
3320
+ return motifAreaDimension.top + motifAreaDimension.height;
3321
+ }
3322
+ }
3323
+
3324
+ function getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect) {
3325
+ var motifAreaOverlap = Math.max(0, Math.min(motifAreaRect.height, motifAreaRect.bottom - contentAreaRect.top));
3326
+ return isContentPadded ? motifAreaOverlap / motifAreaRect.height : 0;
3327
+ }
3328
+
2715
3329
  function useScrollTarget(ref, isScrollTarget) {
2716
3330
  useEffect(function () {
2717
3331
  if (ref.current && isScrollTarget) {
@@ -2767,7 +3381,7 @@ function useDarkBackground() {
2767
3381
  return useContext(DarkBackgroundContext);
2768
3382
  }
2769
3383
 
2770
- var styles$h = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F"};
3384
+ var styles$f = {"Section":"Section-module_Section__Yo58b","invert":"Section-module_invert__3_p7F"};
2771
3385
 
2772
3386
  var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
2773
3387
 
@@ -2801,7 +3415,7 @@ var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-mo
2801
3415
 
2802
3416
  var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
2803
3417
 
2804
- var styles$i = {
3418
+ var styles$g = {
2805
3419
  fadeInBgConceal: fadeInBgConceal,
2806
3420
  fadeInBgFadeOut: fadeInBgFadeOut,
2807
3421
  fadeInBgFadeOutBg: fadeInBgFadeOutBg,
@@ -2850,16 +3464,22 @@ function getAvailableTransitionNames(section, previousSection) {
2850
3464
  function getTransitionStyles(section, previousSection, nextSection) {
2851
3465
  var name = getTransitionStylesName(section, previousSection, nextSection);
2852
3466
 
2853
- if (!styles$i[name]) {
3467
+ if (!styles$g[name]) {
2854
3468
  throw new Error("Unknown transition ".concat(name));
2855
3469
  }
2856
3470
 
2857
- return styles$i[name];
3471
+ return styles$g[name];
3472
+ }
3473
+ function getEnterAndExitTransitions(section, previousSection, nextSection) {
3474
+ return [enterTransitions[getTransitionName(previousSection, section)], exitTransitions[getTransitionName(section, nextSection)]];
2858
3475
  }
2859
3476
  function getTransitionStylesName(section, previousSection, nextSection) {
2860
- var enterTransition = enterTransitions[getTransitionName(previousSection, section)];
2861
- var exitTransition = exitTransitions[getTransitionName(section, nextSection)];
2862
- return "".concat(enterTransition).concat(capitalize(exitTransition));
3477
+ var _getEnterAndExitTrans = getEnterAndExitTransitions(section, previousSection, nextSection),
3478
+ _getEnterAndExitTrans2 = _slicedToArray(_getEnterAndExitTrans, 2),
3479
+ enter = _getEnterAndExitTrans2[0],
3480
+ exit = _getEnterAndExitTrans2[1];
3481
+
3482
+ return "".concat(enter).concat(capitalize(exit));
2863
3483
  }
2864
3484
 
2865
3485
  function getTransitionName(previousSection, section) {
@@ -2885,22 +3505,28 @@ function NoOpShadow(props) {
2885
3505
  );
2886
3506
  }
2887
3507
 
2888
- var styles$j = {"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","shadowWhite":"GradientShadow-module_shadowWhite__3Xw2q"};
3508
+ var styles$h = {"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","shadowWhite":"GradientShadow-module_shadowWhite__3Xw2q"};
2889
3509
 
2890
3510
  function GradientShadow(props) {
2891
- var maxOpacityOverlap = props.motifAreaRect.height / 2;
2892
- var motifAreaOverlap = Math.min(maxOpacityOverlap, props.motifAreaRect.bottom - props.contentAreaRect.top);
2893
- var opacityFactor = props.intersecting && props.motifAreaRect.height > 0 ? motifAreaOverlap / maxOpacityOverlap : 1;
3511
+ // If motif area intersects with content area horizontally, fade in
3512
+ // shadow soon as the content has been scrolled far enough to start
3513
+ // intersecting with the motif area vertically. If motif area does
3514
+ // not intersect, always make it visible. Shadow appearance will then
3515
+ // depend on alignment (i.e. a gradient from the left).
3516
+ var opacityFactor = props.motifAreaState.isContentPadded ? // Make shadow reach full opacity when content has been scrolled
3517
+ // up half way across the motif area.
3518
+ roundToFirstDecimalPlace(Math.min(1, props.motifAreaState.intersectionRatioY * 2)) : 1;
3519
+ var opacity = props.motifAreaState.isContentPadded ? props.dynamicShadowOpacity : props.staticShadowOpacity;
2894
3520
  return (
2895
3521
  /*#__PURE__*/
2896
3522
  React.createElement("div", {
2897
- className: classNames(styles$j.root, styles$j["align-".concat(props.align)], _defineProperty({}, styles$j.intersecting, props.intersecting))
3523
+ className: classNames(styles$h.root, styles$h["align-".concat(props.align)], _defineProperty({}, styles$h.intersecting, props.motifAreaState.isContentPadded))
2898
3524
  },
2899
3525
  /*#__PURE__*/
2900
3526
  React.createElement("div", {
2901
- className: classNames(styles$j.shadow, props.inverted ? styles$j.shadowWhite : styles$j.shadowBlack),
3527
+ className: classNames(styles$h.shadow, props.inverted ? styles$h.shadowWhite : styles$h.shadowBlack),
2902
3528
  style: {
2903
- opacity: props.opacity * Math.round(opacityFactor * 10) / 10
3529
+ opacity: opacity * opacityFactor
2904
3530
  }
2905
3531
  },
2906
3532
  /*#__PURE__*/
@@ -2912,7 +3538,11 @@ GradientShadow.defaultProps = {
2912
3538
  align: 'left'
2913
3539
  };
2914
3540
 
2915
- var styles$k = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
3541
+ function roundToFirstDecimalPlace(value) {
3542
+ return Math.round(value * 10) / 10;
3543
+ }
3544
+
3545
+ var styles$i = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
2916
3546
 
2917
3547
  function InvisibleBoxWrapper(_ref) {
2918
3548
  var _classNames;
@@ -2924,76 +3554,65 @@ function InvisibleBoxWrapper(_ref) {
2924
3554
  return (
2925
3555
  /*#__PURE__*/
2926
3556
  React.createElement("div", {
2927
- className: classNames((_classNames = {}, _defineProperty(_classNames, styles$k.start, !openStart && position !== 'full'), _defineProperty(_classNames, styles$k.end, !openEnd && position !== 'full'), _classNames))
3557
+ className: classNames((_classNames = {}, _defineProperty(_classNames, styles$i.start, !openStart && position !== 'full'), _defineProperty(_classNames, styles$i.end, !openEnd && position !== 'full'), _classNames))
2928
3558
  }, children)
2929
3559
  );
2930
3560
  }
2931
3561
 
2932
- var styles$l = {"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"};
3562
+ var styles$j = {"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"};
2933
3563
 
2934
3564
  function GradientBox(props) {
2935
3565
  var _classNames;
2936
3566
 
2937
- var padding = props.active ? props.padding : 0;
2938
3567
  return (
2939
3568
  /*#__PURE__*/
2940
3569
  React.createElement("div", {
2941
- className: classNames(styles$l.root, (_classNames = {}, _defineProperty(_classNames, styles$l.gradient, padding > 0), _defineProperty(_classNames, styles$l["long"], props.coverInvisibleNextSection), _classNames)),
3570
+ className: classNames(styles$j.root, (_classNames = {}, _defineProperty(_classNames, styles$j.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$j["long"], props.coverInvisibleNextSection), _classNames)),
2942
3571
  style: {
2943
- paddingTop: padding
3572
+ paddingTop: props.motifAreaState.paddingTop
2944
3573
  }
2945
3574
  },
2946
3575
  /*#__PURE__*/
2947
3576
  React.createElement("div", {
2948
- className: styles$l.wrapper
3577
+ className: styles$j.wrapper
2949
3578
  },
2950
3579
  /*#__PURE__*/
2951
3580
  React.createElement("div", {
2952
- className: classNames(styles$l.shadow, props.inverted ? styles$l.shadowLight : styles$l.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
3581
+ className: classNames(styles$j.shadow, props.inverted ? styles$j.shadowLight : styles$j.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
2953
3582
  style: {
2954
- top: padding,
2955
- opacity: props.opacity
3583
+ top: props.motifAreaState.paddingTop,
3584
+ opacity: props.staticShadowOpacity
2956
3585
  }
2957
3586
  }),
2958
3587
  /*#__PURE__*/
2959
3588
  React.createElement("div", {
2960
- className: styles$l.content
3589
+ className: styles$j.content
2961
3590
  }, props.children)))
2962
3591
  );
2963
3592
  }
2964
- GradientBox.defaultProps = {
2965
- opacity: 1
2966
- };
2967
3593
 
2968
- var styles$m = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
3594
+ var styles$k = {"wrapper":"CardBox-module_wrapper__3vnaH","content":"CardBox-module_content__36v7J"};
2969
3595
 
2970
3596
  function CardBox(props) {
2971
- var padding = props.active ? props.padding : 0;
2972
3597
  return (
2973
3598
  /*#__PURE__*/
2974
3599
  React.createElement("div", {
2975
3600
  style: {
2976
- paddingTop: padding
3601
+ paddingTop: props.motifAreaState.paddingTop
2977
3602
  }
2978
3603
  },
2979
3604
  /*#__PURE__*/
2980
3605
  React.createElement("div", {
2981
- className: styles$m.wrapper
3606
+ className: styles$k.wrapper
2982
3607
  },
2983
3608
  /*#__PURE__*/
2984
3609
  React.createElement("div", {
2985
- style: {
2986
- top: padding
2987
- }
2988
- }),
2989
- /*#__PURE__*/
2990
- React.createElement("div", {
2991
- className: styles$m.content
3610
+ className: styles$k.content
2992
3611
  }, props.children)))
2993
3612
  );
2994
3613
  }
2995
3614
 
2996
- var styles$n = {"darkBackground":"#101010","lightBackground":"#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"};
3615
+ var styles$l = {"darkBackground":"#101010","lightBackground":"#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"};
2997
3616
 
2998
3617
  function CardBoxWrapper(props) {
2999
3618
  return (
@@ -3013,75 +3632,40 @@ function className(props) {
3013
3632
  return undefined;
3014
3633
  }
3015
3634
 
3016
- return classNames(styles$n.card, props.inverted ? styles$n.cardBgBlack : styles$n.cardBgWhite, _defineProperty({}, styles$n.cardStart, !props.openStart), _defineProperty({}, styles$n.cardEnd, !props.openEnd));
3017
- }
3018
-
3019
- var OnScreenContext = React.createContext({
3020
- center: false,
3021
- top: false,
3022
- bottom: false
3023
- });
3024
- var Section = withInlineEditingDecorator('SectionDecorator', function Section(props) {
3025
- var ref = useRef();
3026
- useScrollTarget(ref, props.isScrollTarget);
3027
- var sectionProperties = useMemo(function () {
3028
- return {
3029
- layout: props.layout,
3030
- invert: props.invert,
3031
- sectionIndex: props.sectionIndex
3032
- };
3033
- }, [props.layout, props.invert, props.sectionIndex]);
3034
-
3035
- var _useBoundingClientRec = useBoundingClientRect(),
3036
- _useBoundingClientRec2 = _slicedToArray(_useBoundingClientRec, 2),
3037
- motifAreaRect = _useBoundingClientRec2[0],
3038
- setMotifAreaRect = _useBoundingClientRec2[1];
3039
-
3040
- var _useDimension = useDimension(),
3041
- _useDimension2 = _slicedToArray(_useDimension, 2),
3042
- motifAreaDimension = _useDimension2[0],
3043
- setMotifAreaDimensionRef = _useDimension2[1];
3044
-
3045
- var setMotifAreaRefs = useCallback(function (node) {
3046
- setMotifAreaRect(node);
3047
- setMotifAreaDimensionRef(node);
3048
- }, [setMotifAreaRect, setMotifAreaDimensionRef]);
3049
-
3050
- var _useBoundingClientRec3 = useBoundingClientRect(props.layout),
3051
- _useBoundingClientRec4 = _slicedToArray(_useBoundingClientRec3, 2),
3052
- contentAreaRect = _useBoundingClientRec4[0],
3053
- setContentAreaRef = _useBoundingClientRec4[1];
3635
+ return classNames(styles$l.card, props.inverted ? styles$l.cardBgBlack : styles$l.cardBgWhite, _defineProperty({}, styles$l.cardStart, !props.openStart), _defineProperty({}, styles$l.cardEnd, !props.openEnd));
3636
+ }
3054
3637
 
3055
- var intersecting = isIntersectingX(motifAreaRect, contentAreaRect);
3056
- var heightOffset = 0; //(props.backdrop.first || props.transition === 'scrollOver') ? 0 : (window.innerHeight / 3);
3638
+ var components = {
3639
+ shadow: {
3640
+ Shadow: GradientShadow,
3641
+ Box: GradientBox,
3642
+ BoxWrapper: InvisibleBoxWrapper
3643
+ },
3644
+ transparent: {
3645
+ Shadow: NoOpShadow,
3646
+ Box: CardBox,
3647
+ BoxWrapper: InvisibleBoxWrapper
3648
+ },
3649
+ cards: {
3650
+ Shadow: NoOpShadow,
3651
+ Box: CardBox,
3652
+ BoxWrapper: CardBoxWrapper
3653
+ }
3654
+ };
3655
+ function getAppearanceComponents(appearance) {
3656
+ return components[appearance || 'shadow'];
3657
+ }
3057
3658
 
3659
+ var Section = withInlineEditingDecorator('SectionDecorator', function Section(props) {
3660
+ var ref = useRef();
3661
+ useScrollTarget(ref, props.isScrollTarget);
3058
3662
  var transitionStyles = getTransitionStyles(props, props.previousSection, props.nextSection);
3059
- var appearance = {
3060
- shadow: {
3061
- background: GradientShadow,
3062
- foreground: GradientBox,
3063
- foregroundWrapper: InvisibleBoxWrapper
3064
- },
3065
- transparent: {
3066
- background: NoOpShadow,
3067
- foreground: CardBox,
3068
- foregroundWrapper: InvisibleBoxWrapper
3069
- },
3070
- cards: {
3071
- background: NoOpShadow,
3072
- foreground: CardBox,
3073
- foregroundWrapper: CardBoxWrapper
3074
- }
3075
- }[props.appearance || 'shadow'];
3076
- var Shadow = appearance.background;
3077
- var Box = appearance.foreground;
3078
- var BoxWrapper = appearance.foregroundWrapper;
3079
3663
  return (
3080
3664
  /*#__PURE__*/
3081
3665
  React.createElement("section", {
3082
3666
  id: "section-".concat(props.permaId),
3083
3667
  ref: ref,
3084
- className: classNames(styles$h.Section, transitionStyles.section, _defineProperty({}, styles$h.invert, props.invert))
3668
+ className: classNames(styles$f.Section, transitionStyles.section, _defineProperty({}, styles$f.invert, props.invert))
3085
3669
  },
3086
3670
  /*#__PURE__*/
3087
3671
  React.createElement(SectionLifecycleProvider, {
@@ -3093,39 +3677,87 @@ var Section = withInlineEditingDecorator('SectionDecorator', function Section(pr
3093
3677
  audioFilePermaId: props.atmoAudioFileId
3094
3678
  }),
3095
3679
  /*#__PURE__*/
3680
+ React.createElement(SectionContents, Object.assign({}, props, {
3681
+ transitionStyles: transitionStyles
3682
+ }))))
3683
+ );
3684
+ });
3685
+
3686
+ function SectionContents(props) {
3687
+ var _useSectionLifecycle = useSectionLifecycle(),
3688
+ shouldPrepare = _useSectionLifecycle.shouldPrepare;
3689
+
3690
+ var sectionProperties = useMemo(function () {
3691
+ return {
3692
+ layout: props.layout,
3693
+ invert: props.invert,
3694
+ sectionIndex: props.sectionIndex
3695
+ };
3696
+ }, [props.layout, props.invert, props.sectionIndex]);
3697
+
3698
+ var _useMotifAreaState = useMotifAreaState({
3699
+ updateOnScrollAndResize: shouldPrepare,
3700
+ exposeMotifArea: props.exposeMotifArea,
3701
+ transitions: getEnterAndExitTransitions(props, props.previousSection, props.nextSection),
3702
+ empty: !props.contentElements.length,
3703
+ sectionTransition: props.transition,
3704
+ fullHeight: props.fullHeight
3705
+ }),
3706
+ _useMotifAreaState2 = _slicedToArray(_useMotifAreaState, 4),
3707
+ motifAreaState = _useMotifAreaState2[0],
3708
+ setMotifAreaRef = _useMotifAreaState2[1],
3709
+ setContentAreaRef = _useMotifAreaState2[2],
3710
+ setForegroundContentRef = _useMotifAreaState2[3];
3711
+
3712
+ var _getAppearanceCompone = getAppearanceComponents(props.appearance),
3713
+ Shadow = _getAppearanceCompone.Shadow,
3714
+ Box = _getAppearanceCompone.Box,
3715
+ BoxWrapper = _getAppearanceCompone.BoxWrapper;
3716
+
3717
+ var staticShadowOpacity = percentToFraction(props.staticShadowOpacity, {
3718
+ defaultValue: 0.7
3719
+ });
3720
+ var dynamicShadowOpacity = percentToFraction(props.dynamicShadowOpacity, {
3721
+ defaultValue: 0.7
3722
+ });
3723
+ return (
3724
+ /*#__PURE__*/
3725
+ React.createElement(React.Fragment, null,
3726
+ /*#__PURE__*/
3096
3727
  React.createElement(Backdrop, Object.assign({}, props.backdrop, {
3097
- onMotifAreaUpdate: setMotifAreaRefs,
3728
+ onMotifAreaUpdate: setMotifAreaRef,
3098
3729
  state: props.state,
3099
- transitionStyles: transitionStyles
3730
+ transitionStyles: props.transitionStyles
3100
3731
  }), function (children) {
3101
3732
  return (
3102
3733
  /*#__PURE__*/
3103
3734
  React.createElement(Shadow, {
3104
3735
  align: props.layout,
3105
3736
  inverted: props.invert,
3106
- intersecting: intersecting,
3107
- opacity: props.shadowOpacity >= 0 ? props.shadowOpacity / 100 : 0.7,
3108
- motifAreaRect: motifAreaRect,
3109
- contentAreaRect: contentAreaRect
3737
+ motifAreaState: motifAreaState,
3738
+ staticShadowOpacity: staticShadowOpacity,
3739
+ dynamicShadowOpacity: dynamicShadowOpacity
3110
3740
  }, children)
3111
3741
  );
3112
3742
  }),
3113
3743
  /*#__PURE__*/
3114
3744
  React.createElement(Foreground, {
3115
- transitionStyles: transitionStyles,
3745
+ transitionStyles: props.transitionStyles,
3116
3746
  state: props.state,
3117
- paddingBottom: !endsWithFullWidthElement(props.foreground),
3747
+ inFirstSection: props.sectionIndex === 0,
3748
+ minHeight: motifAreaState.minHeight,
3749
+ paddingBottom: !endsWithFullWidthElement(props.contentElements),
3750
+ contentRef: setForegroundContentRef,
3118
3751
  heightMode: heightMode(props)
3119
3752
  },
3120
3753
  /*#__PURE__*/
3121
3754
  React.createElement(Box, {
3122
- active: intersecting,
3123
3755
  inverted: props.invert,
3124
3756
  coverInvisibleNextSection: props.nextSection && props.nextSection.transition.startsWith('fade'),
3125
- transitionStyles: transitionStyles,
3757
+ transitionStyles: props.transitionStyles,
3126
3758
  state: props.state,
3127
- padding: Math.max(0, motifAreaDimension.top + motifAreaDimension.height - heightOffset),
3128
- opacity: props.shadowOpacity
3759
+ motifAreaState: motifAreaState,
3760
+ staticShadowOpacity: staticShadowOpacity
3129
3761
  },
3130
3762
  /*#__PURE__*/
3131
3763
  React.createElement(BackgroundColorProvider, {
@@ -3134,7 +3766,7 @@ var Section = withInlineEditingDecorator('SectionDecorator', function Section(pr
3134
3766
  /*#__PURE__*/
3135
3767
  React.createElement(Layout, {
3136
3768
  sectionId: props.id,
3137
- items: indexItems(props.foreground),
3769
+ items: props.contentElements,
3138
3770
  appearance: props.appearance,
3139
3771
  contentAreaRef: setContentAreaRef,
3140
3772
  sectionProps: sectionProperties
@@ -3145,16 +3777,20 @@ var Section = withInlineEditingDecorator('SectionDecorator', function Section(pr
3145
3777
  inverted: props.invert
3146
3778
  }), children)
3147
3779
  );
3148
- }))))))
3780
+ })))))
3149
3781
  );
3150
- });
3782
+ }
3151
3783
 
3152
- function indexItems(items) {
3153
- return items.map(function (item, index) {
3154
- return _objectSpread2(_objectSpread2({}, item), {}, {
3155
- index: index
3156
- });
3784
+ function ConnectedSection(props) {
3785
+ var contentElements = useSectionContentElements({
3786
+ sectionId: props.id
3157
3787
  });
3788
+ return (
3789
+ /*#__PURE__*/
3790
+ React.createElement(Section, Object.assign({}, props, {
3791
+ contentElements: contentElements
3792
+ }))
3793
+ );
3158
3794
  }
3159
3795
 
3160
3796
  function heightMode(props) {
@@ -3174,11 +3810,16 @@ function endsWithFullWidthElement(elements) {
3174
3810
  return lastElement && lastElement.position === 'full';
3175
3811
  }
3176
3812
 
3813
+ function percentToFraction(value, _ref) {
3814
+ var defaultValue = _ref.defaultValue;
3815
+ return typeof value !== 'undefined' ? value / 100 : defaultValue;
3816
+ }
3817
+
3177
3818
  function Chapter(props) {
3178
3819
  return (
3179
3820
  /*#__PURE__*/
3180
3821
  React.createElement("div", {
3181
- id: "chapter-".concat(props.permaId)
3822
+ id: props.chapterSlug
3182
3823
  }, renderSections(props.sections, props.currentSectionIndex, props.setCurrentSectionIndex, props.scrollTargetSectionIndex, props.setScrollTargetSectionIndex))
3183
3824
  );
3184
3825
  }
@@ -3197,7 +3838,7 @@ function renderSections(sections, currentSectionIndex, setCurrentSectionIndex, s
3197
3838
  sectionIndex: section.sectionIndex
3198
3839
  },
3199
3840
  /*#__PURE__*/
3200
- React.createElement(Section, Object.assign({
3841
+ React.createElement(ConnectedSection, Object.assign({
3201
3842
  state: section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active',
3202
3843
  isScrollTarget: section.sectionIndex === scrollTargetSectionIndex,
3203
3844
  onActivate: function onActivate() {
@@ -3243,10 +3884,26 @@ var Entry = withInlineEditingDecorator('EntryDecorator', function Entry(props) {
3243
3884
 
3244
3885
  var entryStructure = useEntryStructure();
3245
3886
  useSectionChangeEvents(entryStructure, currentSectionIndex);
3887
+
3888
+ var updateChapterSlug = function updateChapterSlug(slug) {
3889
+ if (window.history && window.history.replaceState) {
3890
+ window.history.replaceState(null, null, '#' + slug);
3891
+ }
3892
+ };
3893
+
3246
3894
  var setCurrentSectionIndex = useCallback(function (index) {
3247
3895
  sectionChangeMessagePoster(index);
3248
3896
  setCurrentSectionIndexState(index);
3249
- }, [setCurrentSectionIndexState]);
3897
+ var sectionCounter = 0;
3898
+ var chapter = entryStructure.find(function (chapter) {
3899
+ sectionCounter += chapter.sections.length;
3900
+ return index < sectionCounter;
3901
+ });
3902
+
3903
+ if (chapter) {
3904
+ updateChapterSlug(chapter.chapterSlug);
3905
+ }
3906
+ }, [setCurrentSectionIndexState, entryStructure]);
3250
3907
  var receiveMessage = useCallback(function (data) {
3251
3908
  if (data.type === 'SCROLL_TO_SECTION') {
3252
3909
  setScrollTargetSectionIndex(data.payload.index);
@@ -3259,121 +3916,420 @@ var Entry = withInlineEditingDecorator('EntryDecorator', function Entry(props) {
3259
3916
  index = currentSectionIndex + 1;
3260
3917
  }
3261
3918
 
3262
- setScrollTargetSectionIndex(index);
3919
+ setScrollTargetSectionIndex(index);
3920
+ }
3921
+
3922
+ return (
3923
+ /*#__PURE__*/
3924
+ React.createElement("div", {
3925
+ className: entryStyles.Entry,
3926
+ id: "goToContent"
3927
+ },
3928
+ /*#__PURE__*/
3929
+ React.createElement(AtmoProvider, null,
3930
+ /*#__PURE__*/
3931
+ React.createElement(ScrollToSectionContext.Provider, {
3932
+ value: scrollToSection
3933
+ }, renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex))))
3934
+ );
3935
+ });
3936
+
3937
+ function renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
3938
+ return entryStructure.map(function (chapter, index) {
3939
+ return (
3940
+ /*#__PURE__*/
3941
+ React.createElement(Chapter, {
3942
+ key: index,
3943
+ chapterSlug: chapter.chapterSlug,
3944
+ permaId: chapter.permaId,
3945
+ sections: chapter.sections,
3946
+ currentSectionIndex: currentSectionIndex,
3947
+ setCurrentSectionIndex: setCurrentSectionIndex,
3948
+ scrollTargetSectionIndex: scrollTargetSectionIndex,
3949
+ setScrollTargetSectionIndex: setScrollTargetSectionIndex
3950
+ })
3951
+ );
3952
+ });
3953
+ }
3954
+
3955
+ var BrowserFeaturesAvailableContext = createContext(); // Browser feature detection is not available during server side
3956
+ // rendering. To prevent mismatches during hydration, we keep features
3957
+ // disabled in the initial render. Since hydration only starts after
3958
+ // feature detection has finished, we can immediately re-render once
3959
+ // the provider has mounted.
3960
+
3961
+ function BrowserFeaturesProvider(_ref) {
3962
+ var children = _ref.children;
3963
+
3964
+ var _useState = useState(false),
3965
+ _useState2 = _slicedToArray(_useState, 2),
3966
+ isAvailable = _useState2[0],
3967
+ setIsAvailable = _useState2[1];
3968
+
3969
+ useEffect(function () {
3970
+ return setIsAvailable(true);
3971
+ }, []);
3972
+ return (
3973
+ /*#__PURE__*/
3974
+ React.createElement(BrowserFeaturesAvailableContext.Provider, {
3975
+ value: isAvailable
3976
+ }, children)
3977
+ );
3978
+ }
3979
+ function useBrowserFeature(name) {
3980
+ return useContext(BrowserFeaturesAvailableContext) && browser.has(name);
3981
+ }
3982
+
3983
+ var styles$m = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
3984
+
3985
+ var FocusVisibleContext = createContext();
3986
+ function useFocusOutlineVisible() {
3987
+ return useContext(FocusVisibleContext);
3988
+ }
3989
+ function FocusOutlineProvider(_ref) {
3990
+ var children = _ref.children;
3991
+
3992
+ var _useState = useState(),
3993
+ _useState2 = _slicedToArray(_useState, 2),
3994
+ value = _useState2[0],
3995
+ setValue = _useState2[1];
3996
+
3997
+ useEffect(function () {
3998
+ document.body.addEventListener('keydown', enable);
3999
+ document.body.addEventListener('mousedown', disable);
4000
+ disable();
4001
+ return function () {
4002
+ document.body.removeEventListener('keydown', enable);
4003
+ document.body.removeEventListener('mousedown', disable);
4004
+ };
4005
+
4006
+ function enable() {
4007
+ document.body.classList.remove(styles$m.focusOutlineDisabled);
4008
+ setValue(true);
4009
+ }
4010
+
4011
+ function disable() {
4012
+ document.body.classList.add(styles$m.focusOutlineDisabled);
4013
+ setValue(false);
4014
+ }
4015
+ }, []);
4016
+ return (
4017
+ /*#__PURE__*/
4018
+ React.createElement(FocusVisibleContext.Provider, {
4019
+ value: value
4020
+ }, children)
4021
+ );
4022
+ }
4023
+
4024
+ var PhonePlatformProvider = withInlineEditingAlternative('PhonePlatformProvider', function PhonePlatformProvider(_ref) {
4025
+ var children = _ref.children;
4026
+ var isPhonePlatform = useBrowserFeature('phone platform');
4027
+ return (
4028
+ /*#__PURE__*/
4029
+ React.createElement(PhonePlatformContext.Provider, {
4030
+ value: isPhonePlatform
4031
+ }, children)
4032
+ );
4033
+ });
4034
+
4035
+ var AudioFocusContext = createContext();
4036
+ function AudioFocusProvider(_ref) {
4037
+ var children = _ref.children;
4038
+
4039
+ var _useState = useState([]),
4040
+ _useState2 = _slicedToArray(_useState, 2),
4041
+ currentKey = _useState2[0],
4042
+ setCurrentKey = _useState2[1];
4043
+
4044
+ var value = useMemo(function () {
4045
+ return [currentKey, setCurrentKey];
4046
+ }, [currentKey, setCurrentKey]);
4047
+ return (
4048
+ /*#__PURE__*/
4049
+ React.createElement(AudioFocusContext.Provider, {
4050
+ value: value
4051
+ }, children)
4052
+ );
4053
+ }
4054
+ /**
4055
+ * Prevent parallel playback of multiple media elements.
4056
+ *
4057
+ * @param {Object} options
4058
+ * @param {number} options.key - Unique id used to identify the element.
4059
+ * @param {boolean} options.request - Set to true to request audio focus.
4060
+ * @param {Function} options.onLost -
4061
+ * Callback that will be invoked if another element requests audio
4062
+ * focus, thereby preempting your hold of audio focus. The callback
4063
+ * should pause the element.
4064
+ */
4065
+
4066
+ function useAudioFocus(_ref2) {
4067
+ var key = _ref2.key,
4068
+ request = _ref2.request,
4069
+ onLost = _ref2.onLost;
4070
+ var wasRequested = usePrevious(request);
4071
+
4072
+ var _useContext = useContext(AudioFocusContext),
4073
+ _useContext2 = _slicedToArray(_useContext, 2),
4074
+ currentKey = _useContext2[0],
4075
+ setCurrentKey = _useContext2[1];
4076
+
4077
+ var previousKey = usePrevious(currentKey);
4078
+ useEffect(function () {
4079
+ if (request && !wasRequested) {
4080
+ setCurrentKey(key);
4081
+ }
4082
+ }, [request, wasRequested, setCurrentKey, key]);
4083
+ useEffect(function () {
4084
+ if (previousKey === key && currentKey !== key) {
4085
+ onLost();
4086
+ }
4087
+ }, [currentKey, previousKey, key, onLost]);
4088
+ }
4089
+
4090
+ var ThirdPartyConsentContext = createContext();
4091
+ function ThirdPartyConsentProvider(_ref) {
4092
+ var _theme$options$thirdP, _theme$options$thirdP2;
4093
+
4094
+ var children = _ref.children;
4095
+ var theme = useTheme();
4096
+ var cookieName = (_theme$options$thirdP = theme.options.thirdPartyConsent) === null || _theme$options$thirdP === void 0 ? void 0 : _theme$options$thirdP.cookieName;
4097
+ var cookieDomain = (_theme$options$thirdP2 = theme.options.thirdPartyConsent) === null || _theme$options$thirdP2 === void 0 ? void 0 : _theme$options$thirdP2.cookieDomain;
4098
+ var providerNameMapping = useMemo(function () {
4099
+ var _theme$options$thirdP3;
4100
+
4101
+ return ((_theme$options$thirdP3 = theme.options.thirdPartyConsent) === null || _theme$options$thirdP3 === void 0 ? void 0 : _theme$options$thirdP3.cookieProviderNameMapping) || {};
4102
+ }, [theme]);
4103
+
4104
+ var _useState = useState(null),
4105
+ _useState2 = _slicedToArray(_useState, 2),
4106
+ consents = _useState2[0],
4107
+ setConsents = _useState2[1];
4108
+
4109
+ useEffect(function () {
4110
+ if (cookieName) {
4111
+ setConsents(getConsentsFromCookie(cookieName, providerNameMapping));
4112
+ }
4113
+ }, [cookieName, providerNameMapping]);
4114
+ var giveConsent = useCallback(function (provider) {
4115
+ enableProviderInCookie(provider, cookieName, cookieDomain, providerNameMapping);
4116
+ setConsents(function (consents) {
4117
+ return _objectSpread2(_objectSpread2({}, consents), {}, _defineProperty({}, provider, true));
4118
+ });
4119
+ }, [cookieName, cookieDomain, providerNameMapping]);
4120
+ var context = useMemo(function () {
4121
+ return {
4122
+ consents: consents,
4123
+ giveConsent: giveConsent
4124
+ };
4125
+ }, [consents, giveConsent]);
4126
+ return (
4127
+ /*#__PURE__*/
4128
+ React.createElement(ThirdPartyConsentContext.Provider, {
4129
+ value: context
4130
+ }, children)
4131
+ );
4132
+ }
4133
+
4134
+ function getCookieContent(cookieName) {
4135
+ return JSON.parse(cookies.getItem(cookieName)) || {};
4136
+ }
4137
+
4138
+ function getConsentsFromCookie(cookieName, providerNameMapping) {
4139
+ var result = getCookieContent(cookieName);
4140
+ Object.keys(providerNameMapping).forEach(function (key) {
4141
+ result[key] = result[providerNameMapping[key]];
4142
+ });
4143
+ return result;
4144
+ }
4145
+
4146
+ function enableProviderInCookie(provider, cookieName, cookieDomain, providerNameMapping) {
4147
+ if (!cookieDomain || window.location.hostname.match(new RegExp("".concat(cookieDomain, "$")))) {
4148
+ var newCookieContent = getCookieContent(cookieName);
4149
+ newCookieContent[providerNameMapping[provider] || provider] = true;
4150
+ cookies.setItem(cookieName, JSON.stringify(newCookieContent), null, cookieDomain);
4151
+ }
4152
+ }
4153
+
4154
+ var styles$n = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
4155
+
4156
+ function _extends$4() {
4157
+ _extends$4 = Object.assign || function (target) {
4158
+ for (var i = 1; i < arguments.length; i++) {
4159
+ var source = arguments[i];
4160
+
4161
+ for (var key in source) {
4162
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
4163
+ target[key] = source[key];
4164
+ }
4165
+ }
4166
+ }
4167
+
4168
+ return target;
4169
+ };
4170
+
4171
+ return _extends$4.apply(this, arguments);
4172
+ }
4173
+ var OptInIcon = (function (_ref) {
4174
+ var _ref$styles = _ref.styles,
4175
+ props = _objectWithoutProperties(_ref, ["styles"]);
4176
+
4177
+ return React.createElement("svg", _extends$4({
4178
+ xmlns: "http://www.w3.org/2000/svg",
4179
+ viewBox: "0 0 131 95"
4180
+ }, props), React.createElement("path", {
4181
+ 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"
4182
+ }));
4183
+ });
4184
+
4185
+ /**
4186
+ * Render opt in prompt instead of children if third party consent
4187
+ * cookie has been configured in theme options and user has not given
4188
+ * consent for passed provider.
4189
+ *
4190
+ * @param {Object} props
4191
+ * @param {string} props.providerName -
4192
+ * Only render children if user has given consent for this provider.
4193
+ * @param {React.ReactElement} props.children -
4194
+ * Children to conditionally render.
4195
+ *
4196
+ * @name ThirdPartyConsentOptIn
4197
+ */
4198
+
4199
+ function OptIn(_ref) {
4200
+ var children = _ref.children,
4201
+ providerName = _ref.providerName;
4202
+
4203
+ var _useI18n = useI18n(),
4204
+ t = _useI18n.t;
4205
+
4206
+ var cookieMessage = t("pageflow_scrolled.public.third_party_consent.opt_in_prompt.".concat(providerName));
4207
+
4208
+ var _useContentElementEdi = useContentElementEditorState(),
4209
+ isEditable = _useContentElementEdi.isEditable;
4210
+
4211
+ var isStaticPreview = useIsStaticPreview();
4212
+
4213
+ var _useState = useState(false),
4214
+ _useState2 = _slicedToArray(_useState, 2),
4215
+ consentedHere = _useState2[0],
4216
+ setConsentedHere = _useState2[1];
4217
+
4218
+ var _useContext = useContext(ThirdPartyConsentContext),
4219
+ consents = _useContext.consents,
4220
+ giveConsent = _useContext.giveConsent;
4221
+
4222
+ if (!consents || consents[providerName] || isEditable || isStaticPreview) {
4223
+ return typeof children === 'function' ? children({
4224
+ consentedHere: consentedHere
4225
+ }) : children;
4226
+ }
4227
+
4228
+ function consent() {
4229
+ giveConsent(providerName);
4230
+ setConsentedHere(true);
3263
4231
  }
3264
4232
 
3265
4233
  return (
3266
4234
  /*#__PURE__*/
3267
4235
  React.createElement("div", {
3268
- className: entryStyles.Entry
4236
+ className: styles$n.optIn
3269
4237
  },
3270
4238
  /*#__PURE__*/
3271
- React.createElement(MediaMutedProvider, null,
4239
+ React.createElement("div", {
4240
+ className: styles$n.optInIcon
4241
+ },
3272
4242
  /*#__PURE__*/
3273
- React.createElement(AtmoProvider, null,
4243
+ React.createElement(OptInIcon, null)),
3274
4244
  /*#__PURE__*/
3275
- React.createElement(ScrollToSectionContext.Provider, {
3276
- value: scrollToSection
3277
- }, renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex)))))
4245
+ React.createElement("div", {
4246
+ className: styles$n.optInMessage
4247
+ }, cookieMessage),
4248
+ /*#__PURE__*/
4249
+ React.createElement("div", null,
4250
+ /*#__PURE__*/
4251
+ React.createElement("button", {
4252
+ className: styles$n.optInButton,
4253
+ onClick: consent
4254
+ }, t('pageflow_scrolled.public.third_party_consent.confirm'))))
3278
4255
  );
3279
- });
3280
-
3281
- function renderChapters(entryStructure, currentSectionIndex, setCurrentSectionIndex, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
3282
- return entryStructure.map(function (chapter, index) {
3283
- return (
3284
- /*#__PURE__*/
3285
- React.createElement(Chapter, {
3286
- key: index,
3287
- permaId: chapter.permaId,
3288
- sections: chapter.sections,
3289
- currentSectionIndex: currentSectionIndex,
3290
- setCurrentSectionIndex: setCurrentSectionIndex,
3291
- scrollTargetSectionIndex: scrollTargetSectionIndex,
3292
- setScrollTargetSectionIndex: setScrollTargetSectionIndex
3293
- })
3294
- );
3295
- });
3296
4256
  }
3297
4257
 
3298
- var BrowserFeaturesAvailableContext = createContext(); // Browser feature detection is not available during server side
3299
- // rendering. To prevent mismatches during hydration, we keep features
3300
- // disabled in the initial render. Since hydration only starts after
3301
- // feature detection has finished, we can immediately re-render once
3302
- // the provider has mounted.
4258
+ var styles$o = {"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"};
3303
4259
 
3304
- function BrowserFeaturesProvider(_ref) {
3305
- var children = _ref.children;
4260
+ /**
4261
+ * Display info tooltip with a link to opt out of third party
4262
+ * embeds. Opt out url needs to be configured in theme options.
4263
+ *
4264
+ * @param {Object} props
4265
+ * @param {string} props.providerName -
4266
+ * Only display if user has given consent for this provider.
4267
+ * @param {string} props.contentElementPosition -
4268
+ * Position setting of parent content element. Used to correctly place
4269
+ * tooltip when content element uses full width.
4270
+ * @param {boolean} [hide] -
4271
+ * Temporarily hide the tooltip, e.g. while the embed is playing
4272
+ *
4273
+ * @name ThirdPartyOptOutInfo
4274
+ */
3306
4275
 
3307
- var _useState = useState(false),
3308
- _useState2 = _slicedToArray(_useState, 2),
3309
- isAvailable = _useState2[0],
3310
- setIsAvailable = _useState2[1];
4276
+ function OptOutInfo(_ref) {
4277
+ var _theme$options$thirdP;
3311
4278
 
3312
- useEffect(function () {
3313
- return setIsAvailable(true);
3314
- }, []);
3315
- return (
3316
- /*#__PURE__*/
3317
- React.createElement(BrowserFeaturesAvailableContext.Provider, {
3318
- value: isAvailable
3319
- }, children)
3320
- );
3321
- }
3322
- function useBrowserFeature(name) {
3323
- return useContext(BrowserFeaturesAvailableContext) && browser.has(name);
3324
- }
4279
+ var providerName = _ref.providerName,
4280
+ hide = _ref.hide,
4281
+ contentElementPosition = _ref.contentElementPosition;
4282
+
4283
+ var _useI18n = useI18n(),
4284
+ t = _useI18n.t;
3325
4285
 
3326
- var styles$o = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
4286
+ var _useContentElementEdi = useContentElementEditorState(),
4287
+ isEditable = _useContentElementEdi.isEditable;
3327
4288
 
3328
- var FocusVisibleContext = createContext();
3329
- function useFocusOutlineVisible() {
3330
- return useContext(FocusVisibleContext);
3331
- }
3332
- function FocusOutlineProvider(_ref) {
3333
- var children = _ref.children;
4289
+ var isStaticPreview = useIsStaticPreview();
3334
4290
 
3335
- var _useState = useState(),
3336
- _useState2 = _slicedToArray(_useState, 2),
3337
- value = _useState2[0],
3338
- setValue = _useState2[1];
4291
+ var _useContext = useContext(ThirdPartyConsentContext),
4292
+ consents = _useContext.consents;
3339
4293
 
3340
- useEffect(function () {
3341
- document.body.addEventListener('keydown', enable);
3342
- document.body.addEventListener('mousedown', disable);
3343
- disable();
3344
- return function () {
3345
- document.body.removeEventListener('keydown', enable);
3346
- document.body.removeEventListener('mousedown', disable);
3347
- };
4294
+ var theme = useTheme();
4295
+ var optOutUrl = (_theme$options$thirdP = theme.options.thirdPartyConsent) === null || _theme$options$thirdP === void 0 ? void 0 : _theme$options$thirdP.optOutUrl;
3348
4296
 
3349
- function enable() {
3350
- document.body.classList.remove(styles$o.focusOutlineDisabled);
3351
- setValue(true);
3352
- }
4297
+ if (!consents || !optOutUrl || !isEditable && !isStaticPreview && !consents[providerName]) {
4298
+ return null;
4299
+ }
3353
4300
 
3354
- function disable() {
3355
- document.body.classList.add(styles$o.focusOutlineDisabled);
3356
- setValue(false);
3357
- }
3358
- }, []);
4301
+ var linkText = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt_link');
4302
+ var linkHtml = "<a href=\"".concat(optOutUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(linkText, "</a>");
4303
+ var html = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt', {
4304
+ link: linkHtml
4305
+ });
3359
4306
  return (
3360
4307
  /*#__PURE__*/
3361
- React.createElement(FocusVisibleContext.Provider, {
3362
- value: value
3363
- }, children)
3364
- );
3365
- }
3366
-
3367
- var PhonePlatformProvider = withInlineEditingAlternative('PhonePlatformProvider', function PhonePlatformProvider(_ref) {
3368
- var children = _ref.children;
3369
- var isPhonePlatform = useBrowserFeature('phone platform');
3370
- return (
4308
+ React.createElement("div", {
4309
+ className: classNames(styles$o.optOut, styles$o[contentElementPosition]),
4310
+ style: hide ? {
4311
+ opacity: 0,
4312
+ visibility: 'hidden'
4313
+ } : undefined
4314
+ },
3371
4315
  /*#__PURE__*/
3372
- React.createElement(PhonePlatformContext.Provider, {
3373
- value: isPhonePlatform
3374
- }, children)
4316
+ React.createElement("button", {
4317
+ className: styles$o.icon
4318
+ },
4319
+ /*#__PURE__*/
4320
+ React.createElement(InfoIcon, null)),
4321
+ /*#__PURE__*/
4322
+ React.createElement("div", {
4323
+ className: styles$o.tooltip
4324
+ },
4325
+ /*#__PURE__*/
4326
+ React.createElement("div", {
4327
+ dangerouslySetInnerHTML: {
4328
+ __html: html
4329
+ }
4330
+ })))
3375
4331
  );
3376
- });
4332
+ }
3377
4333
 
3378
4334
  function RootProviders(_ref) {
3379
4335
  var seed = _ref.seed,
@@ -3386,14 +4342,50 @@ function RootProviders(_ref) {
3386
4342
  /*#__PURE__*/
3387
4343
  React.createElement(PhonePlatformProvider, null,
3388
4344
  /*#__PURE__*/
4345
+ React.createElement(MediaMutedProvider, null,
4346
+ /*#__PURE__*/
4347
+ React.createElement(AudioFocusProvider, null,
4348
+ /*#__PURE__*/
3389
4349
  React.createElement(EntryStateProvider, {
3390
4350
  seed: seed
3391
4351
  },
3392
4352
  /*#__PURE__*/
3393
- React.createElement(LocaleProvider, null, children)))))
4353
+ React.createElement(LocaleProvider, null,
4354
+ /*#__PURE__*/
4355
+ React.createElement(ThirdPartyConsentProvider, null, children))))))))
3394
4356
  );
3395
4357
  }
3396
4358
 
4359
+ function loadDashUnlessHlsSupported() {
4360
+ return _loadDashUnlessHlsSupported.apply(this, arguments);
4361
+ }
4362
+
4363
+ function _loadDashUnlessHlsSupported() {
4364
+ _loadDashUnlessHlsSupported = _asyncToGenerator(
4365
+ /*#__PURE__*/
4366
+ regenerator.mark(function _callee() {
4367
+ return regenerator.wrap(function _callee$(_context) {
4368
+ while (1) {
4369
+ switch (_context.prev = _context.next) {
4370
+ case 0:
4371
+ if (browser.has('hls support')) {
4372
+ _context.next = 3;
4373
+ break;
4374
+ }
4375
+
4376
+ _context.next = 3;
4377
+ return import('videojs-contrib-dash');
4378
+
4379
+ case 3:
4380
+ case "end":
4381
+ return _context.stop();
4382
+ }
4383
+ }
4384
+ }, _callee);
4385
+ }));
4386
+ return _loadDashUnlessHlsSupported.apply(this, arguments);
4387
+ }
4388
+
3397
4389
  var styles$p = {"darkBackground":"#101010","lightBackground":"#fff","root":"Figure-module_root__3FC-x","invert":"Figure-module_invert___0BJP"};
3398
4390
 
3399
4391
  /**
@@ -3444,6 +4436,11 @@ function MediaInteractionTracking(_ref) {
3444
4436
  setHideControlsTimeout();
3445
4437
  }
3446
4438
  }, [wasPlaying, playerState.isPlaying, setHideControlsTimeout, playerState.focusInsideControls, focusWasInside]);
4439
+ useEffect(function () {
4440
+ return function () {
4441
+ return clearTimeout(hideControlsTimeout.current);
4442
+ };
4443
+ }, []);
3447
4444
 
3448
4445
  var handleInteraction = function handleInteraction() {
3449
4446
  playerActions.userInteraction();
@@ -3454,7 +4451,9 @@ function MediaInteractionTracking(_ref) {
3454
4451
  /*#__PURE__*/
3455
4452
  React.createElement("div", {
3456
4453
  onClick: handleInteraction,
3457
- onMouseMove: handleInteraction
4454
+ onMouseMove: handleInteraction,
4455
+ onMouseEnter: playerActions.mouseEntered,
4456
+ onMouseLeave: playerActions.mouseLeft
3458
4457
  }, children)
3459
4458
  );
3460
4459
  }
@@ -3462,14 +4461,14 @@ MediaInteractionTracking.defaultProps = {
3462
4461
  idleDelay: 2000
3463
4462
  };
3464
4463
 
3465
- var styles$q = {"container":"Waveform-module_container__1Dxdv","menus":"Waveform-module_menus__1mOnJ","timeDisplay":"Waveform-module_timeDisplay__1v4Tl","playControl":"Waveform-module_playControl__QWTsJ","waveWrapper":"Waveform-module_waveWrapper__3gamc"};
4464
+ var styles$q = {"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"};
3466
4465
 
3467
4466
  var waveColor = '#828282ed';
3468
4467
  var waveColorInverted = 'rgba(0, 0, 0, 0.5)';
3469
4468
  var cursorColor = '#fff';
3470
4469
  var cursorColorInverted = '#888';
3471
4470
  var Wavesurfer = React.lazy(function () {
3472
- return import('./Wavesurfer-c3c45324.js');
4471
+ return import('./Wavesurfer-b88b02e0.js');
3473
4472
  });
3474
4473
  function Waveform(props) {
3475
4474
  var _useState = useState(90),
@@ -3563,8 +4562,8 @@ function TimeDisplay(props) {
3563
4562
 
3564
4563
  var styles$s = {"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"};
3565
4564
 
3566
- function _extends$2() {
3567
- _extends$2 = Object.assign || function (target) {
4565
+ function _extends$5() {
4566
+ _extends$5 = Object.assign || function (target) {
3568
4567
  for (var i = 1; i < arguments.length; i++) {
3569
4568
  var source = arguments[i];
3570
4569
 
@@ -3578,13 +4577,13 @@ function _extends$2() {
3578
4577
  return target;
3579
4578
  };
3580
4579
 
3581
- return _extends$2.apply(this, arguments);
4580
+ return _extends$5.apply(this, arguments);
3582
4581
  }
3583
4582
  var CheckIcon = (function (_ref) {
3584
4583
  var _ref$styles = _ref.styles,
3585
4584
  props = _objectWithoutProperties(_ref, ["styles"]);
3586
4585
 
3587
- return React.createElement("svg", _extends$2({
4586
+ return React.createElement("svg", _extends$5({
3588
4587
  xmlns: "http://www.w3.org/2000/svg",
3589
4588
  width: "24",
3590
4589
  height: "24",
@@ -3721,8 +4720,8 @@ function subMenuItemClickHandler(props, value, closeMenu) {
3721
4720
  };
3722
4721
  }
3723
4722
 
3724
- function _extends$3() {
3725
- _extends$3 = Object.assign || function (target) {
4723
+ function _extends$6() {
4724
+ _extends$6 = Object.assign || function (target) {
3726
4725
  for (var i = 1; i < arguments.length; i++) {
3727
4726
  var source = arguments[i];
3728
4727
 
@@ -3736,16 +4735,15 @@ function _extends$3() {
3736
4735
  return target;
3737
4736
  };
3738
4737
 
3739
- return _extends$3.apply(this, arguments);
4738
+ return _extends$6.apply(this, arguments);
3740
4739
  }
3741
4740
  var TextTracksIcon = (function (_ref) {
3742
4741
  var _ref$styles = _ref.styles,
3743
4742
  props = _objectWithoutProperties(_ref, ["styles"]);
3744
4743
 
3745
- return React.createElement("svg", _extends$3({
4744
+ return React.createElement("svg", _extends$6({
3746
4745
  xmlns: "http://www.w3.org/2000/svg",
3747
- width: "24",
3748
- height: "24"
4746
+ viewBox: "-3 -3 30 30"
3749
4747
  }, props), React.createElement("path", {
3750
4748
  d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z"
3751
4749
  }));
@@ -3773,10 +4771,10 @@ TextTracksMenu.defaultProps = {
3773
4771
  items: []
3774
4772
  };
3775
4773
 
3776
- var styles$t = {"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"};
4774
+ var styles$t = {"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"};
3777
4775
 
3778
- function _extends$4() {
3779
- _extends$4 = Object.assign || function (target) {
4776
+ function _extends$7() {
4777
+ _extends$7 = Object.assign || function (target) {
3780
4778
  for (var i = 1; i < arguments.length; i++) {
3781
4779
  var source = arguments[i];
3782
4780
 
@@ -3790,23 +4788,22 @@ function _extends$4() {
3790
4788
  return target;
3791
4789
  };
3792
4790
 
3793
- return _extends$4.apply(this, arguments);
4791
+ return _extends$7.apply(this, arguments);
3794
4792
  }
3795
4793
  var PlayIcon = (function (_ref) {
3796
4794
  var _ref$styles = _ref.styles,
3797
4795
  props = _objectWithoutProperties(_ref, ["styles"]);
3798
4796
 
3799
- return React.createElement("svg", _extends$4({
4797
+ return React.createElement("svg", _extends$7({
3800
4798
  xmlns: "http://www.w3.org/2000/svg",
3801
- width: "24",
3802
- height: "24"
4799
+ viewBox: "0 0 24 24"
3803
4800
  }, props), React.createElement("path", {
3804
4801
  d: "M8 5v14l11-7z"
3805
4802
  }));
3806
4803
  });
3807
4804
 
3808
- function _extends$5() {
3809
- _extends$5 = Object.assign || function (target) {
4805
+ function _extends$8() {
4806
+ _extends$8 = Object.assign || function (target) {
3810
4807
  for (var i = 1; i < arguments.length; i++) {
3811
4808
  var source = arguments[i];
3812
4809
 
@@ -3820,16 +4817,15 @@ function _extends$5() {
3820
4817
  return target;
3821
4818
  };
3822
4819
 
3823
- return _extends$5.apply(this, arguments);
4820
+ return _extends$8.apply(this, arguments);
3824
4821
  }
3825
4822
  var PauseIcon = (function (_ref) {
3826
4823
  var _ref$styles = _ref.styles,
3827
4824
  props = _objectWithoutProperties(_ref, ["styles"]);
3828
4825
 
3829
- return React.createElement("svg", _extends$5({
4826
+ return React.createElement("svg", _extends$8({
3830
4827
  xmlns: "http://www.w3.org/2000/svg",
3831
- width: "24",
3832
- height: "24"
4828
+ viewBox: "0 0 24 24"
3833
4829
  }, props), React.createElement("path", {
3834
4830
  d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z"
3835
4831
  }));
@@ -3847,7 +4843,11 @@ function PlayPauseButton(props) {
3847
4843
  scope: 'pageflow_scrolled.public.player_controls'
3848
4844
  }),
3849
4845
  onClick: function onClick() {
3850
- return props.isPlaying ? props.pause() : props.play();
4846
+ return props.isPlaying ? props.pause({
4847
+ via: 'playPauseButton'
4848
+ }) : props.play({
4849
+ via: 'playPauseButton'
4850
+ });
3851
4851
  }
3852
4852
  }, pausePlayIcon(props))
3853
4853
  );
@@ -3881,18 +4881,13 @@ function WaveformPlayerControls(props) {
3881
4881
  onMouseEnter: props.onMouseEnter,
3882
4882
  onMouseLeave: props.onMouseLeave,
3883
4883
  "data-testid": "waveform-controls",
3884
- className: classNames(styles$q.container, darkBackground ? styles$t.darkBackground : styles$t.lightBackground)
3885
- },
4884
+ className: classNames(styles$q.container)
4885
+ }, props.children,
3886
4886
  /*#__PURE__*/
3887
4887
  React.createElement("div", {
3888
- className: styles$q.playControl
3889
- },
3890
- /*#__PURE__*/
3891
- React.createElement(PlayPauseButton, {
3892
- isPlaying: props.isPlaying,
3893
- play: props.play,
3894
- pause: props.pause
3895
- })),
4888
+ className: styles$q.clickMask,
4889
+ onClick: props.onPlayerClick
4890
+ }),
3896
4891
  /*#__PURE__*/
3897
4892
  React.createElement(Waveform, {
3898
4893
  isPlaying: props.isPlaying,
@@ -3905,18 +4900,24 @@ function WaveformPlayerControls(props) {
3905
4900
  }),
3906
4901
  /*#__PURE__*/
3907
4902
  React.createElement("div", {
3908
- className: styles$q.timeDisplay
4903
+ className: styles$q.playControl
3909
4904
  },
3910
4905
  /*#__PURE__*/
3911
- React.createElement(TimeDisplay, {
3912
- currentTime: props.currentTime,
3913
- duration: props.duration
4906
+ React.createElement(PlayPauseButton, {
4907
+ isPlaying: props.isPlaying,
4908
+ play: props.play,
4909
+ pause: props.pause
3914
4910
  })),
3915
4911
  /*#__PURE__*/
3916
4912
  React.createElement("div", {
3917
- className: styles$q.menus
4913
+ className: classNames(styles$q.menuBar, darkBackground ? styles$t.darkBackground : styles$t.lightBackground, _defineProperty({}, styles$t.inset, !props.standAlone))
3918
4914
  },
3919
4915
  /*#__PURE__*/
4916
+ React.createElement(TimeDisplay, {
4917
+ currentTime: props.currentTime,
4918
+ duration: props.duration
4919
+ }),
4920
+ /*#__PURE__*/
3920
4921
  React.createElement(TextTracksMenu, {
3921
4922
  items: props.textTracksMenuItems,
3922
4923
  onItemClick: props.onTextTracksMenuItemClick
@@ -3924,7 +4925,41 @@ function WaveformPlayerControls(props) {
3924
4925
  );
3925
4926
  }
3926
4927
 
3927
- var styles$u = {"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"};
4928
+ var styles$u = {"container":"BigPlayPauseButton-module_container__19sKj","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-"};
4929
+
4930
+ function BigPlayPauseButton(props) {
4931
+ var _classNames;
4932
+
4933
+ var c = classNames(styles$u.button, (_classNames = {}, _defineProperty(_classNames, styles$u.hidden, props.lastControlledVia === 'playPauseButton'), _defineProperty(_classNames, styles$u.fadeIn, props.unplayed), _defineProperty(_classNames, styles$u.animated, !props.unplayed), _classNames));
4934
+ return (
4935
+ /*#__PURE__*/
4936
+ React.createElement("div", {
4937
+ className: classNames(styles$u.container, _defineProperty({}, styles$u.hideCursor, props.hideCursor)),
4938
+ onClick: props.onClick
4939
+ },
4940
+ /*#__PURE__*/
4941
+ React.createElement("div", {
4942
+ key: props.isPlaying,
4943
+ className: c
4944
+ }, pausePlayIcon$1(props)))
4945
+ );
4946
+ }
4947
+
4948
+ function pausePlayIcon$1(props) {
4949
+ if (props.unplayed || props.isPlaying) {
4950
+ return (
4951
+ /*#__PURE__*/
4952
+ React.createElement(PlayIcon, null)
4953
+ );
4954
+ } else {
4955
+ return (
4956
+ /*#__PURE__*/
4957
+ React.createElement(PauseIcon, null)
4958
+ );
4959
+ }
4960
+ }
4961
+
4962
+ var styles$v = {"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"};
3928
4963
 
3929
4964
  function ProgressIndicators(_ref) {
3930
4965
  var currentTime = _ref.currentTime,
@@ -3974,7 +5009,7 @@ function ProgressIndicators(_ref) {
3974
5009
  return (
3975
5010
  /*#__PURE__*/
3976
5011
  React.createElement("div", {
3977
- className: classNames(styles$u.container, _defineProperty({}, styles$u.dragging, dragging)),
5012
+ className: classNames(styles$v.container, _defineProperty({}, styles$v.dragging, dragging)),
3978
5013
  "aria-label": t('pageflow_scrolled.public.player_controls.progress', {
3979
5014
  currentTime: formatTime(currentTime),
3980
5015
  duration: formatTime(duration)
@@ -3984,7 +5019,7 @@ function ProgressIndicators(_ref) {
3984
5019
  },
3985
5020
  /*#__PURE__*/
3986
5021
  React.createElement("div", {
3987
- className: styles$u.wrapper
5022
+ className: styles$v.wrapper
3988
5023
  },
3989
5024
  /*#__PURE__*/
3990
5025
  React.createElement(Measure, {
@@ -4003,20 +5038,20 @@ function ProgressIndicators(_ref) {
4003
5038
  },
4004
5039
  /*#__PURE__*/
4005
5040
  React.createElement("div", {
4006
- className: classNames(styles$u.draggable)
5041
+ className: classNames(styles$v.draggable)
4007
5042
  },
4008
5043
  /*#__PURE__*/
4009
5044
  React.createElement("div", {
4010
5045
  ref: measureRef,
4011
- className: styles$u.bars
5046
+ className: styles$v.bars
4012
5047
  },
4013
5048
  /*#__PURE__*/
4014
5049
  React.createElement("div", {
4015
- className: styles$u.background
5050
+ className: styles$v.background
4016
5051
  }),
4017
5052
  /*#__PURE__*/
4018
5053
  React.createElement("div", {
4019
- className: styles$u.loadingProgressBar,
5054
+ className: styles$v.loadingProgressBar,
4020
5055
  style: {
4021
5056
  width: toPercent(loadProgress)
4022
5057
  },
@@ -4024,7 +5059,7 @@ function ProgressIndicators(_ref) {
4024
5059
  }),
4025
5060
  /*#__PURE__*/
4026
5061
  React.createElement("div", {
4027
- className: styles$u.playProgressBar,
5062
+ className: styles$v.playProgressBar,
4028
5063
  style: {
4029
5064
  width: toPercent(playProgress)
4030
5065
  },
@@ -4032,7 +5067,7 @@ function ProgressIndicators(_ref) {
4032
5067
  }),
4033
5068
  /*#__PURE__*/
4034
5069
  React.createElement("div", {
4035
- className: styles$u.sliderHandle,
5070
+ className: styles$v.sliderHandle,
4036
5071
  style: {
4037
5072
  left: toPercent(playProgress)
4038
5073
  },
@@ -4047,8 +5082,8 @@ function toPercent(value) {
4047
5082
  return value > 0 ? value * 100 + '%' : 0;
4048
5083
  }
4049
5084
 
4050
- function _extends$6() {
4051
- _extends$6 = Object.assign || function (target) {
5085
+ function _extends$9() {
5086
+ _extends$9 = Object.assign || function (target) {
4052
5087
  for (var i = 1; i < arguments.length; i++) {
4053
5088
  var source = arguments[i];
4054
5089
 
@@ -4062,15 +5097,15 @@ function _extends$6() {
4062
5097
  return target;
4063
5098
  };
4064
5099
 
4065
- return _extends$6.apply(this, arguments);
5100
+ return _extends$9.apply(this, arguments);
4066
5101
  }
4067
5102
  var QualityIcon = (function (_ref) {
4068
5103
  var _ref$styles = _ref.styles,
4069
5104
  props = _objectWithoutProperties(_ref, ["styles"]);
4070
5105
 
4071
- return React.createElement("svg", _extends$6({
5106
+ return React.createElement("svg", _extends$9({
4072
5107
  xmlns: "http://www.w3.org/2000/svg",
4073
- viewBox: "0 0 24 24"
5108
+ viewBox: "-3 -3 30 30"
4074
5109
  }, props), React.createElement("path", {
4075
5110
  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"
4076
5111
  }));
@@ -4104,14 +5139,27 @@ function ClassicPlayerControls(props) {
4104
5139
  var _classNames;
4105
5140
 
4106
5141
  var darkBackground = useDarkBackground();
5142
+ var transparent = !props.standAlone && props.unplayed || props.isPlaying && props.inactive;
4107
5143
  return (
5144
+ /*#__PURE__*/
5145
+ React.createElement("div", {
5146
+ className: styles$t.container
5147
+ }, props.children, !props.standAlone &&
5148
+ /*#__PURE__*/
5149
+ React.createElement(BigPlayPauseButton, {
5150
+ unplayed: props.unplayed,
5151
+ isPlaying: props.isPlaying,
5152
+ lastControlledVia: props.lastControlledVia,
5153
+ hideCursor: props.isPlaying && props.inactive,
5154
+ onClick: props.onPlayerClick
5155
+ }),
4108
5156
  /*#__PURE__*/
4109
5157
  React.createElement("div", {
4110
5158
  onFocus: props.onFocus,
4111
5159
  onBlur: props.onBlur,
4112
5160
  onMouseEnter: props.onMouseEnter,
4113
5161
  onMouseLeave: props.onMouseLeave,
4114
- className: classNames(styles$t.controlBarContainer, darkBackground ? styles$t.darkBackground : styles$t.lightBackground, (_classNames = {}, _defineProperty(_classNames, styles$t.inset, props.inset), _defineProperty(_classNames, styles$t.transparent, props.isPlaying && props.inset && props.inactive), _classNames))
5162
+ className: classNames(styles$t.controlBarContainer, darkBackground ? styles$t.darkBackground : styles$t.lightBackground, (_classNames = {}, _defineProperty(_classNames, styles$t.inset, !props.standAlone), _defineProperty(_classNames, styles$t.transparent, transparent), _classNames))
4115
5163
  },
4116
5164
  /*#__PURE__*/
4117
5165
  React.createElement(PlayPauseButton, {
@@ -4142,7 +5190,7 @@ function ClassicPlayerControls(props) {
4142
5190
  items: props.qualityMenuItems,
4143
5191
  onItemClick: props.onQualityMenuItemClick,
4144
5192
  subMenuExpanded: props.qualityMenuExpanded
4145
- }))
5193
+ })))
4146
5194
  );
4147
5195
  }
4148
5196
 
@@ -4181,7 +5229,6 @@ function MediaPlayerControls(props) {
4181
5229
  return (
4182
5230
  /*#__PURE__*/
4183
5231
  React.createElement(PlayerControls, Object.assign({
4184
- inset: props.configuration.position === 'full' || props.configuration.caption,
4185
5232
  type: props.type,
4186
5233
  variant: props.configuration.playerControlVariant,
4187
5234
  waveformColor: props.configuration.waveformColor,
@@ -4189,12 +5236,14 @@ function MediaPlayerControls(props) {
4189
5236
  currentTime: playerState.scrubbingAt !== undefined ? playerState.scrubbingAt : playerState.currentTime,
4190
5237
  bufferedEnd: playerState.bufferedEnd,
4191
5238
  duration: playerState.duration,
4192
- isPlaying: playerState.isPlaying,
4193
- inactive: playerState.userIdle && (!focusOutlineVisible || !playerState.focusInsideControls) && !playerState.userHoveringControls,
5239
+ isPlaying: playerState.shouldPlay,
5240
+ unplayed: playerState.unplayed,
5241
+ lastControlledVia: playerState.lastControlledVia,
5242
+ inactive: props.autoHide && (playerState.userIdle || !playerState.userHovering) && (!focusOutlineVisible || !playerState.focusInsideControls) && !playerState.userHoveringControls,
4194
5243
  onFocus: playerActions.focusEnteredControls,
4195
5244
  onBlur: playerActions.focusLeftControls,
4196
- onMouseEnter: playerActions.controlsEntered,
4197
- onMouseLeave: playerActions.controlsLeft,
5245
+ onMouseEnter: playerActions.mouseEnteredControls,
5246
+ onMouseLeave: playerActions.mouseLeftControls,
4198
5247
  play: playerActions.playBlessed,
4199
5248
  pause: playerActions.pause,
4200
5249
  scrubTo: playerActions.scrubTo,
@@ -4233,17 +5282,16 @@ function getTextTracksMenuItems(textTracks, t) {
4233
5282
  })));
4234
5283
  }
4235
5284
 
4236
- function VideoPlayerControls(props) {
5285
+ function VideoPlayerControls(_ref) {
5286
+ var videoFile = _ref.videoFile,
5287
+ props = _objectWithoutProperties(_ref, ["videoFile"]);
5288
+
4237
5289
  var _useVideoQualitySetti = useVideoQualitySetting(),
4238
5290
  _useVideoQualitySetti2 = _slicedToArray(_useVideoQualitySetti, 2),
4239
5291
  activeQuality = _useVideoQualitySetti2[0],
4240
5292
  setActiveQuality = _useVideoQualitySetti2[1];
4241
5293
 
4242
- var file = useFile({
4243
- collectionName: 'videoFiles',
4244
- permaId: props.videoFilePermaId
4245
- });
4246
- var availableQualities = useAvailableQualities(file);
5294
+ var availableQualities = useAvailableQualities(videoFile);
4247
5295
 
4248
5296
  var _useI18n = useI18n(),
4249
5297
  t = _useI18n.t;
@@ -4251,7 +5299,8 @@ function VideoPlayerControls(props) {
4251
5299
  return (
4252
5300
  /*#__PURE__*/
4253
5301
  React.createElement(MediaPlayerControls, Object.assign({}, props, {
4254
- file: file,
5302
+ file: videoFile,
5303
+ autoHide: true,
4255
5304
  qualityMenuItems: getQualityMenuItems(availableQualities, activeQuality, t),
4256
5305
  onQualityMenuItemClick: setActiveQuality
4257
5306
  }))
@@ -4271,20 +5320,19 @@ function getQualityMenuItems(availableQualities, activeQuality, t) {
4271
5320
  });
4272
5321
  }
4273
5322
 
4274
- function AudioPlayerControls(props) {
4275
- var file = useFile({
4276
- collectionName: 'audioFiles',
4277
- permaId: props.audioFilePermaId
4278
- });
5323
+ function AudioPlayerControls(_ref) {
5324
+ var audioFile = _ref.audioFile,
5325
+ props = _objectWithoutProperties(_ref, ["audioFile"]);
5326
+
4279
5327
  return (
4280
5328
  /*#__PURE__*/
4281
5329
  React.createElement(MediaPlayerControls, Object.assign({}, props, {
4282
- file: file
5330
+ file: audioFile
4283
5331
  }))
4284
5332
  );
4285
5333
  }
4286
5334
 
4287
- var styles$v = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
5335
+ var styles$w = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
4288
5336
 
4289
5337
  function SectionThumbnail(_ref) {
4290
5338
  var seed = _ref.seed,
@@ -4307,7 +5355,7 @@ function Inner(_ref2) {
4307
5355
  useEffect(function () {
4308
5356
  return subscribe(dispatch);
4309
5357
  }, [subscribe, dispatch]);
4310
- var section = useSectionStructure({
5358
+ var section = useSection({
4311
5359
  sectionPermaId: sectionPermaId
4312
5360
  });
4313
5361
 
@@ -4329,18 +5377,18 @@ function Inner(_ref2) {
4329
5377
  /*#__PURE__*/
4330
5378
  React.createElement("div", {
4331
5379
  ref: measureRef,
4332
- className: styles$v.crop
5380
+ className: styles$w.crop
4333
5381
  },
4334
5382
  /*#__PURE__*/
4335
5383
  React.createElement("div", {
4336
- className: styles$v.scale
5384
+ className: styles$w.scale
4337
5385
  },
4338
5386
  /*#__PURE__*/
4339
5387
  React.createElement("div", {
4340
5388
  className: entryStyles.Entry
4341
5389
  },
4342
5390
  /*#__PURE__*/
4343
- React.createElement(Section, Object.assign({
5391
+ React.createElement(ConnectedSection, Object.assign({
4344
5392
  state: "active"
4345
5393
  }, section, {
4346
5394
  transition: "preview"
@@ -4352,7 +5400,7 @@ function Inner(_ref2) {
4352
5400
  return (
4353
5401
  /*#__PURE__*/
4354
5402
  React.createElement("div", {
4355
- className: styles$v.root
5403
+ className: styles$w.root
4356
5404
  }, "Not found.")
4357
5405
  );
4358
5406
  }
@@ -4371,26 +5419,60 @@ var EditableInlineText = withInlineEditingAlternative('EditableInlineText', func
4371
5419
  return 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;
4372
5420
  });
4373
5421
 
5422
+ function textColorForBackgroundColor(hex) {
5423
+ return invert(hex, true);
5424
+ }
5425
+
4374
5426
  function registerTemplateWidgetType (typeName, callback) {
4375
5427
  var element = document.getElementById('template-widget-container');
4376
5428
  callback(element);
4377
5429
  }
4378
5430
 
4379
5431
  var editMode = typeof window !== 'undefined' && window.location.pathname.indexOf('/editor/entries') === 0;
4380
- var withShadowClassName = styles$l.withShadow;
4381
-
4382
- global.pageflowScrolledRender = function (seed) {
4383
- setupI18n(seed.i18n);
4384
- browser.detectFeatures().then(function () {
4385
- if (editMode) {
4386
- loadInlineEditingComponents().then(function () {
4387
- return render(seed);
4388
- });
4389
- } else {
4390
- render(seed);
4391
- }
4392
- });
4393
- };
5432
+ var withShadowClassName = styles$j.withShadow;
5433
+
5434
+ global.pageflowScrolledRender =
5435
+ /*#__PURE__*/
5436
+ function () {
5437
+ var _ref = _asyncToGenerator(
5438
+ /*#__PURE__*/
5439
+ regenerator.mark(function _callee(seed) {
5440
+ return regenerator.wrap(function _callee$(_context) {
5441
+ while (1) {
5442
+ switch (_context.prev = _context.next) {
5443
+ case 0:
5444
+ setupI18n(seed.i18n);
5445
+ _context.next = 3;
5446
+ return browser.detectFeatures();
5447
+
5448
+ case 3:
5449
+ _context.next = 5;
5450
+ return loadDashUnlessHlsSupported();
5451
+
5452
+ case 5:
5453
+ if (!editMode) {
5454
+ _context.next = 8;
5455
+ break;
5456
+ }
5457
+
5458
+ _context.next = 8;
5459
+ return loadInlineEditingComponents();
5460
+
5461
+ case 8:
5462
+ render(seed);
5463
+
5464
+ case 9:
5465
+ case "end":
5466
+ return _context.stop();
5467
+ }
5468
+ }
5469
+ }, _callee);
5470
+ }));
5471
+
5472
+ return function (_x) {
5473
+ return _ref.apply(this, arguments);
5474
+ };
5475
+ }();
4394
5476
 
4395
5477
  function render(seed) {
4396
5478
  if (editMode) {
@@ -4408,8 +5490,8 @@ function render(seed) {
4408
5490
  }
4409
5491
  }
4410
5492
 
4411
- function Root(_ref) {
4412
- var seed = _ref.seed;
5493
+ function Root(_ref2) {
5494
+ var seed = _ref2.seed;
4413
5495
  return (
4414
5496
  /*#__PURE__*/
4415
5497
  React.createElement(RootProviders, {
@@ -4422,4 +5504,4 @@ function Root(_ref) {
4422
5504
  );
4423
5505
  }
4424
5506
 
4425
- export { Atmo, AtmoContext, AtmoProvider, AudioPlayer, AudioPlayerControls, ClassicPlayerControls, EditableInlineText, Entry, Figure, Image, MediaInteractionTracking, MediaPlayer, MediaPlayerControls, PhonePlatformProvider, PlayerControls, Root, RootProviders, SectionThumbnail, VideoPlayer, VideoPlayerControls, ViewportDependentPillarBoxes, WaveformPlayerControls, getAvailableTransitionNames, getInitialPlayerState, getTransitionNames, playerStateReducer, processSources, registerTemplateWidgetType, useAtmo, useDarkBackground, usePlayerState, withShadowClassName };
5507
+ export { Atmo, AtmoContext, AtmoProvider, AudioPlayer, AudioPlayerControls, ClassicPlayerControls, EditableInlineText, Entry, Figure, Image, MediaInteractionTracking, MediaPlayer, MediaPlayerControls, PhonePlatformProvider, PlayerControls, Root, RootProviders, SectionThumbnail, OptIn as ThirdPartyOptIn, OptOutInfo as ThirdPartyOptOutInfo, VideoPlayer, VideoPlayerControls, ViewportDependentPillarBoxes, WaveformPlayerControls, getAvailableTransitionNames, getInitialPlayerState, getTransitionNames, playerStateReducer, processSources, registerTemplateWidgetType, textColorForBackgroundColor, useAtmo, useAudioFocus, useDarkBackground, useMediaMuted, usePlayerState, withShadowClassName };