Fix #2200 - Cleaned up manual tests + added media back (#2201)

core/package.json

@@ -43,8 +43,8 @@
         "build:3rd-party": "node rollup/3rd-party.cjs",
         "build:tests-index": "node rollup/build_test_index.cjs",
         "clean:3rd-party": "rm src/3rd-party/*.js && rm src/3rd-party/*.css",
-        "test:integration": "static-handler --coi . 2>/dev/null & SH_PID=$!; EXIT_CODE=0; playwright test tests/js_tests.spec.js tests/py_tests.spec.js || EXIT_CODE=$?; kill $SH_PID 2>/dev/null; exit $EXIT_CODE",
-        "test:ws": "bun tests/ws/index.js & playwright test tests/ws.spec.js",
+        "test:integration": "npm run test:ws; static-handler --coi . 2>/dev/null & SH_PID=$!; EXIT_CODE=0; playwright test tests/js_tests.spec.js tests/py_tests.spec.js || EXIT_CODE=$?; kill $SH_PID 2>/dev/null; exit $EXIT_CODE",
+        "test:ws": "bun tests/javascript/ws/index.js & playwright test tests/javascript/ws/index.spec.js",
         "dev": "node dev.cjs",
         "release": "npm run build && npm run zip",
         "size": "echo -e \"\\033[1mdist/*.js file size\\033[0m\"; for js in $(ls dist/*.js); do cat $js | brotli > ._; echo -e \"\\033[2m$js:\\033[0m $(du -h --apparent-size ._ | sed -e 's/[[:space:]]*._//')\"; rm ._; done",

core/src/stdlib/pyscript/media.py

@@ -0,0 +1,91 @@
+from pyscript import window
+from pyscript.ffi import to_js
+
+
+class Device:
+    """Device represents a media input or output device, such as a microphone,
+    camera, or headset.
+    """
+
+    def __init__(self, device):
+        self._dom_element = device
+
+    @property
+    def id(self):
+        return self._dom_element.deviceId
+
+    @property
+    def group(self):
+        return self._dom_element.groupId
+
+    @property
+    def kind(self):
+        return self._dom_element.kind
+
+    @property
+    def label(self):
+        return self._dom_element.label
+
+    def __getitem__(self, key):
+        return getattr(self, key)
+
+    @classmethod
+    async def load(cls, audio=False, video=True):
+        """Load the device stream."""
+        options = window.Object.new()
+        options.audio = audio
+        if isinstance(video, bool):
+            options.video = video
+        else:
+            # TODO: Think this can be simplified but need to check it on the pyodide side
+
+            # TODO: this is pyodide specific. shouldn't be!
+            options.video = window.Object.new()
+            for k in video:
+                setattr(options.video, k, to_js(video[k]))
+
+        stream = await window.navigator.mediaDevices.getUserMedia(options)
+        return stream
+
+    async def get_stream(self):
+        key = self.kind.replace("input", "").replace("output", "")
+        options = {key: {"deviceId": {"exact": self.id}}}
+
+        return await self.load(**options)
+
+
+async def list_devices() -> list[dict]:
+    """
+    Return the list of the currently available media input and output devices,
+    such as microphones, cameras, headsets, and so forth.
+
+    Output:
+
+        list(dict) - list of dictionaries representing the available media devices.
+            Each dictionary has the following keys:
+            * deviceId: a string that is an identifier for the represented device
+                that is persisted across sessions. It is un-guessable by other
+                applications and unique to the origin of the calling application.
+                It is reset when the user clears cookies (for Private Browsing, a
+                different identifier is used that is not persisted across sessions).
+
+            * groupId: a string that is a group identifier. Two devices have the same
+                group identifier if they belong to the same physical device — for
+                example a monitor with both a built-in camera and a microphone.
+
+            * kind: an enumerated value that is either "videoinput", "audioinput"
+                or "audiooutput".
+
+            * label: a string describing this device (for example "External USB
+                Webcam").
+
+    Note: the returned list will omit any devices that are blocked by the document
+    Permission Policy: microphone, camera, speaker-selection (for output devices),
+    and so on. Access to particular non-default devices is also gated by the
+    Permissions API, and the list will omit devices for which the user has not
+    granted explicit permission.
+    """
+    # https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices
+    return [
+        Device(obj) for obj in await window.navigator.mediaDevices.enumerateDevices()
+    ]

core/tests/index.html

