adjust SnackPlayer height and presentation (#3864)

Author: Simek

plugins/remark-snackplayer/package.json

@@ -24,7 +24,7 @@
     "unist-util-visit-parents": "^3.1.1"
   },
   "devDependencies": {
-    "remark": "^12.0.1",
-    "tape": "^5.0.1"
+    "remark": "^14.0.3",
+    "tape": "^5.7.0"
   }
 }

plugins/remark-snackplayer/src/index.js

@@ -52,8 +52,6 @@ async function toJsxNode(node) {
   const theme = params.theme || 'light';
   const preview = params.preview || 'true';
   const loading = params.loading || 'lazy';
-  const deviceAndroid = params.deviceAndroid || 'pixel4';
-  const deviceIos = params.deviceIos || 'iphone12';
 
   // Need help constructing this AST node?
   // Use the MDX Playground and explore what your output mdast should look like
@@ -72,8 +70,7 @@ async function toJsxNode(node) {
       attr('data-snack-theme', theme),
       attr('data-snack-preview', preview),
       attr('data-snack-loading', loading),
-      attr('data-snack-device-android', deviceAndroid),
-      attr('data-snack-device-ios', deviceIos),
+      attr('data-snack-device-frame', 'false'),
     ],
     children: [],
   };

plugins/remark-snackplayer/tests/index.js

@@ -8,13 +8,13 @@
 const path = require('path');
 const fs = require('fs');
 const test = require('tape');
-const remark = require('remark');
 const snackplayer = require('../');
 
 const read = name => fs.readFileSync(path.join(__dirname, name), 'utf8');
 const normalizeLineEndings = str => str.replace(/\r\n/g, '\n');
 
 test('remark-snackplayer', async t => {
+  const {remark} = await import('remark');
   const processor = remark().use(snackplayer);
 
   processor.process(read('markdown/test1.md'), (err, file) => {

plugins/remark-snackplayer/tests/output/output1.html

@@ -9,4 +9,5 @@
   data-snack-theme="light"
   data-snack-preview="true"
   data-snack-loading="lazy"
+  data-snack-device-frame="false"
 ></div>

plugins/remark-snackplayer/tests/output/output2.html

@@ -9,6 +9,7 @@
   data-snack-theme="light"
   data-snack-preview="true"
   data-snack-loading="lazy"
+  data-snack-device-frame="false"
 ></div>
 
 <div
@@ -22,4 +23,5 @@
   data-snack-theme="dark"
   data-snack-preview="false"
   data-snack-loading="eager"
+  data-snack-device-frame="false"
 ></div>

website/modules/snackPlayerInitializer.js

@@ -20,18 +20,15 @@ export default (() => {
   };
 
   const initSnackPlayers = () => {
-    // console.log('initSnackPlayers');
     updateSnacksTheme();
     window.ExpoSnack && window.ExpoSnack.initialize();
   };
 
   const setupTabPanelsMutationObservers = () => {
     const tabPanels = document.querySelectorAll('[role=tabpanel]');
-    // console.log('setupTabPanelsMutationObservers', {tabPanels});
     tabPanels.forEach(tabPanel => {
-      new MutationObserver((mutations, observer) => {
+      new MutationObserver(() => {
         initSnackPlayers();
-        // console.log('tabPanel MutationObserver triggered', {tabPanels});
       }).observe(tabPanel, {childList: true});
     });
   };
@@ -52,7 +49,7 @@ export default (() => {
   // Hacky, but no better solution for now
   // see https://github.com/expo/snack/blob/main/website/src/client/components/EmbedCode.tsx#L61
   const setupThemeSynchronization = () => {
-    new MutationObserver((mutations, observer) => {
+    new MutationObserver(() => {
       if ('ExpoSnack' in window) {
         document.querySelectorAll('.snack-player').forEach(container => {
           updateSnacksTheme();
@@ -73,9 +70,7 @@ export default (() => {
   setupThemeSynchronization();
 
   return {
-    onRouteDidUpdate({location}) {
-      // console.log('onRouteDidUpdate', {location});
-
+    onRouteDidUpdate() {
       initSnackPlayers();
       setupTabPanelsMutationObservers();
     },

website/src/css/customTheme.scss

@@ -1714,7 +1714,7 @@ html[data-theme="dark"] .docsRating {
 /* Snack Player */
 
 .snack-player {
-  height: 544px;
+  height: 635px;
   width: 100%;
   overflow: hidden;
   margin-bottom: 24px;