diff options
Diffstat (limited to 'web/source')
| -rw-r--r-- | web/source/css/status.css | 31 | ||||
| -rw-r--r-- | web/source/frontend/index.js | 8 | ||||
| -rw-r--r-- | web/source/package.json | 1 | ||||
| -rw-r--r-- | web/source/yarn.lock | 5 |
4 files changed, 41 insertions, 4 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css index 5b9900472..ed0075976 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -232,6 +232,9 @@ main { } input.sensitive-checkbox:checked { /* Media is shown */ + & ~ .video-play { + display: flex; + } & ~ .sensitive { .closed { transition: 0.8s; @@ -256,6 +259,32 @@ main { } } + .video-play { + .icon-span { + align-self: center; + display: initial; + z-index: 4; + + .icon { + color: $white1; + } + + .icon-bg { + color: $gray1; + font-size: 1.1em; + } + } + + display: none; + position: absolute; + height: 100%; + width: 100%; + justify-content: center; + align-items: center; + font-size: 7em; + pointer-events: none; + } + .sensitive { position: absolute; height: 100%; @@ -412,4 +441,4 @@ footer + div { /* something weird from the devstack.. */ grid-row: auto; } } -}
\ No newline at end of file +} diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js index b1187f515..7cf396035 100644 --- a/web/source/frontend/index.js +++ b/web/source/frontend/index.js @@ -21,6 +21,7 @@ const Photoswipe = require("photoswipe/dist/umd/photoswipe.umd.min.js"); const PhotoswipeLightbox = require("photoswipe/dist/umd/photoswipe-lightbox.umd.min.js"); const PhotoswipeCaptionPlugin = require("photoswipe-dynamic-caption-plugin").default; +const PhotoswipeVideoPlugin = require("photoswipe-video-plugin").default; let [_, _user, type, id] = window.location.pathname.split("/"); if (type == "statuses") { @@ -39,6 +40,7 @@ const lightbox = new PhotoswipeLightbox({ new PhotoswipeCaptionPlugin(lightbox, { type: 'auto', }); +new PhotoswipeVideoPlugin(lightbox, {}); lightbox.init(); @@ -46,14 +48,14 @@ Array.from(document.getElementsByClassName("spoiler-label")).forEach((label) => let checkbox = document.getElementById(label.htmlFor); if (checkbox != undefined) { function update() { - if(checkbox.checked) { + if (checkbox.checked) { label.innerHTML = "Show more"; } else { label.innerHTML = "Show less"; } } update(); - - label.addEventListener("click", () => {setTimeout(update, 1);}); + + label.addEventListener("click", () => { setTimeout(update, 1); }); } }); diff --git a/web/source/package.json b/web/source/package.json index 410602aba..7685df234 100644 --- a/web/source/package.json +++ b/web/source/package.json @@ -22,6 +22,7 @@ "modern-normalize": "^1.1.0", "photoswipe": "^5.3.3", "photoswipe-dynamic-caption-plugin": "^1.2.7", + "photoswipe-video-plugin": "^1.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^3.1.4", diff --git a/web/source/yarn.lock b/web/source/yarn.lock index 6e7074a42..ae63ce004 100644 --- a/web/source/yarn.lock +++ b/web/source/yarn.lock @@ -4201,6 +4201,11 @@ photoswipe-dynamic-caption-plugin@^1.2.7: resolved "https://registry.yarnpkg.com/photoswipe-dynamic-caption-plugin/-/photoswipe-dynamic-caption-plugin-1.2.7.tgz#53aa5059f1c4dccc8aa36196ff3e09baa5e537c2" integrity sha512-5XXdXLf2381nwe7KqQvcyStiUBi9TitYXppUQTrzPwYAi4lZsmWNnNKMclM7I4QGlX6fXo42v3bgb6rlK9pY1Q== +photoswipe-video-plugin@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/photoswipe-video-plugin/-/photoswipe-video-plugin-1.0.2.tgz#156b6a72ffa86e6c6e2b486e8ec5b48f6696941a" + integrity sha512-skNHaalLU7rptZ3zq4XfS5hPqSDD65ctvpf2X8buvC8BpOt6XKSIgRkLzTwgQOUm9yQ8kQ4mMget7CIqGcqtDg== + photoswipe@^5.3.3: version "5.3.3" resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.3.3.tgz#86351a33502a3ab7d1e483127fe596b20054218a" |