morethanwords
3 years ago
10 changed files with 132 additions and 39 deletions
@ -0,0 +1,13 @@ |
|||||||
|
import IS_WEBP_SUPPORTED from "./webpSupport"; |
||||||
|
|
||||||
|
const IMAGE_MIME_TYPES_SUPPORTED = new Set([ |
||||||
|
'image/jpeg', |
||||||
|
'image/png', |
||||||
|
'image/bmp' |
||||||
|
]); |
||||||
|
|
||||||
|
if(IS_WEBP_SUPPORTED) { |
||||||
|
IMAGE_MIME_TYPES_SUPPORTED.add('image/webp'); |
||||||
|
} |
||||||
|
|
||||||
|
export default IMAGE_MIME_TYPES_SUPPORTED; |
@ -1,21 +1,8 @@ |
|||||||
import IS_MOV_SUPPORTED from "./movSupport"; |
import IMAGE_MIME_TYPES_SUPPORTED from "./imageMimeTypesSupport"; |
||||||
import IS_WEBP_SUPPORTED from "./webpSupport"; |
import VIDEO_MIME_TYPES_SUPPORTED from "./videoMimeTypesSupport"; |
||||||
|
|
||||||
const MEDIA_MIME_TYPES_SUPPORTED = new Set([ |
const arr = [...IMAGE_MIME_TYPES_SUPPORTED].concat([...VIDEO_MIME_TYPES_SUPPORTED]); |
||||||
'image/jpeg', |
|
||||||
'image/png', |
|
||||||
'image/gif', |
|
||||||
'image/bmp', |
|
||||||
'video/mp4', |
|
||||||
'video/webm' |
|
||||||
]); |
|
||||||
|
|
||||||
if(IS_MOV_SUPPORTED) { |
const MEDIA_MIME_TYPES_SUPPORTED = new Set(arr); |
||||||
MEDIA_MIME_TYPES_SUPPORTED.add('video/quicktime'); |
|
||||||
} |
|
||||||
|
|
||||||
if(IS_WEBP_SUPPORTED) { |
|
||||||
MEDIA_MIME_TYPES_SUPPORTED.add('image/webp'); |
|
||||||
} |
|
||||||
|
|
||||||
export default MEDIA_MIME_TYPES_SUPPORTED; |
export default MEDIA_MIME_TYPES_SUPPORTED; |
||||||
|
@ -0,0 +1,13 @@ |
|||||||
|
import IS_MOV_SUPPORTED from "./movSupport"; |
||||||
|
|
||||||
|
const VIDEO_MIME_TYPES_SUPPORTED = new Set([ |
||||||
|
'image/gif', // have to display it as video
|
||||||
|
'video/mp4', |
||||||
|
'video/webm' |
||||||
|
]); |
||||||
|
|
||||||
|
if(IS_MOV_SUPPORTED) { |
||||||
|
VIDEO_MIME_TYPES_SUPPORTED.add('video/quicktime'); |
||||||
|
} |
||||||
|
|
||||||
|
export default VIDEO_MIME_TYPES_SUPPORTED; |
@ -0,0 +1,31 @@ |
|||||||
|
/** |
||||||
|
* @returns duration in ms |
||||||
|
*/ |
||||||
|
export default function getGifDuration(image: HTMLImageElement) { |
||||||
|
const src = image.src; |
||||||
|
|
||||||
|
return fetch(src) |
||||||
|
.then(response => response.arrayBuffer()) |
||||||
|
.then(arrayBuffer => { |
||||||
|
const d = new Uint8Array(arrayBuffer); |
||||||
|
// Thanks to http://justinsomnia.org/2006/10/gif-animation-duration-calculation/
|
||||||
|
// And http://www.w3.org/Graphics/GIF/spec-gif89a.txt
|
||||||
|
let duration = 0; |
||||||
|
for(let i = 0, length = d.length; i < length; ++i) { |
||||||
|
// Find a Graphic Control Extension hex(21F904__ ____ __00)
|
||||||
|
if(d[i] == 0x21 |
||||||
|
&& d[i + 1] == 0xF9 |
||||||
|
&& d[i + 2] == 0x04 |
||||||
|
&& d[i + 7] == 0x00) { |
||||||
|
// Swap 5th and 6th bytes to get the delay per frame
|
||||||
|
const delay = (d[i + 5] << 8) | (d[i + 4] & 0xFF); |
||||||
|
|
||||||
|
// Should be aware browsers have a minimum frame delay
|
||||||
|
// e.g. 6ms for IE, 2ms modern browsers (50fps)
|
||||||
|
duration += delay < 2 ? 10 : delay; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return duration / 1000; |
||||||
|
}); |
||||||
|
} |
Loading…
Reference in new issue