fix slideshow render

Author: SharonStrats

src/navigation/chrome.ts

@@ -168,7 +168,12 @@ export function deriveExplorerHeader (input: ExplorerHeaderInput): boolean {
  * The header is never shown over a person's profile or friends, whatever the resource,
  * nor over a storage view, which has its own header or the navbar.
  */
-export function explorerHeaderForPane (resourceHeader: boolean, paneName?: string, folderView?: FolderView): boolean {
+export function explorerHeaderForPane (
+  resourceHeader: boolean,
+  paneName?: string,
+  folderView?: FolderView,
+  solo = false
+): boolean {
   if (paneName === 'folder' && (folderView === 'explorer' || folderView === 'storage')) return false
   return resourceHeader && !isPersonPane(paneName)
 }

src/outline/manager.js

@@ -259,14 +259,6 @@ export default function (context) {
     })
   }
 
-  function getPane (relevantPanes, subject) {
-    return (
-      relevantPanes.find(
-        pane => pane.shouldGetFocus && pane.shouldGetFocus(subject)
-      ) || relevantPanes[0]
-    )
-  }
-
   function setQueryButtonVisibility (shouldShow) {
     const queryButton = dom.getElementById('queryButton')
     if (!queryButton) return
@@ -313,7 +305,7 @@ export default function (context) {
       subjectUri: subject.uri,
       pane,
       relevantPanes: provider.relevantPanes || [],
-      header: state && explorerHeaderForPane(state.showHeader, pane?.name, state.options.folderView)
+      header: state && explorerHeaderForPane(state.showHeader, pane?.name, state.options.folderView, state.options.solo)
         ? { paneIcon: getPaneIcon(pane, subject, context), menuItems: state.menuItems }
         : undefined,
       paneElement
@@ -403,7 +395,7 @@ export default function (context) {
     }
 
     provider.relevantPanes = relevantPanes
-    provider.pane = requiredPane || getPane(relevantPanes, subject)
+    provider.pane = requiredPane || UI.getPreferredPane(subject, context, relevantPanes)
     const isRootResource = !!(subject && subject.uri && subject.site && subject.site().uri === subject.uri)
     const viewerPodOnly = !!options.headerOnlyInViewerPod
     const showHeader = !subject.uri.endsWith('/index.ttl#this') && deriveExplorerHeader({

src/registerPanes.js

@@ -90,10 +90,10 @@ export function registerPanes (register) {
   register(audioPane) // Audio clip player
 
   register(dokieliPane) // Should be above dataContentPane
+  register(slideshowPane) // Image containers should open in their specialized view
   register(folderPane) // Should be above dataContentPane
   register(classInstancePane) // Should be above dataContentPane
   // register(require('./dynamic/dynamicPanes.js')) // warp etc  warp broken 2017/8
-  register(slideshowPane)
 
   register(socialPane)
 

src/slideshow/slideshowPane.js

@@ -2,9 +2,18 @@
  **
  */
 import * as UI from 'solid-ui'
+import { solidLogicSingleton } from 'solid-logic'
 
 import makeBSS from '@solid/better-simple-slideshow'
 const ns = UI.ns
+let slideshowId = 0
+
+function isImageResource (file, store) {
+  if (UI.widgets.isImage(file)) return true
+
+  const contentTypes = store.fetcher.getHeader(file, 'content-type') || []
+  return contentTypes.some(contentType => contentType.toLowerCase().startsWith('image/'))
+}
 
 export const slideshowPane = {
   icon: UI.icons.iconBase + 'noun_138712.svg',
@@ -16,13 +25,11 @@ export const slideshowPane = {
   // Does the subject deserve an slideshow pane?
   label: function (subject, context) {
     const store = context.session.store
-    const ns = UI.ns
-    const t = store.findTypeURIs(subject)
-    if (t[ns.ldp('Container').uri] || t[ns.ldp('BasicContainer').uri]) {
+    if (solidLogicSingleton.resource.isContainer(subject)) {
       const contents = store.each(subject, ns.ldp('contains'))
       let count = 0
       contents.forEach(function (file) {
-        if (UI.widgets.isImage(file)) count++
+        if (isImageResource(file, store)) count++
       })
       return count > 0 ? 'Slideshow' : null
     }
@@ -40,18 +47,21 @@ export const slideshowPane = {
     const store = context.session.store
     const ns = UI.ns
     const div = dom.createElement('div')
+    const id = `slideshow-${++slideshowId}`
+    div.id = id
     div.setAttribute('class', 'bss-slides')
 
-    const t = store.findTypeURIs(subject)
     let predicate
-    if (t[ns.ldp('BasicContainer').uri] || t[ns.ldp('Container').uri]) {
+    if (solidLogicSingleton.resource.isContainer(subject)) {
       predicate = ns.ldp('contains')
     }
-    const images = store.each(subject, predicate) // @@ random order?
+    const images = [...new Map(
+      store.each(subject, predicate).map(image => [image.uri, image])
+    ).values()]
     // @@ Ideally: sort by embedded time of image
-    images.sort() // Sort for now by URI
+    images.sort((left, right) => left.uri.localeCompare(right.uri))
     for (let i = 0; i < images.length; i++) {
-      if (!UI.widgets.isImage(images[i])) continue
+      if (!isImageResource(images[i], store)) continue
       const figure = div.appendChild(dom.createElement('figure'))
       const img = figure.appendChild(dom.createElement('img'))
 
@@ -69,9 +79,9 @@ export const slideshowPane = {
     }
     const options = { dom }
 
-    setTimeout(function () {
-      makeBSS('.bss-slides', options)
-    }, 1000) // Must run after the code which called this
+    dom.defaultView.requestAnimationFrame(function () {
+      makeBSS(`#${id}`, options)
+    })
 
     return div
   }

test/unit/navigation/chrome.test.ts

@@ -223,6 +223,11 @@ describe('file explorer header', () => {
     // A pane opened in place of the folder keeps its resource header
     expect(explorerHeaderForPane(true, 'source', 'explorer')).toBe(true)
   })
+
+  it('retains the header for slideshow in solo and regular views', () => {
+    expect(explorerHeaderForPane(true, 'slideshow', undefined, true)).toBe(true)
+    expect(explorerHeaderForPane(true, 'slideshow')).toBe(true)
+  })
 })
 
 describe('storage view', () => {

test/unit/outline/manager.test.ts

@@ -16,6 +16,7 @@ vi.mock('solid-ui', async () => {
   return {
     ...actual,
     getRelevantPanes: async (_subject, context) => context.session.paneRegistry.list,
+    getPreferredPane: (subject, _context, panes) => panes.find(pane => pane.shouldGetFocus?.(subject)) || panes[0],
     login: {
       ...actual.login,
       filterAvailablePanes: async panes => panes