Remove Recording Feature Menu Item when unsupported (#7604)

e2e_playwright/main_menu_test.py

@@ -0,0 +1,24 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from playwright.sync_api import Page, expect
+
+from e2e_playwright.conftest import ImageCompareFunction
+
+
+def test_main_menu_images(themed_app: Page, assert_snapshot: ImageCompareFunction):
+    themed_app.get_by_test_id("stMainMenu").click()
+
+    element = themed_app.get_by_test_id("stMainMenuPopover")
+    assert_snapshot(element, name="main_menu")

frontend/app/src/components/MainMenu/MainMenu.test.tsx

@@ -112,7 +112,6 @@ describe("MainMenu", () => {
       "Rerun",
       "Settings",
       "Print",
-      "Record a screencast",
       "View app source",
       "Report bug with app",
       "About",
@@ -136,7 +135,6 @@ describe("MainMenu", () => {
       "Rerun",
       "Settings",
       "Print",
-      "Record a screencast",
       "About",
       "Developer options",
       "Clear cache",
@@ -161,15 +159,9 @@ describe("MainMenu", () => {
     const coreMenu = screen.getAllByTestId("main-menu-list")[0]
 
     const coreMenuOptions = within(coreMenu).getAllByRole("option")
-    expect(coreMenuOptions).toHaveLength(5)
+    expect(coreMenuOptions).toHaveLength(4)
 
-    const expectedLabels = [
-      "Rerun",
-      "Settings",
-      "Print",
-      "Record a screencast",
-      "About",
-    ]
+    const expectedLabels = ["Rerun", "Settings", "Print", "About"]
     coreMenuOptions.forEach((option, index) => {
       expect(option).toHaveTextContent(expectedLabels[index])
     })
@@ -218,15 +210,9 @@ describe("MainMenu", () => {
     expect(subMenus).toHaveLength(1)
 
     const coreMenuOptions = within(subMenus[0]).getAllByRole("option")
-    expect(coreMenuOptions).toHaveLength(5)
+    expect(coreMenuOptions).toHaveLength(4)
 
-    const expectedLabels = [
-      "Rerun",
-      "Settings",
-      "Print",
-      "Record a screencast",
-      "About",
-    ]
+    const expectedLabels = ["Rerun", "Settings", "Print", "About"]
     coreMenuOptions.forEach((option, index) => {
       expect(option).toHaveTextContent(expectedLabels[index])
     })

frontend/app/src/components/MainMenu/MainMenu.tsx

@@ -30,6 +30,7 @@ import {
   Config,
   PageConfig,
 } from "@streamlit/lib"
+import ScreenCastRecorder from "@streamlit/app/src/util/ScreenCastRecorder"
 import { SegmentMetricsManager } from "@streamlit/app/src/SegmentMetricsManager"
 
 import {
@@ -310,7 +311,9 @@ function getPreferredMenuOrder(
     coreMenuItems.settings,
     coreMenuItems.DIVIDER,
     coreMenuItems.print,
-    coreMenuItems.recordScreencast,
+    ...(ScreenCastRecorder.isSupportedBrowser()
+      ? [coreMenuItems.recordScreencast]
+      : []),
     coreMenuItems.DIVIDER,
     coreMenuItems.report,
     coreMenuItems.community,

frontend/app/src/util/ScreenCastRecorder.ts

@@ -36,12 +36,17 @@ class ScreenCastRecorder {
 
   /** True if the current browser likely supports screencasts. */
   public static isSupportedBrowser(): boolean {
-    return (
-      navigator.mediaDevices != null &&
-      navigator.mediaDevices.getUserMedia != null &&
-      navigator.mediaDevices.getDisplayMedia != null &&
-      MediaRecorder.isTypeSupported(BLOB_TYPE)
-    )
+    try {
+      return (
+        navigator.mediaDevices != null &&
+        navigator.mediaDevices.getUserMedia != null &&
+        navigator.mediaDevices.getDisplayMedia != null &&
+        MediaRecorder.isTypeSupported(BLOB_TYPE)
+      )
+    } catch (e) {
+      // In the event of an error, assume it won't support screencasts
+      return false
+    }
   }
 
   constructor({ recordAudio, onErrorOrStop }: ScreenCastRecorderOptions) {