nfp_sites/nfp_moe/app/media.js

const m = require('mithril')

export function generatePictureSource(item, cover) {
  if (!item || !item.media_alt_prefix) return null

  return {
    fallback:  item.media_alt_prefix + '_small.jpg',
    jpeg: item.media_alt_prefix + '_small.jpg' + ' 720w, '
        + item.media_alt_prefix + '_medium.jpg' + ' 1300w, '
        + item.media_alt_prefix + '_large.jpg  1920w',
    avif: item.media_alt_prefix + '_small.avif' + ' 720w, '
        + item.media_alt_prefix + '_medium.avif' + ' 1300w, '
        + item.media_alt_prefix + '_large.avif 1920w',
    cover: cover,
    preview: item.media_avif_preview,
  }
}

let loadingImage = null
let loader = null

function cancelLoader() {
  if (loader) {
    loader.src = ''
  }
  loader = null
}

export function smartBanner(item) {
  if (!item) {
    if (loader) {
      cancelLoader()
    }
    loadingImage = null
    return null
  }

  if (!item.preview) {
    loadingImage = null
    cancelLoader()
    return item.banner
  }
  if (loadingImage !== item.banner && loader) {
    cancelLoader()
  }
  if (loadingImage === item.banner && !loader) {
    return item.banner
  }
  if (loadingImage === item.banner) {
    return item.preview
  }

  loadingImage = item.banner
  loader = new Image();

  loader.src = item.banner;
  loader.onload = loader.onerror = function() {
    loader = null
    m.redraw()
  }

  return item.preview
}

export function getBannerImage(item, prefix) {
  if (!item || !item.banner_alt_prefix) return null

  let out = {
    path: prefix + item.path,
    name: item.name,
    original: item.banner_path,
    banner: item.banner_alt_prefix,
    preview: item.banner_avif_preview,
  }

  var deviceWidth = window.innerWidth
  var pixelRatio = window.devicePixelRatio || 1
  if ((deviceWidth < 720 && pixelRatio <= 1)
      || (deviceWidth < 360 && pixelRatio <= 2)) {
    out.banner += '_small'
  } else if ((deviceWidth < 1300 && pixelRatio <= 1)
            || (deviceWidth < 650 && pixelRatio <= 2)) {
    out.banner += '_medium'
  } else {
    out.banner += '_large'
  }
  if (window.supportsavif) {
    out.banner += '.avif'
  } else {
    out.banner += '.jpg'
  }

  return out
}

export function getArticlePicture(pictureData, useRouteLink, path, altText, fallback) {
  if (!pictureData) return fallback || null

  return m(useRouteLink ? m.route.Link : 'a', {
    class: 'cover ' + (pictureData.preview ? 'haspreview' : ''),
    rel: useRouteLink ? null : 'noopener',
    target: useRouteLink ? null : '_blank',
    href: path,
  }, [
    pictureData.preview ? m('img', { src: pictureData.preview }) : null,
    m('picture', [
      m('source', {
        srcset: pictureData.avif,
        sizes: pictureData.cover,
        type: 'image/avif',
      }),
      m('img', {
        srcset: pictureData.jpeg,
        sizes: pictureData.cover,
        alt: altText,
        src: pictureData.fallback,
      }),
    ])
  ])
}