@@ -14,5 +14,5 @@
             a:hover { opacity: 1; }
         </style>
     </head>
-    <body><ul><li><strong><a href="./config/index.html">config</a></strong><ul><li><a href="./config/ambiguous-config.html">ambiguous-config<small>.html</small></a></li><li><a href="./config/same-config.html">same-config<small>.html</small></a></li><li><a href="./config/too-many-config.html">too-many-config<small>.html</small></a></li><li><a href="./config/too-many-py-config.html">too-many-py-config<small>.html</small></a></li></ul></li><li><strong><a href="./issue-7015/index.html">issue-7015</a></strong></li><li><strong><span>javascript</span></strong><ul><li><a href="./javascript/async-listener.html">async-listener<small>.html</small></a></li><li><a href="./javascript/config-url.html">config-url<small>.html</small></a></li><li><a href="./javascript/config_type.html">config_type<small>.html</small></a></li><li><strong><a href="./javascript/fetch/index.html">fetch</a></strong></li><li><a href="./javascript/ffi.html">ffi<small>.html</small></a></li><li><a href="./javascript/hooks.html">hooks<small>.html</small></a></li><li><strong><a href="./javascript/issue-2093/index.html">issue-2093</a></strong></li><li><a href="./javascript/js-storage.html">js-storage<small>.html</small></a></li><li><a href="./javascript/js_modules.html">js_modules<small>.html</small></a></li><li><strong><a href="./javascript/loader/index.html">loader</a></strong></li><li><a href="./javascript/mpy.html">mpy<small>.html</small></a></li><li><a href="./javascript/py-terminal-main.html">py-terminal-main<small>.html</small></a></li><li><a href="./javascript/py-terminal-worker.html">py-terminal-worker<small>.html</small></a></li><li><a href="./javascript/py-terminal.html">py-terminal<small>.html</small></a></li><li><a href="./javascript/py-terminals.html">py-terminals<small>.html</small></a></li><li><a href="./javascript/storage.html">storage<small>.html</small></a></li><li><strong><a href="./javascript/workers/index.html">workers</a></strong><ul><li><a href="./javascript/workers/named.html">named<small>.html</small></a></li></ul></li></ul></li><li><strong><a href="./manual/index.html">manual</a></strong><ul><li><a href="./manual/all-done.html">all-done<small>.html</small></a></li><li><a href="./manual/async.html">async<small>.html</small></a></li><li><a href="./manual/camera.html">camera<small>.html</small></a></li><li><a href="./manual/click.html">click<small>.html</small></a></li><li><a href="./manual/code-a-part.html">code-a-part<small>.html</small></a></li><li><a href="./manual/combo.html">combo<small>.html</small></a></li><li><a href="./manual/config.html">config<small>.html</small></a></li><li><a href="./manual/create-element.html">create-element<small>.html</small></a></li><li><a href="./manual/dialog.html">dialog<small>.html</small></a></li><li><a href="./manual/display.html">display<small>.html</small></a></li><li><a href="./manual/error.html">error<small>.html</small></a></li><li><a href="./manual/html-decode.html">html-decode<small>.html</small></a></li><li><a href="./manual/input.html">input<small>.html</small></a></li><li><a href="./manual/interpreter.html">interpreter<small>.html</small></a></li><li><a href="./manual/multi.html">multi<small>.html</small></a></li><li><a href="./manual/multiple-editors.html">multiple-editors<small>.html</small></a></li><li><a href="./manual/no-error.html">no-error<small>.html</small></a></li><li><a href="./manual/py-editor-failure.html">py-editor-failure<small>.html</small></a></li><li><a href="./manual/py-editor.html">py-editor<small>.html</small></a></li><li><a href="./manual/py_modules.html">py_modules<small>.html</small></a></li><li><a href="./manual/split-config.html">split-config<small>.html</small></a></li><li><a href="./manual/submit.html">submit<small>.html</small></a></li><li><a href="./manual/target.html">target<small>.html</small></a></li><li><a href="./manual/test_display_HTML.html">test_display_HTML<small>.html</small></a></li><li><a href="./manual/test_when.html">test_when<small>.html</small></a></li><li><a href="./manual/worker.html">worker<small>.html</small></a></li></ul></li><li><strong><a href="./no_sab/index.html">no_sab</a></strong></li><li><strong><a href="./piratical/index.html">piratical</a></strong></li><li><strong><a href="./py-editor/index.html">py-editor</a></strong><ul><li><a href="./py-editor/issue-2056.html">issue-2056<small>.html</small></a></li><li><a href="./py-editor/service-worker.html">service-worker<small>.html</small></a></li></ul></li><li><strong><a href="./py-terminals/index.html">py-terminals</a></strong><ul><li><a href="./py-terminals/no-repl.html">no-repl<small>.html</small></a></li><li><a href="./py-terminals/repl.html">repl<small>.html</small></a></li></ul></li><li><strong><a href="./python/index.html">python</a></strong></li><li><strong><a href="./service-worker/index.html">service-worker</a></strong></li></ul></body>
+    <body><ul><li><strong><a href="./config/index.html">config</a></strong><ul><li><a href="./config/ambiguous-config.html">ambiguous-config<small>.html</small></a></li><li><a href="./config/same-config.html">same-config<small>.html</small></a></li><li><a href="./config/too-many-config.html">too-many-config<small>.html</small></a></li><li><a href="./config/too-many-py-config.html">too-many-py-config<small>.html</small></a></li></ul></li><li><strong><a href="./issue-7015/index.html">issue-7015</a></strong></li><li><strong><span>javascript</span></strong><ul><li><a href="./javascript/async-listener.html">async-listener<small>.html</small></a></li><li><a href="./javascript/config-url.html">config-url<small>.html</small></a></li><li><a href="./javascript/config_type.html">config_type<small>.html</small></a></li><li><strong><a href="./javascript/fetch/index.html">fetch</a></strong></li><li><a href="./javascript/ffi.html">ffi<small>.html</small></a></li><li><a href="./javascript/hooks.html">hooks<small>.html</small></a></li><li><strong><a href="./javascript/issue-2093/index.html">issue-2093</a></strong></li><li><a href="./javascript/js-storage.html">js-storage<small>.html</small></a></li><li><a href="./javascript/js_modules.html">js_modules<small>.html</small></a></li><li><strong><a href="./javascript/loader/index.html">loader</a></strong></li><li><a href="./javascript/mpy.html">mpy<small>.html</small></a></li><li><a href="./javascript/py-terminal-main.html">py-terminal-main<small>.html</small></a></li><li><a href="./javascript/py-terminal-worker.html">py-terminal-worker<small>.html</small></a></li><li><a href="./javascript/py-terminal.html">py-terminal<small>.html</small></a></li><li><a href="./javascript/py-terminals.html">py-terminals<small>.html</small></a></li><li><a href="./javascript/storage.html">storage<small>.html</small></a></li><li><strong><a href="./javascript/workers/index.html">workers</a></strong><ul><li><a href="./javascript/workers/named.html">named<small>.html</small></a></li></ul></li></ul></li><li><strong><a href="./manual/index.html">manual</a></strong><ul><li><a href="./manual/all-done.html">all-done<small>.html</small></a></li><li><a href="./manual/async.html">async<small>.html</small></a></li><li><a href="./manual/camera.html">camera<small>.html</small></a></li><li><a href="./manual/click.html">click<small>.html</small></a></li><li><a href="./manual/code-a-part.html">code-a-part<small>.html</small></a></li><li><a href="./manual/combo.html">combo<small>.html</small></a></li><li><a href="./manual/config.html">config<small>.html</small></a></li><li><a href="./manual/create-element.html">create-element<small>.html</small></a></li><li><a href="./manual/dialog.html">dialog<small>.html</small></a></li><li><a href="./manual/display.html">display<small>.html</small></a></li><li><a href="./manual/error.html">error<small>.html</small></a></li><li><a href="./manual/html-decode.html">html-decode<small>.html</small></a></li><li><a href="./manual/input.html">input<small>.html</small></a></li><li><a href="./manual/interpreter.html">interpreter<small>.html</small></a></li><li><a href="./manual/multi.html">multi<small>.html</small></a></li><li><a href="./manual/multiple-editors.html">multiple-editors<small>.html</small></a></li><li><a href="./manual/no-error.html">no-error<small>.html</small></a></li><li><strong><a href="./manual/no_sab/index.html">no_sab</a></strong></li><li><strong><a href="./manual/piratical/index.html">piratical</a></strong></li><li><a href="./manual/py-editor.html">py-editor<small>.html</small></a></li><li><a href="./manual/py-editor-failure.html">py-editor-failure<small>.html</small></a></li><li><strong><a href="./manual/py-terminals/index.html">py-terminals</a></strong><ul><li><a href="./manual/py-terminals/no-repl.html">no-repl<small>.html</small></a></li><li><a href="./manual/py-terminals/repl.html">repl<small>.html</small></a></li></ul></li><li><a href="./manual/py_modules.html">py_modules<small>.html</small></a></li><li><strong><a href="./manual/service-worker/index.html">service-worker</a></strong></li><li><a href="./manual/split-config.html">split-config<small>.html</small></a></li><li><a href="./manual/submit.html">submit<small>.html</small></a></li><li><a href="./manual/target.html">target<small>.html</small></a></li><li><a href="./manual/test_display_HTML.html">test_display_HTML<small>.html</small></a></li><li><a href="./manual/test_when.html">test_when<small>.html</small></a></li><li><a href="./manual/worker.html">worker<small>.html</small></a></li></ul></li><li><strong><a href="./python/index.html">python</a></strong></li></ul></body>
 </html>

