@clappr/hlsjs-playback 3.0.2 → 3.1.0

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "@clappr/hlsjs-playback",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "HLS Playback based on hls.js",
   "main": "./dist/hlsjs-playback.js",
   "module": "./dist/hlsjs-playback.esm.js",
   "scripts": {
-    "start": "SERVE=true rollup --config --bundleConfigAsCjs --watch",
-    "start:with-reload": "SERVE=true RELOAD=true rollup --config --bundleConfigAsCjs --watch",
-    "build": "rollup --config --bundleConfigAsCjs",
-    "watch": "rollup --config --bundleConfigAsCjs --watch",
-    "bundle-check": "ANALYZE_BUNDLE=true rollup --config --bundleConfigAsCjs",
-    "release": "rm -rf dist && MINIMIZE=true rollup --config --bundleConfigAsCjs",
-    "test": "jest ./src --coverage --silent",
-    "test:smoke": "jest ./src/dist.smoke.test.js --testPathIgnorePatterns=/node_modules/ --silent",
-    "test:watch": "jest ./src --watch",
-    "lint": "eslint *.js ./src",
+    "start": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "bundle-check": "ANALYZE_BUNDLE=true vite build",
+    "release": "rm -rf dist && vite build && vite build --mode minify",
+    "test": "vitest run --coverage",
+    "test:smoke": "vitest run src/dist.smoke.test.js",
+    "test:watch": "vitest",
+    "lint": "eslint --no-error-on-unmatched-pattern *.js ./src",
     "lint:fix": "yarn lint -- --fix",
     "prepublishOnly": "lerna run release --scope=@clappr/hlsjs-playback"
   },
@@ -41,7 +40,7 @@
     "hls.js": "^1"
   },
   "devDependencies": {
-    "@clappr/core": "^0.16.2",
-    "hls.js": "~1.6.17"
+    "@clappr/core": "^0.17.0",
+    "hls.js": "^1"
   }
 }

package/src/dist.smoke.test.js

@@ -12,7 +12,7 @@ const { TextEncoder, TextDecoder } = require('util')
 global.TextEncoder = global.TextEncoder || TextEncoder
 global.TextDecoder = global.TextDecoder || TextDecoder
 const { JSDOM } = require('jsdom')
-const { expectNoNativeClasses } = require('../../../test/dist-contract')
+const { expectEs5Syntax, expectSourcemapFromSrc } = require('../../../test/dist-contract')
 
 const DIST = path.join(__dirname, '..', 'dist')
 
@@ -29,7 +29,7 @@ function readArtifact(name) {
 }
 
 function loadArtifact(name) {
-  jest.resetModules()
+  vi.resetModules()
   return require(path.join(DIST, name))
 }
 
