[Preserve Draggable Position through Vue keep-alive]

I am using a Draggable to create a smooth scrolling and snapping video feed (see attached post for context)

 

Everything is working great except the position of the Draggable is being reset after the page is navigated away from and back even though the component is being kept alive through Vue. This must have something to do with how vue serializes and stores components in memory. Is there a way to instantly reset the position of the draggable to what it was before?  I have tried the following but it does not update the value (see onActivated hook).

 

const state = reactive({
  snapHeight: 0,
  currentIndex: 0,
  mostRecentObseravtion: 0
})

const drag = ref<globalThis.Draggable[]|null>(null)

onActivated(() => {
  if (drag.value) {
    console.log({ drag: drag.value[0] })
    // Typescript complains this is a readonly value
    // drag.value[0].y = -state.currentIndex * state.snapHeight
    drag.value[0].update()

  }
})

onMounted(() => {
  // a parent node must have a #feed-page id to determine the scroll height
  state.snapHeight = document.querySelector('#feed-page')?.clientHeight || 0

  drag.value = Draggable.create('#scroller', {
    type: 'scroll',
    throwProps: true,
    allowNativeTouchScrolling: false,
    dragClickables: false,
    snap: (endValue) => {
      const curHeight = -state.currentIndex * state.snapHeight
      console.log({ endValue, curHeight, snapHeight: state.snapHeight })
      if (endValue < (curHeight)) { // scrolling values are negative/going down
        console.log('scroll down')
        return (state.currentIndex + 1) * state.snapHeight
      } else {
        console.log('scroll up')
        return (state.currentIndex - 1) * state.snapHeight
      }
    },
    inertia: true,
    onThrowComplete: () => {
      state.currentIndex = state.mostRecentObseravtion
    },
    maxDuration: 0.5,
    overshootTolerance: 0.5
  })
})

 

[Poor performance of <video> elements inside of draggable]

I wasn't even aware of this css property. After a quick check this seems to have solved it. Although according to MDN this property should only be used as a last ditch effort. I'm open to trying other suggestions which would be considered 'better practice' at least as far as MDN is concerned.

 

Thank you Zach~!

[Poor performance of <video> elements inside of draggable]

I am using draggable as a replacement for the css scroll-snap property since it supports snapping to a specific location and it works great.

The child elements of the draggable are video elements which played fine before but since introducing draggable they are very choppy/laggy.

How can I improve the playback performance of the video elements?  Please see attached vimeo link for context.

 

EDIT: this is specifically an issue on devices with slower GPU performance. Devices with strong GPU's don't have this issue

 

const drag = Draggable.create('#scroller', {
  type: 'scroll',
  throwProps: true,
  snap: (endValue) => {
    const curHeight = -state.currentIndex * state.snapHeight
    console.log({ endValue, curHeight })
    if (endValue < (curHeight)) { // scrolling values are negative/going down
      console.log('if condition')
      return (state.currentIndex + 1) * state.snapHeight
    } else {
      console.log('else condition')
      return (state.currentIndex - 1) * state.snapHeight
    }
  },
  force3D: true,
  inertia: true,
  onThrowComplete: () => {
    state.currentIndex = state.mostRecentObseravtion
  },
  maxDuration: 0.5
})