core/tests/javascript/ws/index.html

@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="../../dist/core.css">
-  <script type="module" src="../../dist/core.js"></script>
+  <link rel="stylesheet" href="../../../dist/core.css">
+  <script type="module" src="../../../dist/core.js"></script>
 </head>
 <body>
   <script type="mpy" worker>

core/tests/javascript/ws/index.js

@@ -14,7 +14,7 @@ serve({
     const url = new URL(req.url);
     let { pathname } = url;
     if (pathname === '/') pathname = '/index.html';
-    else if (/^\/dist\//.test(pathname)) pathname = `/../..${pathname}`;
+    else if (/^\/dist\//.test(pathname)) pathname = `/../../..${pathname}`;
     else if (pathname === '/favicon.ico')
       return new Response('Not Found', { status: 404 });
     const response = new Response(file(`${dir}${pathname}`));

core/tests/manual/camera.html

@@ -8,7 +8,7 @@
   <script type="module" src="../../dist/core.js"></script>
 </head>
 <body>
-  <script type="py" src="camera.py" async></script>
+  <script type="mpy" src="camera.py" async></script>
 
   <label for="cars">Choose a device:</label>
 

core/tests/manual/camera.py

@@ -1,9 +1,8 @@
-from pyodide.ffi import create_proxy
-from pyscript import display, document, when, window
-from pyweb import media, pydom
+from pyscript import display, document, media, when, window
+from pyscript.web import page
 
-devicesSelect = pydom["#devices"][0]
-video = pydom["video"][0]
+devicesSelect = page["#devices"][0]
+video = page["video"][0]
 devices = {}
 
 
@@ -20,7 +19,7 @@ async def list_media_devices(event=None):
 async def connect_to_device(e):
     """Connect to the selected device."""
     device = devices[devicesSelect.value]
-    video._js.srcObject = await device.get_stream()
+    video.srcObject = await device.get_stream()
 
 
 @when("click", "#snap")

core/tests/manual/config/ambiguous-config.html

@@ -9,8 +9,8 @@
                 document.body.innerHTML += `<p>${message}</p>`;
             });
         </script>
-        <link rel="stylesheet" href="../../dist/core.css">
-        <script type="module" src="../../dist/core.js"></script>
+        <link rel="stylesheet" href="../../../dist/core.css">
+        <script type="module" src="../../../dist/core.js"></script>
     </head>
     <body>
         <py-config>name = "first"</py-config>

core/tests/manual/config/same-config.html

@@ -9,8 +9,8 @@
                 document.body.innerHTML += `<p>${message}</p>`;
             });
         </script>
