├── .gitattributes ├── .gitignore ├── .jshintrc ├── .travis.yml ├── LICENSE ├── README.md ├── gulpfile.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── manifest-object.js ├── parse-iiif-manifest.js └── player.js ├── static ├── favicon.ico ├── main.js ├── manifests │ ├── manifest_chopin_etude_aud.json │ ├── manifest_chopin_etude_vid.json │ └── manifest_lunchroom_manners.json ├── media │ ├── Chopin_Etude_Op_10_No_9_Valentina_Lisitsa.mp4 │ ├── Chopin_Etude_Op_10_No_9_Valentina_Lisitsa.webm │ └── chopin_etude.mp3 ├── mei │ └── demo.mei ├── player.js ├── ui.js └── verovio-toolkit.js └── webpack.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | index.html merge=ours 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | # SublimeText 4 | *.sublime-project 5 | *.sublime-workspace 6 | 7 | /node_modules/ 8 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "eqeqeq": true, 3 | "eqnull": true, 4 | "devel": true, 5 | "expr": true, 6 | "latedef": "nofunc", 7 | "node": true, 8 | "undef": true, 9 | "unused": true, 10 | "esversion": 6, 11 | "browser": true, 12 | "globals": { 13 | "$": false 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 10 3 | os: osx 4 | sudo: false 5 | 6 | install: 7 | - npm install --no-spin 8 | 9 | script: 10 | - gulp develop:lint 11 | 12 | notifications: 13 | email: false 14 | slack: 15 | secure: E6faEXi4tTwbIL9AovjAxAhf1CQGUCuIG8nqViYeWek7jM/7rjNd4oiLGtKlQec4Sx/8Ld385rGtOayFGm0zArek42vsXxpja0U+FAoN8zft3xkZthjzy781fX5ya8wLz447ePRLsDZuEqmj8h2x3atXiHwDAhynIFJdn55+DynV0Ti+1OkWQqf6DB7sdVh+xw6aFYy6LEug6KXr+rVJCaG+/JalGPaJgYnkajiK11CUEWkEmmh5Xaz+uoec9yiQAPMDnl9e4d9DO7rWzSWmZs5nMC7vynr+w90jWXkILOtT3tgALulpujGd0UIQa8RuwDVKDSrGMo4Vej7j/Ll6xVpwEtdYnpfJG+NlXGQolcj9iOPb9unBW1PJXDjgXB420BSTbDLeNJGA+wg7Lbz2RtD+fAPgH/UOnHy30W+zp++bJp47FkexJQYvkXf5x55KTjgaWfI3KwpKasobr0D7nKg2vqHArwug3YohZ1Sjf04FLz40KXuWePrm5fttnet4rYnSn0BAGCToYZBg43U1yd3esPRFrzT0mcHYLAfUmZ7MnaEc3u4NoTGSdUoq1g2qqWT6EnZ/1jwqTs3SxuXp9tGNjHfD+nM8EG64GB5Rbvp/iUE7Gv51opUOOJJsmhzuKf33u+gBo283GzLVd827LuQIv2+1fwtuMfHBER8R/Rg= 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-2021 Eric Han Liu, Andrew Kam, Gabriel Vigliensoni 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # IIIF Audio/Video Player 2 | IIIF A/V Player (WIP) 3 | 4 | ## Usage 5 | - Clone the repo: 6 | ```bash 7 | git clone https://github.com/DDMAL/IIIF-AV-player.git 8 | ``` 9 | - Install node modules with `npm install`. 10 | - Run `gulp` or `npm start` to build and start the server. 11 | - The server will now be running at `localhost:9001`. 12 | 13 | ## Making Changes 14 | If you wish to alter any of the `src` code, make sure to rebundle with `gulp develop:build`. 15 | 16 | It might be ideal to keep a server running in the background with `gulp develop:server &`, instead of running `gulp` every time you make a change. 17 | 18 | ## Integration 19 | To integrate this player with an independent webpage, include the following 3 scripts in your `index.html`: 20 | ```javascript 21 | 22 | 23 | 24 | ``` 25 | The player and score will be created in a `.main` container div, which will be appended to the `body` once the script is run. If you wish to alter where the player is generated, edit `static/main.js`: 26 | ```javascript 27 | // line 41, change body to your target 28 | $('body').append(main); 29 | ``` -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const webpack = require('webpack'); 3 | const WebpackDevServer = require('webpack-dev-server'); 4 | const gutil = require('gulp-util'); 5 | const webpackConf = require('./webpack.config'); 6 | const jshint = require('gulp-jshint'); 7 | 8 | function webpackDevServer () 9 | { 10 | let compiler = webpack(webpackConf); 11 | 12 | new WebpackDevServer(compiler, 13 | { 14 | stats: { 15 | colors: true 16 | } 17 | }).listen(9001, 'localhost', function (err) 18 | { 19 | if (err) throw new gutil.PluginError('webpack-dev-server', err); 20 | gutil.log('[webpack-dev-server]', 'http://localhost:9001/index.html'); 21 | }); 22 | } 23 | 24 | function lint (files) 25 | { 26 | return gulp.src(files) 27 | .pipe(jshint({lookup: true})) 28 | .pipe(jshint.reporter('jshint-stylish')) 29 | .pipe(jshint.reporter('fail')); // fails task if error 30 | } 31 | 32 | function lintSrc () 33 | { 34 | return lint('src/*.js'); 35 | } 36 | 37 | function lintMain () 38 | { 39 | return lint('static/main.js'); 40 | } 41 | 42 | function build (done) 43 | { 44 | webpack(webpackConf).run(done); 45 | } 46 | 47 | gulp.task('develop:lint', gulp.series(lintSrc, lintMain)); 48 | 49 | gulp.task('develop:build', gulp.series('develop:lint', build)); 50 | gulp.task('develop:server', webpackDevServer); 51 | gulp.task('develop', gulp.series('develop:lint', build, 'develop:server')); 52 | gulp.task('default', gulp.series('develop')); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IIIF AV Player 7 | 8 | 9 | 10 |
11 |

