How to use the @times-components/utils.screenWidth function in @times-components/utils

To help you get started, we’ve selected a few @times-components/utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github newsuk / times-components / packages / article-main-standard / src / article-lead-asset / article-lead-asset-video.js View on Github external
const ArticleLeadAssetVideo = ({
  brightcoveVideoId,
  brightcovePolicyKey,
  brightcoveAccountId,
  posterImage,
  onVideoPress,
  skySports
}) => {
  const crop = getStandardTemplateCrop(posterImage);
  const { ratio, url } = crop;
  const [ratioWidth, ratioHeight] = ratio.split(":");
  const aspectRatio = ratioWidth / ratioHeight;

  const width = screenWidth();
  const height = width / aspectRatio;

  return (
    <video width="{width}" poster="{{" height="{height}">
  );
};
</video>
github newsuk / times-components / packages / article-skeleton / src / article-body / article-body-row.js View on Github external
pullQuote(
      key,
      {
        caption: { name, text, twitter }
      },
      children
    ) {
      const content = children[0].string;
      const contentWidth = Math.min(screenWidth(), tabletWidth);
      return (
        
          {({
            theme: { pullQuoteFont, sectionColour = colours.section.default }
          }) =&gt; (
github newsuk / times-components / packages / ad / src / ad.js View on Github external
timeout: adConfig.biddersConfig.timeout
      }),
      section,
      sizingMap: config.mappings,
      slotName,
      slots: this.slots,
      slotTargeting: adConfig.slotTargeting
    };

    const sizeProps = !isAdReady
      ? { height: 0, width: 0 }
      : {
          height: config.maxSizes.height,
          width:
            Platform.OS === "ios" || Platform.OS === "android"
              ? screenWidth()
              : config.maxSizes.width
        };

    const adView = (
github newsuk / times-components / packages / article-skeleton / src / article-body / inline-paragraph.js View on Github external
key,
  defaultFont,
  LinkComponent
}) => {
  const { spacing } = styleguide({ scale });
  const [inlineExclusion, setInlineExclusion] = useState(false);

  if (!str.length) {
    return null;
  }

  const contentWidth = Math.min(screenWidth(), tabletWidth);
  const gutters = (screenWidth() - contentWidth) / 2 + spacing(2);

  const container = new TextContainer(
    isTablet ? contentWidth : screenWidth() - spacing(4),
    10000,
    0,
    0,
    dropCap ? [dropCap.exclusion] : []
  );

  const slice = str.charAt(1) === " " ? 2 : 1;

  const manager = new LayoutManager(
    dropCap ? str.slice(slice) : str,
    [container],
    inlineExclusion ? [inlineExclusion.exclusion] : []
  );

  const positioned = manager.layout();
github newsuk / times-components / packages / article-skeleton / src / article-body / article-body-row.js View on Github external
video(
      key,
      {
        brightcovePolicyKey,
        brightcoveVideoId,
        brightcoveAccountId,
        posterImageUrl,
        caption,
        skySports
      }
    ) {
      const aspectRatio = 16 / 9;
      const screenW = screenWidth(isTablet);
      const height = screenW / aspectRatio;
      return (
github newsuk / times-components / packages / ad / src / ad.js View on Github external
constructor(props) {
    super(props);

    const { slotName } = props;

    this.prebidConfig = prebidConfig;

    this.isWeb = Platform.OS === "web";

    this.state = {
      config: getSlotConfig(slotName, screenWidth()),
      hasError: false,
      isAdReady: false,
      hasAdBlock: false
    };
  }
github newsuk / times-components / packages / ad / src / ad.js View on Github external
      .map(slot => getSlotConfig(slot, screenWidth()));
github newsuk / times-components / packages / ad / src / ad.js View on Github external
static getDerivedStateFromProps(nextProps) {
    const { slotName } = nextProps;

    return {
      config: getSlotConfig(slotName, screenWidth())
    };
  }