diff --git a/src/packager/PackagerOptions.svelte b/src/packager/PackagerOptions.svelte
index cef16f1..84c90a0 100644
--- a/src/packager/PackagerOptions.svelte
+++ b/src/packager/PackagerOptions.svelte
@@ -230,7 +230,7 @@
Accent color (background color of controls when active or hovered)
{/if}
- If all controls are disabled, there will be no controls at all.
+ If all controls are disabled, there will be no controls at all. If only fullscreen is enabled, it will be displayed as its own button always in the top left corner, not in a header above the player.
Colors
diff --git a/src/packager/packager.js b/src/packager/packager.js
index 1991051..c974616 100644
--- a/src/packager/packager.js
+++ b/src/packager/packager.js
@@ -306,6 +306,15 @@ class Packager extends EventTarget {
.fullscreen-button {
background: white !important;
}
+ .standalone-fullscreen-button {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ border-radius: 0 0 0 4px;
+ padding: 4px;
+ cursor: pointer;
+ }
@@ -408,7 +417,6 @@ class Packager extends EventTarget {
if (${this.options.controls.fullscreen.enabled} && document.fullscreenEnabled) {
let isFullScreen = !!document.fullscreenElement;
const fullscreenButton = document.createElement("img");
- fullscreenButton.className = 'control-button fullscreen-button';
fullscreenButton.addEventListener('click', () => {
if (isFullScreen) {
document.exitFullscreen().then(() => {
@@ -422,11 +430,13 @@ class Packager extends EventTarget {
});
}
});
+ const otherControlsExist = ${this.options.controls.greenFlag.enabled || this.options.controls.stopAll.enabled};
+ const fillColor = otherControlsExist ? '#575E75' : '#FFFFFF';
const updateFullscreenImage = () => {
if (isFullScreen) {
- fullscreenButton.src = 'data:image/svg+xml,' + encodeURIComponent('