When the Safari browser puts a webcam video full-screen and then
returns, the z-index of the video was higher than the buttons and
controls normally overlaid on top of it.
Add a z-index:1 to the video controls to keep them on top after
returning from full screen. Similar: for popped-out draggable videos,
adding a z-index:1 allows the video to correctly sit on top of docked
videos without the docked video controls (zi:1) rendering above the
popped-out video when you overlap them.
Note: the z-index:1 is applied to popped-out and video controls, any
other combination (e.g. 1 for popped-out and 2 for controls) caused
controls of docked videos to render on top of popped-out ones when they
overlapped.
This commit makes an initial port of the front-end over to a proper Vue
CLI application. It seems to work from surface level testing.
Changes made:
* Rename web/static to public/static to place it into the Vue build path
* Notes: web/static/js/BareRTC.js and web/templates/chat.html are now
deprecated
* Rename web/static/js/sounds.js into src/lib/sounds.js making it a
proper JavaScript module with exports.
* Fill out initial src/App.vue by copying and updating
web/templates/chat.html and web/static/js/BareRTC.js into this module.