-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from harvard-lil/url-postmessage
v0.0.1
- Loading branch information
Showing
6 changed files
with
821 additions
and
302 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| ## v0.0.1 - Oct 5 2022 | ||
| - Implemented two-way communication system using post messages (see readme). | ||
| - Upgraded to `<replay-web-page>` 1.7.0 | ||
| - Aligned parameter names with `<replay-web-page>` attribute names: | ||
| - `?archive-file` > `?source` | ||
| - `?archived-url` > `?url` | ||
| - Made `?url` parameter optional. Will fallback to `page:0` if not provided. | ||
| - Added support for `?ts`, `?embed` and `?deepLink` parameters. | ||
| - Removed logic to automatically append `noCache` for browsers that do not support the `StorageManager.estimate` API, now handled by `<replay-web-page>` directly. | ||
| - Removed logic to automatically append `noWebWorker` for older versions of Safari (< 16), now handled by `<replay-web-page>` directly. | ||
| - Removed logic for checking if `<replay-web-page>` is embedded in a cross-origin `<iframe>`, now handled by `<replay-web-page requireSubDomainIframe>`. | ||
| - Used `<replay-web-page>`'s' `sandbox` attribute in replacement of `noSandbox`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| //------------------------------------------------------------------------------ | ||
| // Module-level variables | ||
| //------------------------------------------------------------------------------ | ||
| const params = new URLSearchParams(window.location.search); | ||
| const player = document.createElement("replay-web-page"); | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Check for required params | ||
| //------------------------------------------------------------------------------ | ||
| if (params.get("source") === null) { | ||
| throw new Error("`source` search param must be provided."); | ||
| } | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Prepare and inject `<replay-web-page>` | ||
| //------------------------------------------------------------------------------ | ||
| player.setAttribute("source", `/${params.get("source")}`); | ||
| player.setAttribute("url", `page:0`); | ||
| player.setAttribute("replayBase", "/replay-web-page/"); | ||
| player.setAttribute("embed", "default"); | ||
| player.setAttribute("requireSubDomainIframe", ""); | ||
| player.setAttribute("sandbox", ""); | ||
|
|
||
| // Param: `url` (see: https://replayweb.page/docs/embedding) | ||
| if (params.get("url")) { | ||
| player.setAttribute("url", params.get("url")); | ||
| } | ||
|
|
||
| // Param: `ts` (see: https://replayweb.page/docs/embedding) | ||
| if (params.get("ts")) { | ||
| player.setAttribute("ts", handleTsParam(params.get("ts"))); | ||
| } | ||
|
|
||
| // Param: `embed` (see: https://replayweb.page/docs/embedding) | ||
| if (["default", "full", "replayonly", "replay-with-info"].includes(params.get("embed"))) { | ||
| player.setAttribute("embed", params.get("embed")); | ||
| } | ||
|
|
||
| // Param: `deepLink` (see: https://replayweb.page/docs/embedding) | ||
| if (params.get("deepLink")) { | ||
| player.setAttribute("deepLink", ""); | ||
| } | ||
|
|
||
| document.querySelector("body").appendChild(player); | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Two-way communication between embedder and embedded | ||
| //------------------------------------------------------------------------------ | ||
| window.addEventListener("message", (event) => { | ||
| // | ||
| // Forward messages coming from the service worker | ||
| // | ||
| try { | ||
| if (event.source.location.pathname === player.getAttribute("replayBase")) { | ||
| parent.window.postMessage( | ||
| { warcEmbedHref: window.location.href, ...event.data }, | ||
| "*" | ||
| ); | ||
| } | ||
| } | ||
| catch(err) { | ||
| // Will fail on cross-origin messages | ||
| } | ||
|
|
||
| // | ||
| // Handle messages coming from parent | ||
| // | ||
| if (event.source === parent.window && event.data) { | ||
|
|
||
| // `updateUrl`: Updates `<replay-web-page>`s "url" attribute | ||
| if (event.data["updateUrl"]) { | ||
| player.setAttribute("url", event.data.updateUrl); | ||
| } | ||
|
|
||
| // `updateTs` Updates `<replay-web-page>`s "ts" attribute | ||
| if (event.data["updateTs"]) { | ||
| player.setAttribute("ts", handleTsParam(event.data.updateTs)); | ||
| } | ||
|
|
||
| // `getInited`: Hoists current value of `<replay-web-page>.__inited`. | ||
| // This value indicates whether or not the service worker is ready. | ||
| if (event.data["getInited"]) { | ||
| parent.window.postMessage( | ||
| { inited: player.__inited, warcEmbedHref: window.location.href }, | ||
| event.origin | ||
| ); | ||
| } | ||
|
|
||
| // `getCollInfo` | ||
| // Pries into `<replay-web-page>` to hoist `wr-coll.__collInfo`, which contains useful collection-related data. | ||
| if (event.data["getCollInfo"]) { | ||
| let collInfo = {}; | ||
|
|
||
| try { | ||
| collInfo = player.shadowRoot | ||
| .querySelector("iframe") | ||
| .contentDocument | ||
| .querySelector("replay-app-main") | ||
| .shadowRoot | ||
| .querySelector("wr-coll") | ||
| .__collInfo; | ||
| } | ||
| catch(err) { | ||
| // console.log(err); // Not blocking | Just not ready. | ||
| } | ||
|
|
||
| parent.window.postMessage( | ||
| { collInfo: collInfo, warcEmbedHref: window.location.href }, | ||
| event.origin | ||
| ); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| }, false); | ||
|
|
||
| //------------------------------------------------------------------------------ | ||
| // Utils | ||
| //------------------------------------------------------------------------------ | ||
| /** | ||
| * Converts `ts` from timestamp to YYYYMMDDHHMMSS if necessary. | ||
| * In `<replay-web-page>`, `ts` can be either depending on context, which can lead to confusions. | ||
| * This function brings support for `ts` as either a timestamp OR a formatted date. | ||
| * | ||
| * @param {Number|String} ts | ||
| * @returns {Number} | ||
| */ | ||
| function handleTsParam(ts) { | ||
| ts = parseInt(ts); | ||
|
|
||
| if (ts <= 9999999999999) { | ||
| const date = new Date(ts); | ||
| let newTs = `${date.getUTCFullYear()}`; | ||
| newTs += `${(date.getUTCMonth() + 1).toString().padStart(2, 0)}`; | ||
| newTs += `${date.getUTCDate().toString().padStart(2, 0)}`; | ||
| newTs += `${date.getUTCHours().toString().padStart(2, 0)}`; | ||
| newTs += `${date.getUTCMinutes().toString().padStart(2, 0)}`; | ||
| newTs += `${date.getSeconds().toString().padStart(2, 0)}`; | ||
| ts = newTs; | ||
| } | ||
|
|
||
| return ts; | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.