feat(nds): improve fullscreen button and add volume slider

app/pages/index.vue

@@ -23,20 +23,9 @@ const bottomScreen = useTemplateRef("bottomScreen");
 const topScreenCanvas = computed(() => topScreen.value?.canvas ?? null);
 const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
 
-const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);
 const isTouchDevice = () =>
   "ontouchstart" in window || navigator.maxTouchPoints > 0;
 
-const showFullscreenBtn = ref(true);
-
-const toggleFullscreen = () => {
-  if (document.fullscreenElement) {
-    document.exitFullscreen();
-  } else {
-    document.documentElement.requestFullscreen();
-  }
-};
-
 const windowSize = useWindowSize();
 
 watch([windowSize.width, windowSize.height], ([width, height]) => {
@@ -116,10 +105,6 @@ watch(
 );
 
 onMounted(async () => {
-  if (isIOS()) {
-    showFullscreenBtn.value = false;
-  }
-
   if (isTouchDevice()) {
     const landscape = window.matchMedia("(orientation: landscape)");
 
@@ -229,22 +214,7 @@ useKeyDown(async ({ key, repeated }) => {
       ?
     </button>
 
-    <button
-      v-if="showFullscreenBtn"
-      class="fullscreen-btn"
-      @click="toggleFullscreen"
-    >
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-      >
-        <path
-          d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
-        />
-      </svg>
-    </button>
+    <Controls />
   </div>
 </template>
 
@@ -270,23 +240,4 @@ useKeyDown(async ({ key, repeated }) => {
 .help-btn:hover {
   opacity: 1;
 }
-
-.fullscreen-btn {
-  position: fixed;
-  bottom: 16px;
-  right: 16px;
-  width: 32px;
-  height: 32px;
-  padding: 4px;
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: opacity 0.2s;
-}
-
-.fullscreen-btn:hover {
-  opacity: 1;
-}
 </style>