Vimeo integration field

Developing with Prismic
,
1

Hey!

I'm having some problems with a NuxtJS site (SSR) and some questions about the integrations field.

Website is ohlogy.com

When I browse the site i'm sometimes getting net::ERR_HTTP2_PROTOCOL_ERROR 206 (Partial Content) on the vimeo links. I'm using the integration field to fetch the video data. Any ideas what that could be?

My question: I realised that Vimeo is updating the access_token every 24 hours so if I have a SSR site how is that working with the Vimeo link? I can see that integration field is getting synced every day so the latests data should be available but if the site isn't built the access_token will be outdated? Or i'm misunderstanding something here?

3

Hi Kristian,

Can you tell me more about how you're using Vimeo in your integration fields? I have no info on how this is set up on your end and how your API that sends the videos to Prismic consumes the Vimeo data.

What is the format of the links sent to your app? If it's a share link then it should require an access token
Are your videos private?

4

Hey Phil,

Thanks for getting back.

Basically just fetching all videos from a Vimeo account that saves it as JSON. And followed the guidelines/pattern on how to implement into Prismic. Shared the code below

const client = new Vimeo(CLIENT_ID, CLIENT_SECRET, ACCESS_TOKEN)

exports.handler = async (event, _context) => {
  // Only allow POST
  if (event.httpMethod !== 'GET') {
    return { statusCode: 405, body: 'Method Not Allowed' }
  }

  try {
    const page = event.queryStringParameters.page
    const perPage = event.queryStringParameters.per_page

    const result = await getVimeoFeed(page, perPage)
    // const test = await getVimeoFeedTest(page, perPage)

    // console.log('test result', test.results.length)

    return {
      statusCode: 200,
      body: JSON.stringify(result)
    }
  } catch (err) {
    return {
      statusCode: 500,
      body: JSON.stringify({ message: err.message }) // Could be a custom message or object i.e. JSON.stringify(err)
    }
  }
}

function fromSeconds(s = 0) {
  if (s < 60) {
    return `${s}s`
  } else {
    return `${Math.floor(s / 60)}m${s % 60}s`
  }
}

/**
 * // https://github.com/vimeo/vimeo.js#get-started-with-the-vimeo-api
 */
function getVimeoFeed(page = 1, per_page = 50) {
  return new Promise((resolve, reject) => {
    try {
      const client = new Vimeo(CLIENT_ID, CLIENT_SECRET, ACCESS_TOKEN)

      client.request(
        {
          path: '/me/videos',
          query: {
            page,
            per_page,
            fields:
              'id,uri,name,description,duration,width,height,pictures,files,play,created_time,modified_time'
          }
        },
        function(error, body, _statusCode, _headers) {
          if (error) {
            reject(error)
          }

          console.log(body.data[0].play)

          const results = body.data.map((v) => ({
            id: v.uri,
            title: `${v.name} (${fromSeconds(v.duration)})`,
            description: v.description ?? '',
            image_url: v.pictures.sizes[0].link,
            last_update: Date.parse(v.modified_time) / 1000,
            blob: {
              title: v.name,
              width: v.files?.[0]?.width,
              height: v.files?.[0]?.height,
              files: v.files,
              pictures: v.pictures?.sizes,
              play: v.play
            }
          }))

          const result = { results_size: results.length, results }
          resolve(result)
        }
      )
    } catch (e) {
      reject(e)
    }
  })
}

const getVimeoFeedTest = () => {
  const page = 1
  const result = fetchPerPage(page)
  return result
}

function fetchPerPage(pageNum) {
  return new Promise((resolve, reject) => {
    try {
      client.request(
        {
          path: '/me/videos',
          query: {
            page: pageNum,
            per_page: 50,
            fields:
              'id,uri,name,description,duration,width,height,pictures,files,created_time,modified_time'
          }
        },
        function(error, body, _statusCode, _headers) {
          if (error) {
            reject(error)
          }

          const results = body.data.map((v) => ({
            id: v.uri,
            title: `${v.name} (${fromSeconds(v.duration)})`,
            description: v.description ?? '',
            image_url: v.pictures.sizes[0].link,
            last_update: Date.parse(v.modified_time) / 1000,
            blob: {
              title: v.name,
              width: v.files?.[0]?.width,
              height: v.files?.[0]?.height,
              files: v.files,
              pictures: v.pictures?.sizes
            }
          }))

          const result = { results_size: results.length, results }
          resolve(result)
        }
      )
    } catch (e) {
      reject(e)
    }
  })
}

In my nuxt app i'm getting this object when I fetched the integration field from Prismic. See below

