Implement accurate running detection in `Phone.svelte`

[Pjaerr]

Right now I am just checking if the phone is accelerating in any direction, it sort of works but isn't smooth enough for this application.

Will require researching actual algorithms (can you call it that?)

[Pjaerr]

Got this to work way better with guidance from: https://github.com/wxforever/stepCounter/blob/master/countstep.js

Will need tweaking so the threshold is lower cause it is better to assume user is running than to make them have to work incredibly hard for the video not the pause.

[Pjaerr]

This is working pretty well for me but could still be improved so I am leaving this open for some potentially smarter people.

Current Implementation:

let yGravity = 0;
  let threshold = 0.3;
  let deviceWasLastMovingUpwards = false;
  let deviceWasMoving = true;
  let isDeviceMoving = false;

  function handleDeviceMotion(e) {
    yGravity = e.accelerationIncludingGravity.y;
  }

  function handleDeviceOrientation(e) {
    if (yGravity - 10 * Math.sin((e.beta * Math.PI) / 180) > threshold) {
      //We are moving the device up

      deviceWasLastMovingUpwards = true;
    } else if (
      yGravity - 10 * Math.sin((e.beta * Math.PI) / 180) <
      -threshold
    ) {
      //We are moving the device down

      if (deviceWasLastMovingUpwards) {
        //We have taken a "step"

        isDeviceMoving = true;
      }

      deviceWasLastMovingUpwards = false;
    } else {
      isDeviceMoving = false;
    }

    if (isDeviceMoving && !deviceWasMoving) {
      //Send "playvideo" event
      if (socket.readyState === WebSocket.OPEN) {
        socket.send(
          JSON.stringify({
            partnerID: desktopWebSocketID,
            messageType: "playvideo"
          })
        );
      }
    } else if (!isDeviceMoving && deviceWasMoving) {
      //Send "pausevideo" event
      if (socket.readyState === WebSocket.OPEN) {
        socket.send(
          JSON.stringify({
            partnerID: desktopWebSocketID,
            messageType: "pausevideo"
          })
        );
      }
    }

    deviceWasMoving = isDeviceMoving;
  }

Relevant event listeners:

window.addEventListener("devicemotion", handleDeviceMotion);
window.addEventListener("deviceorientation", handleDeviceOrientation);

This all happens in Phone.svelte

[Pjaerr]

Okay, current method works but sometimes will continue running when you set the phone down, as if the last state it detected was running.

Could have a timeout that checks if an event has been triggered after a certain amount of time and then if not, pause the video. Probably better to implement an actual accurate system instead. 🤷‍♂

[Pjaerr]

I re-implemented it and it works much better, almost perfect on my device[s] but testing on an Iphone 7 using Firefox results in stuttering. Unsure whether this is an issue with that specific device/usecase. Will need to do more testing.

[Pjaerr]

As a reference, the code for this is in src/accelerometer.js and it is a function that takes a threshold (how much does the user need to move the device) and the timeout (how long do we wait in between detections before checking again) and it finally takes a callback that will be triggered with true/false depending on whether the device is or is not moving.

Code change: https://github.com/Pjaerr/QuaRUNtine/blob/master/frontend/src/accelerometer.js