-        <link rel="stylesheet" href="../../dist/core.css">
-        <script type="module" src="../../dist/core.js"></script>
+        <link rel="stylesheet" href="../../../dist/core.css">
+        <script type="module" src="../../../dist/core.js"></script>
     </head>
     <body>
         OK

core/tests/manual/config/too-many-config.html

@@ -9,8 +9,8 @@
                 document.body.innerHTML += `<p>${message}</p>`;
             });
         </script>
-        <link rel="stylesheet" href="../../dist/core.css">
-        <script type="module" src="../../dist/core.js"></script>
+        <link rel="stylesheet" href="../../../dist/core.css">
+        <script type="module" src="../../../dist/core.js"></script>
     </head>
     <body>
         <script type="py" config="first.toml"></script>

core/tests/manual/config/too-many-py-config.html

@@ -9,8 +9,8 @@
                 document.body.innerHTML += `<p>${message}</p>`;
             });
         </script>
-        <link rel="stylesheet" href="../../dist/core.css">
-        <script type="module" src="../../dist/core.js"></script>
+        <link rel="stylesheet" href="../../../dist/core.css">
+        <script type="module" src="../../../dist/core.js"></script>
     </head>
     <body>
         <py-config>name = "first"</py-config>

core/tests/manual/input.html

@@ -11,11 +11,11 @@
         <script type="module" src="../../dist/core.js"></script>
     </head>
     <body>
