Unable to display some portrait video blurhashes

[andybalaam]

Steps to reproduce

1. In a room
2. Upload a portrait video of size 720x1280

Outcome

What did you expect?

To see a blurhash before the video has loaded.

What happened instead?

The blurhash did not load:

And I saw this in the console:

Uncaught (in promise) RangeError: source array is too long
    loadBlurhash MVideoBody.tsx:115
    componentDidMount MVideoBody.tsx:139
    React 6
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 6
    TimelinePanel TimelinePanel.tsx:836
    emit events.js:158
    emit typed-event-emitter.ts:61
    forSource ReEmitter.ts:44
    emit events.js:153
    emit typed-event-emitter.ts:61
    decryptionLoop event.ts:865
    attemptDecryption event.ts:727
    decryptionPromises room.ts:435
    decryptCriticalEvents room.ts:435
    processSyncResponse sync.ts:1403
    promiseMapSeries utils.ts:471
    processSyncResponse sync.ts:1270
    syncFromCache sync.ts:847
    savedSyncPromise sync.ts:773
    promise callback*sync sync.ts:770
    startClient client.ts:1197
    start MatrixClientPeg.ts:237
    startMatrixClient Lifecycle.ts:821
    doSetLoggedIn Lifecycle.ts:637
    restoreFromLocalStorage Lifecycle.ts:453
    loadSession Lifecycle.ts:144
    loadSession MatrixChat.tsx:478
    promise callback*loadSession MatrixChat.tsx:477
    MatrixChat MatrixChat.tsx:343
    promise callback*MatrixChat MatrixChat.tsx:316
    React 14
    loadApp init.tsx:140
    start index.ts:222
    async* index.ts:233
    <anonymous> bundle.js:1435
    __webpack_require__ bundle.js:838
    fn bundle.js:130
    <anonymous> bundle.js:1059
    __webpack_require__ bundle.js:838
    <anonymous> bundle.js:1046
    <anonymous> bundle.js:1049
MVideoBody.tsx:115:21
    componentDidMount MVideoBody.tsx:177
    React 6
    commitRootImpl self-hosted:1222
    unstable_runWithPriority scheduler.development.js:468
    React 3
    performSyncWorkOnRoot self-hosted:1165
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority scheduler.development.js:468
    React 6
    TimelinePanel TimelinePanel.tsx:836
    apply self-hosted:2672
    emit events.js:158
    emit typed-event-emitter.ts:61
    forSource ReEmitter.ts:44
    apply self-hosted:2672
    emit events.js:153
    emit typed-event-emitter.ts:61
    decryptionLoop event.ts:865
    AsyncFunctionNext self-hosted:635
    (Async: async)
    attemptDecryption event.ts:727
    decryptionPromises room.ts:435
    map self-hosted:180
    decryptCriticalEvents room.ts:435
    processSyncResponse sync.ts:1403
    InterpretGeneratorResume self-hosted:1425
    AsyncFunctionNext self-hosted:635
    (Async: async)
    promiseMapSeries utils.ts:471
    AsyncFunctionNext self-hosted:635
    (Async: async)
    processSyncResponse sync.ts:1270
    InterpretGeneratorResume self-hosted:1425
    AsyncFunctionNext self-hosted:635
    (Async: async)
    syncFromCache sync.ts:847
    savedSyncPromise sync.ts:773
    (Async: promise callback)
    sync sync.ts:770
    startClient client.ts:1197
    InterpretGeneratorResume self-hosted:1425
    AsyncFunctionNext self-hosted:635
    (Async: async)
    start MatrixClientPeg.ts:237
    InterpretGeneratorResume self-hosted:1425
    AsyncFunctionNext self-hosted:635
    (Async: async)
    startMatrixClient Lifecycle.ts:821
    InterpretGeneratorResume self-hosted:1425
    AsyncFunctionNext self-hosted:635
    (Async: async)
    doSetLoggedIn Lifecycle.ts:637
    InterpretGeneratorResume self-hosted:1425
    AsyncFunctionNext self-hosted:635
    (Async: async)
    restoreFromLocalStorage Lifecycle.ts:453
    InterpretGeneratorResume self-hosted:1425
    AsyncFunctionNext self-hosted:635

Operating system

Ubuntu 21.10

Browser information

Firefox 100.0

URL for webapp

https://develop.element.io

Application version

Element version: 7a131fc-react-3b28b1100fea-js-9b843daf2ff8 Olm version: 3.2.8

Homeserver

matrix.org

Will you send logs?

No