diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css index 8c7fc44f8..79acf988c 100644 --- a/web/source/css/_colors.css +++ b/web/source/css/_colors.css @@ -119,4 +119,13 @@ $error-bg: $error2; $list-entry-bg: $gray2; $list-entry-alternate-bg: $gray3; -$list-entry-hover-bg: $gray4; \ No newline at end of file +$list-entry-hover-bg: $gray4; + +/* Plyr video player */ +$plyr-color-main: $orange2; +$plyr-video-background: $bg-accent; +$plyr-badge-background: $bg-accent; +$plyr-video-controls-background: $bg-accent; +$plyr-badge-text-color: $fg; +$plyr-badge-border-radius: $br; +$plyr-video-progress-buffered-background: $gray8; \ No newline at end of file diff --git a/web/source/css/base.css b/web/source/css/base.css index 2d3466d8d..87d2fcca7 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -44,6 +44,11 @@ $br: 0.4rem; inside something with $br, eg avatar, header img */ $br-inner: 0.2rem; +/* Fork-Awesome 'fa-fw' fixed icon width + keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50 +*/ +$fa-fw: 1.28571429em; + html, body { padding: 0; margin: 0; diff --git a/web/source/css/status.css b/web/source/css/status.css index cbbaa6ce9..1dfe8c7b2 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -18,6 +18,7 @@ @import "photoswipe/dist/photoswipe.css"; @import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css"; +@import "plyr/dist/plyr.css"; main { background: transparent; @@ -113,15 +114,16 @@ main { } details > summary { - list-style: none; - padding-bottom: 0.5rem; display: inline-block; + list-style: none; + + &::-webkit-details-marker { + display: none; /* Safari */ + } .button { white-space: nowrap; - padding: 0.2rem 0.3rem; cursor: pointer; - font-size: 1rem; } } @@ -135,6 +137,15 @@ main { width: 100%; + details > summary { + padding-bottom: 0.5rem; + + .button { + padding: 0.2rem 0.3rem; + font-size: 1rem; + } + } + a { color: $link-fg; text-decoration: underline; @@ -200,16 +211,104 @@ main { } .media { - border-radius: $br; grid-column: span 3; display: grid; grid-template-columns: 50% 50%; grid-auto-rows: 10rem; overflow: hidden; - gap: 0.3rem; .media-wrapper { + height: 100%; + width: 100%; + box-sizing: border-box; + border: 0.15rem solid $gray1; + border-radius: $br; position: relative; + overflow: hidden; + z-index: 2; + + details { + position: absolute; + height: 100%; + width: 100%; + + &[open] summary { + height: auto; + width: auto; + margin: 1rem; + padding: 0; + + .show, video, img { + display: none; + } + + .hide.button { + display: inline-block; + grid-column: 1 / span 3; + grid-row: 1 / span 2; + } + } + + summary { + position: absolute; + height: 100%; + width: 100%; + z-index: 3; + overflow: hidden; + + display: grid; + padding: 1rem; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: + "eye sensitive ." + ". sensitive ."; + + .show.button, .hide.button { + grid-area: eye; + align-self: start; + justify-self: start; + margin: 0; + padding: 0.4rem; + + .fa-fw { + line-height: $fa-fw; + } + } + + .show.sensitive { + grid-area: sensitive; + align-self: center; + + .button { + cursor: pointer; + align-self: center; + } + } + + .hide { + display: none; + } + + video, img { + z-index: -1; + position: absolute; + height: calc(100% + 1.2rem); + width: calc(100% + 1.2rem); + top: -0.6rem; + left: -0.6rem; + filter: blur(1.2rem); + } + } + + video.plyr-video, .plyr { + position: absolute; + height: 100%; + width: 100%; + object-fit: contain; + background: $gray1; + } + } } &.single .media-wrapper { @@ -220,101 +319,6 @@ main { grid-row: span 2; } - .open, .open .button { - display: none; - } - - .closed { - z-index: 2; - } - - input.sensitive-checkbox:checked { /* Media is shown */ - & ~ .video-play { - display: flex; - } - & ~ .sensitive { - .closed { - transition: 0.8s; - pointer-events: none; - opacity: 0; - - & > * { - display: none; - } - } - - .open { - display: flex; - justify-content: flex-start; - - .button { - align-self: flex-start; - display: initial; - z-index: 4; - } - } - } - } - - .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%; - width: 100%; - - .open, .closed { - display: flex; - position: absolute; - height: 100%; - width: 100%; - justify-content: center; - padding: 1rem; - - label { - z-index: 3; - } - } - - .closed { - transition: 0.3s; - background: $bg-sensitive; - @supports (backdrop-filter: blur(2rem)) { - background: transparent; - backdrop-filter: blur(2rem); - } - - .button { - align-self: center; - justify-self: center; - } - } - } - .no-image-desc { color: $no-img-desc-fg; background: $no-img-desc-bg; @@ -407,4 +411,35 @@ main { background: $toot-focus-info-bg; } } +} + +.plyr--video { + flex-direction: column-reverse; + + .plyr__video-wrapper { + position: relative; + } + + .plyr__controls { + align-self: stretch; + position: initial; + padding: 0.1rem; + padding-top: 0.2rem; + } + + .plyr__control { + box-shadow: none; + } + + .plyr__control--overlaid { + top: calc(50% - 18px); + } +} + +.pswp__content { + padding: 2rem; + + .plyr { + max-height: 100%; + } } \ No newline at end of file diff --git a/web/source/frontend/index.js b/web/source/frontend/index.js index bc2d4a4fd..2e775a576 100644 --- a/web/source/frontend/index.js +++ b/web/source/frontend/index.js @@ -19,10 +19,12 @@ "use strict"; +window.HELP_IMPROVE_VIDEOJS = false; + 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; +const Plyr = require("plyr"); let [_, _user, type, id] = window.location.pathname.split("/"); if (type == "statuses") { @@ -34,18 +36,66 @@ if (type == "statuses") { const lightbox = new PhotoswipeLightbox({ gallery: '.photoswipe-gallery', - children: 'a', + children: '.photoswipe-slide', pswpModule: Photoswipe, }); new PhotoswipeCaptionPlugin(lightbox, { type: 'auto', + captionContent(slide) { + return slide.data.alt; + } +}); + +lightbox.addFilter('itemData', (item) => { + const el = item.element; + console.log(el); + if (el && el.classList.contains("plyr-video")) { + const parentNode = el._plyrContainer.parentNode; + + return { + alt: el.getAttribute("alt"), + _video: { + open(c) { + c.appendChild(el._plyrContainer); + }, + close() { + parentNode.appendChild(el._plyrContainer); + } + }, + width: parseInt(el.dataset.pswpWidth), + height: parseInt(el.dataset.pswpHeight) + }; + } + return item; +}); + +lightbox.on("contentActivate", (e) => { + const { content } = e; + if (content.data._video != undefined) { + console.log("activate", e); + content.data._video.open(content.element); + } +}); + +lightbox.on("contentDeactivate", (e) => { + const { content } = e; + if (content.data._video != undefined) { + console.log("deactivate", e); + content.data._video.close(); + } +}); + +lightbox.on("close", function () { + console.log("close", lightbox.pswp); + if (lightbox.pswp.currSlide.data._video != undefined) { + lightbox.pswp.currSlide.data._video.close(); + } }); -new PhotoswipeVideoPlugin(lightbox, {}); lightbox.init(); -Array.from(document.getElementsByClassName("spoiler-details")).forEach((spoiler) => { +Array.from(document.getElementsByClassName("text-spoiler")).forEach((spoiler) => { const button = spoiler.getElementsByClassName("button")[0]; if (button != undefined) { @@ -58,6 +108,42 @@ Array.from(document.getElementsByClassName("spoiler-details")).forEach((spoiler) } update(); + spoiler.addEventListener("toggle", update); + } +}); + +Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => { + let player = new Plyr(video, { + title: video.title, + settings: ["loop"], + disableContextMenu: false, + hideControls: false, + tooltips: { contrors: true, seek: true }, + listeners: { + fullscreen: () => { + lightbox.loadAndOpen(parseInt(video.dataset.pswpIndex), { + gallery: video.closest(".photoswipe-gallery") + }); + + return false; + } + } + }); + + player.elements.container.title = video.title; + video._plyrContainer = player.elements.container; +}); + +Array.from(document.getElementsByClassName("video-spoiler")).forEach((spoiler) => { + const video = spoiler.getElementsByClassName("plyr-video")[0]; + + if (video != undefined) { + function update() { + if (!spoiler.open) { + video.pause(); + } + } + spoiler.addEventListener("toggle", update); } }); \ No newline at end of file diff --git a/web/source/index.js b/web/source/index.js index eeda34287..de1f56424 100644 --- a/web/source/index.js +++ b/web/source/index.js @@ -62,7 +62,7 @@ skulk({ transform: [ ["babelify", { global: true, - ignore: [/node_modules\/(?!(photoswipe.*))/] + ignore: [/node_modules\/(?!(photoswipe.*|plyr.*))/] }] ], }, diff --git a/web/source/package.json b/web/source/package.json index 4f7221eb1..a4a2a4739 100644 --- a/web/source/package.json +++ b/web/source/package.json @@ -24,7 +24,7 @@ "papaparse": "^5.3.2", "photoswipe": "^5.3.3", "photoswipe-dynamic-caption-plugin": "^1.2.7", - "photoswipe-video-plugin": "^1.0.2", + "plyr": "^3.7.8", "psl": "^1.9.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 6af0abeaf..8d8431ead 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -16,11 +16,6 @@ along with this program. If not, see . */ -/* Fork-Awesome 'fa-fw' fixed icon width - keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50 -*/ -$fa-fw: 1.28571429em; - body { grid-template-rows: auto 1fr; } diff --git a/web/source/yarn.lock b/web/source/yarn.lock index 25bc0b0c4..552da3958 100644 --- a/web/source/yarn.lock +++ b/web/source/yarn.lock @@ -2227,6 +2227,11 @@ core-js-compat@^3.25.1: dependencies: browserslist "^4.21.4" +core-js@^3.26.1: + version "3.30.2" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.2.tgz#6528abfda65e5ad728143ea23f7a14f0dcf503fc" + integrity sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg== + core-util-is@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" @@ -2315,6 +2320,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== +custom-event-polyfill@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee" + integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w== + d@1, d@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a" @@ -3750,6 +3760,11 @@ loader-utils@^1.1.0: emojis-list "^3.0.0" json5 "^1.0.1" +loadjs@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6" + integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA== + locate-path@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286" @@ -4218,11 +4233,6 @@ 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" @@ -4243,6 +4253,17 @@ pify@^2.3.0: resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog== +plyr@^3.7.8: + version "3.7.8" + resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.7.8.tgz#b79bccc23687705b5d9a283b2a88c124bf7471ed" + integrity sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA== + dependencies: + core-js "^3.26.1" + custom-event-polyfill "^1.0.7" + loadjs "^4.2.0" + rangetouch "^2.0.1" + url-polyfill "^1.1.12" + postcss-custom-prop-vars@^0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/postcss-custom-prop-vars/-/postcss-custom-prop-vars-0.0.5.tgz#b8c025d673fb59eb7a544da467c7587424808c4a" @@ -4437,6 +4458,11 @@ range-parser@~1.2.1: resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg== +rangetouch@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70" + integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA== + raw-body@2.5.1: version "2.5.1" resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857" @@ -5371,6 +5397,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +url-polyfill@^1.1.12: + version "1.1.12" + resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.12.tgz#6cdaa17f6b022841b3aec0bf8dbd87ac0cd33331" + integrity sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A== + url@~0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1" diff --git a/web/template/status.tmpl b/web/template/status.tmpl index 2b2171b43..76313b85a 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -34,7 +34,7 @@
{{if .SpoilerText}} -
+
{{emojify .Emojis (escape .SpoilerText)}} Toggle visibility @@ -52,39 +52,49 @@ {{with .MediaAttachments}}
- {{range .}} + {{range $index, $media := .}} + {{with $media}}
- {{if not .Description}} + +
+ + + + + + + {{if eq .Type "video"}} + + {{else}} + + {{end}} + + {{if eq .Type "video"}} + + {{else}} + + + + {{end}} +
{{end}} + {{end}}
{{end}}