Merge branch 'main' into marrionluaka-fix-channel-messaging-type-error

mdn · Jan 5, 2024 · 8a1708a · 8a1708a
2 parents 6d7d636 + f070e91
commit 8a1708a
Show file tree

Hide file tree

Showing 28 changed files with 721 additions and 121 deletions.
diff --git a/README.md b/README.md
diff --git a/document-picture-in-picture/README.md b/document-picture-in-picture/README.md
@@ -0,0 +1,5 @@
+# Document Picture-in-Picture example
+
+This example will progressively enhance a video by adding a toggle picture-in-picture button if the [Document Picture-in-Picture API](http://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API/) is available.
+
+[See the example live](https://mdn.github.io/dom-examples/document-picture-in-picture/).
diff --git a/document-picture-in-picture/assets/bigbuckbunny.mp4 b/document-picture-in-picture/assets/bigbuckbunny.mp4
diff --git a/document-picture-in-picture/index.html b/document-picture-in-picture/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>Document Picture-in-Picture API Example</title>
+  <script src="main.js" async></script>
+  <link href="main.css" rel="stylesheet">
+</head>
+
+<body>
+  <div id="contents">
+    <h1>Document Picture-in-Picture API Example</h1>
+    <div id="container">
+      <p id="in-pip-message">Video player is currently in the separate Picture-in-Picture window.</p>
+      <div id="player">
+        <video src="assets/bigbuckbunny.mp4" id="video" controls width="320"></video>
+
+        <div id="credits"><a href="https://peach.blender.org/download/" target="_blank">Video by Blender</a>;
+          <a href="https://peach.blender.org/about/" target="_blank">licensed CC-BY 3.0</a>
+        </div>
+
+        <div id="controlbar">
+          <p class="no-picture-in-picture">
+            Document Picture-in-Picture API not available
+          <p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/document-picture-in-picture/main.css b/document-picture-in-picture/main.css
@@ -0,0 +1,13 @@
+#contents {
+	width: 600px;
+	font: 14px "Open Sans", sans-serif;
+}
+
+#credits {
+	padding: 0 0 10px 0;
+	font: italic 10px "Open Sans", sans-serif;
+}
+
+#in-pip-message {
+	display: none;
+}
diff --git a/document-picture-in-picture/main.js b/document-picture-in-picture/main.js
@@ -0,0 +1,84 @@
+
+const videoPlayer = document.getElementById("player");
+const playerContainer = document.getElementById("container");
+
+const inPipMessage = document.getElementById("in-pip-message");
+
+if ("documentPictureInPicture" in window) {
+
+	document.querySelector(".no-picture-in-picture").remove();
+
+	const togglePipButton = document.createElement("button");
+	togglePipButton.textContent = "Toggle Picture-in-Picture";
+	togglePipButton.addEventListener("click", togglePictureInPicture, false);
+
+	document.getElementById("controlbar").appendChild(togglePipButton);
+}
+
+async function togglePictureInPicture() {
+	// Returns null if no pip window is currently open
+	if (!window.documentPictureInPicture.window) {
+
+		// Open a Picture-in-Picture window.
+		const pipWindow = await window.documentPictureInPicture.requestWindow({
+			width: videoPlayer.clientWidth,
+			height: videoPlayer.clientHeight,
+		});
+
+		// Add pagehide listener to handle the case of the pip window being closed using the browser X button
+		pipWindow.addEventListener("pagehide", (event) => {
+			inPipMessage.style.display = "none";
+			playerContainer.append(videoPlayer);
+		});
+
+		// Copy style sheets over from the initial document
+		// so that the player looks the same.
+		[...document.styleSheets].forEach((styleSheet) => {
+			try {
+				const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
+				const style = document.createElement('style');
+
+				style.textContent = cssRules;
+				pipWindow.document.head.appendChild(style);
+			} catch (e) {
+				const link = document.createElement('link');
+
+				link.rel = 'stylesheet';
+				link.type = styleSheet.type;
+				link.media = styleSheet.media;
+				link.href = styleSheet.href;
+				pipWindow.document.head.appendChild(link);
+			}
+		})
+
+		// Move the player to the Picture-in-Picture window.
+		pipWindow.document.body.append(videoPlayer);
+
+		// Display a message to say it has been moved
+		inPipMessage.style.display = "block";
+	} else {
+		inPipMessage.style.display = "none";
+		playerContainer.append(videoPlayer);
+		window.documentPictureInPicture.window.close();
+	}
+}
+
+documentPictureInPicture.addEventListener("enter", (event) => {
+	const pipWindow = event.window;
+	console.log("Video player has entered the pip window");
+
+	const pipMuteButton = pipWindow.document.createElement("button");
+	pipMuteButton.textContent = "Mute";
+	pipMuteButton.addEventListener("click", () => {
+		const pipVideo = pipWindow.document.querySelector("#video");
+		if (!pipVideo.muted) {
+			pipVideo.muted = true;
+			pipMuteButton.textContent = "Unmute";
+		} else {
+			pipVideo.muted = false;
+			pipMuteButton.textContent = "Mute";
+		}
+	});
+
+	pipWindow.document.body.append(pipMuteButton);
+});
diff --git a/history-api/creatures/eagle.json b/history-api/creatures/eagle.json
@@ -0,0 +1,8 @@
+{
+  "description": "Bald eagles are not actually bald.",
+  "image": {
+    "src": "images/eagle.jpg",
+    "alt": "A bald eagle"
+  },
+  "name": "Eagle"
+}
diff --git a/history-api/creatures/turtle.json b/history-api/creatures/turtle.json
@@ -0,0 +1,8 @@
+{
+  "description": "Painted turtles have anti-freeze in their blood.",
+  "image": {
+    "src": "images/turtle.jpg",
+    "alt": "A painted turtle"
+  },
+  "name": "Turtle"
+}
diff --git a/history-api/creatures/vulture.json b/history-api/creatures/vulture.json
@@ -0,0 +1,8 @@
+{
+  "description": "Turkey vultures have a keen sense of smell.",
+  "image": {
+    "src": "images/vulture.jpg",
+    "alt": "A turkey vulture"
+  },
+  "name": "Vulture"
+}
diff --git a/history-api/images/eagle.jpg b/history-api/images/eagle.jpg
diff --git a/history-api/images/puffin.jpg b/history-api/images/puffin.jpg
diff --git a/history-api/images/turtle.jpg b/history-api/images/turtle.jpg
diff --git a/history-api/images/vulture.jpg b/history-api/images/vulture.jpg
diff --git a/history-api/index.html b/history-api/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Creatures: Home</title>
+    <script src="script.js" defer></script>
+    <style>
+      .nav li {
+        display: inline-block;
+        margin-right: 2rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ul class="nav">
+      <li><a href="/dom-examples/history-api/">Home</a></li>
+      <li><a href="eagle" data-creature="eagle">Eagle</a></li>
+      <li><a href="vulture" data-creature="vulture">Vulture</a></li>
+      <li><a href="turtle" data-creature="turtle">Turtle</a></li>
+    </ul>
+
+    <p id="description">Let's look at some creatures.</p>
+
+    <img id="photo" src="images/puffin.jpg" alt="A puffin" />
+  </body>
+</html>
diff --git a/history-api/script.js b/history-api/script.js
@@ -0,0 +1,53 @@
+// Update the page with the new content
+function displayContent(content) {
+  document.title = `Creatures: ${content.name}`;
+
+  const description = document.querySelector("#description");
+  description.textContent = content.description;
+
+  const photo = document.querySelector("#photo");
+  photo.setAttribute("src", content.image.src);
+  photo.setAttribute("alt", content.image.alt);
+}
+
+// When a link is clicked: update the page for that creature.
+// From a user perspective, this will look like the loading of a new page.
+
+document.addEventListener("click", async (event) => {
+  const creature = event.target.getAttribute("data-creature");
+  if (creature) {
+    event.preventDefault();
+    try {
+      const response = await fetch(`creatures/${creature}.json`);
+      const json = await response.json();
+      displayContent(json);
+      // Add a new entry to the history.
+      // This simulates loading a new page.
+      history.pushState(json, "", creature);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+});
+
+// Handle forward/back buttons
+window.addEventListener("popstate", (event) => {
+  // If a state has been provided, we have a "simulated" page
+  // and we update the current page.
+  if (event.state) {
+    // Simulate the loading of the previous page
+    displayContent(event.state);
+  }
+});
+
+// Create state on page load and replace the current history with it
+const image = document.querySelector("#photo");
+const initialState = {
+  description: document.querySelector("#description").textContent,
+  image: {
+    src: image.getAttribute("src"),
+    alt: image.getAttribute("alt"),
+  },
+  name: "Home",
+};
+history.replaceState(initialState, "", document.location.href);