Use your smart tv web browser to view (cast) local multimedia files from your PC in a html web page served locally (LAN). Useful when other cast methods are not available.
- display movie list
- keep original folder structure
- preview movie alongside list
- resume playback
- gray out watched episodes
- load vtt subtitles
- auto play next episode
- compile the app by running the
build
script, which useswebpack
to minify and bundle the app into the outputdist
folder
npm run build
- go into your
movies
folder and run thedirectory-tree
command to scan the folder contents and generate themedia.json
file; this file tells the app what content to display
npx directory-tree --path './' --attributes type,extension --pretty -o ./media.json
- copy the content of the
dist
folder into yourmovies
folder; now, the inside of yourmovies
folder should look similar to this:
/movie1/
/movie2/
/birthday.mp4
/bundle.4584c30722f167131c81.js
/index.html
/media.json
/1340d3d0883286c39143.jpg
- your
movies
folder is now ready to be served; start your favouritehttp
web server and use themovies
folder asroot
- on your smart tv, open the web browser and type the local address of the machine hosting the
movies
; you should see your movie files on the left - browse the folders and click the movie you want to watch; a subtitle will be loaded if it has the same name as the movie file next to it, and it's
.vtt
format (you can use online converters to go from.srt
to a.vtt
file)
- for fast development you need to start
webpack
inwatch
mode, so it continuously watches code changes and rebuilds on the fly
npm run watch
- then, copy some small test video files into the
src/res/Test video folder 1
which you'll use to test the app during development; these will be bundled to thedist
folder bywebpack
; - after that, the script inside
scan-media.sh
will generate themedia.json
file with the contents of thedist
folder; - lastly, to run the app start the http server by running
npm start