tachyon-more-ui v32.0.0

Tachyon-More-UI

More Than Core-UI ™.

More-UI offers some useful enhanced Core UI components and utility methods for working with Core UI.

Documentation and Examples

• Docs: Core-UI
• Example: Tomorrow
• Example: Sky Map

Consuming MORE-UI In Tachyon Apps

1. In the application's package.json dependencies list add:

"dependencies": {
  "react-router-dom": "<current version>",
  "tachyon-noop": "<current version>",
},

1. In the application's package.json browser list add:

"browser": {
  "react-router": false,
  "react-router-dom": false,
}

1. In next.config.js, no-op react-router from being bundled on the client:

// set up aliases
const alias = config.resolve.alias || {};

// react-router isn't used by Tachyon apps but is required by core-ui;
// only necessary because of unused transient dependencies related to
// latency components that aren't tree-shaken on the server
config.resolve.alias = {
  ...alias,
  'react-router': 'tachyon-noop',
  'react-router-dom': 'tachyon-noop',
};

1.

MORE-UI Features

Mixins for styled-components

There are several mixins exported to enable re-usable functionality within styled-components style strings:

• squareSize: sets equal height and width based on sizePct, sizePx, or sizeRem
• backgroundMatchedGradientDark: a top-to-bottom linear gradient that blends into dark color-background-body

Responsively Optimized Images

MORE-UI includes utility functions that simplify the configuration required to optimize image downloads using image template strings. This includes support for: Avatars, Box Art, Offline Overlays, Channel Banners, and Event Banners.

import {
  getBoxArtSrcAndSrcSet,
  getChannelThumbnailSrcAndSrcSet,
  getChannelBannerImageTemplate,
  getOverlaySrcAndSrcSet,
} from 'tachyon-more-ui';

Example:

import type { FC } from 'react';
import { CoreImage, getBoxArtSrcAndSrcSet } from 'tachyon-more-ui';

/**
 * imageTemplate is a string containing a "{width}" and "{height}" placeholder.
 * The utility function will automatically replace those
 */
export const BoxArtImage: FC<BoxArtImageProps> = ({ imageTemplate }) => {
  const srcProps = getBoxArtSrcAndSrcSet(imageTemplate);
  return <CoreImage {...srcProps} />;
};

Style Considerations

Prefer using rem over px or other sizing units. This allows consumers to set the root font-size to achieve scaling across device sizes -- like TVs and phones.

QR Code Sizing

Sizing Rules

Commonly recommended viewing distance from your TV is to have it 1.5-2.5x further away from your couch than the diagonal length of the screen for 1080p and 1-1.5x for 4k123.

The recommended size of a QR code is based on the expected distance from the code and the reader. The advice was universally that once you exceed the minimum size then the width of the code should be 1/10 the distance. So, if you expect a person to be on their couch 5' away then the QR code should be 6" wide.

Therefore:

QR Code Width = TV diagonal * expected viewing distance multiplier / 10 Via 16:9 aspect ratio, TV width = 1.15 * TV diagonal

Combining the above:

11.5vw * viewing distance multiplier = QR code width

Recommended Sizes

• 1.5x viewing distance: 17.3vw (or 17.3% of screen)
• 2.0x viewing distance: 23vw
• 2.5x viewing distance: 28.8vw