From c516ad6b13830cdbf644810a1272bdb1a02362c3 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <vhaudiquet343@hotmail.fr>
Date: Fri, 27 Mar 2026 20:43:20 +0100
Subject: [PATCH] tauri-app: game review, with video showcase, stats and clip
 export

---
 tauri-app/src-tauri/Cargo.lock           |  345 +++--
 tauri-app/src-tauri/Cargo.toml           |    5 +-
 tauri-app/src-tauri/src/lib.rs           |  321 ++++-
 tauri-app/src-tauri/tauri.conf.json      |   18 +-
 tauri-app/src/App.vue                    |   36 +-
 tauri-app/src/components/GameHistory.vue |   18 +-
 tauri-app/src/components/GameReview.vue  | 1671 ++++++++++++++++++++++
 7 files changed, 2317 insertions(+), 97 deletions(-)
 create mode 100644 tauri-app/src/components/GameReview.vue

diff --git a/tauri-app/src-tauri/Cargo.lock b/tauri-app/src-tauri/Cargo.lock
index 8fb7ab0..065ee5b 100644
--- a/tauri-app/src-tauri/Cargo.lock
+++ b/tauri-app/src-tauri/Cargo.lock
@@ -47,6 +47,15 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
 
+[[package]]
+name = "arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3d036a3c4ab069c7b410a2ce876bd74808d2d0888a82667669f8e783a898bf1"
+dependencies = [
+ "derive_arbitrary",
+]
+
 [[package]]
 name = "async-broadcast"
 version = "0.7.2"
@@ -670,6 +679,17 @@ dependencies = [
  "serde_core",
 ]
 
+[[package]]
+name = "derive_arbitrary"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e567bd82dcff979e4b03460c307b3cdc9e96fde3d73bed1496d2bc75d9dd62a"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
 [[package]]
 name = "derive_more"
 version = "0.99.20"
@@ -716,11 +736,11 @@ dependencies = [
 
 [[package]]
 name = "directories"
-version = "5.0.1"
+version = "6.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a49173b84e034382284f27f1af4dcbbd231ffa358c0fe316541a7337f376a35"
+checksum = "16f5094c54661b38d03bd7e50df373292118db60b585c08a411c6d840017fe7d"
 dependencies = [
- "dirs-sys 0.4.1",
+ "dirs-sys",
 ]
 
 [[package]]
@@ -729,19 +749,7 @@ version = "6.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c3e8aa94d75141228480295a7d0e7feb620b1a5ad9f12bc40be62411e38cce4e"
 dependencies = [
- "dirs-sys 0.5.0",
-]
-
-[[package]]
-name = "dirs-sys"
-version = "0.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "520f05a5cbd335fae5a99ff7a6ab8627577660ee5cfd6a94a6a929b52ff0321c"
-dependencies = [
- "libc",
- "option-ext",
- "redox_users 0.4.6",
- "windows-sys 0.48.0",
+ "dirs-sys",
 ]
 
 [[package]]
@@ -752,7 +760,7 @@ checksum = "e01a3366d27ee9890022452ee61b2b63a67e6f13f58900b651ff5665f0bb1fab"
 dependencies = [
  "libc",
  "option-ext",
- "redox_users 0.5.2",
+ "redox_users",
  "windows-sys 0.61.2",
 ]
 
@@ -963,6 +971,19 @@ dependencies = [
  "simd-adler32",
 ]
 
+[[package]]
+name = "ffmpeg-sidecar"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f076483fb6efcf02e4abcf3e9388d30123346f85b9a96e8fe834718951b945ed"
+dependencies = [
+ "anyhow",
+ "tar",
+ "ureq",
+ "xz2",
+ "zip",
+]
+
 [[package]]
 name = "field-offset"
 version = "0.3.6"
@@ -973,6 +994,17 @@ dependencies = [
  "rustc_version",
 ]
 
+[[package]]
+name = "filetime"
+version = "0.2.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f98844151eee8917efc50bd9e8318cb963ae8b297431495d3f758616ea5c57db"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "libredox",
+]
+
 [[package]]
 name = "find-msvc-tools"
 version = "0.1.9"
@@ -987,6 +1019,7 @@ checksum = "843fba2746e448b37e26a819579957415c8cef339bf08564fe8b7ddbd959573c"
 dependencies = [
  "crc32fast",
  "miniz_oxide",
+ "zlib-rs",
 ]
 
 [[package]]
@@ -1550,6 +1583,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21dec9db110f5f872ed9699c3ecf50cf16f423502706ba5c72462e28d3157573"
+
 [[package]]
 name = "httparse"
 version = "1.10.1"
@@ -1973,7 +2012,10 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1744e39d1d6a9948f4f388969627434e31128196de472883b39f148769bfe30a"
 dependencies = [
+ "bitflags 2.11.0",
  "libc",
+ "plain",
+ "redox_syscall 0.7.3",
 ]
 
 [[package]]
@@ -2003,6 +2045,17 @@ version = "0.4.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
 
+[[package]]
+name = "lzma-sys"
+version = "0.1.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5fda04ab3764e6cde78b9974eec4f779acaba7c4e84b36eca3cf77c581b85d27"
+dependencies = [
+ "cc",
+ "libc",
+ "pkg-config",
+]
+
 [[package]]
 name = "mac"
 version = "0.1.1"
@@ -2399,7 +2452,7 @@ checksum = "2621685985a2ebf1c516881c026032ac7deafcda1a2c9b7850dc81e3dfcb64c1"
 dependencies = [
  "cfg-if",
  "libc",
- "redox_syscall",
+ "redox_syscall 0.5.18",
  "smallvec",
  "windows-link 0.2.1",
 ]
@@ -2632,6 +2685,12 @@ version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"
 
+[[package]]
+name = "plain"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4596b6d070b27117e987119b4dac604f3c58cfb0b191112e24771b2faeac1a6"
+
 [[package]]
 name = "plist"
 version = "1.8.0"
@@ -2907,14 +2966,12 @@ dependencies = [
 ]
 
 [[package]]
-name = "redox_users"
-version = "0.4.6"
+name = "redox_syscall"
+version = "0.7.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ba009ff324d1fc1b900bd1fdb31564febe58a8ccc8a6fdbb93b543d33b13ca43"
+checksum = "6ce70a74e890531977d37e532c34d45e9055d2409ed08ddba14529471ed0be16"
 dependencies = [
- "getrandom 0.2.17",
- "libredox",
- "thiserror 1.0.69",
+ "bitflags 2.11.0",
 ]
 
 [[package]]
@@ -3011,6 +3068,20 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.17",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "rustc-hash"
 version = "2.1.1"