{
    "id": "/videos/900802825",
    "title": "H&M-Move-announcement-film-16x9 (56s)",
    "description": "",
    "image_url": "https://i.vimeocdn.com/video/1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_100x75?r=pad",
    "last_update": 1707134035,
    "blob": {
        "title": "H&M-Move-announcement-film-16x9",
        "width": 1280,
        "height": 720,
        "files": [
            {
                "quality": "hd",
                "rendition": "720p",
                "type": "video/mp4",
                "width": 1280,
                "height": 720,
                "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/rendition/720p/file.mp4?loc=external&oauth2_token_id=1611383642&signature=331c2d2a4ef7186474a62cca7c7ceb1e56208a9603106dd28b9f587247acedee",
                "created_time": "2024-01-08T14:17:52+00:00",
                "fps": 25,
                "size": 19057998,
                "md5": null,
                "public_name": "720p",
                "size_short": "18.18MB"
            },
            {
                "quality": "sd",
                "rendition": "360p",
                "type": "video/mp4",
                "width": 640,
                "height": 360,
                "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/rendition/360p/file.mp4?loc=external&oauth2_token_id=1611383642&signature=3f6a9cc43954cc3ff649493006ea8dea73192934e0177ec3a5c5b5198789af9f",
                "created_time": "2024-01-08T14:17:52+00:00",
                "fps": 25,
                "size": 6030566,
                "md5": null,
                "public_name": "360p",
                "size_short": "5.75MB"
            },
            {
                "quality": "hd",
                "rendition": "1080p",
                "type": "video/mp4",
                "width": 1920,
                "height": 1080,
                "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/rendition/1080p/file.mp4?loc=external&oauth2_token_id=1611383642&signature=c90de7c888a32637f5e229cb975dd96e0906ee99541cf862ae06b14c499e898c",
                "created_time": "2024-01-08T14:18:15+00:00",
                "fps": 25,
                "size": 39594846,
                "md5": null,
                "public_name": "1080p",
                "size_short": "37.76MB"
            },
            {
                "quality": "sd",
                "rendition": "540p",
                "type": "video/mp4",
                "width": 960,
                "height": 540,
                "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/rendition/540p/file.mp4?loc=external&oauth2_token_id=1611383642&signature=c74b2c80a77190610ca1f95db8edc12d5a3b36ae66ad63b6252adc1a1c9fd431",
                "created_time": "2024-01-08T14:17:53+00:00",
                "fps": 25,
                "size": 11123204,
                "md5": null,
                "public_name": "540p",
                "size_short": "10.61MB"
            },
            {
                "quality": "sd",
                "rendition": "240p",
                "type": "video/mp4",
                "width": 426,
                "height": 240,
                "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/rendition/240p/file.mp4?loc=external&oauth2_token_id=1611383642&signature=6cc3d474f34d45c35bdb27191bfdb50ce67f3197f7bfd7ff445f375ce145d2ee",
                "created_time": "2024-01-08T14:17:00+00:00",
                "fps": 25,
                "size": 3511724,
                "md5": null,
                "public_name": "240p",
                "size_short": "3.35MB"
            },
            {
                "quality": "hls",
                "rendition": "adaptive",
                "type": "video/mp4",
                "link": "https://player.vimeo.com/external/900802825.m3u8?s=be272840a3f743e3cdc61425ca82fd3614bb194e&oauth2_token_id=1611383642",
                "created_time": "2024-01-08T14:17:52+00:00",
                "fps": 25,
                "size": 19057998,
                "md5": null,
                "public_name": "720p",
                "size_short": "18.18MB"
            }
        ],
        "pictures": [
            {
                "width": 100,
                "height": 75,
                "link": "https://i.vimeocdn.com/video/1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_100x75?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_100x75&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
            },
            {
                "width": 200,
                "height": 150,
                "link": "https://i.vimeocdn.com/video/1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_200x150?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_200x150&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
            },
            {
                "width": 295,
                "height": 166,
                "link": "https://i.vimeocdn.com/video/1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_295x166?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_295x166&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
            },
            {
                "width": 640,
                "height": 360,
                "link": "https://i.vimeocdn.com/video/1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_640x360?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_640x360&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
            },
            {
                "width": 960,
                "height": 540,
                "link": "https://i.vimeocdn.com/video/1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_960x540?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_960x540&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
            },
            {
                "width": 1280,
                "height": 720,
                "link": "https://i.vimeocdn.com/video/1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_1280x720?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
            },
            {
                "width": 1920,
                "height": 1080,
                "link": "https://i.vimeocdn.com/video/1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_1920x1080?r=pad",
                "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1779362765-ed9634222ba1655548acf4870371e6d3bc518913cd55fd169b2e1bd564811991-d_1920x1080&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
            }
        ],
        "play": {
            "progressive": [
                {
                    "type": "video/mp4",
                    "codec": "H264",
                    "width": 426,
                    "height": 240,
                    "link_expiration_time": "2024-02-06T11:58:12+00:00",
                    "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/container/a3901e96-c5fb-4352-896e-78653ad848f0/ad2f99ad-639ec5ba?expires=1707220692&loc=external&log_user=0&oauth2_token_id=1611383642&signature=552a03455d96e0e67bc09d301125aab1af45b2ed9108f101e716a95e96462990",
                    "created_time": "2024-01-08T14:17:00+00:00",
                    "fps": 25,
                    "size": 3511724,
                    "md5": null,
                    "rendition": "240p"
                },
                {
                    "type": "video/mp4",
                    "codec": "H264",
                    "width": 960,
                    "height": 540,
                    "link_expiration_time": "2024-02-06T11:58:12+00:00",
                    "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/container/a3901e96-c5fb-4352-896e-78653ad848f0/1ab18eb3-639ec5ba?expires=1707220692&loc=external&log_user=0&oauth2_token_id=1611383642&signature=822e9fac3b3b3133c549b8dcbac17dec2fcb5ea92d1f4ba4890693f3a6313ab7",
                    "created_time": "2024-01-08T14:17:53+00:00",
                    "fps": 25,
                    "size": 11123204,
                    "md5": null,
                    "rendition": "540p"
                },
                {
                    "type": "video/mp4",
                    "codec": "H264",
                    "width": 1920,
                    "height": 1080,
                    "link_expiration_time": "2024-02-06T11:58:12+00:00",
                    "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/container/a3901e96-c5fb-4352-896e-78653ad848f0/3b810078-639ec5ba?expires=1707220692&loc=external&log_user=0&oauth2_token_id=1611383642&signature=b8c59833fc8591f1e585b778f9c058c950998229b3a50f07ffd698979b244368",
                    "created_time": "2024-01-08T14:18:15+00:00",
                    "fps": 25,
                    "size": 39594846,
                    "md5": null,
                    "rendition": "1080p"
                },
                {
                    "type": "video/mp4",
                    "codec": "H264",
                    "width": 1280,
                    "height": 720,
                    "link_expiration_time": "2024-02-06T11:58:12+00:00",
                    "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/container/a3901e96-c5fb-4352-896e-78653ad848f0/8e5474cf-639ec5ba?expires=1707220692&loc=external&log_user=0&oauth2_token_id=1611383642&signature=7bdc90f9c44e4edf76a81fdc5f31729f55adca0944425c09c54a86e60f436829",
                    "created_time": "2024-01-08T14:17:52+00:00",
                    "fps": 25,
                    "size": 19057998,
                    "md5": null,
                    "rendition": "720p"
                },
                {
                    "type": "video/mp4",
                    "codec": "H264",
                    "width": 640,
                    "height": 360,
                    "link_expiration_time": "2024-02-06T11:58:12+00:00",
                    "link": "https://player.vimeo.com/progressive_redirect/playback/900802825/container/a3901e96-c5fb-4352-896e-78653ad848f0/9cfb1978-639ec5ba?expires=1707220692&loc=external&log_user=0&oauth2_token_id=1611383642&signature=b9f3d06b52445c867bf54e15a42d61adc90183f4004b6a857548f11685daa19f",
                    "created_time": "2024-01-08T14:17:52+00:00",
                    "fps": 25,
                    "size": 6030566,
                    "md5": null,
                    "rendition": "360p"
                }
            ],
            "hls": {
                "link_expiration_time": "2024-02-06T11:56:16+00:00",
                "link": "https://player.vimeo.com/play/a3901e96-c5fb-4352-896e-78653ad848f0/hls.m3u8?s=900802825_1707220576_eee4e696efe194f996fe64adcc23d29a&context=Vimeo%5CController%5CApi%5CResources%5CUser%5CVideosController.&log_user=0&oauth2_token_id=1611383642"
            },
            "dash": {
                "link_expiration_time": "2024-02-06T11:56:16+00:00",
                "link": "https://player.vimeo.com/play/a3901e96-c5fb-4352-896e-78653ad848f0/dash.mpd?s=900802825_1707220576_eee4e696efe194f996fe64adcc23d29a&context=Vimeo%5CController%5CApi%5CResources%5CUser%5CVideosController.&log_user=0&oauth2_token_id=1611383642"
            },
            "status": "playable"
        }
    }
}

Videos are not private

I hope it make sense otherwise let me know!

Thanks,
Kristian

5

Hi Kristian,

Sorry, it took me so long to get back. Since your access token changes every day you'll need to push the changes to Prismic:

You won't need to republish your documents, but you will need to get the latest integration fields ref in your website application by triggering a new build on the affect pages.

I hope this answers your question.

Thanks.