fix(useMediaControls): better representation for "waiting" value

waiting only fires when there's a lack of data in the middle of the playback. However, it doesn't take into account the lack of data when the source is attached to the element, as loadeddata does

"playing" also represents when a current playback is happening now

packages/core/useMediaControls/index.ts

@@ -388,10 +388,15 @@ export function useMediaControls(target: MaybeRef<HTMLMediaElement | null | unde
   useEventListener(target, 'progress', () => buffered.value = timeRangeToArray((toValue(target))!.buffered))
   useEventListener(target, 'seeking', () => seeking.value = true)
   useEventListener(target, 'seeked', () => seeking.value = false)
-  useEventListener(target, 'waiting', () => waiting.value = true)
+  useEventListener(target, ['waiting', 'loadstart'], () => {
+    waiting.value = true
+    playing.value = false
+  })
+  useEventListener(target, 'loadeddata', () => waiting.value = false)
   useEventListener(target, 'playing', () => {
     waiting.value = false
     ended.value = false
+    playing.value = true
   })
   useEventListener(target, 'ratechange', () => rate.value = (toValue(target))!.playbackRate)
   useEventListener(target, 'stalled', () => stalled.value = true)