@@ -68,8 +68,8 @@ function assertPlaybackContract(HlsjsPlaybackExport) {
   expect(typeof HLSJS.version).toBe('string')
   expect(HLSJS.version.length).toBeGreaterThan(0)
 
-  jest.spyOn(HLSJS, 'isSupported').mockReturnValue(true)
-  jest.spyOn(window.HTMLMediaElement.prototype, 'load').mockImplementation(() => {})
+  vi.spyOn(HLSJS, 'isSupported').mockReturnValue(true)
+  vi.spyOn(window.HTMLMediaElement.prototype, 'load').mockImplementation(() => {})
 
   expect(Playback.canPlay('http://example.com/video.m3u8')).toBe(true)
   expect(Playback.canPlay('http://example.com/video.m3u8?token=1')).toBe(true)
@@ -81,6 +81,7 @@ function assertPlaybackContract(HlsjsPlaybackExport) {
 
 function assertSourceMappingURL(filename) {
   expect(readArtifact(filename)).toContain(`sourceMappingURL=${filename}.map`)
+  expectSourcemapFromSrc(readArtifact(`${filename}.map`), filename)
 }
 
 const EXPECTED_SOURCEMAPS = Object.values(ARTIFACTS)
@@ -88,7 +89,7 @@ const EXPECTED_SOURCEMAPS = Object.values(ARTIFACTS)
   .sort()
 
 afterEach(() => {
-  jest.restoreAllMocks()
+  vi.restoreAllMocks()
 })
 
 describe.each([
@@ -105,7 +106,7 @@ describe.each([
   })
 
   test('does not emit native class syntax', () => {
-    expectNoNativeClasses(readArtifact(filename))
+    expectEs5Syntax(readArtifact(filename), filename)
   })
 })
 
@@ -120,10 +121,16 @@ describe('dist sourcemap inventory', () => {
 })
 
 describe('hls.js peer identity', () => {
-  test.each(Object.values(ARTIFACTS))('%s defers to the consumer hls.js', filename => {
+  test.each(UMD_ARTIFACTS)('%s defers to the consumer hls.js', filename => {
     const Playback = resolvePlayback(loadArtifact(filename))
     expect(Playback.HLSJS).toBe(require('hls.js'))
   })
+
+  test(`${ARTIFACTS.esm} defers to the consumer hls.js`, async () => {
+    const Playback = resolvePlayback(loadArtifact(ARTIFACTS.esm))
+    const { default: hls } = await import('hls.js')
+    expect(Playback.HLSJS).toBe(hls)
+  })
 })
 
 describe('UMD global.Hls branch', () => {

package/src/hls.js

@@ -415,7 +415,7 @@ export default class HlsjsPlayback extends HTML5Video {
     }
     let formattedError
     if (data.response) error.description += `, response: ${JSON.stringify(data.response)}`
-    // only report/handle errors if they are fatal
+    // only handle errors if they are fatal
     // hlsjs should automatically handle non fatal errors
     if (data.fatal) {
       if (this._recoverAttemptsRemaining > 0) {
@@ -479,6 +479,7 @@ export default class HlsjsPlayback extends HTML5Video {
 
       error.level = PlayerError.Levels.WARN
       Log.warn('hlsjs: non-fatal error occurred', { evt, data })
+      this.trigger(Events.PLAYBACK_WARNING, error, this.name)
     }
   }
 

package/src/hls.test.js

@@ -1,4 +1,4 @@
-import { Core, Events, Log, Playback } from '@clappr/core'
+import { Core, Events, Log, Playback, PlayerError } from '@clappr/core'
 import HlsjsPlayback from './hls.js'
 import HLSJS from 'hls.js'
 
@@ -25,17 +25,17 @@ const makeLevelData = ({
 
 const stubHls = playback => {
   playback._hls = {
-    startLoad: jest.fn(),
-    recoverMediaError: jest.fn(),
-    swapAudioCodec: jest.fn(),
-    destroy: jest.fn()
+    startLoad: vi.fn(),
+    recoverMediaError: vi.fn(),
+    swapAudioCodec: vi.fn(),
+    destroy: vi.fn()
   }
   return playback._hls
 }
 
 const freezeNow = (playback, initialMs = 1000000) => {
   let current = initialMs
-  jest.spyOn(playback, '_now', 'get').mockImplementation(() => current)
+  vi.spyOn(playback, '_now', 'get').mockImplementation(() => current)
   return {
     advance(ms) {
       current += ms
@@ -45,12 +45,13 @@ const freezeNow = (playback, initialMs = 1000000) => {
 
 describe('HlsjsPlayback', () => {
   beforeEach(() => {
-    jest.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() => {})
-    jest.spyOn(window.HTMLMediaElement.prototype, 'load').mockImplementation(() => {})
+    vi.spyOn(window.HTMLMediaElement.prototype, 'play').mockImplementation(() => {})
+    vi.spyOn(window.HTMLMediaElement.prototype, 'load').mockImplementation(() => {})
   })
 
   afterEach(() => {
-    jest.restoreAllMocks()
+    vi.restoreAllMocks()
+    vi.clearAllTimers()
   })
 
   test('have a getter called defaultOptions', () => {
@@ -83,7 +84,7 @@ describe('HlsjsPlayback', () => {
   })
 
   test('should be able to identify it can play resources independently of the file extension case', () => {
-    jest.spyOn(HLSJS, 'isSupported').mockImplementation(() => true)
+    vi.spyOn(HLSJS, 'isSupported').mockImplementation(() => true)
     expect(HlsjsPlayback.canPlay('/relative/video.m3u8')).toBeTruthy()
     expect(HlsjsPlayback.canPlay('/relative/VIDEO.M3U8')).toBeTruthy()
     expect(HlsjsPlayback.canPlay('/relative/video.m3u8?foobarQuery=1234#somefragment')).toBeTruthy()
@@ -102,7 +103,7 @@ describe('HlsjsPlayback', () => {
   })
 
   test('can play regardless of any mime type letter case', () => {
-    jest.spyOn(HLSJS, 'isSupported').mockImplementation(() => true)
+    vi.spyOn(HLSJS, 'isSupported').mockImplementation(() => true)
     expect(HlsjsPlayback.canPlay('/path/list.m3u8', 'APPLICATION/VND.APPLE.MPEGURL')).toBeTruthy()
     expect(
       HlsjsPlayback.canPlay(
@@ -154,9 +155,7 @@ describe('HlsjsPlayback', () => {
   })
 
   test('registers PLAYBACK_FRAGMENT_PARSING_METADATA event', () => {
-    expect(Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA).toEqual(
-      'playbackFragmentParsingMetadata'
-    )
+    expect(Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA).toEqual('playbackFragmentParsingMetadata')
   })
 
   test('levels supports specifying the level', () => {
@@ -237,14 +236,14 @@ describe('HlsjsPlayback', () => {
         hlsPlayback: { preload: false }
       })
       playback._setup()
-      jest.spyOn(playback._hls, 'loadSource')
+      vi.spyOn(playback._hls, 'loadSource')
       playback._hls.trigger(HLSJS.Events.MEDIA_ATTACHED, { media: playback.el })
 
       expect(playback._hls.loadSource).not.toHaveBeenCalled()
 
       playback.options.hlsPlayback.preload = true
       playback._setup()
-      jest.spyOn(playback._hls, 'loadSource')
+      vi.spyOn(playback._hls, 'loadSource')
       playback._hls.trigger(HLSJS.Events.MEDIA_ATTACHED, { media: playback.el })
 
       expect(playback._hls.loadSource).toHaveBeenCalledTimes(1)
@@ -264,7 +263,7 @@ describe('HlsjsPlayback', () => {
 
     test('calls bindCustomListeners method', () => {
       const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
-      jest.spyOn(playback, 'bindCustomListeners')
+      vi.spyOn(playback, 'bindCustomListeners')
       playback._setup()
 
       expect(playback.bindCustomListeners).toHaveBeenCalledTimes(1)
@@ -275,7 +274,7 @@ describe('HlsjsPlayback', () => {
     test('avoid to run internal logic if _isReadyState flag is true', () => {
       const playback = new HlsjsPlayback({ src: 'http://clappr.io/video.m3u8' })
       playback._isReadyState = true
-      jest.spyOn(playback, '_setup')
+      vi.spyOn(playback, '_setup')
       playback._ready()
 
       expect(playback._setup).not.toHaveBeenCalled()
@@ -283,7 +282,7 @@ describe('HlsjsPlayback', () => {
 
     test("call _setup method if HLS.JS internal don't exists", () => {
       const playback = new HlsjsPlayback({ src: 'http://clappr.io/video.m3u8' })
-      jest.spyOn(playback, '_setup')
+      vi.spyOn(playback, '_setup')
       playback._ready()
 
       expect(playback._setup).toHaveBeenCalledTimes(1)
@@ -302,8 +301,8 @@ describe('HlsjsPlayback', () => {
       expect(playback._isReadyState).toBeTruthy()
     })
 
-    test('triggers PLAYBACK_READY event', done => {
-      const cb = jest.fn()
+    test('triggers PLAYBACK_READY event', () => new Promise(done => {
+      const cb = vi.fn()
       const playback = new HlsjsPlayback({ src: 'http://clappr.io/video.m3u8' })
 
       playback.listenTo(playback, Events.PLAYBACK_READY, cb)
@@ -312,12 +311,12 @@ describe('HlsjsPlayback', () => {
         done()
       })
       playback._ready()
-    })
+    }))
   })
 
   describe('play method', () => {
     test('calls this._hls.loadSource once if _manifestLoading flag and options.hlsPlayback.preload are falsy', () => {
-      jest.spyOn(HLSJS.prototype, 'loadSource').mockImplementation()
+      vi.spyOn(HLSJS.prototype, 'loadSource').mockImplementation()
       const src = 'http://clappr.io/foo.m3u8'
       const playback = new HlsjsPlayback({ src, hlsPlayback: { preload: false } })
       playback._setup()
@@ -350,7 +349,7 @@ describe('HlsjsPlayback', () => {
       })
       const url = 'http://clappr.io/foo2.m3u8'
       playback.load(url)
-      jest.spyOn(playback._hls, 'loadSource')
+      vi.spyOn(playback._hls, 'loadSource')
       playback._hls.trigger(HLSJS.Events.MEDIA_ATTACHED, { media: playback.el })
       expect(playback.options.src).toBe(url)
       expect(playback._hls.loadSource).toHaveBeenCalledWith(url)
@@ -359,7 +358,7 @@ describe('HlsjsPlayback', () => {
 
   describe('bindCustomListeners method', () => {
     test('creates listeners for each item configured on customListeners array', () => {
-      const cb = jest.fn()
+      const cb = vi.fn()
       const playback = new HlsjsPlayback({
         src: 'http://clappr.io/foo.m3u8',
         hlsPlayback: {
@@ -376,7 +375,7 @@ describe('HlsjsPlayback', () => {
     })
 
     test("don't add one listener without a valid configuration", () => {
-      const cb = jest.fn()
+      const cb = vi.fn()
       const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
       playback._setup()
 
@@ -398,7 +397,7 @@ describe('HlsjsPlayback', () => {
     })
 
     test('adds a listener for one time when the customListeners array item is configured with the "once" param', () => {
-      const cb = jest.fn()
+      const cb = vi.fn()
       const playback = new HlsjsPlayback({
         src: 'http://clappr.io/foo.m3u8',
         hlsPlayback: {
@@ -417,7 +416,7 @@ describe('HlsjsPlayback', () => {
 
   describe('unbindCustomListeners method', () => {
     test('remove listeners for each item configured on customListeners array', () => {
-      const cb = jest.fn()
+      const cb = vi.fn()
       const playback = new HlsjsPlayback({
         src: 'http://clappr.io/foo.m3u8',
         hlsPlayback: {
@@ -442,9 +441,7 @@ describe('HlsjsPlayback', () => {
       }
       const playback = new HlsjsPlayback({ src: 'http://clappr.io/foo.m3u8' })
       playback.el.currentTime = 5
-      playback._setup()
-      playback.unbindCustomListeners()
-      playback._hls.trigger(HLSJS.Events.FRAG_CHANGED, fragmentMock)
+      playback._onFragmentChanged(HLSJS.Events.FRAG_CHANGED, fragmentMock)
       expect(playback.currentTimestamp).toBe(1556663045) // 'Tue Apr 30 2019 19:24:05'
     })
 
@@ -455,6 +452,46 @@ describe('HlsjsPlayback', () => {
     })
   })
 
+  describe('level and fragment events', () => {
+    test('_onLevelSwitch fills levels and reports bitrate', () => {
+      const playback = createPlayback()
+      playback._hls = {
+        levels: [{ height: 1080, width: 1920, bitrate: 4000000 }]
+      }
+      const onSwitch = vi.fn()
+      const onHd = vi.fn()
+      const onBitrate = vi.fn()
+      playback.on(Events.PLAYBACK_LEVEL_SWITCH, onSwitch)
+      playback.on(Events.PLAYBACK_HIGHDEFINITIONUPDATE, onHd)
+      playback.on(Events.PLAYBACK_BITRATE, onBitrate)
+
+      playback._onLevelSwitch(HLSJS.Events.LEVEL_SWITCHED, { level: 0 })
+
+      expect(playback.levels).toHaveLength(1)
+      expect(playback.highDefinition).toBe(true)
+      expect(onSwitch).toHaveBeenCalled()
+      expect(onHd).toHaveBeenCalledWith(true)
+      expect(onBitrate).toHaveBeenCalledWith(
+        expect.objectContaining({ height: 1080, bitrate: 4000000, level: 0 })
+      )
+    })
+
+    test('_onFragmentLoaded and _onFragmentBuffered forward playback events', () => {
+      const playback = createPlayback()
+      const onLoaded = vi.fn()
+      const onBuffered = vi.fn()
+      playback.on(Events.PLAYBACK_FRAGMENT_LOADED, onLoaded)
+      playback.on(Events.PLAYBACK_FRAGMENT_BUFFERED, onBuffered)
+      const data = { frag: { sn: 1 } }
+
+      playback._onFragmentLoaded(HLSJS.Events.FRAG_LOADED, data)
+      playback._onFragmentBuffered(HLSJS.Events.FRAG_BUFFERED, data)
+
+      expect(onLoaded).toHaveBeenCalledWith(data)
+      expect(onBuffered).toHaveBeenCalledWith(data)
+    })
+  })
+
   describe('DVR time model', () => {
     test('without correlation duration equals playable region duration', () => {
       const playback = createPlayback()
@@ -740,8 +777,8 @@ describe('HlsjsPlayback', () => {
       const playback = createPlayback()
       playback._playbackType = Playback.LIVE
       freezeNow(playback)
-      jest.spyOn(playback, '_onDurationChange').mockImplementation(() => {})
-      jest.spyOn(playback, '_onProgress').mockImplementation(() => {})
+      vi.spyOn(playback, '_onDurationChange').mockImplementation(() => {})
+      vi.spyOn(playback, '_onProgress').mockImplementation(() => {})
 
       playback._onLevelUpdated(
         'levelUpdated',
@@ -798,7 +835,7 @@ describe('HlsjsPlayback', () => {
       playback._playbackType = Playback.VOD
       playback._playableRegionStartTime = 0
       playback._playableRegionDuration = 80
-      jest.spyOn(Log, 'warn').mockImplementation(() => {})
+      vi.spyOn(Log, 'warn').mockImplementation(() => {})
 
       playback.seek(-1)
 
@@ -846,7 +883,7 @@ describe('HlsjsPlayback', () => {
       playback._playableRegionDuration = 100
       playback.el.currentTime = 1
       freezeNow(playback, 1000000)
-      const onTimeUpdate = jest.fn()
+      const onTimeUpdate = vi.fn()
       playback.on(Events.PLAYBACK_TIMEUPDATE, onTimeUpdate)
 
       playback._onTimeUpdate()
@@ -861,7 +898,7 @@ describe('HlsjsPlayback', () => {
       playback._playableRegionDuration = 100
       playback.el.currentTime = 1
       const clock = freezeNow(playback, 1000000)
-      const onTimeUpdate = jest.fn()
+      const onTimeUpdate = vi.fn()
       playback.on(Events.PLAYBACK_TIMEUPDATE, onTimeUpdate)
 
       playback._onTimeUpdate()
@@ -877,7 +914,7 @@ describe('HlsjsPlayback', () => {
       playback._playableRegionDuration = 100
       playback.el.currentTime = 1
       const clock = freezeNow(playback, 1000000)
-      const onTimeUpdate = jest.fn()
+      const onTimeUpdate = vi.fn()
       playback.on(Events.PLAYBACK_TIMEUPDATE, onTimeUpdate)
 
       playback._onTimeUpdate()
@@ -893,7 +930,7 @@ describe('HlsjsPlayback', () => {
       playback._playableRegionDuration = 100
       playback.el.currentTime = 1
       const clock = freezeNow(playback, 1000000)
-      const onTimeUpdate = jest.fn()
+      const onTimeUpdate = vi.fn()
       playback.on(Events.PLAYBACK_TIMEUPDATE, onTimeUpdate)
 
       playback._onTimeUpdate()
@@ -911,7 +948,7 @@ describe('HlsjsPlayback', () => {
       playback._programDateTime = 1000
       playback.el.currentTime = 1
       const clock = freezeNow(playback, 1000000)
-      const onTimeUpdate = jest.fn()
+      const onTimeUpdate = vi.fn()
       playback.on(Events.PLAYBACK_TIMEUPDATE, onTimeUpdate)
 
       playback._onTimeUpdate()
@@ -935,14 +972,14 @@ describe('HlsjsPlayback', () => {
       cores.push(core)
       const playback = createPlayback(options, core.playerError)
       stubHls(playback)
-      jest.spyOn(playback, 'play').mockImplementation(() => {})
-      jest.spyOn(playback, 'stop').mockImplementation(() => {})
+      vi.spyOn(playback, 'play').mockImplementation(() => {})
+      vi.spyOn(playback, 'stop').mockImplementation(() => {})
       return playback
     }
 
     test('recoverable network fatal error calls startLoad', () => {
       const playback = createErrorPlayback()
-      jest.spyOn(Log, 'warn').mockImplementation(() => {})
+      vi.spyOn(Log, 'warn').mockImplementation(() => {})
 
       playback._onHLSJSError('hlsError', {
         fatal: true,
@@ -963,8 +1000,8 @@ describe('HlsjsPlayback', () => {
       HLSJS.ErrorDetails.LEVEL_LOAD_TIMEOUT
     ])('unrecoverable network fatal %s triggers error and stop', details => {
       const playback = createErrorPlayback()
-      jest.spyOn(Log, 'error').mockImplementation(() => {})
-      const onError = jest.fn()
+      vi.spyOn(Log, 'error').mockImplementation(() => {})
+      const onError = vi.fn()
       playback.on(Events.PLAYBACK_ERROR, onError)
 
       playback._onHLSJSError('hlsError', {
@@ -980,9 +1017,9 @@ describe('HlsjsPlayback', () => {
 
     test('media fatal error recovers via recoverMediaError then swapAudioCodec then fails', () => {
       const playback = createErrorPlayback()
-      jest.spyOn(Log, 'warn').mockImplementation(() => {})
-      jest.spyOn(Log, 'error').mockImplementation(() => {})
-      const onError = jest.fn()
+      vi.spyOn(Log, 'warn').mockImplementation(() => {})
+      vi.spyOn(Log, 'error').mockImplementation(() => {})
+      const onError = vi.fn()
       playback.on(Events.PLAYBACK_ERROR, onError)
       const mediaError = {
         fatal: true,
@@ -1008,8 +1045,8 @@ describe('HlsjsPlayback', () => {
 
     test('other fatal error types trigger error and stop', () => {
       const playback = createErrorPlayback()
-      jest.spyOn(Log, 'error').mockImplementation(() => {})
-      const onError = jest.fn()
+      vi.spyOn(Log, 'error').mockImplementation(() => {})
+      const onError = vi.fn()
       playback.on(Events.PLAYBACK_ERROR, onError)
 
       playback._onHLSJSError('hlsError', {
@@ -1024,8 +1061,8 @@ describe('HlsjsPlayback', () => {
 
     test('exhausted recover attempts trigger error and stop', () => {
       const playback = createErrorPlayback({ hlsRecoverAttempts: 0 })
-      jest.spyOn(Log, 'error').mockImplementation(() => {})
-      const onError = jest.fn()
+      vi.spyOn(Log, 'error').mockImplementation(() => {})
+      const onError = vi.fn()
       playback.on(Events.PLAYBACK_ERROR, onError)
 
       playback._onHLSJSError('hlsError', {
@@ -1043,8 +1080,8 @@ describe('HlsjsPlayback', () => {
       const playback = createErrorPlayback({
         playback: { triggerFatalErrorOnResourceDenied: true }
       })
-      jest.spyOn(Log, 'error').mockImplementation(() => {})
-      const onError = jest.fn()
+      vi.spyOn(Log, 'error').mockImplementation(() => {})
+      const onError = vi.fn()
       playback.on(Events.PLAYBACK_ERROR, onError)
 
       playback._onHLSJSError('hlsError', {
@@ -1060,8 +1097,8 @@ describe('HlsjsPlayback', () => {
 
     test('non-fatal key denial without option only warns', () => {
       const playback = createErrorPlayback()
-      jest.spyOn(Log, 'warn').mockImplementation(() => {})
-      const onError = jest.fn()
+      vi.spyOn(Log, 'warn').mockImplementation(() => {})
+      const onError = vi.fn()
       playback.on(Events.PLAYBACK_ERROR, onError)
 
       playback._onHLSJSError('hlsError', {
@@ -1080,8 +1117,8 @@ describe('HlsjsPlayback', () => {
       const playback = createErrorPlayback({
         playback: { triggerFatalErrorOnResourceDenied: true }
       })
-      jest.spyOn(Log, 'warn').mockImplementation(() => {})
-      const onError = jest.fn()
+      vi.spyOn(Log, 'warn').mockImplementation(() => {})
+      const onError = vi.fn()
       playback.on(Events.PLAYBACK_ERROR, onError)
 
       playback._onHLSJSError('hlsError', {
@@ -1097,8 +1134,8 @@ describe('HlsjsPlayback', () => {
 
     test('includes response in error description when present', () => {
       const playback = createErrorPlayback()
-      jest.spyOn(Log, 'error').mockImplementation(() => {})
-      const onError = jest.fn()
+      vi.spyOn(Log, 'error').mockImplementation(() => {})
+      const onError = vi.fn()
       playback.on(Events.PLAYBACK_ERROR, onError)
 
       playback._onHLSJSError('hlsError', {
@@ -1110,6 +1147,85 @@ describe('HlsjsPlayback', () => {
 
       expect(onError.mock.calls[0][0].description).toContain('response:')
     })
+
+    test('triggers PLAYBACK_WARNING for a non-fatal error', () => {
+      const playback = createErrorPlayback()
+      vi.spyOn(Log, 'warn').mockImplementation(() => {})
+      const onWarning = vi.fn()
+      playback.on(Events.PLAYBACK_WARNING, onWarning)
+
+      playback._onHLSJSError('hlsError', {
+        fatal: false,
+        type: HLSJS.ErrorTypes.NETWORK_ERROR,
+        details: HLSJS.ErrorDetails.FRAG_LOAD_ERROR,
+        response: { code: 500 }
+      })
+
+      expect(onWarning).toHaveBeenCalledTimes(1)
+      expect(onWarning.mock.calls[0][0]).toMatchObject({
+        code: `${HLSJS.ErrorTypes.NETWORK_ERROR}_${HLSJS.ErrorDetails.FRAG_LOAD_ERROR}`,
+        level: PlayerError.Levels.WARN,
+        raw: { response: { code: 500 } }
+      })
+    })
+
+    test('does not trigger PLAYBACK_WARNING for a fatal error', () => {
+      const playback = createErrorPlayback()
+      vi.spyOn(Log, 'error').mockImplementation(() => {})
+      const onWarning = vi.fn()
+      const onError = vi.fn()
+      playback.on(Events.PLAYBACK_WARNING, onWarning)
+      playback.on(Events.PLAYBACK_ERROR, onError)
+
+      playback._onHLSJSError('hlsError', {
+        fatal: true,
+        type: HLSJS.ErrorTypes.NETWORK_ERROR,
+        details: HLSJS.ErrorDetails.MANIFEST_LOAD_TIMEOUT,
+        response: { code: 504 }
+      })
+
+      expect(onWarning).not.toHaveBeenCalled()
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(playback.stop).toHaveBeenCalled()
+    })
+
+    test('does not trigger PLAYBACK_WARNING when non-fatal key denial escalates to fatal', () => {
+      const playback = createErrorPlayback({
+        playback: { triggerFatalErrorOnResourceDenied: true }
+      })
+      vi.spyOn(Log, 'error').mockImplementation(() => {})
+      const onWarning = vi.fn()
+      const onError = vi.fn()
+      playback.on(Events.PLAYBACK_WARNING, onWarning)
+      playback.on(Events.PLAYBACK_ERROR, onError)
+
+      playback._onHLSJSError('hlsError', {
+        fatal: false,
+        type: HLSJS.ErrorTypes.NETWORK_ERROR,
+        details: HLSJS.ErrorDetails.KEY_LOAD_ERROR,
+        response: { code: 403 }
+      })
+
+      expect(onWarning).not.toHaveBeenCalled()
+      expect(onError).toHaveBeenCalledTimes(1)
+    })
+
+    test('triggers PLAYBACK_WARNING for a non-fatal key denial that does not escalate', () => {
+      const playback = createErrorPlayback()
+      vi.spyOn(Log, 'warn').mockImplementation(() => {})
+      const onWarning = vi.fn()
+      playback.on(Events.PLAYBACK_WARNING, onWarning)
+
+      playback._onHLSJSError('hlsError', {
+        fatal: false,
+        type: HLSJS.ErrorTypes.NETWORK_ERROR,
+        details: HLSJS.ErrorDetails.KEY_LOAD_ERROR,
+        response: { code: 403 }
+      })
+
+      expect(onWarning).toHaveBeenCalledTimes(1)
+      expect(onWarning.mock.calls[0][0].level).toBe(PlayerError.Levels.WARN)
+    })
   })
 
   describe('dvrEnabled and settings', () => {
@@ -1152,7 +1268,7 @@ describe('HlsjsPlayback', () => {
 
     test('_updateSettings chooses left controls from playback type and dvr', () => {
       const playback = createPlayback({ hlsMinimumDvrSize: 60 })
-      const onSettings = jest.fn()
+      const onSettings = vi.fn()
       playback.on(Events.PLAYBACK_SETTINGSUPDATE, onSettings)
 
       playback._playbackType = Playback.VOD