search

zshall / program-guide

Television Simulator '99
MIT License
21 stars 19 forks source link

Support a full-screen mode (without the TV frame) #28

Closed zshall closed 9 months ago

zshall commented 6 years ago

The site should have an alternate display mode where the TV mask is gone and it displays fullscreen, whether that be in 4:3 or 16:9. Scanlines will be gone and the sides of the 4:3 will be black.

This is a useful feature if you want to display the site on a real TV and don't need a picture of the TV.

The controls will be hidden and a keyboard interface will be necessary to control the TV or escape from this mode back to the frame view.

StratoSTARbyHIRO commented 6 years ago

I would also like to see this, I find the image of the TV to be a little annoying looking.

zshall commented 6 years ago

511c2b8b-a9be-4e3b-8e21-f114f54d97b0

The UI should be reworked to scale based on browser viewport units and overlaid elements.

The base layer will be the channel. The on-screen display will be next, the screen filters (scanlines, CRT flicker) will be above that, and the TV skin will be on top. This shall be determined by z-index.

The presence of a skin will shrink the viewport of the layers below it to fit the screen cutout.

The whole page should be centered vertically and horizontally but maintain aspect ratio.

zshall commented 6 years ago

abe7a972-dc18-45e9-b327-a83fd1f9ec56

When there’s no TV skin, moving the mouse or tapping the screen should bring up an overlay with links to toggle full screen mode, the TV skin, screen filters, and mute. Options for channel and volume controls should be on there too.

alexdresko commented 6 years ago

What are the use cases for watching without a skin?

alexdresko commented 6 years ago

Or full screen for that matter.

StratoSTARbyHIRO commented 6 years ago

Well @alexdresko I would say post production proposes or for just for the pleasure of viewing full screen (haha I know, I'm captain obvious)

zshall commented 5 years ago

New CSS is needed to make this happen. When I wrote the original CSS, I didn’t use a grid system. Everything in the app is absolutely positioned and scaled up and down when the window is resized. This was adequate for the original scope of the project but I didn’t know as much about viewport units or CSS grid. A new version must be made that scales at any screen size that takes advantage of these features.

zshall commented 9 months ago

Implemented in version 2. We utilize new @container queries in recent CSS improvements to dynamically scale HTML at any size. We'll be using a 4:3 aspect ratio at 640x480px and scale up or down depending on monitor resolution.