next-seo#VideoGameJsonLd TypeScript Examples

The following examples show how to use next-seo#VideoGameJsonLd. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Details.tsx    From frontend with Apache License 2.0 4 votes vote down vote up
Details: FunctionComponent<Props> = ({ app, summary, stats, developerApps }) => {
  const { t } = useTranslation();
  const [showLightbox, setShowLightbox] = useState(false)
  const [currentScreenshot, setCurrentScreenshot] = useState(0)

  const { trackEvent } = useMatomo()

  const installClicked = (e) => {
    e.preventDefault()
    trackEvent({ category: 'App', action: 'Install', name: app.id })
    window.location.href = `https://dl.flathub.org/repo/appstream/${app.id}.flatpakref`
  }

  const donateClicked = (e) => {
    trackEvent({ category: 'App', action: 'Donate', name: app.id })
  }

  if (app) {
    const moreThan1Screenshot =
      app.screenshots?.filter(pickScreenshot).length > 1

    return (
      <div id={styles.application}>
        <SoftwareAppJsonLd
          name={app.name}
          price='0'
          priceCurrency=''
          operatingSystem='LINUX'
          applicationCategory={categoryToSeoCategories(app.categories)}
        />
        {app.categories?.includes('Game') && (
          <VideoGameJsonLd
            name={app.name}
            authorName={app.developer_name}
            operatingSystemName={'LINUX'}
            storageRequirements={
              summary ? calculateHumanReadableSize(summary.download_size) : t('unknown')
            }
          />
        )
        }
        < header >
          {app.icon && (<div className={styles.logo}>
            <LogoImage iconUrl={app.icon} appName={app.name} />
          </div>)}

          <div className={styles.details}>
            <h2>{app.name}</h2>
            {app.developer_name?.trim().length > 0 && (
              <div className={styles.devName}>{t('by', { developer: app.developer_name })}</div>
            )}
          </div>

          <div className={styles.actions}>
            <Button onClick={installClicked}>{t('install')}</Button>
            {app.urls?.donation && (
              <a
                href={app.urls.donation}
                target='_blank'
                rel='noreferrer'
                onClick={donateClicked}
              >
                <Button type='secondary'>{t('donate')}</Button>
              </a>
            )}
          </div>
        </header>
        <div className={`${styles.carousel}`}>
          {showLightbox && (
            <Lightbox
              mainSrc={
                pickScreenshot(
                  app.screenshots?.filter(pickScreenshot)[currentScreenshot]
                ).url
              }
              onCloseRequest={() => setShowLightbox(false)}
            />
          )}
          <div className={styles.carouselWrapper}>
            {app.screenshots && (
              <div
                className={styles.zoom}
                onClick={() => setShowLightbox(true)}
              >
                <MdZoomIn />
              </div>
            )}
            <Carousel
              showThumbs={false}
              infiniteLoop={true}
              autoPlay={false}
              showArrows={true}
              showIndicators={moreThan1Screenshot}
              swipeable={true}
              emulateTouch={true}
              useKeyboardArrows={true}
              dynamicHeight={false}
              showStatus={false}
              onChange={(index) => {
                setCurrentScreenshot(index)
              }}
              renderArrowNext={(handler, hasNext, label) =>
                hasNext ? (
                  <div className='control-arrow control-next' onClick={handler}>
                    <MdChevronRight />
                  </div>
                ) : (
                  <></>
                )
              }
              renderArrowPrev={(handler, hasPrev, label) =>
                hasPrev ? (
                  <div className='control-arrow control-prev' onClick={handler}>
                    <MdChevronLeft />
                  </div>
                ) : (
                  <></>
                )
              }
            >
              {app.screenshots
                ?.filter(pickScreenshot)
                .map((screenshot, index) => {
                  const pickedScreenshot = pickScreenshot(screenshot)
                  return (
                    <Image
                      key={index}
                      src={pickedScreenshot.url}
                      width={752}
                      height={423}
                      alt={t('screenshot')}
                      loading='eager'
                      priority={index === 0}
                    />
                  )
                })}
            </Carousel>
          </div>
        </div>
        <div className={styles.additionalInfo}>
          <div>
            <h3>{app.summary}</h3>
            <div
              className={styles.description}
              dangerouslySetInnerHTML={{ __html: app.description }}
            />
          </div>

          <Releases releases={app.releases}></Releases>

          <AdditionalInfo
            data={app}
            summary={summary}
            appId={app.id}
            stats={stats}
          ></AdditionalInfo>

          {developerApps && developerApps.length > 0 && (
            <ApplicationSection href={`/apps/collection/developer/${app.developer_name}`} title={t('other-apps-by-developer', { developer: app.developer_name })} applications={developerApps.slice(0, 6)} showMore={developerApps.length > 6} />
          )}

          <AppStatistics stats={stats}></AppStatistics>

          <CmdInstructions appId={app.id}></CmdInstructions>
        </div>
      </div>
    )
  } else {
    return (
      <div className='main-container'>
        <div>{t('loading')}</div>
      </div>
    )
  }
}