From 8c2fbfef74fa53f6767cf8f812150b95af54f134 Mon Sep 17 00:00:00 2001
From: kodi <kodi@lab.local>
Date: Thu, 12 Mar 2026 10:37:06 +0100
Subject: [PATCH] feat: videoplayer toegevoegd

---
 project_docs/VIDEO_STREAMING_V1_DESIGN.md     | 228 ++++++++++++++++++
 .../__pycache__/routes_files.cpython-313.pyc  | Bin 2852 -> 3605 bytes
 webui/backend/app/api/routes_files.py         |  18 +-
 .../filesystem_adapter.cpython-313.pyc        | Bin 6402 -> 7115 bytes
 webui/backend/app/fs/filesystem_adapter.py    |  11 +
 .../file_ops_service.cpython-313.pyc          | Bin 14153 -> 17860 bytes
 .../backend/app/services/file_ops_service.py  |  95 ++++++++
 .../test_api_video_golden.cpython-313.pyc     | Bin 0 -> 9177 bytes
 .../test_ui_smoke_golden.cpython-313.pyc      | Bin 9580 -> 10127 bytes
 .../tests/golden/test_api_video_golden.py     | 120 +++++++++
 .../tests/golden/test_ui_smoke_golden.py      |   7 +
 webui/html/app.js                             |  98 +++++++-
 webui/html/index.html                         |  11 +
 webui/html/style.css                          |   8 +
 14 files changed, 593 insertions(+), 3 deletions(-)
 create mode 100644 project_docs/VIDEO_STREAMING_V1_DESIGN.md
 create mode 100644 webui/backend/tests/golden/__pycache__/test_api_video_golden.cpython-313.pyc
 create mode 100644 webui/backend/tests/golden/test_api_video_golden.py