-        <py-script>
-            input("what's your name?")
+        <py-script worker terminal>
+            print(input("what's your name? "))
         </py-script>
-        <mpy-script>
-            input("what's your name?")
+        <mpy-script worker terminal>
+            print(input("what's your name? "))
         </mpy-script>
     </body>
 </html>

core/tests/manual/interpreter.html

@@ -8,7 +8,7 @@
     <script type="module" src="../../dist/core.js"></script>
 </head>
 <body>
-    <script type="py" config='{"interpreter":"https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.mjs"}' worker>
+    <script type="py" config='{"interpreter":"https://cdn.jsdelivr.net/pyodide/v0.26.0/full/pyodide.mjs"}' worker>
       import pyodide
       print(pyodide.__version__)
     </script>

core/tests/manual/issue-7015/index.html

@@ -8,7 +8,7 @@
         <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.5.0.min.js"></script>
         <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.5.0.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/panel.min.js"></script>
-        <script type="module" src="../../dist/core.js"></script>
+        <script type="module" src="../../../dist/core.js"></script>
     </head>
     <body>
       <script type="py" src="main.py" config="config.toml" worker></script>

core/tests/manual/no_sab/index.html

@@ -3,9 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="../../dist/core.css">
+  <link rel="stylesheet" href="../../../dist/core.css">
   <script type="module">
-    import { PyWorker } from '../../dist/core.js';
+    import { PyWorker } from '../../../dist/core.js';
     const { sync } = await PyWorker(
       './worker.py',
       {
@@ -18,6 +18,8 @@
     document.documentElement.classList.add(
       await sync.get_class()
     );
+
+    document.body.textContent = await sync.get_class();
   </script>
 </head>
 </html>

core/tests/manual/piratical/index.html

@@ -4,8 +4,8 @@
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,initial-scale=1" />
       <title>Arrr - Piratical PyScript</title>
-      <link rel="stylesheet" href="../../dist/core.css" />
-      <script type="module" src="../../dist/core.js"></script>
+      <link rel="stylesheet" href="../../../dist/core.css" />
+      <script type="module" src="../../../dist/core.js"></script>
   </head>
   <body>
     <h1>Arrr</h1>

core/tests/manual/py-editor/index.html

@@ -3,9 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="../../dist/core.css">
+  <link rel="stylesheet" href="../../../dist/core.css">
   <script type="module">
-    import '../../dist/core.js';
+    import '../../../dist/core.js';
 
     addEventListener('mpy-editor', async ({ target }) => {
       if (target.hasAttribute('setup')) {

core/tests/manual/py-terminals/no-repl.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>PyTerminal Prompt: NO REPL</title>
-        <script type="module" src="../../dist/core.js"></script>
+        <script type="module" src="../../../dist/core.js"></script>
         <style>.xterm { padding: .5rem; }</style>
     </head>
     <body>

core/tests/manual/py-terminals/repl.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>PyTerminal Prompt: REPL</title>
-        <script type="module" src="../../dist/core.js"></script>
+        <script type="module" src="../../../dist/core.js"></script>
         <style>.xterm { padding: .5rem; }</style>
     </head>
     <body>

core/tests/manual/service-worker/index.html

@@ -4,8 +4,8 @@
   <title>Service Worker</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <link rel="stylesheet" href="../../dist/core.css">
-  <script type="module" src="../../dist/core.js"></script>
+  <link rel="stylesheet" href="../../../dist/core.css">
+  <script type="module" src="../../../dist/core.js"></script>
 </head>
 <body>
   <script type="mpy" service-worker="./sabayon.js" worker>

core/types/stdlib/pyscript.d.ts

@@ -7,6 +7,7 @@ declare namespace _default {
         "ffi.py": string;
         "flatted.py": string;
         "magic_js.py": string;
+        "media.py": string;
         "storage.py": string;
         "util.py": string;
         "web.py": string;