> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/accessibility-and-devices/device-info/sample-flows.md

## Article Content:

# Device Info API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Skip animations for site visitors who prefer reduced motion

This flow starts a background video only for site visitors who haven't turned on their system's reduced-motion setting.

To skip animations for site visitors who prefer reduced motion, follow these steps:

1. Render the video paused by default, without `autoPlay`, and with a poster image. `videoUrl` and `posterUrl` are your own video and poster URLs. The site visitor's setting isn't available while the page renders on the server, so a paused first render keeps the server HTML the same as the browser render:

   ```tsx
   const videoRef = useRef<HTMLVideoElement>(null)

   <video ref={videoRef} src={videoUrl} poster={posterUrl} muted loop playsInline />
   ```

2. Read `reducedMotion` while the component renders. In an effect, start the video when it's `false`, and pause it when it's `true`. Listing `reducedMotion` in the effect's dependencies runs the effect again when the value changes, so a playing video stops if the site visitor turns the setting on:

   ```tsx
   const reducedMotion = deviceInfoService.reducedMotion

   useEffect(() => {
       if (reducedMotion) {
           videoRef.current?.pause()
       } else {
           videoRef.current?.play()
       }
   }, [reducedMotion])
   ```

3. When `reducedMotion` is `true`, leave the video paused, and show a play control so the site visitor can start it themselves:

   ```tsx
   <button onClick={() => videoRef.current?.play()}>Play video</button>
   ```

## Adapt a component for site visitors on phones

To adapt a component for site visitors on phones, follow these steps:

1. Decide which device types get the phone behavior. `Smartphone` covers phones only. Add `Tablet` if the behavior suits tablets too:

   ```ts
   import type { DeviceType } from '@wix/site-service-device-info/types'

   const phoneDeviceTypes: DeviceType[] = ['Smartphone']
   ```

2. Compare `deviceType` with those values exactly as they're written. Each value starts with a capital letter, so `'smartphone'` never matches:

   ```ts
   const isPhone = phoneDeviceTypes.includes(deviceInfoService.deviceType)
   ```

3. Render the phone variant, using your own `CompactPlayer` and `FullPlayer` components, when `isPhone` is `true`. `deviceType` is the same while the page renders on the server and in the browser, so the server HTML matches the browser render:

   ```tsx
   return isPhone ? <CompactPlayer /> : <FullPlayer />
   ```