V3

12 | static/manifests/manifest_chopin_etude_aud.json
13 | static/manifests/manifest_chopin_etude_vid.json 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "IIIF-AV-player", 3 | "version": "1.0.0", 4 | "description": "IIIF A/V Player", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "gulp" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/DDMAL/IIIF-AV-player.git" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/DDMAL/IIIF-AV-player/issues" 19 | }, 20 | "homepage": "https://github.com/DDMAL/IIIF-AV-player#readme", 21 | "devDependencies": { 22 | "babel-cli": "^6.26.0", 23 | "babel-preset-env": "^1.7.0", 24 | "gulp": "^4.0.0", 25 | "gulp-jshint": "^2.1.0", 26 | "jshint": "^2.13.6", 27 | "jshint-stylish": "^2.2.1", 28 | "webpack": "^4.14.0", 29 | "webpack-cli": "^3.3.12", 30 | "webpack-dev-server": "^4.11.1" 31 | }, 32 | "dependencies": { 33 | "gulp-util": "^3.0.8", 34 | "jquery": "^3.5.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/manifest-object.js: -------------------------------------------------------------------------------- 1 | import parseVersionManifest from './parse-iiif-manifest'; 2 | 3 | class ManifestObject 4 | { 5 | constructor (url) 6 | { 7 | this.manifest; 8 | this.url = url; 9 | } 10 | 11 | fetchManifest (callback) 12 | { 13 | fetch(this.url, { 14 | headers: { 15 | "Accept": "application/json" 16 | } 17 | }).then( (response) => 18 | { 19 | if (!response.ok) 20 | { 21 | alert('Could not get manifest! Make sure you provide a proper link.'); 22 | } 23 | return response.json(); 24 | }).then( (responseData) => 25 | { 26 | this.setManifest(responseData, callback); 27 | }); 28 | } 29 | 30 | setManifest (responseData, callback) 31 | { 32 | this.manifest = parseVersionManifest(responseData); 33 | 34 | callback(this.manifest); 35 | } 36 | } 37 | 38 | (function (global) 39 | { 40 | global.ManifestObject = global.ManifestObject || ManifestObject; 41 | }) (window); -------------------------------------------------------------------------------- /src/parse-iiif-manifest.js: -------------------------------------------------------------------------------- 1 | import {Player} from './player'; 2 | 3 | const getMaxZoomLevel = (width, height) => 4 | { 5 | const largestDimension = Math.max(width, height); 6 | return Math.ceil(Math.log((largestDimension + 1) / (256 + 1)) / Math.log(2)); 7 | }; 8 | 9 | const incorporateZoom = (imageDimension, zoomDifference) => imageDimension / (Math.pow(2, zoomDifference)); 10 | 11 | const getOtherImageData = (otherImages, lowestMaxZoom) => 12 | { 13 | return otherImages.map( (itm) => 14 | { 15 | const w = itm.width; 16 | const h = itm.height; 17 | const info = parseImageInfo(itm); 18 | const url = info.url.slice(-1) !== '/' ? info.url + '/' : info.url; // append trailing slash to url if it's not there. 19 | 20 | const dims = new Array(lowestMaxZoom + 1); 21 | for (let j = 0; j < lowestMaxZoom + 1; j++) 22 | { 23 | dims[j] = { 24 | h: Math.floor(incorporateZoom(h, lowestMaxZoom - j)), 25 | w: Math.floor(incorporateZoom(w, lowestMaxZoom - j)) 26 | }; 27 | } 28 | 29 | return { 30 | f: info.url, 31 | url: url, 32 | il: itm.label || "", 33 | d: dims 34 | }; 35 | }); 36 | }; 37 | 38 | /** 39 | * Check if manifest is IIIFv3, then send to appropriate parser. IIIFv3 manifests MUST have 40 | * the 'items' property, whereas v2 will not. 41 | */ 42 | export default function parseVersionManifest (manifest) 43 | { 44 | if (manifest.items) 45 | { 46 | console.log('IIIF v3 Manifest, work in progress'); 47 | return parseIIIF3Manifest(manifest); 48 | } 49 | else 50 | { 51 | console.log('IIIF v2 (or lower) Manifest'); 52 | return parseIIIFManifest(manifest); 53 | } 54 | } 55 | 56 | function parseIIIF3Manifest (manifest) 57 | { 58 | var canvases = manifest.items, 59 | numCanvases = canvases.length; 60 | 61 | for (var i = 0; i < numCanvases; i++) 62 | { 63 | let canvas = canvases[i]; 64 | let canvasDims = { 65 | width: canvas.width, 66 | height: canvas.height 67 | }; 68 | 69 | let annotationPages = canvas.items, 70 | numAnnotationPages = annotationPages.length; 71 | 72 | for (var j = 0; j < numAnnotationPages; j++) 73 | { 74 | let annotations = annotationPages[j].items, 75 | numAnnotations = annotations.length; 76 | 77 | // iterate over all annotations (media items) 78 | for (var k = 0; k < numAnnotations; k++) 79 | { 80 | let annotation = annotations[k]; 81 | let body = annotation.body; 82 | 83 | if (annotation.motivation !== "painting") 84 | continue; 85 | 86 | // if choice choose first 87 | if (body.type === "Choice") 88 | { 89 | annotation.body = body.items[0]; 90 | } 91 | 92 | // get the target zones of media onto canvas 93 | let spatialTarget = /xywh=([^&]+)/g.exec(annotation.target); 94 | let temporalTarget = /t=([^&]+)/g.exec(annotation.target); 95 | var xywh; 96 | var t; 97 | if (spatialTarget && spatialTarget[1]) 98 | { 99 | xywh = spatialTarget[1].split(','); 100 | } 101 | else 102 | { 103 | xywh = [0, 0, canvas.width, canvas.height]; 104 | } 105 | if(temporalTarget && temporalTarget[1]) 106 | { 107 | t = temporalTarget[1].split(','); 108 | } 109 | else 110 | { 111 | t = [0, canvas.duration]; 112 | } 113 | 114 | let percentageLeft = parseInt(xywh[0]) / canvas.width * 100, 115 | percentageTop = parseInt(xywh[1]) / canvas.height * 100, 116 | percentageWidth = parseInt(xywh[2]) / canvas.width * 100, 117 | percentageHeight = parseInt(xywh[3]) / canvas.height * 100; 118 | 119 | // info of media item for rendering 120 | var info = { 121 | 'type': annotation.body.type, 122 | 'source': annotation.body.id, 123 | 'offsetX': percentageLeft, 124 | 'offsetY': percentageTop, 125 | 'width': percentageWidth, 126 | 'height': percentageHeight, 127 | 'start': parseInt(t[0]), 128 | 'end': parseInt(t[1]) 129 | }; 130 | 131 | // render media item onto page 132 | let player = new Player(); 133 | player.render(info); 134 | } 135 | } 136 | 137 | canvases[i] = { 138 | url: canvas.id, 139 | type: canvas.type, 140 | label: canvas.label || "Label", 141 | dims: canvasDims, 142 | duration: canvas.duration, 143 | annotationPages: annotationPages 144 | }; 145 | } 146 | 147 | // parse structures into different timestamps 148 | // assumes depth-2 structure (range then items) 149 | let starts = []; 150 | let ends = []; 151 | let structures = manifest.structures; 152 | if (structures) 153 | { 154 | for (var m = 0; m < structures.length; m++) 155 | { 156 | let range = structures[m]; 157 | 158 | for (var n = 0; n < range.items.length; n++) 159 | { 160 | 161 | if (range.items[n].id.includes('#','=',',')) 162 | { 163 | // get x from #t=x,y 164 | let time = range.items[n].id.split('#')[1].split('=')[1].split(','); 165 | 166 | starts.push(time[0]); 167 | ends.push(time[1]); 168 | } 169 | } 170 | } 171 | } 172 | 173 | // parse additional rendering file information 174 | var rendering; 175 | let renderings = manifest.rendering; 176 | if (renderings) 177 | { 178 | let numRenderings = renderings.length; 179 | 180 | for (var r = 0; r < numRenderings; r++) 181 | { 182 | rendering = renderings[r]; 183 | 184 | if (rendering.id.search(".mei") !== -1) 185 | break; 186 | } 187 | } 188 | 189 | return { 190 | item_title: manifest.label, 191 | url: manifest.id, 192 | canvases: canvases, 193 | structures: structures, 194 | timeStarts: starts, 195 | timeEnds: ends, 196 | rendering: rendering 197 | }; 198 | } 199 | 200 | /** 201 | * Parses an IIIF Presentation API Manifest and converts it into a Diva.js-format object 202 | * (See https://github.com/DDMAL/diva.js/wiki/Development-notes#data-received-through-ajax-request) 203 | * 204 | * @param {Object} manifest - an object that represents a valid IIIF manifest 205 | * @returns {Object} divaServiceBlock - the data needed by Diva to show a view of a single document 206 | */ 207 | function parseIIIFManifest (manifest) 208 | { 209 | var sequence = manifest.sequences[0]; 210 | var canvases = sequence.canvases; 211 | const numCanvases = canvases.length; 212 | 213 | const pages = new Array(canvases.length); 214 | 215 | let thisCanvas, thisResource, thisImage, otherImages, context, url, info, imageAPIVersion, width, height, maxZoom, canvas, label, imageLabel, zoomDimensions, widthAtCurrentZoomLevel, heightAtCurrentZoomLevel; 216 | 217 | let lowestMaxZoom = 100; 218 | let maxRatio = 0; 219 | let minRatio = 100; 220 | 221 | // quickly determine the lowest possible max zoom level (i.e., the upper bound for images) across all canvases. 222 | // while we're here, compute the global ratios as well. 223 | for (let z = 0; z < numCanvases; z++) 224 | { 225 | const c = canvases[z]; 226 | const w = c.width; 227 | const h = c.height; 228 | const mz = getMaxZoomLevel(w, h); 229 | const ratio = h / w; 230 | maxRatio = Math.max(ratio, maxRatio); 231 | minRatio = Math.min(ratio, minRatio); 232 | 233 | lowestMaxZoom = Math.min(lowestMaxZoom, mz); 234 | } 235 | 236 | /* 237 | These arrays need to be pre-initialized since we will do arithmetic and value checking on them 238 | */ 239 | const totalWidths = new Array(lowestMaxZoom + 1).fill(0); 240 | const totalHeights = new Array(lowestMaxZoom + 1).fill(0); 241 | const maxWidths = new Array(lowestMaxZoom + 1).fill(0); 242 | const maxHeights = new Array(lowestMaxZoom + 1).fill(0); 243 | 244 | for (let i = 0; i < numCanvases; i++) 245 | { 246 | thisCanvas = canvases[i]; 247 | canvas = thisCanvas['@id']; 248 | label = thisCanvas.label; 249 | thisResource = thisCanvas.images[0].resource; 250 | 251 | /* 252 | * If a canvas has multiple images it will be encoded 253 | * with a resource type of "oa:Choice". The primary image will be available 254 | * on the 'default' key, with other images available under 'item.' 255 | * */ 256 | if (thisResource['@type'] === "oa:Choice") 257 | { 258 | thisImage = thisResource.default; 259 | } 260 | else 261 | { 262 | thisImage = thisResource; 263 | } 264 | 265 | // Prioritize the canvas height / width first, since images may not have h/w 266 | width = thisCanvas.width || thisImage.width; 267 | height = thisCanvas.height || thisImage.height; 268 | if (width <= 0 || height <= 0) 269 | { 270 | console.warn('Invalid width or height for canvas ' + label + '. Skipping'); 271 | continue; 272 | } 273 | 274 | maxZoom = getMaxZoomLevel(width, height); 275 | 276 | if (thisResource.item) 277 | { 278 | otherImages = getOtherImageData(thisResource.item, lowestMaxZoom); 279 | } 280 | else 281 | { 282 | otherImages = []; 283 | } 284 | 285 | imageLabel = thisImage.label || null; 286 | 287 | info = parseImageInfo(thisImage); 288 | url = info.url.slice(-1) !== '/' ? info.url + '/' : info.url; // append trailing slash to url if it's not there. 289 | 290 | context = thisImage.service['@context']; 291 | if (context === 'http://iiif.io/api/image/2/context.json') 292 | { 293 | imageAPIVersion = 2; 294 | } 295 | else if (context === 'http://library.stanford.edu/iiif/image-api/1.1/context.json') 296 | { 297 | imageAPIVersion = 1.1; 298 | } 299 | else 300 | { 301 | imageAPIVersion = 1.0; 302 | } 303 | 304 | zoomDimensions = new Array(lowestMaxZoom + 1); 305 | 306 | for (let k = 0; k < lowestMaxZoom + 1; k++) 307 | { 308 | widthAtCurrentZoomLevel = Math.floor(incorporateZoom(width, lowestMaxZoom - k)); 309 | heightAtCurrentZoomLevel = Math.floor(incorporateZoom(height, lowestMaxZoom - k)); 310 | zoomDimensions[k] = { 311 | h: heightAtCurrentZoomLevel, 312 | w: widthAtCurrentZoomLevel 313 | }; 314 | 315 | totalWidths[k] += widthAtCurrentZoomLevel; 316 | totalHeights[k] += heightAtCurrentZoomLevel; 317 | maxWidths[k] = Math.max(widthAtCurrentZoomLevel, maxWidths[k]); 318 | maxHeights[k] = Math.max(heightAtCurrentZoomLevel, maxHeights[k]); 319 | } 320 | 321 | pages[i] = { 322 | d: zoomDimensions, 323 | m: maxZoom, 324 | l: label, // canvas label ('page 1, page 2', etc.) 325 | il: imageLabel, // default image label ('primary image', 'UV light', etc.) 326 | f: info.url, 327 | url: url, 328 | api: imageAPIVersion, 329 | paged: thisCanvas.viewingHint !== 'non-paged', 330 | facingPages: thisCanvas.viewingHint === 'facing-pages', 331 | canvas: canvas, 332 | otherImages: otherImages, 333 | xoffset: info.x || null, 334 | yoffset: info.y || null 335 | }; 336 | } 337 | 338 | const averageWidths = new Array(lowestMaxZoom + 1); 339 | const averageHeights = new Array(lowestMaxZoom + 1); 340 | 341 | for (let a = 0; a < lowestMaxZoom + 1; a++) 342 | { 343 | averageWidths[a] = totalWidths[a] / numCanvases; 344 | averageHeights[a] = totalHeights[a] / numCanvases; 345 | } 346 | 347 | const dims = { 348 | a_wid: averageWidths, 349 | a_hei: averageHeights, 350 | max_w: maxWidths, 351 | max_h: maxHeights, 352 | max_ratio: maxRatio, 353 | min_ratio: minRatio, 354 | t_hei: totalHeights, 355 | t_wid: totalWidths 356 | }; 357 | 358 | return { 359 | item_title: manifest.label, 360 | dims: dims, 361 | max_zoom: lowestMaxZoom, 362 | pgs: pages, 363 | paged: manifest.viewingHint === 'paged' || sequence.viewingHint === 'paged' 364 | }; 365 | } 366 | 367 | /** 368 | * Takes in a resource block from a canvas and outputs the following information associated with that resource: 369 | * - Image URL 370 | * - Image region to be displayed 371 | * 372 | * @param {Object} resource - an object representing the resource block of a canvas section in a IIIF manifest 373 | * @returns {Object} imageInfo - an object containing image URL and region 374 | */ 375 | function parseImageInfo (resource) 376 | { 377 | let url = resource['@id'] || resource.id; 378 | const fragmentRegex = /#xywh=([0-9]+,[0-9]+,[0-9]+,[0-9]+)/; 379 | let xywh = ''; 380 | let stripURL = true; 381 | 382 | if (/\/([0-9]+,[0-9]+,[0-9]+,[0-9]+)\//.test(url)) 383 | { 384 | // if resource in image API format, extract region x,y,w,h from URL (after 4th slash from last) 385 | // matches coordinates in URLs of the form http://www.example.org/iiif/book1-page1/40,50,1200,1800/full/0/default.jpg 386 | const urlArray = url.split('/'); 387 | xywh = urlArray[urlArray.length - 4]; 388 | } 389 | else if (fragmentRegex.test(url)) 390 | { 391 | // matches coordinates of the style http://www.example.org/iiif/book1/canvas/p1#xywh=50,50,320,240 392 | const result = fragmentRegex.exec(url); 393 | xywh = result[1]; 394 | } 395 | else if (resource.service && resource.service['@id']) 396 | { 397 | // assume canvas size based on image size 398 | url = resource.service['@id']; 399 | // this URL excludes region parameters so we don't need to remove them 400 | stripURL = false; 401 | } 402 | 403 | if (stripURL) 404 | { 405 | // extract URL up to identifier (we eliminate the last 5 parameters: /region/size/rotation/quality.format) 406 | url = url.split('/').slice(0, -4).join('/'); 407 | } 408 | 409 | const imageInfo = { 410 | url: url 411 | }; 412 | 413 | if (xywh.length) 414 | { 415 | // parse into separate components 416 | const dimensions = xywh.split(','); 417 | imageInfo.x = parseInt(dimensions[0], 10); 418 | imageInfo.y = parseInt(dimensions[1], 10); 419 | imageInfo.w = parseInt(dimensions[2], 10); 420 | imageInfo.h = parseInt(dimensions[3], 10); 421 | } 422 | 423 | return imageInfo; 424 | } 425 | -------------------------------------------------------------------------------- /src/player.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery'; 2 | 3 | export class Player 4 | { 5 | constructor () 6 | { 7 | this.mediaElement; 8 | } 9 | 10 | render (info) 11 | { 12 | if ($('.playerContainer').length) // if media already exists on page 13 | { 14 | $('.playerContainer').remove(); 15 | } 16 | let container = $('
'); 17 | container.css({ 18 | width: '100%' 19 | }); 20 | $('.player').append(container); 21 | switch(info.type) 22 | { 23 | case 'Image': 24 | this.mediaElement = $(''); 25 | break; 26 | case 'Video': 27 | this.mediaElement = $('