{{#if sensitive }} <div class="status-sensitive-media-container {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}" > {{#if sensitiveShown}} <button type="button" class="status-sensitive-media-button" aria-label="Hide sensitive media" delegate-key="{{delegateKey}}" > <div class="svg-wrapper"> <svg class="status-sensitive-media-svg"> <use xlink:href="#fa-eye-slash" /> </svg> </div> </button> <MediaAttachments :mediaAttachments :sensitive :uuid /> {{else}} <button type="button" class="status-sensitive-media-button" aria-label="Show sensitive media" delegate-key="{{delegateKey}}" > <div class="status-sensitive-media-warning"> <span>Sensitive content. Click to show.</span> </div> <div class="svg-wrapper"> <svg class="status-sensitive-media-svg"> <use xlink:href="#fa-eye" /> </svg> </div> </button> {{/if}} </div> {{else}} <MediaAttachments :mediaAttachments :sensitive :uuid /> {{/if}} <style> .status-sensitive-media-container { grid-area: media; margin: 10px 0; position: relative; border-radius: 0; border: none; background: none; } .status-sensitive-media-button { margin: 0; padding: 0; border: none; background: none; } .status-sensitive-media-button:hover { background: none; } .status-sensitive-media-button:active { background: none; } .status-sensitive-media-shown .status-sensitive-media-button { position: absolute; left: 0; top: 0; z-index: 90; } .status-sensitive-media-hidden .status-sensitive-media-button { right: 0; bottom: 0; width: 100%; height: 100%; } .status-sensitive-media-container.status-sensitive-media-hidden { width: 100%; margin: 10px auto; height: 200px; } .status-sensitive-media-container .status-sensitive-media-warning { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: var(--deemphasized-text-color); z-index: 60; } .status-sensitive-media-container .svg-wrapper { display: flex; align-items: flex-start; justify-content: flex-start; z-index: 40; pointer-events: none; background: var(--mask-bg); } .status-sensitive-media-hidden .svg-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper { background: none; } .status-sensitive-media-svg { width: 24px; height: 24px; fill: var(--mask-svg-fill); border-radius: 2px; background: var(--mask-opaque-bg); margin: 1px; padding: 6px 10px; } .status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg { fill: var(--deemphasized-text-color); background: var(--mask-opaque-bg); } </style> <script> import MediaAttachments from './MediaAttachments.html' import { store } from '../../_store/store' import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate' export default { oncreate() { registerClickDelegate(this.get('delegateKey'), () => this.onClickSensitiveMediaButton()) }, ondestroy() { unregisterClickDelegate(this.get('delegateKey')) }, components: { MediaAttachments }, store: () => store, computed: { mediaAttachments: (originalStatus) => originalStatus.media_attachments, sensitiveShown: ($sensitivesShown, uuid) => !!$sensitivesShown[uuid], sensitive: (originalStatus, $markMediaAsSensitive) => originalStatus.sensitive || $markMediaAsSensitive, delegateKey: (uuid) => `sensitive-${uuid}`, }, methods: { onClickSensitiveMediaButton() { let uuid = this.get('uuid') let $sensitivesShown = this.store.get('sensitivesShown') || {} $sensitivesShown[uuid] = !$sensitivesShown[uuid] this.store.set({'sensitivesShown': $sensitivesShown}) this.fire('recalculateHeight') } } } </script>