diff --git a/packages/frontend/src/components/SkFlashPlayer.vue b/packages/frontend/src/components/SkFlashPlayer.vue
index 4fc54fcc2a..8eeb55ebbd 100644
--- a/packages/frontend/src/components/SkFlashPlayer.vue
+++ b/packages/frontend/src/components/SkFlashPlayer.vue
@@ -31,23 +31,23 @@ SPDX-License-Identifier: AGPL-3.0-only
- ALT
+ ALT
@@ -73,6 +73,7 @@ const comment = computed(() => { return props.flashFile.comment ?? ''; });
let hide = ref((defaultStore.state.nsfw === 'force') ? true : isSensitive.value && (defaultStore.state.nsfw !== 'ignore'));
let playerHide = ref(true);
let ruffleContainer = ref();
+let playPauseButtonKey = ref(0);
let loadingStatus = ref(undefined);
let player = ref(undefined);
let ruffleError = ref(undefined);
@@ -194,6 +195,7 @@ function playPause() {
} else {
player.value.play();
}
+ playPauseButtonKey.value += 1; // HACK: Used to re-render play/pause button
}
function fullscreen() {
@@ -206,7 +208,7 @@ function fullscreen() {
}
function stop() {
- if (player.value === undefined) return; // FIXME: This doesn't stop the loading process. (Though, should this even be implemented?)
+ if (player.value === undefined) return; // FIXME: This doesn't stop the loading process. (That said, should this even be implemented?)
try {
ruffleContainer.value?.removeChild(player.value);
} catch {
@@ -338,15 +340,26 @@ onDeactivated(() => {
border: none;
background-color: transparent;
color: var(--accent);
+ text-decoration: none;
cursor: pointer;
&:hover {
background-color: var(--fg);
}
+
+ &:disabled {
+ filter: grayscale(100%);
+ background-color: transparent;
+ cursor: not-allowed;
+ }
}
> .fullscreen {
margin-left: auto;
+
+ &:disabled {
+ filter: grayscale(100%);
+ }
}
> input[type=range] {
@@ -356,9 +369,11 @@ onDeactivated(() => {
padding: 0;
margin: 4px 8px;
overflow-x: hidden;
+ cursor: pointer;
&:disabled {
filter: grayscale(100%);
+ cursor: not-allowed;
}
&:focus {
@@ -376,7 +391,6 @@ onDeactivated(() => {
&::-webkit-slider-runnable-track {
width: 100%;
height: 100%;
- cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: var(--bg);
@@ -390,7 +404,6 @@ onDeactivated(() => {
width: 14px;
border-radius: 0;
background: var(--accentLighten);
- cursor: pointer;
-webkit-appearance: none;
box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
@@ -400,7 +413,6 @@ onDeactivated(() => {
&::-moz-range-track {
width: 100%;
height: 100%;
- cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: var(--bg);
@@ -408,7 +420,6 @@ onDeactivated(() => {
}
&::-moz-range-progress {
- cursor: pointer;
height: 100%;
background: var(--accent);
}
@@ -419,13 +430,11 @@ onDeactivated(() => {
border-radius: 0;
width: 14px;
background: var(--accentLighten);
- cursor: pointer;
}
&::-ms-track {
width: 100%;
height: 100%;
- cursor: pointer;
border-radius: 0;
animate: 0.2s;
background: transparent;
@@ -452,7 +461,6 @@ onDeactivated(() => {
width: 14px;
border-radius: 0;
background: var(--accentLighten);
- cursor: pointer;
}
}
}