@@ -3039,6 +3110,41 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "rustls"
+version = "0.23.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "758025cb5fccfd3bc2fd74708fd4682be41d99e5dff73c377c0646c6012c73a4"
+dependencies = [
+ "log",
+ "once_cell",
+ "ring",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be040f8b0a225e40375822a563fa9524378b9d63112f53e19ffff34df5d33fdd"
+dependencies = [
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df33b2b81ac578cabaf06b89b0631153a3f416b0a886e8a7a1707fb51abbd1ef"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
 [[package]]
 name = "rustversion"
 version = "1.0.22"
@@ -3407,7 +3513,7 @@ dependencies = [
  "objc2-foundation",
  "objc2-quartz-core",
  "raw-window-handle",
- "redox_syscall",
+ "redox_syscall 0.5.18",
  "tracing",
  "wasm-bindgen",
  "web-sys",
@@ -3501,6 +3607,12 @@ version = "0.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
 
+[[package]]
+name = "subtle"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
+
 [[package]]
 name = "swift-rs"
 version = "1.0.7"
@@ -3616,6 +3728,17 @@ dependencies = [
  "syn 2.0.117",
 ]
 
+[[package]]
+name = "tar"
+version = "0.4.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22692a6476a21fa75fdfc11d452fda482af402c008cdbaf3476414e122040973"
+dependencies = [
+ "filetime",
+ "libc",
+ "xattr",
+]
+
 [[package]]
 name = "target-lexicon"
 version = "0.12.16"
@@ -3639,6 +3762,7 @@ dependencies = [
  "gtk",
  "heck 0.5.0",
  "http",
+ "http-range",
  "jni",
  "libc",
  "log",
@@ -3679,6 +3803,7 @@ version = "0.1.0"
 dependencies = [
  "chrono",
  "directories",
+ "ffmpeg-sidecar",
  "serde",
  "serde_json",
  "tauri",
@@ -4322,6 +4447,41 @@ version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ebc1c04c71510c7f702b52b7c350734c9ff1295c464a03335b00bb84fc54f853"
 
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
+[[package]]
+name = "ureq"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dea7109cdcd5864d4eeb1b58a1648dc9bf520360d7af16ec26d0a9354bafcfc0"
+dependencies = [
+ "base64 0.22.1",
+ "flate2",
+ "log",
+ "percent-encoding",
+ "rustls",
+ "rustls-pki-types",
+ "ureq-proto",
+ "utf8-zero",
+ "webpki-roots",
+]
+
+[[package]]
+name = "ureq-proto"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e994ba84b0bd1b1b0cf92878b7ef898a5c1760108fe7b6010327e274917a808c"
+dependencies = [
+ "base64 0.22.1",
+ "http",
+ "httparse",
+ "log",
+]
+
 [[package]]
 name = "url"
 version = "2.5.8"
@@ -4353,6 +4513,12 @@ version = "0.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9"
 
+[[package]]
+name = "utf8-zero"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8c0a043c9540bae7c578c88f91dda8bd82e59ae27c21baca69c8b191aaf5a6e"
+
 [[package]]
 name = "utf8_iter"
 version = "1.0.4"
@@ -4624,6 +4790,15 @@ dependencies = [
  "system-deps",
 ]
 
+[[package]]
+name = "webpki-roots"
+version = "1.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22cfaf3c063993ff62e73cb4311efde4db1efb31ab78a3e5c457939ad5cc0bed"
+dependencies = [
+ "rustls-pki-types",
+]
+
 [[package]]
 name = "webview2-com"
 version = "0.38.2"
@@ -4856,11 +5031,11 @@ dependencies = [
 
 [[package]]
 name = "windows-sys"
-version = "0.48.0"
+version = "0.52.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
 dependencies = [
- "windows-targets 0.48.5",
+ "windows-targets 0.52.6",
 ]
 
 [[package]]
@@ -4905,21 +5080,6 @@ dependencies = [
  "windows_x86_64_msvc 0.42.2",
 ]
 
-[[package]]
-name = "windows-targets"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a2fa6e2155d7247be68c096456083145c183cbbbc2764150dda45a87197940c"
-dependencies = [
- "windows_aarch64_gnullvm 0.48.5",
- "windows_aarch64_msvc 0.48.5",
- "windows_i686_gnu 0.48.5",
- "windows_i686_msvc 0.48.5",
- "windows_x86_64_gnu 0.48.5",
- "windows_x86_64_gnullvm 0.48.5",
- "windows_x86_64_msvc 0.48.5",
-]
-
 [[package]]
 name = "windows-targets"
 version = "0.52.6"
@@ -4977,12 +5137,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"
 
-[[package]]
-name = "windows_aarch64_gnullvm"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8"
-
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.52.6"
@@ -5001,12 +5155,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"
 
-[[package]]
-name = "windows_aarch64_msvc"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc"
-
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.52.6"
@@ -5025,12 +5173,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"
 
-[[package]]
-name = "windows_i686_gnu"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e"
-
 [[package]]
 name = "windows_i686_gnu"
 version = "0.52.6"
@@ -5061,12 +5203,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"
 
-[[package]]
-name = "windows_i686_msvc"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406"
-
 [[package]]
 name = "windows_i686_msvc"
 version = "0.52.6"
@@ -5085,12 +5221,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"
 
-[[package]]
-name = "windows_x86_64_gnu"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "53d40abd2583d23e4718fddf1ebec84dbff8381c07cae67ff7768bbf19c6718e"
-
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.52.6"
@@ -5109,12 +5239,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"
 
-[[package]]
-name = "windows_x86_64_gnullvm"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc"
-
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.52.6"
@@ -5133,12 +5257,6 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
 
-[[package]]
-name = "windows_x86_64_msvc"
-version = "0.48.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ed94fce61571a4006852b7389a063ab983c02eb1bb37b47f8272ce92d06d9538"
-
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.52.6"
@@ -5347,6 +5465,25 @@ dependencies = [
  "pkg-config",
 ]
 
+[[package]]
+name = "xattr"
+version = "1.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32e45ad4206f6d2479085147f02bc2ef834ac85886624a23575ae137c8aa8156"
+dependencies = [
+ "libc",
+ "rustix",
+]
+
+[[package]]
+name = "xz2"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "388c44dc09d76f1536602ead6d325eb532f5c122f17782bd57fb47baeeb767e2"
+dependencies = [
+ "lzma-sys",
+]
+
 [[package]]
 name = "yoke"
 version = "0.8.1"
@@ -5472,6 +5609,12 @@ dependencies = [
  "synstructure",
 ]
 
+[[package]]
+name = "zeroize"
+version = "1.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b97154e67e32c85465826e8bcc1c59429aaaf107c1e4a9e53c8d8ccd5eff88d0"
+
 [[package]]
 name = "zerotrie"
 version = "0.2.3"
@@ -5505,12 +5648,44 @@ dependencies = [
  "syn 2.0.117",
 ]
 
+[[package]]
+name = "zip"
+version = "4.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "caa8cd6af31c3b31c6631b8f483848b91589021b28fffe50adada48d4f4d2ed1"
+dependencies = [
+ "arbitrary",
+ "crc32fast",
+ "flate2",
+ "indexmap 2.13.0",
+ "memchr",
+ "zopfli",
+]
+
+[[package]]
+name = "zlib-rs"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3be3d40e40a133f9c916ee3f9f4fa2d9d63435b5fbe1bfc6d9dae0aa0ada1513"
+
 [[package]]
 name = "zmij"
 version = "1.0.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
 
+[[package]]
+name = "zopfli"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f05cd8797d63865425ff89b5c4a48804f35ba0ce8d125800027ad6017d2b5249"
+dependencies = [
+ "bumpalo",
+ "crc32fast",
+ "log",
+ "simd-adler32",
+]
+
 [[package]]
 name = "zvariant"
 version = "5.10.0"
diff --git a/tauri-app/src-tauri/Cargo.toml b/tauri-app/src-tauri/Cargo.toml
index b5b749e..6081a55 100644
--- a/tauri-app/src-tauri/Cargo.toml
+++ b/tauri-app/src-tauri/Cargo.toml
@@ -18,11 +18,12 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["protocol-asset"] }
 tauri-plugin-opener = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 chrono = { version = "0.4", features = ["serde"] }
 uuid = { version = "1", features = ["v4", "serde"] }
-directories = "5"
+directories = "6"
+ffmpeg-sidecar = "2.4"
 
diff --git a/tauri-app/src-tauri/src/lib.rs b/tauri-app/src-tauri/src/lib.rs
index 5b8e448..11ed0a7 100644
--- a/tauri-app/src-tauri/src/lib.rs
+++ b/tauri-app/src-tauri/src/lib.rs
@@ -1,3 +1,9 @@
+use ffmpeg_sidecar::{
+    command::{ffmpeg_is_installed, FfmpegCommand},
+    download::auto_download,
+    event::{FfmpegEvent, LogLevel},
+    paths::sidecar_path,
+};
 use serde_json::Value;
 use std::fs;
 use std::path::PathBuf;
@@ -77,6 +83,312 @@ fn get_recordings_dir() -> String {
         .unwrap_or_else(|| "./recordings".to_string())
 }
 
+/// Find a video file in the recordings directory.
+/// Searches for exact filename match or pattern match.
+#[tauri::command]
+fn find_video_file(recordings_dir: String, filename: String) -> Option<String> {
+    let recordings_path = PathBuf::from(&recordings_dir);
+    
+    if !recordings_path.exists() {
+        return None;
+    }
+    
+    // Try exact match first
+    let exact_path = recordings_path.join(&filename);
+    if exact_path.exists() {
+        return Some(exact_path.to_string_lossy().to_string());
+    }
+    
+    // Try to find by pattern (date_time_*.mp4)
+    if let Ok(entries) = fs::read_dir(&recordings_path) {
+        for entry in entries.flatten() {
+            let path = entry.path();
+            if path.extension().map(|e| e == "mp4" || e == "mkv" || e == "mov").unwrap_or(false) {
+                let file_name = path.file_name()?.to_string_lossy().to_string();
+                
+                // Check if filename starts with the same date/time pattern
+                // filename format: "2026-03-27_16-42-52_unknown.mp4"
+                // We match the date_time prefix
+                if file_name.starts_with(&filename.replace("_unknown.mp4", "")) {
+                    return Some(path.to_string_lossy().to_string());
+                }
+            }
+        }
+    }
+    
+    None
+}
+
+/// Get list of video files in recordings directory.
+#[tauri::command]
+fn list_video_files(recordings_dir: String) -> Vec<String> {
+    let recordings_path = PathBuf::from(&recordings_dir);
+    let mut videos = Vec::new();
+    
+    if !recordings_path.exists() {
+        return videos;
+    }
+    
+    if let Ok(entries) = fs::read_dir(&recordings_path) {
+        for entry in entries.flatten() {
+            let path = entry.path();
+            if path.extension().map(|e| e == "mp4" || e == "mkv" || e == "mov").unwrap_or(false) {
+                videos.push(path.to_string_lossy().to_string());
+            }
+        }
+    }
+    
+    // Sort by modification time, newest first
+    videos.sort_by(|a, b| {
+        let a_time = fs::metadata(a).and_then(|m| m.modified()).ok();
+        let b_time = fs::metadata(b).and_then(|m| m.modified()).ok();
+        b_time.cmp(&a_time)
+    });
+    
+    videos
+}
+
+/// Ensure ffmpeg is available, downloading if necessary.
+fn ensure_ffmpeg() -> Result<(), String> {
+    if ffmpeg_is_installed() {
+        return Ok(());
+    }
+    
+    // Auto-download ffmpeg for the current platform
+    auto_download().map_err(|e| format!("Failed to download ffmpeg: {}", e))?;
+    
+    Ok(())
+}
+
+/// Export a clip from a video using ffmpeg-sidecar (stream copy for speed).
+#[tauri::command]
+fn export_clip(
+    video_path: String,
+    start_time: f64,
+    end_time: f64,
+    output_name: String,
+) -> Result<String, String> {
+    // Ensure ffmpeg is available
+    ensure_ffmpeg()?;
+    
+    // Verify input file exists
+    if !PathBuf::from(&video_path).exists() {
+        return Err(format!("Video file not found: {}", video_path));
+    }
+    
+    // Get output directory
+    let output_dir = get_default_output_dir()
+        .map(|p| p.join("clips"))
+        .unwrap_or_else(|| PathBuf::from("./clips"));
+    
+    // Create clips directory if it doesn't exist
+    if !output_dir.exists() {
+        fs::create_dir_all(&output_dir)
+            .map_err(|e| format!("Failed to create clips directory: {}", e))?;
+    }
+    
+    let output_path = output_dir.join(format!("{}.mp4", output_name));
+    let duration = end_time - start_time;
+    
+    // Build ffmpeg command with stream copy (fast, no re-encoding)
+    // Note: Put -ss before -i for fast seeking (input seeking)
+    let iter = FfmpegCommand::new()
+        .arg("-y")  // Overwrite output file
+        .arg("-ss").arg(&format!("{:.3}", start_time))
+        .arg("-i").arg(&video_path)
+        .arg("-t").arg(&format!("{:.3}", duration))
+        .arg("-c").arg("copy")  // Stream copy for fast export
+        .arg("-avoid_negative_ts").arg("make_zero")
+        .arg(&output_path.to_string_lossy().to_string())
+        .spawn()
+        .map_err(|e| format!("Failed to spawn ffmpeg: {}", e))?
+        .iter()
+        .map_err(|e| format!("Failed to create ffmpeg iterator: {}", e))?;
+    
+    // Process the ffmpeg command and collect all errors
+    let mut errors = Vec::new();
+    for event in iter {
+        match event {
+            FfmpegEvent::Error(e) => {
+                errors.push(format!("FFmpeg error: {}", e));
+            }
+            FfmpegEvent::Log(LogLevel::Error, msg) => {
+                errors.push(format!("FFmpeg log error: {}", msg));
+            }
+            FfmpegEvent::Log(LogLevel::Warning, msg) => {
+                // Log warnings but don't fail
+                eprintln!("FFmpeg warning: {}", msg);
+            }
+            _ => {}
+        }
+    }
+    
+    // Check if output file was created
+    if !output_path.exists() {
+        return Err(format!(
+            "Export failed - output file not created. Errors: {}",
+            errors.join("; ")
+        ));
+    }
+    
+    // Check if output file has content
+    let metadata = fs::metadata(&output_path)
+        .map_err(|e| format!("Failed to check output file: {}", e))?;
+    if metadata.len() == 0 {
+        return Err(format!(
+            "Export failed - output file is empty. Errors: {}",
+            errors.join("; ")
+        ));
+    }
+    
+    Ok(output_path.to_string_lossy().to_string())
+}
+
+/// Export a clip with re-encoding for more precise cuts.
+#[tauri::command]
+fn export_clip_precise(
+    video_path: String,
+    start_time: f64,
+    end_time: f64,
+    output_name: String,
+    quality: String,
+) -> Result<String, String> {
+    // Ensure ffmpeg is available
+    ensure_ffmpeg()?;
+    
+    // Verify input file exists
+    if !PathBuf::from(&video_path).exists() {
+        return Err(format!("Video file not found: {}", video_path));
+    }
+    
+    let output_dir = get_default_output_dir()
+        .map(|p| p.join("clips"))
+        .unwrap_or_else(|| PathBuf::from("./clips"));
+    
+    if !output_dir.exists() {
+        fs::create_dir_all(&output_dir)
+            .map_err(|e| format!("Failed to create clips directory: {}", e))?;
+    }
+    
+    let output_path = output_dir.join(format!("{}.mp4", output_name));
+    let duration = end_time - start_time;
+    
+    // Quality presets (CRF values - lower is better quality)
+    let crf = match quality.as_str() {
+        "low" => "28",
+        "medium" => "23",
+        "high" => "18",
+        _ => "23",
+    };
+    
+    // Build ffmpeg command with re-encoding
+    let iter = FfmpegCommand::new()
+        .arg("-y")  // Overwrite output file
+        .arg("-ss").arg(&format!("{:.3}", start_time))
+        .arg("-i").arg(&video_path)
+        .arg("-t").arg(&format!("{:.3}", duration))
+        .arg("-c:v").arg("libx264")
+        .arg("-crf").arg(crf)
+        .arg("-preset").arg("fast")
+        .arg("-c:a").arg("aac")
+        .arg("-b:a").arg("128k")
+        .arg(&output_path.to_string_lossy().to_string())
+        .spawn()
+        .map_err(|e| format!("Failed to spawn ffmpeg: {}", e))?
+        .iter()
+        .map_err(|e| format!("Failed to create ffmpeg iterator: {}", e))?;
+    
+    // Process the ffmpeg command and collect all errors
+    let mut errors = Vec::new();
+    for event in iter {
+        match event {
+            FfmpegEvent::Error(e) => {
+                errors.push(format!("FFmpeg error: {}", e));
+            }
+            FfmpegEvent::Log(LogLevel::Error, msg) => {
+                errors.push(format!("FFmpeg log error: {}", msg));
+            }
+            FfmpegEvent::Log(LogLevel::Warning, msg) => {
+                eprintln!("FFmpeg warning: {}", msg);
+            }
+            _ => {}
+        }
+    }
+    
+    // Check if output file was created
+    if !output_path.exists() {
+        return Err(format!(
+            "Export failed - output file not created. Errors: {}",
+            errors.join("; ")
+        ));
+    }
+    
+    // Check if output file has content
+    let metadata = fs::metadata(&output_path)
+        .map_err(|e| format!("Failed to check output file: {}", e))?;
+    if metadata.len() == 0 {
+        return Err(format!(
+            "Export failed - output file is empty. Errors: {}",
+            errors.join("; ")
+        ));
+    }
+    
+    Ok(output_path.to_string_lossy().to_string())
+}
+
+/// Check if ffmpeg is available.
+#[tauri::command]
+fn check_ffmpeg() -> bool {
+    ffmpeg_is_installed()
+}
+
+/// Download ffmpeg if not already installed.
+#[tauri::command]
+fn download_ffmpeg() -> Result<String, String> {
+    ensure_ffmpeg()?;
+    Ok(sidecar_path().unwrap_or_default().to_string_lossy().to_string())
+}
+
+/// Get video file metadata using ffprobe.
+#[tauri::command]
+fn get_video_metadata(video_path: String) -> Result<Value, String> {
+    // Ensure ffmpeg is available
+    ensure_ffmpeg()?;
+    
+    // Use ffprobe via ffmpeg-sidecar
+    let iter = FfmpegCommand::new()
+        .arg("-v").arg("quiet")
+        .arg("-print_format").arg("json")
+        .arg("-show_format")
+        .arg("-show_streams")
+        .arg(&video_path)
+        .spawn()
+        .map_err(|e| format!("Failed to spawn ffprobe: {}", e))?
+        .iter()
+        .map_err(|e| format!("Failed to create ffprobe iterator: {}", e))?;
+    
+    let mut json_output = String::new();
+    
+    for event in iter {
+        match event {
+            FfmpegEvent::Log(LogLevel::Info, msg) | FfmpegEvent::Log(LogLevel::Unknown, msg) => {
+                // Capture JSON output
+                if msg.trim().starts_with('{') || msg.trim().starts_with('[') {
+                    json_output.push_str(&msg);
+                }
+            }
+            FfmpegEvent::Error(e) => {
+                return Err(format!("FFprobe error: {}", e));
+            }
+            _ => {}
+        }
+    }
+    
+    // Parse the JSON output
+    serde_json::from_str(&json_output)
+        .map_err(|e| format!("Failed to parse ffprobe output: {}", e))
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -84,7 +396,14 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             get_game_history,
             get_timeline,
-            get_recordings_dir
+            get_recordings_dir,
+            find_video_file,
+            list_video_files,
+            export_clip,
+            export_clip_precise,
+            check_ffmpeg,
+            download_ffmpeg,
+            get_video_metadata
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
diff --git a/tauri-app/src-tauri/tauri.conf.json b/tauri-app/src-tauri/tauri.conf.json
index c4cbfbb..dcf121e 100644
--- a/tauri-app/src-tauri/tauri.conf.json
+++ b/tauri-app/src-tauri/tauri.conf.json
@@ -12,13 +12,23 @@
   "app": {
     "windows": [
       {
-        "title": "tauri-app",
-        "width": 800,
-        "height": 600
+        "title": "League Recorder",
+        "width": 1280,
+        "height": 800,
+        "minWidth": 800,
+        "minHeight": 600
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "assetProtocol": {
+        "enable": true,
+        "scope": [
+          "$APPDATA/**",
+          "$APPDATA/../**",
+          "C:/Users/**/AppData/Roaming/**"
+        ]
+      }
     }
   },
   "bundle": {
diff --git a/tauri-app/src/App.vue b/tauri-app/src/App.vue
index b7f8bce..98710ba 100644
--- a/tauri-app/src/App.vue
+++ b/tauri-app/src/App.vue
@@ -1,9 +1,38 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import GameHistory from "./components/GameHistory.vue";
+import GameReview from "./components/GameReview.vue";
+import type { GameHistoryItem } from "./types/timeline";
+
+// Current view state
+const currentView = ref<"history" | "review">("history");
+const selectedGame = ref<GameHistoryItem | null>(null);
+
+// Navigate to review view
+function openReview(game: GameHistoryItem) {
+  selectedGame.value = game;
+  currentView.value = "review";
+}
+
+// Navigate back to history
+function closeReview() {
+  currentView.value = "history";
+  selectedGame.value = null;
+}
 </script>
 
 <template>
-  <GameHistory />
+  <div class="app">
+    <GameHistory 
+      v-if="currentView === 'history'" 
+      @open-review="openReview"
+    />
+    <GameReview
+      v-else-if="currentView === 'review' && selectedGame"
+      :game="selectedGame"
+      @back="closeReview"
+    />
+  </div>
 </template>
 
 <style>
@@ -38,4 +67,9 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
 }
+
+.app {
+  min-height: 100vh;
+  background: #0a0a13;
+}
 </style>
diff --git a/tauri-app/src/components/GameHistory.vue b/tauri-app/src/components/GameHistory.vue
index e70be84..8181ff2 100644
--- a/tauri-app/src/components/GameHistory.vue
+++ b/tauri-app/src/components/GameHistory.vue
@@ -2,6 +2,11 @@
 import { ref, onMounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import type { GameHistoryItem, TimestampedEvent, ItemInfo } from "../types/timeline";
+
+// Emits
+const emit = defineEmits<{
+  (e: "open-review", game: GameHistoryItem): void;
+}>();
 import {
   getGameResult,
   formatDuration,
@@ -58,6 +63,11 @@ function closeDetail() {
   selectedGame.value = null;
 }
 
+// Open review view for a game
+function openReview(game: GameHistoryItem) {
+  emit("open-review", game);
+}
+
 // Helper to get items array for display (6 slots + trinket)
 function getItemsArray(game: GameHistoryItem): (ItemInfo | null)[] {
   return getItems(game);
@@ -137,7 +147,7 @@ onMounted(() => {
                 <img
                   v-if="getSummonerSpells(game)"
                   :src="getSummonerSpellUrl(getSummonerSpells(game)!.spell1Id)"
-                  :alt="getSummonerSpells(game)!.spell1Name || 'Spell 1'"
+                  alt="Spell 1"
                   class="spell-image"
                 />
                 <div v-else class="spell-placeholder"></div>
@@ -146,7 +156,7 @@ onMounted(() => {
                 <img
                   v-if="getSummonerSpells(game)"
                   :src="getSummonerSpellUrl(getSummonerSpells(game)!.spell2Id)"
-                  :alt="getSummonerSpells(game)!.spell2Name || 'Spell 2'"
+                  alt="Spell 2"
                   class="spell-image"
                 />
                 <div v-else class="spell-placeholder"></div>
@@ -348,8 +358,8 @@ onMounted(() => {
 
         <div class="modal-actions">
           <button class="btn-secondary" @click="closeDetail">Close</button>
-          <button class="btn-primary">
-            Open Video
+          <button class="btn-primary" @click="openReview(selectedGame)">
+            Review Game
           </button>
         </div>
       </div>
diff --git a/tauri-app/src/components/GameReview.vue b/tauri-app/src/components/GameReview.vue
new file mode 100644
index 0000000..ec3e2af
--- /dev/null
+++ b/tauri-app/src/components/GameReview.vue
@@ -0,0 +1,1671 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { convertFileSrc } from "@tauri-apps/api/core";
+import type { TimestampedEvent, GameHistoryItem } from "../types/timeline";
+import {
+  getGameResult,
+  formatDuration,
+  formatNumber,
+  getChampionImageUrl,
+  getQueueDisplayName,
+  getChampionName,
+  getQueueType,
+  getQueueId,
+  getItemImageUrl,
+  getResultColor,
+} from "../types/timeline";
+
+// Props
+const props = defineProps<{
+  game: GameHistoryItem;
+}>();
+
+// Emits
+const emit = defineEmits<{
+  (e: "back"): void;
+}>();
+
+// Video state
+const videoRef = ref<HTMLVideoElement | null>(null);
+const videoPath = ref<string | null>(null);
+const videoError = ref<string | null>(null);
+const isPlaying = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+const volume = ref(1);
+const isMuted = ref(false);
+const playbackRate = ref(1);
+
+// Timeline state
+const selectedEvent = ref<TimestampedEvent | null>(null);
+const hoveredEvent = ref<TimestampedEvent | null>(null);
+
+// Clip editing state
+const clipStart = ref<number | null>(null);
+const clipEnd = ref<number | null>(null);
+const isExporting = ref(false);
+const exportProgress = ref(0);
+const exportMessage = ref<string | null>(null);
+
+// Stats panel state
+const showTeamStats = ref(false);
+const selectedPlayerPuuid = ref<string | null>(null);
+
+// Derived video filename from start_time
+const videoFilename = computed(() => {
+  // Parse start_time like "2026-03-27T16:42:55.800338300Z"
+  const startTime = props.game.start_time;
+  if (!startTime) return null;
+  
+  try {
+    const date = new Date(startTime);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    
+    return `${year}-${month}-${day}_${hours}-${minutes}-${seconds}_unknown.mp4`;
+  } catch {
+    return null;
+  }
+});
+
+// Get video URL for playback using Tauri's convertFileSrc
+const videoUrl = computed(() => {
+  if (videoPath.value) {
+    return convertFileSrc(videoPath.value);
+  }
+  return null;
+});
+
+// Events sorted by timestamp
+const sortedEvents = computed(() => {
+  return [...props.game.events].sort((a, b) => {
+    const aTime = a.video_timestamp[0] + a.video_timestamp[1] / 1e9;
+    const bTime = b.video_timestamp[0] + b.video_timestamp[1] / 1e9;
+    return aTime - bTime;
+  });
+});
+
+// Get event position on timeline (0-100%)
+function getEventPosition(event: TimestampedEvent): number {
+  if (duration.value === 0) return 0;
+  const time = event.video_timestamp[0] + event.video_timestamp[1] / 1e9;
+  return (time / duration.value) * 100;
+}
+
+// Get event time in seconds
+function getEventTime(event: TimestampedEvent): number {
+  return event.video_timestamp[0] + event.video_timestamp[1] / 1e9;
+}
+
+// Format event time
+function formatEventTime(event: TimestampedEvent): string {
+  return formatDuration(getEventTime(event));
+}
+
+// Get event type color
+function getEventColor(event: TimestampedEvent): string {
+  switch (event.event_type) {
+    case "game_end":
+      return "#4ade80"; // green
+    case "phase_change":
+      return "#60a5fa"; // blue
+    case "kill":
+    case "champions_killed":
+      return "#f87171"; // red
+    case "death":
+      return "#ef4444"; // darker red
+    case "assist":
+      return "#a78bfa"; // purple
+    case "objective":
+      return "#fbbf24"; // yellow
+    default:
+      return "#9ca3af"; // gray
+  }
+}
+
+// Player stats from end game data
+interface PlayerData {
+  puuid: string;
+  championName: string;
+  championId: number;
+  riotIdGameName: string;
+  riotIdTagLine: string;
+  teamId: number;
+  isLocalPlayer: boolean;
+  stats: {
+    kills: number;
+    deaths: number;
+    assists: number;
+    goldEarned: number;
+    totalDamageDealtToChampions: number;
+    totalDamageTaken: number;
+    minionsKilled: number;
+    visionScore: number;
+    level: number;
+  };
+  items: number[];
+  spell1Id: number;
+  spell2Id: number;
+}
+
+// Extract all players from end game stats
+const allPlayers = computed((): PlayerData[] => {
+  const stats = props.game.raw_end_game_stats as any;
+  if (!stats?.teams) return [];
+  
+  const players: PlayerData[] = [];
+  
+  for (const team of stats.teams) {
+    if (!team.players) continue;
+    
+    for (const player of team.players) {
+      players.push({
+        puuid: player.puuid || "",
+        championName: player.championName || "Unknown",
+        championId: player.championId || 0,
+        riotIdGameName: player.riotIdGameName || "",
+        riotIdTagLine: player.riotIdTagLine || "",
+        teamId: player.teamId,
+        isLocalPlayer: player.isLocalPlayer || false,
+        stats: {
+          kills: player.stats?.CHAMPIONS_KILLED || 0,
+          deaths: player.stats?.NUM_DEATHS || 0,
+          assists: player.stats?.ASSISTS || 0,
+          goldEarned: player.stats?.GOLD_EARNED || 0,
+          totalDamageDealtToChampions: player.stats?.TOTAL_DAMAGE_DEALT_TO_CHAMPIONS || 0,
+          totalDamageTaken: player.stats?.TOTAL_DAMAGE_TAKEN || 0,
+          minionsKilled: player.stats?.MINIONS_KILLED || 0,
+          visionScore: player.stats?.VISION_SCORE || 0,
+          level: player.stats?.LEVEL || 1,
+        },
+        items: player.items || [],
+        spell1Id: player.spell1Id || 0,
+        spell2Id: player.spell2Id || 0,
+      });
+    }
+  }
+  
+  return players;
+});
+
+// Local player data
+const localPlayer = computed(() => {
+  return allPlayers.value.find(p => p.isLocalPlayer);
+});
+
+// Team players (local player's team)
+const teamPlayers = computed(() => {
+  const localTeamId = localPlayer.value?.teamId;
+  return allPlayers.value.filter(p => p.teamId === localTeamId);
+});
+
+// Enemy players
+const enemyPlayers = computed(() => {
+  const localTeamId = localPlayer.value?.teamId;
+  return allPlayers.value.filter(p => p.teamId !== localTeamId);
+});
+
+// Selected player for detailed view
+const selectedPlayer = computed(() => {
+  if (selectedPlayerPuuid.value) {
+    return allPlayers.value.find(p => p.puuid === selectedPlayerPuuid.value);
+  }
+  return localPlayer.value;
+});
+
+// Video controls
+function togglePlay() {
+  if (!videoRef.value) return;
+  
+  if (isPlaying.value) {
+    videoRef.value.pause();
+  } else {
+    videoRef.value.play();
+  }
+}
+
+function seekTo(time: number) {
+  if (!videoRef.value) return;
+  videoRef.value.currentTime = time;
+  currentTime.value = time;
+}
+
+function seekToEvent(event: TimestampedEvent) {
+  const time = getEventTime(event);
+  seekTo(time);
+  selectedEvent.value = event;
+}
+
+function seekRelative(delta: number) {
+  if (!videoRef.value) return;
+  const newTime = Math.max(0, Math.min(duration.value, currentTime.value + delta));
+  seekTo(newTime);
+}
+
+function toggleMute() {
+  if (!videoRef.value) return;
+  isMuted.value = !isMuted.value;
+  videoRef.value.muted = isMuted.value;
+}
+
+function setVolume(val: number) {
+  if (!videoRef.value) return;
+  volume.value = val;
+  videoRef.value.volume = val;
+}
+
+function setPlaybackRate(rate: number) {
+  if (!videoRef.value) return;
+  playbackRate.value = rate;
+  videoRef.value.playbackRate = rate;
+}
+
+function toggleFullscreen() {
+  if (!videoRef.value) return;
+  
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  } else {
+    videoRef.value.requestFullscreen();
+  }
+}
+
+// Timeline click handler
+function onTimelineClick(event: MouseEvent) {
+  const target = event.currentTarget as HTMLElement;
+  const rect = target.getBoundingClientRect();
+  const percent = (event.clientX - rect.left) / rect.width;
+  const time = percent * duration.value;
+  seekTo(time);
+}
+
+// Clip editing
+function setClipStartPoint() {
+  clipStart.value = currentTime.value;
+  if (clipEnd.value !== null && clipEnd.value <= clipStart.value) {
+    clipEnd.value = null;
+  }
+}
+
+function setClipEndPoint() {
+  clipEnd.value = currentTime.value;
+  if (clipStart.value !== null && clipStart.value >= clipEnd.value) {
+    clipStart.value = null;
+  }
+}
+
+function clearClipPoints() {
+  clipStart.value = null;
+  clipEnd.value = null;
+}
+
+const clipDuration = computed(() => {
+  if (clipStart.value !== null && clipEnd.value !== null) {
+    return clipEnd.value - clipStart.value;
+  }
+  return null;
+});
+
+// Export clip using ffmpeg
+async function exportClip() {
+  if (clipStart.value === null || clipEnd.value === null || !videoPath.value) {
+    return;
+  }
+  
+  isExporting.value = true;
+  exportProgress.value = 0;
+  exportMessage.value = "Starting export...";
+  
+  try {
+    const result = await invoke<string>("export_clip", {
+      videoPath: videoPath.value,
+      startTime: clipStart.value,
+      endTime: clipEnd.value,
+      outputName: `clip_${props.game.recording_id}_${Math.floor(clipStart.value)}s`,
+    });
+    
+    exportMessage.value = `Exported: ${result}`;
+  } catch (error) {
+    exportMessage.value = `Export failed: ${error}`;
+  } finally {
+    isExporting.value = false;
+  }
+}
+
+// Load video path
+async function loadVideoPath() {
+  try {
+    const recordingsDir = await invoke<string>("get_recordings_dir");
+    
+    if (videoFilename.value) {
+      // Try to find the video file
+      const path = await invoke<string | null>("find_video_file", {
+        recordingsDir,
+        filename: videoFilename.value,
+      });
+      
+      if (path) {
+        videoPath.value = path;
+      } else {
+        videoError.value = `Video file not found: ${videoFilename.value}`;
+      }
+    } else {
+      videoError.value = "Could not determine video filename from timeline";
+    }
+  } catch (error) {
+    videoError.value = `Failed to load video: ${error}`;
+  }
+}
+
+// Video event handlers
+function onVideoLoaded() {
+  if (videoRef.value) {
+    duration.value = videoRef.value.duration;
+  }
+}
+
+function onVideoTimeUpdate() {
+  if (videoRef.value) {
+    currentTime.value = videoRef.value.currentTime;
+  }
+}
+
+function onVideoPlay() {
+  isPlaying.value = true;
+}
+
+function onVideoPause() {
+  isPlaying.value = false;
+}
+
+function onVideoEnded() {
+  isPlaying.value = false;
+}
+
+function onVideoError() {
+  videoError.value = "Failed to load video";
+}
+
+// Keyboard shortcuts
+function handleKeydown(event: KeyboardEvent) {
+  // Ignore if typing in input
+  if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+    return;
+  }
+  
+  switch (event.key) {
+    case " ":
+      event.preventDefault();
+      togglePlay();
+      break;
+    case "ArrowLeft":
+      event.preventDefault();
+      seekRelative(-5);
+      break;
+    case "ArrowRight":
+      event.preventDefault();
+      seekRelative(5);
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      seekRelative(30);
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      seekRelative(-30);
+      break;
+    case "m":
+      toggleMute();
+      break;
+    case "f":
+      toggleFullscreen();
+      break;
+    case "i":
+      setClipStartPoint();
+      break;
+    case "o":
+      setClipEndPoint();
+      break;
+    case "Escape":
+      if (clipStart.value !== null || clipEnd.value !== null) {
+        clearClipPoints();
+      } else {
+        emit("back");
+      }
+      break;
+  }
+}
+
+// Format player name
+function formatPlayerName(player: PlayerData): string {
+  if (player.riotIdGameName) {
+    return player.riotIdTagLine 
+      ? `${player.riotIdGameName}#${player.riotIdTagLine}`
+      : player.riotIdGameName;
+  }
+  return player.championName;
+}
+
+// Calculate KDA for player
+function calculatePlayerKDA(player: PlayerData): string {
+  const { kills, deaths, assists } = player.stats;
+  if (deaths === 0) {
+    return (kills + assists).toFixed(1);
+  }
+  return ((kills + assists) / deaths).toFixed(1);
+}
+
+// Lifecycle
+onMounted(() => {
+  loadVideoPath();
+  window.addEventListener("keydown", handleKeydown);
+  
+  // Set initial selected player
+  if (localPlayer.value) {
+    selectedPlayerPuuid.value = localPlayer.value.puuid;
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleKeydown);
+});
+</script>
+
+<template>
+  <div class="game-review">
+    <!-- Header -->
+    <header class="review-header">
+      <button class="back-btn" @click="emit('back')">
+        <span class="back-icon">←</span>
+        <span>Back to History</span>
+      </button>
+      
+      <div class="header-info">
+        <div class="header-champion">
+          <img
+            :src="getChampionImageUrl(getChampionName(game))"
+            :alt="getChampionName(game) || 'Champion'"
+            class="header-champion-img"
+          />
+          <div class="header-details">
+            <h1>{{ getChampionName(game) || 'Unknown Champion' }}</h1>
+            <div class="header-meta">
+              <span class="queue-type">{{ getQueueDisplayName(getQueueType(game), getQueueId(game)) }}</span>
+              <span class="duration">{{ formatDuration(game.duration_secs) }}</span>
+              <span class="result" :style="{ color: getResultColor(getGameResult(game)) }">
+                {{ getGameResult(game) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="header-actions">
+        <button 
+          class="toggle-stats-btn" 
+          :class="{ active: showTeamStats }"
+          @click="showTeamStats = !showTeamStats"
+        >
+          {{ showTeamStats ? 'Hide Team Stats' : 'Show Team Stats' }}
+        </button>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <div class="review-content">
+      <!-- Video Section -->
+      <div class="video-section" :class="{ 'with-sidebar': showTeamStats }">
+        <!-- Video Player -->
+        <div class="video-container">
+          <div v-if="videoError" class="video-error">
+            <div class="error-icon">⚠️</div>
+            <p>{{ videoError }}</p>
+          </div>
+          
+          <video
+            v-else-if="videoUrl"
+            ref="videoRef"
+            class="video-player"
+            @loadedmetadata="onVideoLoaded"
+            @timeupdate="onVideoTimeUpdate"
+            @play="onVideoPlay"
+            @pause="onVideoPause"
+            @ended="onVideoEnded"
+            @error="onVideoError"
+          >
+            <source :src="videoUrl" type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+          
+          <div v-else class="video-loading">
+            <div class="spinner"></div>
+            <p>Loading video...</p>
+          </div>
+          
+          <!-- Video Overlay Controls -->
+          <div class="video-overlay" v-if="videoUrl && !videoError">
+            <!-- Play/Pause Overlay -->
+            <div class="play-overlay" @click="togglePlay">
+              <div class="play-btn-large" v-if="!isPlaying">
+                <span>▶</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Video Controls -->
+        <div class="video-controls" v-if="videoUrl && !videoError">
+          <!-- Timeline with events -->
+          <div class="timeline-container">
+            <div class="timeline-bar" @click="onTimelineClick">
+              <!-- Progress bar -->
+              <div class="timeline-progress" :style="{ width: `${(currentTime / duration) * 100}%` }"></div>
+              
+              <!-- Clip selection region -->
+              <div 
+                v-if="clipStart !== null && clipEnd !== null"
+                class="clip-region"
+                :style="{ 
+                  left: `${(clipStart / duration) * 100}%`,
+                  width: `${((clipEnd - clipStart) / duration) * 100}%`
+                }"
+              ></div>
+              
+              <!-- Event markers -->
+              <div
+                v-for="(event, idx) in sortedEvents"
+                :key="idx"
+                class="event-marker"
+                :style="{ 
+                  left: `${getEventPosition(event)}%`,
+                  backgroundColor: getEventColor(event)
+                }"
+                :title="`${formatEventTime(event)} - ${event.event_type}: ${event.description}`"
+                @click.stop="seekToEvent(event)"
+                @mouseenter="hoveredEvent = event"
+                @mouseleave="hoveredEvent = null"
+              ></div>
+              
+              <!-- Current time indicator -->
+              <div class="time-indicator" :style="{ left: `${(currentTime / duration) * 100}%` }"></div>
+            </div>
+            
+            <!-- Event tooltip -->
+            <div 
+              v-if="hoveredEvent"
+              class="event-tooltip"
+              :style="{ left: `${getEventPosition(hoveredEvent)}%` }"
+            >
+              <div class="tooltip-time">{{ formatEventTime(hoveredEvent) }}</div>
+              <div class="tooltip-type">{{ hoveredEvent.event_type }}</div>
+              <div class="tooltip-desc">{{ hoveredEvent.description }}</div>
+            </div>
+          </div>
+          
+          <!-- Control buttons -->
+          <div class="controls-row">
+            <div class="controls-left">
+              <button class="control-btn" @click="togglePlay" :title="isPlaying ? 'Pause (Space)' : 'Play (Space)'">
+                <span v-if="isPlaying">⏸</span>
+                <span v-else>▶</span>
+              </button>
+              
+              <button class="control-btn" @click="seekRelative(-10)" title="Back 10s (←)">
+                <span>⏪</span>
+              </button>
+              
+              <button class="control-btn" @click="seekRelative(10)" title="Forward 10s (→)">
+                <span>⏩</span>
+              </button>
+              
+              <div class="time-display">
+                <span>{{ formatDuration(currentTime) }}</span>
+                <span class="time-sep">/</span>
+                <span>{{ formatDuration(duration) }}</span>
+              </div>
+            </div>
+            
+            <div class="controls-center">
+              <!-- Clip editing -->
+              <div class="clip-controls">
+                <button 
+                  class="clip-btn" 
+                  :class="{ active: clipStart !== null }"
+                  @click="setClipStartPoint"
+                  title="Set clip start (I)"
+                >
+                  [I] Start
+                </button>
+                <button 
+                  class="clip-btn" 
+                  :class="{ active: clipEnd !== null }"
+                  @click="setClipEndPoint"
+                  title="Set clip end (O)"
+                >
+                  [O] End
+                </button>
+                <span v-if="clipDuration" class="clip-duration">
+                  {{ formatDuration(clipDuration) }}
+                </span>
+                <button 
+                  v-if="clipStart !== null || clipEnd !== null"
+                  class="clip-btn clear"
+                  @click="clearClipPoints"
+                >
+                  Clear
+                </button>
+                <button 
+                  v-if="clipStart !== null && clipEnd !== null"
+                  class="clip-btn export"
+                  @click="exportClip"
+                  :disabled="isExporting"
+                >
+                  {{ isExporting ? 'Exporting...' : 'Export Clip' }}
+                </button>
+              </div>
+            </div>
+            
+            <div class="controls-right">
+              <!-- Playback speed -->
+              <select 
+                class="speed-select" 
+                :value="playbackRate"
+                @change="setPlaybackRate(parseFloat(($event.target as HTMLSelectElement).value))"
+              >
+                <option value="0.25">0.25x</option>
+                <option value="0.5">0.5x</option>
+                <option value="0.75">0.75x</option>
+                <option value="1">1x</option>
+                <option value="1.25">1.25x</option>
+                <option value="1.5">1.5x</option>
+                <option value="2">2x</option>
+              </select>
+              
+              <!-- Volume -->
+              <div class="volume-control">
+                <button class="control-btn" @click="toggleMute" :title="isMuted ? 'Unmute (M)' : 'Mute (M)'">
+                  <span v-if="isMuted || volume === 0">🔇</span>
+                  <span v-else-if="volume < 0.5">🔉</span>
+                  <span v-else>🔊</span>
+                </button>
+                <input 
+                  type="range" 
+                  class="volume-slider"
+                  min="0" 
+                  max="1" 
+                  step="0.1"
+                  :value="isMuted ? 0 : volume"
+                  @input="setVolume(parseFloat(($event.target as HTMLInputElement).value))"
+                />
+              </div>
+              
+              <button class="control-btn" @click="toggleFullscreen" title="Fullscreen (F)">
+                <span>⛶</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Export message -->
+        <div v-if="exportMessage" class="export-message" :class="{ error: exportMessage.includes('failed') }">
+          {{ exportMessage }}
+          <button @click="exportMessage = null">×</button>
+        </div>
+      </div>
+
+      <!-- Stats Sidebar -->
+      <div class="stats-sidebar" v-if="showTeamStats">
+        <!-- Player Stats Panel -->
+        <div class="stats-panel">
+          <h3>Player Stats</h3>
+          
+          <!-- Player selector -->
+          <div class="player-selector">
+            <button 
+              v-for="player in teamPlayers" 
+              :key="player.puuid"
+              class="player-btn"
+              :class="{ selected: selectedPlayerPuuid === player.puuid }"
+              @click="selectedPlayerPuuid = player.puuid"
+            >
+              <img :src="getChampionImageUrl(player.championName)" :alt="player.championName" />
+              <span class="player-name">{{ player.championName }}</span>
+              <span v-if="player.isLocalPlayer" class="you-badge">You</span>
+            </button>
+          </div>
+          
+          <!-- Selected player details -->
+          <div v-if="selectedPlayer" class="selected-player-details">
+            <div class="player-header">
+              <img :src="getChampionImageUrl(selectedPlayer.championName)" class="player-champion-img" />
+              <div class="player-info">
+                <div class="player-name-large">{{ selectedPlayer.championName }}</div>
+                <div class="player-riot-id">{{ formatPlayerName(selectedPlayer) }}</div>
+              </div>
+            </div>
+            
+            <div class="player-kda">
+              <div class="kda-values">
+                {{ selectedPlayer.stats.kills }} / {{ selectedPlayer.stats.deaths }} / {{ selectedPlayer.stats.assists }}
+              </div>
+              <div class="kda-ratio">
+                {{ calculatePlayerKDA(selectedPlayer) }} KDA
+              </div>
+            </div>
+            
+            <div class="player-stats-grid">
+              <div class="stat-item">
+                <span class="stat-value">{{ formatNumber(selectedPlayer.stats.goldEarned) }}</span>
+                <span class="stat-label">Gold</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-value">{{ selectedPlayer.stats.minionsKilled }}</span>
+                <span class="stat-label">CS</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-value">{{ formatNumber(selectedPlayer.stats.totalDamageDealtToChampions) }}</span>
+                <span class="stat-label">Damage</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-value">{{ formatNumber(selectedPlayer.stats.totalDamageTaken) }}</span>
+                <span class="stat-label">Taken</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-value">{{ selectedPlayer.stats.visionScore.toFixed(1) }}</span>
+                <span class="stat-label">Vision</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-value">{{ selectedPlayer.stats.level }}</span>
+                <span class="stat-label">Level</span>
+              </div>
+            </div>
+            
+            <!-- Items -->
+            <div class="player-items">
+              <div class="items-label">Items:</div>
+              <div class="items-row">
+                <div v-for="(itemId, idx) in selectedPlayer.items.slice(0, 6)" :key="idx" class="item-slot">
+                  <img v-if="itemId" :src="getItemImageUrl(itemId)" :alt="`Item ${itemId}`" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Team Stats Panel -->
+        <div class="stats-panel team-panel">
+          <h3>Team Overview</h3>
+          
+          <div class="team-table">
+            <div class="team-header">
+              <span>Champion</span>
+              <span>K/D/A</span>
+              <span>Gold</span>
+              <span>Damage</span>
+            </div>
+            
+            <div 
+              v-for="player in teamPlayers" 
+              :key="player.puuid"
+              class="team-row"
+              :class="{ local: player.isLocalPlayer }"
+              @click="selectedPlayerPuuid = player.puuid"
+            >
+              <div class="team-champion">
+                <img :src="getChampionImageUrl(player.championName)" :alt="player.championName" />
+                <span>{{ player.championName }}</span>
+              </div>
+              <div class="team-kda">
+                {{ player.stats.kills }}/{{ player.stats.deaths }}/{{ player.stats.assists }}
+              </div>
+              <div class="team-gold">{{ formatNumber(player.stats.goldEarned) }}</div>
+              <div class="team-damage">{{ formatNumber(player.stats.totalDamageDealtToChampions) }}</div>
+            </div>
+          </div>
+          
+          <h4 class="enemy-header">Enemy Team</h4>
+          
+          <div class="team-table enemy-table">
+            <div 
+              v-for="player in enemyPlayers" 
+              :key="player.puuid"
+              class="team-row enemy"
+            >
+              <div class="team-champion">
+                <img :src="getChampionImageUrl(player.championName)" :alt="player.championName" />
+                <span>{{ player.championName }}</span>
+              </div>
+              <div class="team-kda">
+                {{ player.stats.kills }}/{{ player.stats.deaths }}/{{ player.stats.assists }}
+              </div>
+              <div class="team-gold">{{ formatNumber(player.stats.goldEarned) }}</div>
+              <div class="team-damage">{{ formatNumber(player.stats.totalDamageDealtToChampions) }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Events List -->
+    <div class="events-panel">
+      <h3>Events Timeline</h3>
+      <div class="events-list">
+        <div
+          v-for="(event, idx) in sortedEvents"
+          :key="idx"
+          class="event-item"
+          :class="{ selected: selectedEvent === event }"
+          @click="seekToEvent(event)"
+        >
+          <div class="event-time" :style="{ color: getEventColor(event) }">
+            {{ formatEventTime(event) }}
+          </div>
+          <div class="event-type-badge" :style="{ backgroundColor: getEventColor(event) }">
+            {{ event.event_type }}
+          </div>
+          <div class="event-description">{{ event.description }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.game-review {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #0a0a13 0%, #0f0f1a 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.review-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background: rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.back-icon {
+  font-size: 1.2rem;
+}
+
+.header-info {
+  display: flex;
+  align-items: center;
+}
+
+.header-champion {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-champion-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.header-details h1 {
+  font-size: 1.25rem;
+  margin: 0;
+  font-weight: 600;
+}
+
+.header-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: #888;
+}
+
+.header-meta .result {
+  font-weight: 600;
+}
+
+.toggle-stats-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toggle-stats-btn.active {
+  background: rgba(200, 170, 110, 0.3);
+  border-color: #c8aa6e;
+}
+
+/* Main Content */
+.review-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Video Section */
+.video-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.video-section.with-sidebar {
+  max-width: calc(100% - 350px);
+}
+
+.video-container {
+  position: relative;
+  background: #000;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+
+.video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.play-btn-large {
+  width: 80px;
+  height: 80px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  transition: all 0.2s;
+}
+
+.play-overlay:hover .play-btn-large {
+  background: rgba(0, 0, 0, 0.8);
+  transform: scale(1.1);
+}
+
+.video-loading,
+.video-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+  padding: 2rem;
+}
+
+.video-error .error-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #333;
+  border-top-color: #c8aa6e;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Video Controls */
+.video-controls {
+  background: rgba(0, 0, 0, 0.8);
+  padding: 0.75rem 1rem;
+}
+
+.timeline-container {
+  position: relative;
+  margin-bottom: 0.75rem;
+}
+
+.timeline-bar {
+  position: relative;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: visible;
+}
+
+.timeline-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: rgba(200, 170, 110, 0.5);
+  border-radius: 4px 0 0 4px;
+  pointer-events: none;
+}
+
+.clip-region {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background: rgba(74, 222, 128, 0.3);
+  border-left: 2px solid #4ade80;
+  border-right: 2px solid #4ade80;
+  pointer-events: none;
+}
+
+.event-marker {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 16px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.15s;
+  z-index: 1;
+}
+
+.event-marker:hover {
+  transform: translate(-50%, -50%) scale(1.5);
+  z-index: 2;
+}
+
+.time-indicator {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  width: 3px;
+  height: 100%;
+  background: #c8aa6e;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.event-tooltip {
+  position: absolute;
+  bottom: 100%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  z-index: 10;
+  margin-bottom: 8px;
+}
+
+.tooltip-time {
+  color: #c8aa6e;
+  font-weight: 600;
+}
+
+.tooltip-type {
+  color: #fff;
+  font-weight: 500;
+}
+
+.tooltip-desc {
+  color: #888;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.controls-left,
+.controls-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.controls-center {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.control-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: #fff;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  transition: all 0.2s;
+}
+
+.control-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.time-display {
+  font-family: monospace;
+  font-size: 0.9rem;
+  color: #fff;
+  padding: 0 0.5rem;
+}
+
+.time-sep {
+  color: #666;
+  margin: 0 0.25rem;
+}
+
+/* Clip Controls */
+.clip-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.clip-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  padding: 0.35rem 0.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: all 0.2s;
+}
+
+.clip-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.clip-btn.active {
+  background: rgba(74, 222, 128, 0.3);
+  border-color: #4ade80;
+}
+
+.clip-btn.clear {
+  border-color: #f87171;
+}
+
+.clip-btn.export {
+  background: rgba(200, 170, 110, 0.3);
+  border-color: #c8aa6e;
+}
+
+.clip-btn.export:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.clip-duration {
+  font-family: monospace;
+  font-size: 0.85rem;
+  color: #4ade80;
+  padding: 0 0.5rem;
+}
+
+/* Volume Control */
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.volume-slider {
+  width: 60px;
+  height: 4px;
+  -webkit-appearance: none;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  background: #c8aa6e;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Speed Select */
+.speed-select {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  padding: 0.35rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.speed-select option {
+  background: #1a1a2e;
+}
+
+/* Export Message */
+.export-message {
+  position: fixed;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(74, 222, 128, 0.9);
+  color: #000;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  z-index: 100;
+}
+
+.export-message.error {
+  background: rgba(248, 113, 113, 0.9);
+  color: #fff;
+}
+
+.export-message button {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+/* Stats Sidebar */
+.stats-sidebar {
+  width: 350px;
+  background: rgba(0, 0, 0, 0.3);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.stats-panel {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.stats-panel h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  color: #c8aa6e;
+}
+
+/* Player Selector */
+.player-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.player-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #fff;
+  padding: 0.35rem 0.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.player-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.player-btn.selected {
+  background: rgba(200, 170, 110, 0.3);
+  border-color: #c8aa6e;
+}
+
+.player-btn img {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+}
+
+.player-btn .player-name {
+  font-size: 0.75rem;
+}
+
+.you-badge {
+  background: #c8aa6e;
+  color: #000;
+  font-size: 0.6rem;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-weight: 600;
+}
+
+/* Selected Player Details */
+.selected-player-details {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 1rem;
+}
+
+.player-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.player-champion-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+}
+
+.player-info .player-name-large {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.player-info .player-riot-id {
+  font-size: 0.8rem;
+  color: #888;
+}
+
+.player-kda {
+  text-align: center;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+}
+
+.kda-values {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #fff;
+}
+
+.kda-ratio {
+  font-size: 0.9rem;
+  color: #c8aa6e;
+}
+
+.player-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+}
+
+.stat-value {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  color: #888;
+  text-transform: uppercase;
+}
+
+.player-items {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 0.75rem;
+}
+
+.items-label {
+  font-size: 0.75rem;
+  color: #888;
+  margin-bottom: 0.5rem;
+}
+
+.items-row {
+  display: flex;
+  gap: 4px;
+}
+
+.item-slot {
+  width: 32px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.item-slot img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Team Panel */
+.team-panel {
+  flex: 1;
+}
+
+.enemy-header {
+  margin: 1rem 0 0.5rem 0;
+  font-size: 0.85rem;
+  color: #f87171;
+}
+
+.team-table {
+  font-size: 0.8rem;
+}
+
+.team-header {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  color: #888;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.team-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  align-items: center;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.team-row:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.team-row.local {
+  background: rgba(200, 170, 110, 0.1);
+}
+
+.team-row.enemy {
+  cursor: default;
+}
+
+.team-champion {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.team-champion img {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+}
+
+.team-kda {
+  font-family: monospace;
+}
+
+.team-gold,
+.team-damage {
+  font-family: monospace;
+  color: #888;
+}
+
+/* Events Panel */
+.events-panel {
+  background: rgba(0, 0, 0, 0.3);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 1rem 1.5rem;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.events-panel h3 {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.9rem;
+  color: #888;
+}
+
+.events-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.event-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.35rem 0.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 0.8rem;
+}
+
+.event-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.event-item.selected {
+  background: rgba(200, 170, 110, 0.2);
+  border: 1px solid #c8aa6e;
+}
+
+.event-time {
+  font-family: monospace;
+  font-weight: 600;
+}
+
+.event-type-badge {
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.event-description {
+  color: #888;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+  .video-section.with-sidebar {
+    max-width: 100%;
+  }
+  
+  .stats-sidebar {
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 50;
+    transform: translateX(100%);
+    transition: transform 0.3s;
+  }
+  
+  .stats-sidebar:not(.hidden) {
+    transform: translateX(0);
+  }
+}
+</style>