mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-11-26 05:36:38 +00:00
refactor (sensitive) media rendering
This commit is contained in:
f0x
parent
be320c4a8c
commit
1732360562
|
|
@ -120,3 +120,12 @@ $error-bg: $error2;
|
|||
$list-entry-bg: $gray2;
|
||||
$list-entry-alternate-bg: $gray3;
|
||||
$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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -408,3 +412,34 @@ main {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
@ -61,3 +111,39 @@ Array.from(document.getElementsByClassName("spoiler-details")).forEach((spoiler)
|
|||
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);
|
||||
}
|
||||
});
|
||||
|
|
@ -62,7 +62,7 @@ skulk({
|
|||
transform: [
|
||||
["babelify", {
|
||||
global: true,
|
||||
ignore: [/node_modules\/(?!(photoswipe.*))/]
|
||||
ignore: [/node_modules\/(?!(photoswipe.*|plyr.*))/]
|
||||
}]
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -16,11 +16,6 @@
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<section class="body">
|
||||
<div class="text">
|
||||
{{if .SpoilerText}}
|
||||
<details class="spoiler-details">
|
||||
<details class="text-spoiler">
|
||||
<summary>
|
||||
<span class="spoiler-text">{{emojify .Emojis (escape .SpoilerText)}}</span>
|
||||
<span class="button" role="button" tabindex="0">Toggle visibility</span>
|
||||
|
|
@ -52,38 +52,48 @@
|
|||
{{with .MediaAttachments}}
|
||||
<div
|
||||
class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
|
||||
{{range .}}
|
||||
{{range $index, $media := .}}
|
||||
{{with $media}}
|
||||
<div class="media-wrapper">
|
||||
{{if not .Description}}
|
||||
<!-- {{if not .Description}}
|
||||
<div class="no-image-desc" aria-hidden="true"><i class="fa fa-info-circle"></i><span>Missing media
|
||||
description</span></div>
|
||||
{{end}}
|
||||
<input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden"
|
||||
{{if not $.Sensitive}}checked{{end}} />
|
||||
<div class="sensitive">
|
||||
<div class="open">
|
||||
<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">
|
||||
<i class="fa fa-eye-slash" title="Hide sensitive media"></i>
|
||||
</label>
|
||||
{{end}} -->
|
||||
<details class="{{.Type}}-spoiler" {{if not $.Sensitive}}open{{end}}>
|
||||
<summary>
|
||||
<div class="show sensitive" aria-hidden="true">
|
||||
<span class="button" role="button" tabindex="0">Show sensitive media</span>
|
||||
</div>
|
||||
<div class="closed" {{if .Description}}title="{{.Description}}" {{end}}>
|
||||
<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">Show sensitive media</label>
|
||||
</div>
|
||||
</div>
|
||||
{{ if eq .Type "video" }}
|
||||
<div class="video-play">
|
||||
<span class="icon-span fa-stack" aria-hidden="true">
|
||||
<i class="icon-bg fa fa-fw fa-circle fa-stack-1x"></i>
|
||||
<i class="icon fa fa-fw fa-play-circle fa-stack-1x"></i>
|
||||
<span class="show button" aria-hidden="true">
|
||||
<i class="fa fa-fw fa-eye"></i>
|
||||
</span>
|
||||
<span class="hide button" role="button" tabindex="0">
|
||||
<i class="fa fa-fw fa-eye-slash" aria-label="Hide media"></i>
|
||||
</span>
|
||||
{{if eq .Type "video"}}
|
||||
<video {{if .Description}} title="{{.Description}}" {{end}}>
|
||||
<source type="video/mp4" src="{{.URL}}" />
|
||||
</video>
|
||||
{{else}}
|
||||
<img {{if .Description}} title="{{.Description}}" {{end}} src="{{.PreviewURL}}" />
|
||||
{{end}}
|
||||
</summary>
|
||||
{{if eq .Type "video"}}
|
||||
<video class="plyr-video photoswipe-slide" controls {{if .Description}}alt="{{.Description}}"
|
||||
title="{{.Description}}" {{end}} data-pswp-index="{{$index}}" data-pswp-width="{{.Meta.Original.Width}}px"
|
||||
data-pswp-height="{{.Meta.Original.Height}}px">
|
||||
<source type="video/mp4" src="{{.URL}}" />
|
||||
</video>
|
||||
{{else}}
|
||||
<a class="photoswipe-slide" href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}}
|
||||
data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"
|
||||
data-cropped="true">
|
||||
<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} />
|
||||
</a>
|
||||
{{end}}
|
||||
</details>
|
||||
</div>
|
||||
{{end}}
|
||||
<a href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}}
|
||||
data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"
|
||||
{{if eq .Type "video"}}data-pswp-type="video" {{end}} data-cropped="true">
|
||||
<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} data-blurhash="{{.Blurhash}}" />
|
||||
</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue