From 5b67fa748c9bd661cba17d38a4005e8da4300c5d Mon Sep 17 00:00:00 2001 From: ZacharyZcR Date: Thu, 25 Sep 2025 09:51:40 +0800 Subject: [PATCH] FIX: Enhance video playback and implement smart aspect ratio window sizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace ReactPlayer with native HTML5 video for better MP4 support - Add proper MIME type mapping for all video formats (mp4, webm, mkv, avi, mov, wmv, flv) - Implement smart window sizing based on media dimensions - Auto-adjust window size to match image/video aspect ratio with constraints - Add media dimension detection for images (naturalWidth/Height) and videos (videoWidth/Height) - Center windows automatically when resizing for media content - Apply intelligent scaling with max viewport limits (90% width, 80% height) - Preserve minimum window sizes and add padding for UI elements - Enhanced error handling and debug logging for video playback 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- package-lock.json | 482 +++++++++++++++++- package.json | 1 + .../components/DraggableWindow.tsx | 36 ++ .../File Manager/components/FileViewer.tsx | 93 +++- .../File Manager/components/FileWindow.tsx | 9 + 5 files changed, 609 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 30796236..6cb860a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -76,6 +76,7 @@ "react-i18next": "^15.7.3", "react-icons": "^5.5.0", "react-photo-view": "^1.2.7", + "react-player": "^3.3.3", "react-resizable-panels": "^3.0.3", "react-simple-keyboard": "^3.8.120", "react-xtermjs": "^1.0.10", @@ -2982,6 +2983,74 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/@mux/mux-data-google-ima": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@mux/mux-data-google-ima/-/mux-data-google-ima-0.2.8.tgz", + "integrity": "sha512-0ZEkHdcZ6bS8QtcjFcoJeZxJTpX7qRIledf4q1trMWPznugvtajCjCM2kieK/pzkZj1JM6liDRFs1PJSfVUs2A==", + "license": "MIT", + "dependencies": { + "mux-embed": "5.9.0" + } + }, + "node_modules/@mux/mux-player": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@mux/mux-player/-/mux-player-3.6.0.tgz", + "integrity": "sha512-yVWmTMJUoKNZZxsINFmz7ZUUR3GC+Qf7b6Qv2GTmUoYn14pO1aXywHLlMLDohstLIvdeOdh6F/WsD2/gDVSOmQ==", + "license": "MIT", + "dependencies": { + "@mux/mux-video": "0.27.0", + "@mux/playback-core": "0.31.0", + "media-chrome": "~4.13.1", + "player.style": "^0.2.0" + } + }, + "node_modules/@mux/mux-player-react": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@mux/mux-player-react/-/mux-player-react-3.6.0.tgz", + "integrity": "sha512-bh2Z1fQqNkKCNUMS/3VU6jL2iY22155ZSIyizfz+bVX0EYHqdsS/iG95iDYLPlzA8WPyIh+J210tme68e1qP+w==", + "license": "MIT", + "dependencies": { + "@mux/mux-player": "3.6.0", + "@mux/playback-core": "0.31.0", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0", + "react": "^17.0.2 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0", + "react-dom": "^17.0.2 || ^17.0.2-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@mux/mux-video": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@mux/mux-video/-/mux-video-0.27.0.tgz", + "integrity": "sha512-Oi142YAcPKrmHTG+eaWHWaE7ucMHeJwx1FXABbLM2hMGj9MQ7kYjsD5J3meFlvuyz5UeVDsPLHeUJgeBXUZovg==", + "license": "MIT", + "dependencies": { + "@mux/mux-data-google-ima": "0.2.8", + "@mux/playback-core": "0.31.0", + "castable-video": "~1.1.10", + "custom-media-element": "~1.4.5", + "media-tracks": "~0.3.3" + } + }, + "node_modules/@mux/playback-core": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/@mux/playback-core/-/playback-core-0.31.0.tgz", + "integrity": "sha512-VADcrtS4O6fQBH8qmgavS6h7v7amzy2oCguu1NnLaVZ3Z8WccNXcF0s7jPRoRDyXWGShgtVhypW2uXjLpkPxyw==", + "license": "MIT", + "dependencies": { + "hls.js": "~1.6.6", + "mux-embed": "^5.8.3" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4498,6 +4567,12 @@ "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==", "license": "MIT" }, + "node_modules/@svta/common-media-library": { + "version": "0.12.4", + "resolved": "https://registry.npmjs.org/@svta/common-media-library/-/common-media-library-0.12.4.tgz", + "integrity": "sha512-9EuOoaNmz7JrfGwjsrD9SxF9otU5TNMnbLu1yU4BeLK0W5cDxVXXR58Z89q9u2AnHjIctscjMTYdlqQ1gojTuw==", + "license": "Apache-2.0" + }, "node_modules/@swc/core": { "version": "1.13.5", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.13.5.tgz", @@ -5269,7 +5344,6 @@ "version": "19.1.12", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", - "devOptional": true, "license": "MIT", "dependencies": { "csstype": "^3.0.2" @@ -5752,6 +5826,16 @@ "react-dom": ">=17.0.0" } }, + "node_modules/@vimeo/player": { + "version": "2.29.0", + "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.29.0.tgz", + "integrity": "sha512-9JjvjeqUndb9otCCFd0/+2ESsLk7VkDE6sxOBy9iy2ukezuQbplVRi+g9g59yAurKofbmTi/KcKxBGO/22zWRw==", + "license": "MIT", + "dependencies": { + "native-promise-only": "0.8.1", + "weakmap-polyfill": "2.0.4" + } + }, "node_modules/@vitejs/plugin-react-swc": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.11.0.tgz", @@ -6536,6 +6620,45 @@ ], "license": "MIT" }, + "node_modules/bcp-47": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz", + "integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==", + "license": "MIT", + "dependencies": { + "is-alphabetical": "^2.0.0", + "is-alphanumerical": "^2.0.0", + "is-decimal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/bcp-47-match": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz", + "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/bcp-47-normalize": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz", + "integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==", + "license": "MIT", + "dependencies": { + "bcp-47": "^2.0.0", + "bcp-47-match": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/bcrypt-pbkdf": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", @@ -7128,6 +7251,24 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/castable-video": { + "version": "1.1.10", + "resolved": "https://registry.npmjs.org/castable-video/-/castable-video-1.1.10.tgz", + "integrity": "sha512-/T1I0A4VG769wTEZ8gWuy1Crn9saAfRTd1UYTb8xbOPlN78+zOi/1nU2dD5koNkfE5VWvgabkIqrGKmyNXOjSQ==", + "license": "MIT", + "dependencies": { + "custom-media-element": "~1.4.5" + } + }, + "node_modules/ce-la-react": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.3.1.tgz", + "integrity": "sha512-g0YwpZDPIwTwFumGTzNHcgJA6VhFfFCJkSNdUdC04br2UfU+56JDrJrJva3FZ7MToB4NDHAFBiPE/PZdNl1mQA==", + "license": "BSD-3-Clause", + "peerDependencies": { + "react": ">=17.0.0" + } + }, "node_modules/centra": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/centra/-/centra-2.7.0.tgz", @@ -7296,6 +7437,12 @@ "node": ">=4" } }, + "node_modules/cloudflare-video-element": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/cloudflare-video-element/-/cloudflare-video-element-1.3.4.tgz", + "integrity": "sha512-F9g+tXzGEXI6v6L48qXxr8vnR8+L6yy7IhpJxK++lpzuVekMHTixxH7/dzLuq6OacVGziU4RB5pzZYJ7/LYtJg==", + "license": "MIT" + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -7315,6 +7462,12 @@ "node": ">=0.10.0" } }, + "node_modules/codem-isoboxer": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/codem-isoboxer/-/codem-isoboxer-0.3.10.tgz", + "integrity": "sha512-eNk3TRV+xQMJ1PEj0FQGY8KD4m0GPxT487XJ+Iftm7mVa9WpPFDMWqPt+46buiP5j5Wzqe5oMIhqBcAeKfygSA==", + "license": "MIT" + }, "node_modules/codemirror": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz", @@ -7804,9 +7957,25 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true, "license": "MIT" }, + "node_modules/custom-media-element": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/custom-media-element/-/custom-media-element-1.4.5.tgz", + "integrity": "sha512-cjrsQufETwxjvwZbYbKBCJNvmQ2++G9AvT45zDi7NXL9k2PdVcs2h0jQz96J6G4TMKRCcEsoJ+QTgQD00Igtjw==", + "license": "MIT" + }, + "node_modules/dash-video-element": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/dash-video-element/-/dash-video-element-0.2.0.tgz", + "integrity": "sha512-dgmhBOte6JgvSvowvrh0Q/vhSrB52Q/AUl/KqminAUkPuUT3CCUNhto1X8ANigWkmNwhktFc/PCe0lF/4tBFwQ==", + "license": "MIT", + "dependencies": { + "custom-media-element": "^1.4.5", + "dashjs": "^5.0.3", + "media-tracks": "^0.3.3" + } + }, "node_modules/dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -7820,6 +7989,24 @@ "node": ">=0.10" } }, + "node_modules/dashjs": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/dashjs/-/dashjs-5.0.3.tgz", + "integrity": "sha512-TXndNnCUjFjF2nYBxDVba+hWRpVkadkQ8flLp7kHkem+5+wZTfRShJCnVkPUosmjS0YPE9fVNLbYPJxHBeQZvA==", + "license": "BSD-3-Clause", + "dependencies": { + "@svta/common-media-library": "^0.12.4", + "bcp-47-match": "^2.0.3", + "bcp-47-normalize": "^2.3.0", + "codem-isoboxer": "0.3.10", + "fast-deep-equal": "3.1.3", + "html-entities": "^2.5.2", + "imsc": "^1.1.5", + "localforage": "^1.10.0", + "path-browserify": "^1.0.1", + "ua-parser-js": "^1.0.37" + } + }, "node_modules/data-uri-to-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", @@ -9394,7 +9581,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true, "license": "MIT" }, "node_modules/fast-glob": { @@ -10390,6 +10576,23 @@ "node": ">= 0.4" } }, + "node_modules/hls-video-element": { + "version": "1.5.8", + "resolved": "https://registry.npmjs.org/hls-video-element/-/hls-video-element-1.5.8.tgz", + "integrity": "sha512-DdeX5NzhM2Bj+ls5aaRrzSSnriK+r6lCrDa0YyfviNO4zb10JyAnJHZM214lXBWQghCm+fKmlWW1qpzdNoSAvQ==", + "license": "MIT", + "dependencies": { + "custom-media-element": "^1.4.5", + "hls.js": "^1.6.5", + "media-tracks": "^0.3.3" + } + }, + "node_modules/hls.js": { + "version": "1.6.13", + "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.13.tgz", + "integrity": "sha512-hNEzjZNHf5bFrUNvdS4/1RjIanuJ6szpWNfTaX5I6WfGynWXGT7K/YQLYtemSvFExzeMdgdE4SsyVLJbd5PcZA==", + "license": "Apache-2.0" + }, "node_modules/hosted-git-info": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", @@ -10403,6 +10606,22 @@ "node": ">=10" } }, + "node_modules/html-entities": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz", + "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/mdevils" + }, + { + "type": "patreon", + "url": "https://patreon.com/mdevils" + } + ], + "license": "MIT" + }, "node_modules/html-parse-stringify": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", @@ -10715,6 +10934,21 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/imsc": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/imsc/-/imsc-1.1.5.tgz", + "integrity": "sha512-V8je+CGkcvGhgl2C1GlhqFFiUOIEdwXbXLiu1Fcubvvbo+g9inauqT3l0pNYXGoLPBj3jxtZz9t+wCopMkwadQ==", + "license": "BSD-2-Clause", + "dependencies": { + "sax": "1.2.1" + } + }, + "node_modules/imsc/node_modules/sax": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz", + "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==", + "license": "ISC" + }, "node_modules/imurmurhash": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", @@ -10795,6 +11029,30 @@ "node": ">= 0.10" } }, + "node_modules/is-alphabetical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", + "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/is-alphanumerical": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz", + "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==", + "license": "MIT", + "dependencies": { + "is-alphabetical": "^2.0.0", + "is-decimal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -10831,6 +11089,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-decimal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz", + "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-docker": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", @@ -11115,6 +11383,12 @@ "integrity": "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==", "license": "BSD-3-Clause" }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "license": "MIT" + }, "node_modules/js-yaml": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", @@ -11706,6 +11980,24 @@ "node": ">=4" } }, + "node_modules/localforage": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz", + "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==", + "license": "Apache-2.0", + "dependencies": { + "lie": "3.1.1" + } + }, + "node_modules/localforage/node_modules/lie": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz", + "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==", + "license": "MIT", + "dependencies": { + "immediate": "~3.0.5" + } + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -11803,6 +12095,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lowercase-keys": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz", @@ -11991,6 +12295,21 @@ "node": ">= 0.4" } }, + "node_modules/media-chrome": { + "version": "4.13.1", + "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.13.1.tgz", + "integrity": "sha512-jPPwYrFkM4ky27/xNYEeyRPOBC7qvru4Oydy7vQHMHplXLQJmjtcauhlLPvG0O5kkYFEaOBXv5zGYes/UxOoVw==", + "license": "MIT", + "dependencies": { + "ce-la-react": "^0.3.0" + } + }, + "node_modules/media-tracks": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/media-tracks/-/media-tracks-0.3.3.tgz", + "integrity": "sha512-9P2FuUHnZZ3iji+2RQk7Zkh5AmZTnOG5fODACnjhCVveX1McY3jmCRHofIEI+yTBqplz7LXy48c7fQ3Uigp88w==", + "license": "MIT" + }, "node_modules/media-typer": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz", @@ -12433,6 +12752,12 @@ "node": ">= 0.6" } }, + "node_modules/mux-embed": { + "version": "5.9.0", + "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-5.9.0.tgz", + "integrity": "sha512-wmunL3uoPhma/tWy8PrDPZkvJpXvSFBwbD3KkC4PG8Ztjfb1X3hRJwGUAQyRz7z99b/ovLm2UTTitrkvStjH4w==", + "license": "MIT" + }, "node_modules/nan": { "version": "2.23.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.23.0.tgz", @@ -12464,6 +12789,12 @@ "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==", "license": "MIT" }, + "node_modules/native-promise-only": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz", + "integrity": "sha512-zkVhZUA3y8mbz652WrL5x0fB0ehrBkulWT3TomAQ9iDtyXZvzKeEA6GPxAItBYeNYl5yngKRX612qHOhvMkDeg==", + "license": "MIT" + }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -12945,6 +13276,12 @@ "node": ">= 0.8" } }, + "node_modules/path-browserify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", + "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==", + "license": "MIT" + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -13303,6 +13640,22 @@ "node": ">=4.0.0" } }, + "node_modules/player.style": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/player.style/-/player.style-0.2.0.tgz", + "integrity": "sha512-Ngoaz49TClptMr8HDA2IFmjT3Iq6R27QEUH/C+On33L59RSF3dCLefBYB1Au2RDZQJ6oVFpc1sXaPVpp7fEzzA==", + "license": "MIT", + "workspaces": [ + ".", + "site", + "examples/*", + "scripts/*", + "themes/*" + ], + "dependencies": { + "media-chrome": "~4.13.0" + } + }, "node_modules/plist": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz", @@ -13496,6 +13849,17 @@ "node": ">=10" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -13763,6 +14127,12 @@ "react": "*" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/react-photo-view": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/react-photo-view/-/react-photo-view-1.2.7.tgz", @@ -13773,6 +14143,29 @@ "react-dom": ">=16.8.0" } }, + "node_modules/react-player": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-3.3.3.tgz", + "integrity": "sha512-6U2ziVohA3WLdKI/WEQ7v27CIive0TCNIro55lJZka06fjB2kC4lJqBrvddG0yBvTDcn1owiUf2hRNaIzHAjIg==", + "license": "MIT", + "dependencies": { + "@mux/mux-player-react": "^3.6.0", + "cloudflare-video-element": "^1.3.4", + "dash-video-element": "^0.2.0", + "hls-video-element": "^1.5.8", + "spotify-audio-element": "^1.0.3", + "tiktok-video-element": "^0.1.1", + "twitch-video-element": "^0.1.4", + "vimeo-video-element": "^1.5.5", + "wistia-video-element": "^1.3.4", + "youtube-video-element": "^1.6.2" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18 || ^19", + "react": "^17.0.2 || ^18 || ^19", + "react-dom": "^17.0.2 || ^18 || ^19" + } + }, "node_modules/react-remove-scroll": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz", @@ -14895,6 +15288,12 @@ "node": ">= 0.10.0" } }, + "node_modules/spotify-audio-element": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/spotify-audio-element/-/spotify-audio-element-1.0.3.tgz", + "integrity": "sha512-I1/qD8cg/UnTlCIMiKSdZUJTyYfYhaqFK7LIVElc48eOqUUbVCaw1bqL8I6mJzdMJTh3eoNyF/ewvB7NoS/g9A==", + "license": "MIT" + }, "node_modules/sprintf-js": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz", @@ -15160,6 +15559,12 @@ "node": ">= 8.0" } }, + "node_modules/super-media-element": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/super-media-element/-/super-media-element-1.4.2.tgz", + "integrity": "sha512-9pP/CVNp4NF2MNlRzLwQkjiTgKKe9WYXrLh9+8QokWmMxz+zt2mf1utkWLco26IuA3AfVcTb//qtlTIjY3VHxA==", + "license": "MIT" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -15633,6 +16038,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/tiktok-video-element": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/tiktok-video-element/-/tiktok-video-element-0.1.1.tgz", + "integrity": "sha512-BaiVzvNz2UXDKTdSrXzrNf4q6Ecc+/utYUh7zdEu2jzYcJVDoqYbVfUl0bCfMoOeeAqg28vD/yN63Y3E9jOrlA==", + "license": "MIT" + }, "node_modules/timm": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz", @@ -15926,6 +16337,12 @@ "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==", "license": "Unlicense" }, + "node_modules/twitch-video-element": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/twitch-video-element/-/twitch-video-element-0.1.4.tgz", + "integrity": "sha512-SDpZ4f7sZmwHF6XG5PF0KWuP18pH/kNG04MhTcpqJby7Lk/D3TS/lCYd+RSg0rIAAVi1LDgSIo1yJs9kmHlhgw==", + "license": "MIT" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -16011,6 +16428,32 @@ "typescript": ">=4.8.4 <6.0.0" } }, + "node_modules/ua-parser-js": { + "version": "1.0.41", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz", + "integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "license": "MIT", + "bin": { + "ua-parser-js": "script/cli.js" + }, + "engines": { + "node": "*" + } + }, "node_modules/undici-types": { "version": "7.10.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz", @@ -16240,6 +16683,15 @@ "node": ">=0.6.0" } }, + "node_modules/vimeo-video-element": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/vimeo-video-element/-/vimeo-video-element-1.5.5.tgz", + "integrity": "sha512-9QVvKPPnubMNeNYHY5KZqAYerVMuVG+7PSK+6IrEUD7a/wnCGtzb8Sfxl9qNxDAL6Q8i+p+5SDoVKobCd866vw==", + "license": "MIT", + "dependencies": { + "@vimeo/player": "2.29.0" + } + }, "node_modules/vite": { "version": "7.1.5", "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.5.tgz", @@ -16388,6 +16840,15 @@ "defaults": "^1.0.3" } }, + "node_modules/weakmap-polyfill": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.4.tgz", + "integrity": "sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==", + "license": "MIT", + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/web-streams-polyfill": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz", @@ -16435,6 +16896,15 @@ "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==", "license": "ISC" }, + "node_modules/wistia-video-element": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/wistia-video-element/-/wistia-video-element-1.3.4.tgz", + "integrity": "sha512-2l22oaQe4jUfi3yvsh2m2oCEgvbqTzaSYx6aJnZAvV5hlMUJlyZheFUnaj0JU2wGlHdVGV7xNY+5KpKu+ruLYA==", + "license": "MIT", + "dependencies": { + "super-media-element": "~1.4.2" + } + }, "node_modules/word-wrap": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", @@ -16704,6 +17174,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/youtube-video-element": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/youtube-video-element/-/youtube-video-element-1.6.2.tgz", + "integrity": "sha512-YHDIOAqgRpfl1Ois9HcB8UFtWOxK8KJrV5TXpImj4BKYP1rWT04f/fMM9tQ9SYZlBKukT7NR+9wcI3UpB5BMDQ==", + "license": "MIT" + }, "node_modules/zod": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.5.tgz", diff --git a/package.json b/package.json index d058b9da..1480b346 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "react-i18next": "^15.7.3", "react-icons": "^5.5.0", "react-photo-view": "^1.2.7", + "react-player": "^3.3.3", "react-resizable-panels": "^3.0.3", "react-simple-keyboard": "^3.8.120", "react-xtermjs": "^1.0.10", diff --git a/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx b/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx index b80b0f01..81ca0faf 100644 --- a/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx +++ b/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx @@ -18,6 +18,7 @@ interface DraggableWindowProps { isMaximized?: boolean; zIndex?: number; onFocus?: () => void; + targetSize?: { width: number; height: number }; } export function DraggableWindow({ @@ -35,6 +36,7 @@ export function DraggableWindow({ isMaximized = false, zIndex = 1000, onFocus, + targetSize, }: DraggableWindowProps) { const { t } = useTranslation(); // Window state @@ -55,6 +57,40 @@ export function DraggableWindow({ const windowRef = useRef(null); const titleBarRef = useRef(null); + // Handle target size changes for media files + useEffect(() => { + if (targetSize && !isMaximized) { + const maxWidth = Math.min(window.innerWidth * 0.9, 1200); + const maxHeight = Math.min(window.innerHeight * 0.8, 800); + + // Calculate appropriate window size maintaining aspect ratio + let newWidth = Math.min(targetSize.width + 50, maxWidth); // Add padding for UI + let newHeight = Math.min(targetSize.height + 150, maxHeight); // Add padding for header/footer + + // If still too large, scale down maintaining aspect ratio + if (newWidth > maxWidth || newHeight > maxHeight) { + const widthRatio = maxWidth / newWidth; + const heightRatio = maxHeight / newHeight; + const scale = Math.min(widthRatio, heightRatio); + + newWidth = Math.floor(newWidth * scale); + newHeight = Math.floor(newHeight * scale); + } + + // Ensure minimum size + newWidth = Math.max(newWidth, minWidth); + newHeight = Math.max(newHeight, minHeight); + + setSize({ width: newWidth, height: newHeight }); + + // Center the window + setPosition({ + x: Math.max(0, (window.innerWidth - newWidth) / 2), + y: Math.max(0, (window.innerHeight - newHeight) / 2) + }); + } + }, [targetSize, isMaximized, minWidth, minHeight]); + // Handle window focus const handleWindowClick = useCallback(() => { onFocus?.(); diff --git a/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx b/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx index d85f7062..dfc8fb58 100644 --- a/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx +++ b/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx @@ -52,6 +52,7 @@ import { defaultKeymap, history, historyKeymap, toggleComment } from "@codemirro import { autocompletion, completionKeymap } from "@codemirror/autocomplete"; import { PhotoProvider, PhotoView } from "react-photo-view"; import "react-photo-view/dist/react-photo-view.css"; +import ReactPlayer from "react-player"; interface FileItem { name: string; @@ -73,6 +74,7 @@ interface FileViewerProps { onContentChange?: (content: string) => void; onSave?: (content: string) => void; onDownload?: () => void; + onMediaDimensionsChange?: (dimensions: { width: number; height: number }) => void; } // Get official icon for programming languages @@ -277,6 +279,7 @@ export function FileViewer({ onContentChange, onSave, onDownload, + onMediaDimensionsChange, }: FileViewerProps) { const { t } = useTranslation(); const [editedContent, setEditedContent] = useState(content); @@ -664,9 +667,18 @@ export function FileViewer({ alt={file.name} className="max-w-full max-h-full object-contain rounded-lg shadow-sm cursor-pointer hover:shadow-lg transition-shadow" style={{ maxHeight: "calc(100vh - 200px)" }} - onLoad={() => { + onLoad={(e) => { setImageLoading(false); setImageLoadError(false); + + // Get natural dimensions and notify parent + const img = e.currentTarget; + if (onMediaDimensionsChange && img.naturalWidth && img.naturalHeight) { + onMediaDimensionsChange({ + width: img.naturalWidth, + height: img.naturalHeight + }); + } }} onError={() => { setImageLoading(false); @@ -763,16 +775,79 @@ export function FileViewer({ )} - {/* Video file preview */} + {/* Video file preview with enhanced HTML5 support */} {fileTypeInfo.type === "video" && !showLargeFileWarning && (
- +
+ {(() => { + const ext = file.name.split('.').pop()?.toLowerCase() || ''; + const mimeType = (() => { + switch (ext) { + case 'mp4': return 'video/mp4'; + case 'webm': return 'video/webm'; + case 'mkv': return 'video/x-matroska'; + case 'avi': return 'video/x-msvideo'; + case 'mov': return 'video/quicktime'; + case 'wmv': return 'video/x-ms-wmv'; + case 'flv': return 'video/x-flv'; + default: return 'video/mp4'; + } + })(); + + const videoUrl = `data:${mimeType};base64,${content}`; + + return ( +
+ +
+ ); + })()} +
)} diff --git a/src/ui/Desktop/Apps/File Manager/components/FileWindow.tsx b/src/ui/Desktop/Apps/File Manager/components/FileWindow.tsx index e2622feb..8d37b30e 100644 --- a/src/ui/Desktop/Apps/File Manager/components/FileWindow.tsx +++ b/src/ui/Desktop/Apps/File Manager/components/FileWindow.tsx @@ -71,6 +71,7 @@ export function FileWindow({ const [isLoading, setIsLoading] = useState(false); const [isEditable, setIsEditable] = useState(false); const [pendingContent, setPendingContent] = useState(""); + const [mediaDimensions, setMediaDimensions] = useState<{ width: number; height: number } | undefined>(); const autoSaveTimerRef = useRef(null); const currentWindow = windows.find((w) => w.id === windowId); @@ -365,6 +366,12 @@ export function FileWindow({ focusWindow(windowId); }; + // Handle media dimensions change + const handleMediaDimensionsChange = (dimensions: { width: number; height: number }) => { + console.log('Media dimensions received:', dimensions); + setMediaDimensions(dimensions); + }; + if (!currentWindow) { return null; } @@ -383,6 +390,7 @@ export function FileWindow({ onFocus={handleFocus} isMaximized={currentWindow.isMaximized} zIndex={currentWindow.zIndex} + targetSize={mediaDimensions} > handleSave(newContent)} onDownload={handleDownload} + onMediaDimensionsChange={handleMediaDimensionsChange} /> );