diff --git a/project_docs/VIDEO_STREAMING_V1_DESIGN.md b/project_docs/VIDEO_STREAMING_V1_DESIGN.md
new file mode 100644
index 0000000..b7c6469
--- /dev/null
+++ b/project_docs/VIDEO_STREAMING_V1_DESIGN.md
@@ -0,0 +1,228 @@
+# Video Streaming v1
+
+## Doel
+
+Video Streaming v1 voegt een kleine, veilige manier toe om videobestanden direct vanuit de webui af te spelen in de browser, zonder eerst een volledige lokale kopie te maken. Dat past bij de bestaande dual-pane workflow: bestanden blijven centraal browsebaar, en video openen wordt een gerichte viewer-actie binnen dezelfde app.
+
+De kern is browser-native streaming via HTTP, niet het bouwen van een mediaserver. De app blijft een file manager met een beperkte preview-/playbackfunctie.
+
+## Scope
+
+Video Streaming v1 ondersteunt:
+
+- `mp4`
+- `mkv`
+- afspelen in een modal/popup video viewer
+- browser-native:
+  - play/pause
+  - seek/scrub bar
+  - volume
+  - fullscreen
+
+Niet in scope voor v1:
+
+- transcoding
+- codecconversie
+- adaptive bitrate streaming
+- playlists
+- thumbnails / chapter support
+- picture-in-picture specifieke UI-logica
+- ingebedde subtitle-extractie uit containers
+
+Ondertiteling in v1 is alleen kansrijk als losse subtitle-bestanden later eenvoudig gekoppeld kunnen worden; dat is niet de basis van deze eerste slice.
+
+## Open-/Afspeelgedrag in de UI
+
+Aanbevolen v1-gedrag:
+
+- dubbelklik op videobestand = afspelen
+- `Enter` op geselecteerd videobestand = afspelen
+- gewone single click blijft selectie
+- klik op directorynaam blijft directory openen
+
+Dit sluit aan op standaard file-manager gedrag:
+
+- selecteren en openen blijven gescheiden
+- directory-open gedrag blijft intact
+- video-open is alleen voor videobestanden
+
+Rechtermuisknop/contextmenu blijft buiten scope. Dat zou extra event-complexiteit toevoegen zonder noodzaak voor een eerste bruikbare versie.
+
+## Streamingmodel
+
+De aanbevolen techniek is een read-only HTTP endpoint met `Range` request ondersteuning.
+
+Waarom:
+
+- browsers kunnen dan direct streamen en seeken
+- grote bestanden hoeven niet volledig in memory of eerst volledig gedownload te worden
+- dit past goed bij `<video src="...">`
+
+Gewenst gedrag:
+
+- browser vraagt een eerste byte-range op
+- server serveert alleen de gevraagde byte-range
+- bij seeken vraagt de browser een nieuw bereik op
+- response gebruikt `206 Partial Content` waar nodig
+
+Dit is beter dan volledige download vooraf omdat:
+
+- startup sneller is
+- geheugenverbruik laag blijft
+- netwerkverkeer beperkt blijft tot wat de speler echt nodig heeft
+
+## Backend-impact
+
+Aanbevolen nieuw endpoint:
+
+- `GET /api/files/video?path=...`
+
+Aanvullend gedrag:
+
+- alleen files
+- alleen binnen bestaand `path_guard` / whitelist model
+- directory => `type_conflict`
+- niet gevonden => `path_not_found`
+- traversal / buiten whitelist => bestaande securityfouten
+
+Belangrijke backendvereisten:
+
+- valideer pad via bestaand `path_guard`
+- valideer dat het om een file gaat
+- content-type bepalen op basis van extensie / bekende mapping
+- `Range` request parsing ondersteunen
+- response streamen vanaf filehandle, niet eerst volledig inlezen
+- correcte headers:
+  - `Accept-Ranges: bytes`
+  - `Content-Range` bij partial content
+  - `Content-Length`
+  - passend `Content-Type`
+
+Geheugenverbruik blijft laag door:
+
+- file in chunks te lezen
+- geen volledige buffering
+- directe streamingresponse
+
+## Frontend-impact
+
+Aanbevolen richting:
+
+- aparte video modal naast bestaande text `View` modal
+- geen overbelasting van de huidige tekstviewer
+
+Reden:
+
+- tekst-view en video-view hebben ander gedrag
+- regressierisico blijft lager als beide modaltypen gescheiden zijn
+
+UI-richting:
+
+- bestaand selectiemechanisme blijft
+- open-actie detecteert videotype
+- video opent in aparte modal met `<video controls>`
+
+Dat laat de bestaande tekst-viewflow intact en voorkomt dat `View` v1 voor tekst regressies krijgt.
+
+## MKV / Codec-realiteit
+
+`mkv` als container betekent niet dat elke browser het bestand echt kan afspelen.
+
+Belangrijke realiteit:
+
+- browser support hangt af van codecs in de container
+- bijvoorbeeld H.264/AAC in MP4 is meestal kansrijker
+- MKV met niet-ondersteunde codecs kan ondanks correcte streaming nog steeds niet afspelen
+
+Veilige v1-verwachting:
+
+- server ondersteunt streaming van `mkv`
+- browser probeert native playback
+- als browser/codec-combinatie niet ondersteund wordt, toont de UI een nette melding dat afspelen in deze browser niet beschikbaar is
+
+Dus:
+
+- v1 belooft streaming
+- v1 belooft geen universele codeccompatibiliteit
+
+## Ondertiteling
+
+Veilige v1-richting:
+
+- geen ingebedde MKV subtitles
+- eventueel later alleen losse subtitle-bestanden zoals `.vtt` of `.srt`
+
+Waarom ingebedde subtitles buiten scope zijn:
+
+- vereist parsing/extractie uit container
+- verhoogt backendcomplexiteit duidelijk
+- browsers ondersteunen losse tracks eenvoudiger dan container-interne subtitles
+
+Conclusie:
+
+- subtitles niet als kern van v1
+- als later toegevoegd, begin met losse subtitle-bestanden
+
+## Risico's
+
+Belangrijkste risico's:
+
+- correcte `Range` handling
+- browser codec support
+- grote files / seek-gedrag
+- security op file access
+- regressie op bestaande view/open-flow
+
+Specifiek:
+
+- foutieve range-implementatie breekt seeken
+- te brede content-type toelating maakt gedrag onduidelijk
+- combineren van tekst-view en video-view in één modal verhoogt regressierisico
+
+## Teststrategie
+
+Backend golden tests:
+
+- video endpoint success voor ondersteund pad
+- range request geeft partial content
+- directory => `type_conflict`
+- path not found
+- traversal attempt
+- invalid/non-video type indien endpoint daarop beperkt wordt
+
+UI smoke/regressietests:
+
+- video modal container aanwezig
+- JS wiring voor dubbelklik / `Enter` op videobestand
+- bestaande directory-open flow blijft bestaan
+- bestaande tekst-viewflow blijft bestaan
+
+Handmatige validatie:
+
+- mp4 opent en speelt af
+- seek werkt
+- fullscreen werkt
+- sluiten modal werkt
+- mkv met browser-ondersteunde codec speelt
+- mkv met niet-ondersteunde codec faalt netjes
+
+## Aanbeveling
+
+Aanbevolen v1-richting met laag regressierisico:
+
+- nieuw backend endpoint `GET /api/files/video?path=...`
+- read-only streaming met `Range` support
+- aparte video modal in de frontend
+- openen via:
+  - dubbelklik op videobestand
+  - `Enter` op geselecteerd videobestand
+- `mp4` als primaire happy path
+- `mkv` technisch toestaan, maar met expliciete verwachting dat browser/codec support kan verschillen
+- geen subtitle-feature als kern van v1
+
+Dit is de kleinste bruikbare stap die:
+
+- goed past bij de huidige app
+- bestaande security hergebruikt
+- geen mediaserver-architectuur introduceert
+- regressierisico op browse/view/edit laag houdt
diff --git a/webui/backend/app/api/__pycache__/routes_files.cpython-313.pyc b/webui/backend/app/api/__pycache__/routes_files.cpython-313.pyc
index 7ee3b6be80220b1122bcd7c3a84e6cff376e3964..4754228192668d7237c9f061634fdfc8ea72d889 100644
GIT binary patch
literal 3605
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
aY#CM&B&--@@16!6qMUv#0mom5>i-Yepyzb}

