diff --git a/releases/next/css/react-native.css b/releases/next/css/react-native.css index a08679ffde4..2436c14019f 100644 --- a/releases/next/css/react-native.css +++ b/releases/next/css/react-native.css @@ -1557,3 +1557,18 @@ input#algolia-doc-search:focus { margin-bottom: 0; padding-bottom: 0; } + + +/** Web player **/ + +.web-player > iframe, .web-player > .prism { + display: none; +} + +.web-player.desktop > iframe { + display: block; +} + +.web-player.mobile > .prism { + display: block; +} diff --git a/releases/next/js/scripts.js b/releases/next/js/scripts.js index e59e8c1f4a6..52858cf703a 100644 --- a/releases/next/js/scripts.js +++ b/releases/next/js/scripts.js @@ -7,10 +7,29 @@ document.addEventListener('DOMContentLoaded', init); function init() { - if (isMobile()) { + var mobile = isMobile(); + + if (mobile) { document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTarget); } + var webPlayerList = document.querySelectorAll('.web-player'); + + // Either show interactive or static code block, depending on desktop or mobile + for (var i = 0; i < webPlayerList.length; ++i) { + webPlayerList[i].classList.add(mobile ? 'mobile' : 'desktop'); + + if (!mobile) { + + // Determine location to look up required assets + var assetRoot = encodeURIComponent(document.location.origin + '/react-native'); + + // Set iframe src. Do this dynamically so the iframe never loads on mobile. + var iframe = webPlayerList[i].querySelector('iframe'); + iframe.src = iframe.getAttribute('data-src') + '&assetRoot=' + assetRoot; + } + } + var backdrop = document.querySelector('.modal-backdrop'); if (!backdrop) return;