Merge pull request #1159 from ssbc/feature/content-warning-reading

Show content warnings and allow expand/contract

Author: cinnamon-bun

lib/context-menu-and-spellcheck.js

@@ -88,7 +88,7 @@ function setupContextMenuAndSpellCheck (config, { navigate, get }) {
 
       if (ref.isBlob(extractedRef) && menuInfo.hasImageContents) {
         const copyEmbed = new MenuItem({
-          label: `Copy Embed Markdown`,
+          label: 'Copy Embed Markdown',
           click: () => {
             // Omit the mailto: portion of the link; we just want the address
             clipboard.writeText(`![${menuInfo.titleText}](${extractedRef})`)

lib/depject/message/html/layout/default.js

@@ -74,15 +74,33 @@ exports.create = function (api) {
       classList.push('-unread')
     }
 
+    let cw = msg.value.content.contentWarning
+    if (typeof cw !== 'string' || cw.length === 0) {
+      cw = undefined
+    } else {
+      // TODO: emoji shortcodes?
+      // TODO: truncate very long content warning, maybe use max-height?
+      classList.push('-hasContentWarning')
+    }
+
     return h('div', {
       classList,
       hooks
     }, [
       messageHeader(msg, { replyInfo, priority }),
-      h('section', {
+      cw
+        ? h('a.contentWarning',
+          {
+            href: '#',
+            'ev-click': toggleAndTrack(expanded)
+          },
+          cw
+        )
+        : undefined,
+      h('section.content', {
         classList: [when(expanded, '-expanded')],
         hooks: [ExpanderHook(needsExpand)]
-      }, [content]),
+      }, content),
       computed(msg.key, (key) => {
         if (ref.isMsg(key)) {
           return h('footer', [

lib/depject/message/html/layout/mini.js

@@ -73,7 +73,7 @@ exports.create = function (api) {
       messageHeader(msg, {
         replyInfo, priority, miniContent
       }),
-      h('section', {
+      h('section.content', {
         classList: [when(expanded, '-expanded')],
         hooks: [ExpanderHook(needsExpand)]
       }, [content]),

lib/depject/message/html/markdown.js

@@ -60,8 +60,8 @@ exports.create = function (api) {
           if (link && ref.isBlob(link.link)) {
             const url = api.blob.sync.url(link.link)
             const query = {}
-            if (link.query && link.query.unbox) query['unbox'] = link.query.unbox
-            if (typeLookup[link.link]) query['contentType'] = typeLookup[link.link]
+            if (link.query && link.query.unbox) query.unbox = link.query.unbox
+            if (typeLookup[link.link]) query.contentType = typeLookup[link.link]
             return url + '?' + querystring.stringify(query)
           } else if (link || id.startsWith('#') || id.startsWith('?')) {
             return id

lib/depject/message/html/missing.js

@@ -45,7 +45,7 @@ exports.create = function (api) {
         ])
       ]),
       h('section', [
-        h('p', [i18n(`The author of this message could be outside of your follow range or they may be blocked.`)])
+        h('p', [i18n('The author of this message could be outside of your follow range or they may be blocked.')])
       ])
     ])
 

lib/depject/message/html/render/attending.js

@@ -22,7 +22,7 @@ exports.create = function (api) {
     render: function about (msg, opts) {
       if (!isRenderable(msg)) return
 
-      const action = msg.value.content.attendee.remove ? `can't attend` : 'is attending'
+      const action = msg.value.content.attendee.remove ? 'can\'t attend' : 'is attending'
       const target = msg.value.content.about
       const title = api.about.obs.latestValue(target, 'title')
       const element = api.message.html.layout(msg, extend({

lib/depject/message/html/render/gathering.js

@@ -91,11 +91,11 @@ exports.create = function (api) {
             h('button -attend', {
               disabled: computed([attending, disableActions], (...args) => args.some(Boolean)),
               'ev-click': send(publishAttending, msg)
-            }, `Attending`),
+            }, 'Attending'),
             h('button -attend', {
               disabled: disableActions,
               'ev-click': send(publishNotAttending, msg)
-            }, `Can't Attend`)
+            }, 'Can\'t Attend')
           ])
         ]),
         h('div.location', markdown(about.location)),

lib/depject/page/html/render/profile.js

@@ -179,11 +179,11 @@ exports.create = function (api) {
 
           when(contact.noIncoming,
             h('section -distanceWarning', [
-              h('h1', i18n(`You don't follow anyone who follows this person`)),
+              h('h1', i18n('You don\'t follow anyone who follows this person')),
               h('p', i18n('You might not be seeing their latest messages. You could try joining a pub that they are a member of.')),
               when(contact.hasOutgoing,
                 h('p', i18n('However, since they follow someone that follows you, they should be able to see your posts.')),
-                h('p', i18n(`They might not be able to see your posts either.`))
+                h('p', i18n('They might not be able to see your posts either.'))
               )
             ]),
             when(contact.noOutgoing,

lib/depject/profile/html/preview.js

@@ -66,7 +66,7 @@ exports.create = function (api) {
             ]),
             when(contact.noIncoming,
               h('section -distanceWarning', [
-                '⚠️ ', i18n(`You don't follow anyone who follows this person`)
+                '⚠️ ', i18n('You don\'t follow anyone who follows this person')
               ]),
               when(contact.mutualFriendsCount,
                 h('section -mutualFriends', [

lib/main-window.js

@@ -157,7 +157,7 @@ module.exports = function (config) {
   document.head.appendChild(
     h('style', {
       innerHTML: computed(api.settings.obs.get('patchwork.theme', 'light'), themeName => {
-        return themes[themeName] || themes['light']
+        return themes[themeName] || themes.light
       })
     })
   )
@@ -170,7 +170,7 @@ module.exports = function (config) {
           dark: 'monokai'
         }
 
-        const syntaxTheme = syntaxThemeOptions[themeName] || syntaxThemeOptions['light']
+        const syntaxTheme = syntaxThemeOptions[themeName] || syntaxThemeOptions.light
         return requireStyle(`highlight.js/styles/${syntaxTheme}.css`)
       })
     })