delta 1139
zcmaiz&rcIU6vy{hcemYcTPSU5saV?vDF%p%5D5k)Q3&OrVGdr_5TI*+Sh~&Zq8ClQ
z=}FT}OgtMdp49M97*BXGCYyNnY9vOyIdA%dQXuSRzdQ5Zo6o#AKi(vFqk#im_i^-@
zFMTS1keh*F;WytL9}TBC#36Cjlb5laSFn;-aq~gE!OYTXFdxDp*7mFp<OlI!iZjGC
zhh(J8@i=UR*Kz<o{vg%xBJZ4FNNLUp&G0SnHGY)qyeNWv39cel_?h-l9682nbcska
zv~yrl<nMz;kHL;ux}luIilG3o8a<iCDC}yN(QTlh5datp_0=hKs%-tyFdFDfFMdXP
zgNEKtZ~Cl-i=%KKEKwZFCCGCj5)oYQ;=PqMYsWFMtK2s0X02fFeHJRbJVevR5prF+
z<BLKQ#7|yGUnVX<cN8Q>#TKZfQaAyIiyeW{c9z_dqv4Om@3Tu^XO~_s>}$*W((*q%
zLUui+X~5(JS1y=UlTOd5CxDj#2$Cf8^0S)|<f;!XylxiCPL6k_$7S<LPHc_NKyaLj
zEmBE!lFEV^BuoCv6XZ~Rr8ADQWz`(B=8)IkWUHt#h`bDPB9U>hf=rTc-j&8MbX5?T
z4~M9@GB%wZT*F@4$;p_7zy&%A!Ep4k*5j8?@hjk0SxK&FI~YS<uC!@c)edTkVi+sX
z!}6cP(!oDM{`j&PH@3O4^@wip)JDBdzw(s5RWi3XY|N5?S;<{3L!N3Qe2~1=uB^AK
zYMl<LZqZ!WQDD0ao8pQ^(_u@?mgYToK#d$b3a)x%+bZl-%>_J5ZE&OQcT|6gJkS5&
T(m%Pey-ELlp6u(35?ty3fD*g>

diff --git a/webui/backend/app/api/routes_files.py b/webui/backend/app/api/routes_files.py
index e09e51c..87befbf 100644
--- a/webui/backend/app/api/routes_files.py
+++ b/webui/backend/app/api/routes_files.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, Request
+from fastapi.responses import StreamingResponse
 
 from backend.app.api.schemas import DeleteRequest, DeleteResponse, MkdirRequest, MkdirResponse, RenameRequest, RenameResponse, SaveRequest, SaveResponse, ViewResponse
 from backend.app.dependencies import get_file_ops_service
@@ -42,6 +43,21 @@ async def view(
     return service.view(path=path, for_edit=for_edit)
 
 
+@router.get("/video")
+async def video(
+    path: str,
+    request: Request,
+    service: FileOpsService = Depends(get_file_ops_service),
+) -> StreamingResponse:
+    prepared = service.prepare_video_stream(path=path, range_header=request.headers.get("range"))
+    return StreamingResponse(
+        prepared["content"],
+        status_code=prepared["status_code"],
+        headers=prepared["headers"],
+        media_type=prepared["content_type"],
+    )
+
+
 @router.post("/save", response_model=SaveResponse)
 async def save(
     request: SaveRequest,
diff --git a/webui/backend/app/fs/__pycache__/filesystem_adapter.cpython-313.pyc b/webui/backend/app/fs/__pycache__/filesystem_adapter.cpython-313.pyc
index 47f54d95ab09d1f0ab47fd801dc2bb90a5993797..4a311659b20d49d6baf833c1eb2225d465785c30 100644
GIT binary patch
delta 1317
zcmZXT?`s@I7{_OBf8Fogk0iI3yQEi7jEg;yKuBBKl(bOLY735sjXgZp?B3<lyN#LM
zC=KG3`XY@M6PX56D_BHmp)Zu?FQ}kzd{yd;W1;%OS3$&R#lG={&&*vCgU`WtKl9A<
zd}nrU_R81~6Y<BfSQtUvUB1`&F8)dU>-IM=T1OQ`F+nsyFqKG>1cuO@Ol6WHk|2eo
zi7ZGZ{X`L@0jYw5WPoUbLeLQu6b1?jijYB)Ara1Vm_~_CvLxCY#mIzChDfY8jFTM6
zlX!2`S4ogz(#J>Re9sUxNfI<w4;v$!Hr|Tjt<7`sQ<8dtPgU4P^5ujD=u6ammk#k{
zbMvp{J&Y;4oi1e@$QUwxj!zus(&9qduj#eC0=N?zfD}OZv5pZcq5}IPl4ZX~qpG8n
zl~*N}l+x^IFfwv}tOSQi0wt(-)UryXqt_8Kk0S(S3R?)I+uTaT`P1WpE{%gJ4@WC&
z&vp@6kUN(vs~1AO1S)Ggb)}4O*Cyn5&^j)l-F3k46<CXi-;R3$)zLw82z8y=p=6?6
zN5`cDsD>w`8aCv!^mSN+&T-*8G8D>>&zD`>zDO$^rB=hC^L#G2cUZpSdM5RJ$#yJ1
zJTtrKT&%i{CEHhLO~-25eu&yFv*9$HI;}yk8w4ppw7Jj(H%_`9war$w)@a&QYC3h>
zFP;W=FS(xGnzGEdJ)1uNzoKbw$M>^^E~8E?xjMZvz2;r3-cmc!)asd)GaJf}(UDFz
ze<ODXKhTY<FLqM74U?5R`p6fN%8kfZr|yIwK0WzRKe49#l*xDcvz<itb8>6o<{J+Z
zqidngV2(w$BPgBUFxN{@G!!3Rt$tkn#~p@6ucS_f@%5>psUy<;7ec`IkAzQZ+P9Jh
zyt&jrim}7K94KOoeLwISUSZ~7p}hi)^g|FsrIYaRC3q`(f@eSCvNtbxucEq}y~-&H
z0;kVgyA6A-Cghg-X3S>Oe5+{}-YcA)ckKTd;w5FV?bS+$p<mo`VZFee3@&unlW)S8
zt;USEuT*>$Vwd|%={2Y~Fy(*8zJ~X?qwsF`sEFw0og{p5d)pB2&Ap8@Tgbdwtn;cx
zE|<7`0OCjCqIr#(mhH{XThw8{Wpa3#h4egrjXk3u)BcW!l>GJ}v-B}sWuNK?Us~q9
zX)fZL1&_7nt;ME2N!KCAKR5RP$hL$reuSR-1;u_wqmPjOM6F`nz<(m~5C;DO*McPX

delta 663
zcmY+A&u-H|5XL>R<2tGB{3|5b2!fC*Stt^!gxW)u9=IZkG`#=?*CZ~uwHvZ=1*+1f
zaO6_ZiVMB<&?_ntPl0#=zX4o8aN@?!wj$JrZ+|oMeWP7}nSVWJ|F*26BEEy&lgPH-
z*&jzoqI$2aDhyCzIRvI+8FP-Zp)n0Bs7lIX6*WmZ)-W$=N{}wez!{v9R1gV6Qc+Mr
z(llPci#ScZ0nEfYHqbn)EcEJl39YlzUM-=6HdVLimf~Y&EV0VdqUVkW@Xds1{K&qo
z>JMo2kRMm>lsf`5l?5-DL(R=`uKEd}&p+2%^+a?$joqNZ0!d8L=YMK%$A$VVK*Db}
zuETx4()a*-{70iX+9StEh^Mo*I5KsRGPXqBeUiysJ6);&>+TYnLOer8PXm+ani%br
zIzb!<PvWpSY~Jl{h5s#to&5GFU2iRjyu7Vk{hYRXBz=;761qgDb)!yt&MIFg4d<=w
zmGF!IFj*>JK~Arl8NR<2B%$wTMc?Ob=iZfdF<>dlOCgy#NP{%$Bw_lj*JTMmaa<Vk
zug+yy=HH#g+)tag+&Os6*W7E)kYY8GGG&d$q}Sb!!!~=v58bPk6@UnSDe{oEzvaY{
A4FCWD

diff --git a/webui/backend/app/fs/filesystem_adapter.py b/webui/backend/app/fs/filesystem_adapter.py
index 87ac3a4..ff1c572 100644
--- a/webui/backend/app/fs/filesystem_adapter.py
+++ b/webui/backend/app/fs/filesystem_adapter.py
@@ -86,6 +86,17 @@ class FilesystemAdapter:
             "modified": self.modified_iso(path),
         }
 
+    async def stream_file_range(self, path: Path, start: int, end: int, chunk_size: int = 1024 * 1024):
+        with path.open("rb") as handle:
+            handle.seek(start)
+            remaining = (end - start) + 1
+            while remaining > 0:
+                chunk = handle.read(min(chunk_size, remaining))
+                if not chunk:
+                    break
+                remaining -= len(chunk)
+                yield chunk
+
     @staticmethod
     def modified_iso(path: Path) -> str:
         stat = path.stat()
diff --git a/webui/backend/app/services/__pycache__/file_ops_service.cpython-313.pyc b/webui/backend/app/services/__pycache__/file_ops_service.cpython-313.pyc
index 3eb545c489c819d7470881760d8e4401594a850f..452d4042d645120ef20c5cb32c320565405575ac 100644
GIT binary patch
delta 5583
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
TInMikRWF$M&i~~QnN`077I_SJ

delta 2939
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

diff --git a/webui/backend/app/services/file_ops_service.py b/webui/backend/app/services/file_ops_service.py
index 7ddd414..fe354af 100644
--- a/webui/backend/app/services/file_ops_service.py
+++ b/webui/backend/app/services/file_ops_service.py
@@ -25,6 +25,10 @@ SPECIAL_TEXT_FILENAMES = {
     "dockerfile": "text/plain",
     "containerfile": "text/plain",
 }
+VIDEO_CONTENT_TYPES = {
+    ".mp4": "video/mp4",
+    ".mkv": "video/x-matroska",
+}
 
 
 class FileOpsService:
@@ -302,6 +306,53 @@ class FileOpsService:
             modified=saved["modified"],
         )
 
+    def prepare_video_stream(self, path: str, range_header: str | None = None) -> dict:
+        resolved_target = self._path_guard.resolve_existing_path(path)
+
+        if resolved_target.absolute.is_dir():
+            raise AppError(
+                code="type_conflict",
+                message="Source must be a file",
+                status_code=409,
+                details={"path": resolved_target.relative},
+            )
+        if not resolved_target.absolute.is_file():
+            raise AppError(
+                code="type_conflict",
+                message="Unsupported path type for video",
+                status_code=409,
+                details={"path": resolved_target.relative},
+            )
+
+        content_type = self._video_content_type_for(resolved_target.absolute)
+        if content_type is None:
+            raise AppError(
+                code="unsupported_type",
+                message="File type is not supported for video playback",
+                status_code=409,
+                details={"path": resolved_target.relative},
+            )
+
+        file_size = int(resolved_target.absolute.stat().st_size)
+        start = 0
+        end = max(file_size - 1, 0)
+        status_code = 200
+        headers = {"Accept-Ranges": "bytes"}
+
+        if range_header:
+            start, end = self._parse_range_header(range_header, file_size)
+            status_code = 206
+            headers["Content-Range"] = f"bytes {start}-{end}/{file_size}"
+
+        headers["Content-Length"] = str(max((end - start) + 1, 0))
+
+        return {
+            "status_code": status_code,
+            "headers": headers,
+            "content_type": content_type,
+            "content": self._filesystem.stream_file_range(resolved_target.absolute, start, end),
+        }
+
     @staticmethod
     def _join_relative(base: str, name: str) -> str:
         return f"{base}/{name}" if base else name
@@ -313,6 +364,10 @@ class FileOpsService:
             return special_name
         return TEXT_CONTENT_TYPES.get(path.suffix.lower())
 
+    @staticmethod
+    def _video_content_type_for(path: Path) -> str | None:
+        return VIDEO_CONTENT_TYPES.get(path.suffix.lower())
+
     def _record_history(
         self,
         *,
@@ -363,3 +418,43 @@ class FileOpsService:
         from datetime import datetime, timezone
 
         return datetime.now(timezone.utc).replace(microsecond=0).isoformat().replace("+00:00", "Z")
+    @staticmethod
+    def _parse_range_header(range_header: str, file_size: int) -> tuple[int, int]:
+        def invalid_range() -> AppError:
+            return AppError(
+                code="invalid_request",
+                message="Invalid Range header",
+                status_code=400,
+            )
+
+        if not range_header.startswith("bytes="):
+            raise invalid_range()
+        value = range_header[len("bytes="):].strip()
+        if "," in value or "-" not in value:
+            raise invalid_range()
+        start_text, end_text = value.split("-", 1)
+        if start_text == "" and end_text == "":
+            raise invalid_range()
+
+        try:
+            if start_text == "":
+                suffix_length = int(end_text)
+                if suffix_length <= 0:
+                    raise invalid_range()
+                if suffix_length >= file_size:
+                    return 0, max(file_size - 1, 0)
+                return file_size - suffix_length, file_size - 1
+
+            start = int(start_text)
+            if start < 0 or start >= file_size:
+                raise invalid_range()
+
+            if end_text == "":
+                return start, file_size - 1
+
+            end = int(end_text)
+            if end < start:
+                raise invalid_range()
+            return start, min(end, file_size - 1)
+        except ValueError as exc:
+            raise invalid_range() from exc
diff --git a/webui/backend/tests/golden/__pycache__/test_api_video_golden.cpython-313.pyc b/webui/backend/tests/golden/__pycache__/test_api_video_golden.cpython-313.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..422d29f06901aacecec54513000e0e8d812cd03d
GIT binary patch
literal 9177
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

literal 0
HcmV?d00001

diff --git a/webui/backend/tests/golden/__pycache__/test_ui_smoke_golden.cpython-313.pyc b/webui/backend/tests/golden/__pycache__/test_ui_smoke_golden.cpython-313.pyc
index 44b2448136c20da037006bff3dc2178293fee8cb..6732ac56f5d9998aad17d968eedec501a061ef35 100644
GIT binary patch
delta 607
zcmaFk)$h;unU|M~0SGp=ZOROj+Q|2hnK5TGFG~UY<b~WhllMsoOpaw0nas;$0;WTG
zApA-m-pNs{;*1uP!+4Y#EkUH9RVcG56UZnA1_cIvhG6T-T|DiKHk*Zb;~6alGE;1o
z$}&?@^L2CcQxbEOsss@t1v!b8sYOavA_$@6oc!Wc-K3Jd&G~$XnHe8$HWoU=I9Wqj
zZt_$S{>d34a+_sEE;GtnN(C9RBr`&61(U2ml9_>l@iQCSWIh&^&4yz4nJ2Fi7h{x~
zJYQUSaw><w<T@#_$=w`$lh=uhOkNA51*EJd-;&~;yjonGSw56y@<MS%W(6p%2%#C3
zCf}CQWmOJV309rVE3L|@9IO_sYRQzxHaT8eoS8LPeR2S+f>0=1um&Ow(it>0H@8c(
zGu2C_mF6XvWaj57<QJsog@J-0EHkw{wMav=N){X{dXO;CD=tb_uvI87DN0Su4K2#C
zuF^`$PcF?(%`4GMPc3oHNd+;TDm_y)prHv5C?(A*siORHz5KkCq@3iO%;apKK^m!L
znhLheb_&&-du2nJ*^+^wQ#@hw3k4-cW1|gjS2(P1aPai=cJf{jGu=>jg~JZcbvgi)
z^@ejHiZ?SVy<+6>W@I)09>t`&`LnVoqi8K7qvZ^a>k^t5B{aV<fOsDqSSAOmN&^74
C^RS-)

delta 319
zcmeD8f8)jXnU|M~0SMmKZOYsyv61f|GZO>n<cDG^n~hk!*(cv*Q<+@Loimx2$7J$a
z9+AnRJOW_4l82W?pCQ;{@;9D#M$650yzz{iCHN0AGj7>@OXv*a<S0@8$=*QxR+xX2
z=n+O)W~o4HmSjedO;ErJq?s8Q7(bV>Zhk1n%rdz|+KO2!lx1?Dgd(#vkXDpdW`yu$
zA)=GlN%KzjmQiGt4^{|PoLnfQ3S=n(S+iwi8I>mouqp_JvIVP{GC^!mU`S`sRNeeq
zhMj41seA}CTLMtLIArsAB_+nqx+)JDIXoCy&A*2*scsfi^JFwAV`Q|P!Es$e^P+_2
k7X}dTLlH9r3r|PYWoF46EIjSLO}?%EAAmwqMPfjs0E5U;%>V!Z

diff --git a/webui/backend/tests/golden/test_api_video_golden.py b/webui/backend/tests/golden/test_api_video_golden.py
new file mode 100644
index 0000000..a6984d2
--- /dev/null
+++ b/webui/backend/tests/golden/test_api_video_golden.py
@@ -0,0 +1,120 @@
+from __future__ import annotations
+
+import asyncio
+import sys
+import tempfile
+import unittest
+from pathlib import Path
+
+import httpx
+from starlette.requests import Request
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[3]))
+
+from backend.app.api.routes_files import video as video_route
+from backend.app.dependencies import get_file_ops_service
+from backend.app.fs.filesystem_adapter import FilesystemAdapter
+from backend.app.main import app
+from backend.app.security.path_guard import PathGuard
+from backend.app.services.file_ops_service import FileOpsService
+
+
+class VideoApiGoldenTest(unittest.TestCase):
+    def setUp(self) -> None:
+        self.temp_dir = tempfile.TemporaryDirectory()
+        self.root = Path(self.temp_dir.name) / "root"
+        self.root.mkdir(parents=True, exist_ok=True)
+        path_guard = PathGuard({"storage1": str(self.root)})
+        self.service = FileOpsService(path_guard=path_guard, filesystem=FilesystemAdapter())
+
+        async def _override_file_ops_service() -> FileOpsService:
+            return self.service
+
+        app.dependency_overrides[get_file_ops_service] = _override_file_ops_service
+
+    def tearDown(self) -> None:
+        app.dependency_overrides.clear()
+        self.temp_dir.cleanup()
+
+    def _request(self, path: str, headers: dict[str, str] | None = None) -> httpx.Response:
+        async def _run() -> httpx.Response:
+            transport = httpx.ASGITransport(app=app)
+            async with httpx.AsyncClient(transport=transport, base_url="http://testserver") as client:
+                return await client.get("/api/files/video", params={"path": path}, headers=headers)
+
+        return asyncio.run(_run())
+
+    def _stream_route(self, path: str, headers: dict[str, str] | None = None) -> tuple[object, bytes]:
+        async def _run() -> tuple[object, bytes]:
+            scope = {
+                "type": "http",
+                "method": "GET",
+                "path": "/api/files/video",
+                "headers": [
+                    (key.lower().encode("latin-1"), value.encode("latin-1"))
+                    for key, value in (headers or {}).items()
+                ],
+            }
+            response = await video_route(path=path, request=Request(scope), service=self.service)
+            body = b""
+            async for chunk in response.body_iterator:
+                body += chunk
+            return response, body
+
+        return asyncio.run(_run())
+
+    def test_video_stream_success_mp4(self) -> None:
+        payload = b"\x00\x00\x00\x20ftypisom\x00\x00\x00\x00mp42"
+        (self.root / "sample.mp4").write_bytes(payload)
+
+        response, body = self._stream_route("storage1/sample.mp4")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.headers["content-type"], "video/mp4")
+        self.assertEqual(response.headers["accept-ranges"], "bytes")
+        self.assertEqual(response.headers["content-length"], str(len(payload)))
+        self.assertEqual(body, payload)
+
+    def test_video_stream_range_partial_content(self) -> None:
+        payload = b"abcdefghijklmnopqrstuvwxyz"
+        (self.root / "clip.mp4").write_bytes(payload)
+
+        response, body = self._stream_route("storage1/clip.mp4", headers={"Range": "bytes=2-5"})
+
+        self.assertEqual(response.status_code, 206)
+        self.assertEqual(response.headers["accept-ranges"], "bytes")
+        self.assertEqual(response.headers["content-range"], f"bytes 2-5/{len(payload)}")
+        self.assertEqual(response.headers["content-length"], "4")
+        self.assertEqual(body, b"cdef")
+
+    def test_video_directory_type_conflict(self) -> None:
+        (self.root / "media").mkdir()
+
+        response = self._request("storage1/media")
+
+        self.assertEqual(response.status_code, 409)
+        self.assertEqual(response.json()["error"]["code"], "type_conflict")
+
+    def test_video_path_not_found(self) -> None:
+        response = self._request("storage1/missing.mp4")
+
+        self.assertEqual(response.status_code, 404)
+        self.assertEqual(response.json()["error"]["code"], "path_not_found")
+
+    def test_video_traversal_blocked(self) -> None:
+        response = self._request("storage1/../etc/passwd")
+
+        self.assertEqual(response.status_code, 403)
+        self.assertEqual(response.json()["error"]["code"], "path_traversal_detected")
+
+    def test_video_non_video_type_blocked(self) -> None:
+        (self.root / "notes.txt").write_text("hello", encoding="utf-8")
+
+        response = self._request("storage1/notes.txt")
+
+        self.assertEqual(response.status_code, 409)
+        self.assertEqual(response.json()["error"]["code"], "unsupported_type")
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/webui/backend/tests/golden/test_ui_smoke_golden.py b/webui/backend/tests/golden/test_ui_smoke_golden.py
index 5d22614..4a50ea8 100644
--- a/webui/backend/tests/golden/test_ui_smoke_golden.py
+++ b/webui/backend/tests/golden/test_ui_smoke_golden.py
@@ -50,6 +50,9 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn("F7", body)
         self.assertIn("F8", body)
         self.assertIn('id="viewer-modal"', body)
+        self.assertIn('id="video-modal"', body)
+        self.assertIn('id="video-player"', body)
+        self.assertIn('id="video-close-btn"', body)
         self.assertIn('id="settings-modal"', body)
         self.assertIn('id="rename-popup"', body)
         self.assertIn('id="rename-input"', body)
@@ -110,6 +113,10 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn('function openRenamePopup()', app_js)
         self.assertIn('document.getElementById("rename-btn").onclick = openRenamePopup;', app_js)
         self.assertIn('return triggerActionButton("rename-btn");', app_js)
+        self.assertIn('function openVideoViewer()', app_js)
+        self.assertIn('video.player.src = streamUrl;', app_js)
+        self.assertIn('document.getElementById("video-close-btn")', app_js)
+        self.assertIn('row.ondblclick = (ev) => {', app_js)
         self.assertIn('function openMovePopup()', app_js)
         self.assertIn('document.getElementById("move-btn").onclick = openF6Flow;', app_js)
         self.assertIn('await apiRequest("GET", "/api/history")', app_js)
diff --git a/webui/html/app.js b/webui/html/app.js
index 64c0ddc..d89c9a2 100644
--- a/webui/html/app.js
+++ b/webui/html/app.js
@@ -140,6 +140,18 @@ function editorElements() {
   };
 }
 
+function videoElements() {
+  return {
+    overlay: document.getElementById("video-modal"),
+    title: document.getElementById("video-title"),
+    fileName: document.getElementById("video-file-name"),
+    filePath: document.getElementById("video-file-path"),
+    error: document.getElementById("video-error"),
+    player: document.getElementById("video-player"),
+    closeButton: document.getElementById("video-close-btn"),
+  };
+}
+
 function moveElements() {
   return {
     overlay: document.getElementById("move-popup"),
@@ -344,6 +356,14 @@ function isEditableSelection(item) {
   return [".txt", ".log", ".md", ".yml", ".yaml", ".json", ".js", ".css", ".html"].some((suffix) => lower.endsWith(suffix));
 }
 
+function isVideoSelection(item) {
+  if (!item || item.kind !== "file") {
+    return false;
+  }
+  const lower = (item.name || "").toLowerCase();
+  return lower.endsWith(".mp4") || lower.endsWith(".mkv");
+}
+
 function currentParentPath(path) {
   const normalized = (path || "").trim();
   if (!normalized) {
@@ -657,6 +677,16 @@ function renderPaneItems(pane) {
       }
       renderPaneItems(pane);
     };
+    if (entry.kind === "file" && isVideoSelection({ path: entry.path, name: entry.name, kind: entry.kind })) {
+      row.ondblclick = (ev) => {
+        ev.stopPropagation();
+        setActivePane(pane);
+        model.currentRowIndex = index;
+        setSingleSelectionAtIndex(pane, { path: entry.path, name: entry.name, kind: entry.kind }, index);
+        renderPaneItems(pane);
+        openVideoViewer();
+      };
+    }
     items.append(row);
   });
   updateActionButtons();
@@ -1019,6 +1049,10 @@ function isViewerOpen() {
   return !viewerElements().overlay.classList.contains("hidden");
 }
 
+function isVideoOpen() {
+  return !videoElements().overlay.classList.contains("hidden");
+}
+
 function isEditorOpen() {
   return !editorElements().overlay.classList.contains("hidden");
 }
@@ -1339,6 +1373,15 @@ function closeViewer() {
   viewer.content.textContent = "";
 }
 
+function closeVideoViewer() {
+  const video = videoElements();
+  video.overlay.classList.add("hidden");
+  video.error.textContent = "";
+  video.player.pause();
+  video.player.removeAttribute("src");
+  video.player.load();
+}
+
 function setSettingsTab(tab) {
   const elements = settingsElements();
   settingsState.activeTab = tab === "logs" ? "logs" : "general";
@@ -1479,6 +1522,33 @@ async function openViewer() {
   }
 }
 
+function videoPlaybackMessage(item) {
+  const lower = (item.name || "").toLowerCase();
+  if (lower.endsWith(".mkv")) {
+    return "MKV playback is best-effort and depends on browser codec support.";
+  }
+  return "";
+}
+
+async function openVideoViewer() {
+  const selectedItems = activePaneState().selectedItems;
+  if (selectedItems.length !== 1 || !isVideoSelection(selectedItems[0])) {
+    return;
+  }
+  const selected = selectedItems[0];
+  const video = videoElements();
+  const streamUrl = `/api/files/video?${new URLSearchParams({ path: selected.path }).toString()}`;
+
+  video.overlay.classList.remove("hidden");
+  video.title.textContent = "Video";
+  video.fileName.textContent = selected.name;
+  video.filePath.textContent = selected.path;
+  video.error.textContent = videoPlaybackMessage(selected);
+  video.player.pause();
+  video.player.src = streamUrl;
+  video.player.load();
+}
+
 async function openEditor() {
   const selectedItems = activePaneState().selectedItems;
   if (selectedItems.length !== 1 || !isEditableSelection(selectedItems[0])) {
@@ -1585,10 +1655,16 @@ function jumpCurrentRow(edge) {
 function openCurrentDirectory() {
   const pane = state.activePane;
   const item = currentRowItem(pane);
-  if (!item || item.kind !== "directory") {
+  if (!item) {
     return;
   }
-  navigateTo(pane, item.path);
+  if (item.kind === "directory") {
+    navigateTo(pane, item.path);
+    return;
+  }
+  if (isVideoSelection(item)) {
+    openVideoViewer();
+  }
 }
 
 function toggleCurrentSelection() {
@@ -1663,6 +1739,13 @@ function handleKeyboardShortcuts(event) {
     }
     return;
   }
+  if (isVideoOpen()) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeVideoViewer();
+    }
+    return;
+  }
   if (isViewerOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -1868,6 +1951,17 @@ function setupEvents() {
     }
   };
 
+  const video = videoElements();
+  video.closeButton.onclick = closeVideoViewer;
+  video.player.onerror = () => {
+    video.error.textContent = "Playback failed in this browser for this file.";
+  };
+  video.overlay.onclick = (event) => {
+    if (event.target === video.overlay) {
+      closeVideoViewer();
+    }
+  };
+
   const editor = editorElements();
   editor.closeButton.onclick = attemptCloseEditor;
   editor.cancelButton.onclick = attemptCloseEditor;
diff --git a/webui/html/index.html b/webui/html/index.html
index 3f0d3e4..27db7d9 100644
--- a/webui/html/index.html
+++ b/webui/html/index.html
@@ -166,6 +166,17 @@
     </div>
   </div>
 
+  <div id="video-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="video-title">
+    <div class="popup-card viewer-card">
+      <button id="video-close-btn" class="viewer-close" type="button" aria-label="Close video">X</button>
+      <h3 id="video-title">Video</h3>
+      <div id="video-file-name" class="popup-meta"></div>
+      <div id="video-file-path" class="popup-meta"></div>
+      <div id="video-error" class="error"></div>
+      <video id="video-player" class="video-player" controls playsinline preload="metadata"></video>
+    </div>
+  </div>
+
   <div id="editor-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="editor-title">
     <div class="popup-card viewer-card">
       <button id="editor-close-btn" class="viewer-close" type="button" aria-label="Close editor">X</button>
diff --git a/webui/html/style.css b/webui/html/style.css
index e4c3044..738945e 100644
--- a/webui/html/style.css
+++ b/webui/html/style.css
@@ -516,6 +516,14 @@ button:disabled {
   flex-direction: column;
 }
 
+.video-player {
+  width: 100%;
+  max-height: calc(100vh - 180px);
+  background: #000;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+}
+
 .settings-card {
   position: relative;
   width: min(760px, calc(100vw - 32px));