Could not render PDF.
"; const divContainer = document.createElement('div'); divContainer.classList.add('ratio', 'ratio-4x3'); divContainer.append(objectTag); return divContainer; } else { const elem = noContentElem(); elem.innerText = "Unsupported format"; if (item.data_type) { elem.innerText += ` (${item.data_type})`; } return elem; } } else if (item.latitude && item.longitude) { const container = cloneTemplate('#map-container'); container.dataset.contentType = "location"; // size the container because the map won't stretch it, it will only expand to fill space container.classList.add('ratio-16x9'); tlz.map.tl_containers.set(container, function() { tlz.map.tl_addNavControl(); const marker = new mapboxgl.Marker().setLngLat([item.longitude, item.latitude]); tlz.map.tl_addMarker(marker); tlz.map.flyTo({center: marker.getLngLat(), zoom: 16}); }); return container; } else { return noContentElem(); } } // itemMiniDisplay returns a populated, ready-to-render DOM element // that comprises a mini-display or preview of the items, which must // be an array of items that are all the same classification; or at // least, that are to be rendered the same way as the first item. function itemMiniDisplay(items, options) { let representative = items[0]; switch (representative.classification) { case 'message': case 'email': case 'social': return miniDisplayMessages(items); case 'media': return miniDisplayMedia(items, options); case 'location': return miniDisplayLocations(items, options); case 'document': case 'note': case 'bookmark': return miniDisplayBookmark(items); case 'page_view': return miniDisplayPageView(items); case 'event': return miniDisplayEvent(items); default: console.warn("TODO: UNSUPPORTED ITEM CLASS:", representative.classification, items); return miniDisplayMisc(items); } } function miniDisplayLocations(items, options) { const minidisp = { icon: ``, iconColor: 'cyan' } if (options?.noMap) { return minidisp; } const ratioElem = cloneTemplate('#map-container'); ratioElem.classList.add('ratio-16x9', 'rounded', 'overflow-hidden'); const mapRenderFn = function () { tlz.map.tl_addNavControl(); // add each marker to the map and build bounding box as we go const bounds = new mapboxgl.LngLatBounds(); for (const item of items) { const marker = new mapboxgl.Marker() .setLngLat([item.longitude, item.latitude]); // TODO: make useful popups // .setPopup( // new mapboxgl.Popup({ offset: 25 }).setHTML(info) // ) tlz.map.tl_addMarker(marker); bounds.extend([item.longitude, item.latitude]); } tlz.map.fitBounds(bounds, { padding: 75, maxZoom: 16 }); // set `duration: 0` in the options to disable animation/easing }; tlz.map.tl_containers.set(ratioElem, mapRenderFn); minidisp.element = ratioElem; return minidisp; } function miniDisplayMedia(items, options) { const container = cloneTemplate('#tpl-media-card'); for (const item of items) { const a = document.createElement('a'); a.href = `/items/${item.repo_id}/${item.id}`; const elem = itemContentElement(item, { options, thumbnail: true }); elem.classList.add('h-100', 'rounded'); a.append(elem); container.append(a); } if (items.length == 1) { container.classList.add('minidisp-media-xl'); } else if (items.length <= 3) { container.classList.add('minidisp-media-l'); } else if (items.length >= 4 && items.length < 7) { container.classList.add('minidisp-media-m'); } return { icon: ` `, iconColor: 'pink', element: container, }; } function miniDisplayPageView(items) { const container = document.createElement('div'); for (const item of items) { container.append(renderPageViewItem(item)); } return { icon: ` `, iconColor: 'purple', element: container, }; } function renderPageViewItem(item) { const el = document.createElement('div'); el.classList.add('page_view', 'page_view-fold'); el.append(itemContentElement(item, { maxLength: 1024, // we don't want to show an entire big file on a mini-display })); return el; } function miniDisplayBookmark(items) { const container = document.createElement('div'); for (const item of items) { container.append(renderBookmarkItem(item)); } return { icon: ` `, iconColor: 'lime', element: container, }; } function renderBookmarkItem(item) { const container = document.createElement('div'); container.classList.add('card'); const cardBody = document.createElement('div'); cardBody.classList.add('card-body', 'margin-for-ribbon-top-left'); cardBody.append(itemContentElement(item, { maxLength: 1024, // we don't want to show an entire big file on a mini-display })); const ribbonEl = document.createElement('div'); ribbonEl.classList.add('ribbon', 'ribbon-top', 'ribbon-start', 'ribbon-bookmark'); container.append(cardBody, ribbonEl); return container; } function miniDisplayPaper(items) { const container = document.createElement('div'); for (const item of items) { container.append(renderPaperItem(item)); } return { icon: ` `, iconColor: 'lime', element: container, }; } function renderPaperItem(item) { const el = document.createElement('div'); el.classList.add('paper', 'paper-fold'); el.append(itemContentElement(item, { maxLength: 1024, // we don't want to show an entire big file on a mini-display })); return el; } function miniDisplayEvent(items) { const container = document.createElement('div'); for (const item of items) { container.append(itemContentElement(item, { maxLength: 1024, })); } return { icon: ``, iconColor: 'red', element: container, }; } function miniDisplayMisc(items) { const container = document.createElement('div'); for (const item of items) { container.append(itemContentElement(item, { maxLength: 1024, // we don't want to show an entire big file on a mini-display })); } return { icon: tlz.itemClassIconAndLabel().icon, iconColor: 'gray', element: container, }; } function miniDisplayMessages(items) { const card = document.createElement('div'); card.classList.add('card'); const cardBody = document.createElement('div'); cardBody.classList.add('chat', 'card-body'); const chatBubbles = document.createElement('div'); chatBubbles.classList.add('chat-bubbles'); for (const item of items) { chatBubbles.append(renderMessageItem(item, {withToRelations: true})); } cardBody.append(chatBubbles); card.append(cardBody); return { icon: ` `, iconColor: 'indigo', element: card, }; } function renderMessageItem(item, options) { function recipients(item) { const sendersContainer = document.createElement('div'); for (const rel of item.related) { if ((rel.label != 'sent' && rel.label != 'cc') || !rel.to_entity) continue; const entityEl = document.createElement('div'); entityEl.classList.add('fw-bold'); entityEl.innerText = rel.to_entity.name || rel.to_entity.attribute.value; sendersContainer.append(entityEl); } return sendersContainer; } // sometimes, a message may have no content and only have attachments // (this is unfortunate, but often seems to be the case with iMessage; // we can't just delete the 'parent' item because it has an ID that // is referenced in various places) // in that case, we can at least promote the first attachment in the // display of the message so that it becomes the main content of the // message, and any other attachments remain attached, without an // empty item cluttering the view; this is what most chat/messaging // apps do anyway, including iMessage if (!item.data_text && !item.data_file && item.related) { for (const [i, rel] of item.related.entries()) { if (rel.label == 'attachment' && rel.to_item) { // promote first attachment, so remove it from the related items list item.related.splice(i, 1); // combine any related items of the empty item with that of the related item rel.to_item.related = rel.to_item.related ? item.related.concat(rel.to_item.related) : item.related; // combine metadata if (item.metadata && rel.to_item.metadata) { rel.to_item.metadata = {...rel.to_item.metadata, ...item.metadata}; } else if (item.metadata) { rel.to_item.metadata = item.metadata; } // finally, replace the item with the related item that we spliced out item = rel.to_item; break; } } } const elem = cloneTemplate('#tpl-message'); $('.message-sender', elem).innerText = item.entity?.name || item.entity?.attribute?.value; if (item.entity?.id == 1) { // if current user (presumably, entity ID 1 -- though this could change later) is // the sender, then put their own chats along the right, I guess, with the avatar // on the outside (far right) $('.align-items-top', elem).classList.add('flex-row-reverse'); $('.chat-bubble', elem).classList.add('chat-bubble-me'); } const dt = DateTime.fromISO(item.timestamp, { setZone: true }); $('.message-timestamp', elem).innerText = `${dt.toLocaleString(DateTime.DATETIME_MED)} ${dt.toFormat("ZZZZ")}`; $('.message-avatar', elem).innerHTML = avatar(true, item.entity); $('.data-source-icon', elem).style.backgroundImage = `url('/ds-image/${item.data_source_name}')`; $('.data-source-icon', elem).title = item.data_source_title; $('.data-source-icon', elem).dataset.bsToggle = "tooltip"; $('.view-item-link', elem).href = `/items/${item.repo_id}/${item.id}`; $('.view-entity-link', elem).href = `/entities/${item.repo_id}/${item.entity.id}`; if (options?.withToRelations && item.related) { const toContainer = document.createElement('div'); toContainer.classList.add('d-flex'); toContainer.innerHTML = ` `; toContainer.append(recipients(item)); $('.message-sender', elem).parentNode.insertAdjacentElement('afterend', toContainer); } if (item.data_text) { $('.message-content', elem).innerText = item.data_text; } else { let mediaElem = itemContentElement(item, { thumbnail: true, noLazyLoading: options?.noLazyLoading }); mediaElem.classList.add("rounded"); $('.message-content', elem).appendChild(mediaElem); } if (item.related) { const reactions = {}; for (const rel of item.related) { if (rel.label == 'attachment' && rel.to_item) { $('.attachments', elem).classList.remove('d-none'); if (rel.to_item.data_type?.startsWith('image/')) { let imgTag = document.createElement('span'); imgTag.classList.add("avatar", "avatar-xl", "m-1"); imgTag.style.backgroundImage = `url('${itemImgSrc(rel.to_item, true)}')`; $('.attachments', elem).appendChild(imgTag); } else if (rel.to_item?.data_type?.startsWith('video/')) { let videoTag = document.createElement('video'); videoTag.src = `/repo/${item.repo_id}/${rel.to_item.data_file}`; videoTag.setAttribute('type', rel.to_item.data_type); videoTag.setAttribute('controls', ''); $('.attachments', elem).appendChild(videoTag); } } else if (rel.label == 'reacted' && rel.from_entity) { if (reactions[rel.value] === undefined) { reactions[rel.value] = []; } reactions[rel.value].push(rel); } } // TODO: put these somewhere more permanent const reactionLabels = { "\u2764\uFE0F": "Love", // ❤️ but red "👍": "Like", "👎": "Dislike", "😂": "Laugh", "\u203C\uFE0F": "Emphasis", // ‼️ but red "❓": "Question", }; // render any reactions we accumulated if (Object.keys(reactions).length) { $('.message-reactions', elem).classList.remove('d-none'); for (const [reaction, rels] of Object.entries(reactions)) { var reactElem = document.createElement('div'); reactElem.classList.add('message-reaction'); reactElem.dataset.bsToggle = "tooltip"; var emojiElem = document.createElement('span'); emojiElem.classList.add('emoji'); emojiElem.textContent = reaction; reactElem.append(emojiElem); if (rels.length > 1) { reactElem.innerHTML += ` ${rels.length}`; } reactElem.title = `${reactionLabels[reaction] || reaction} (${rels.length}): `; for (const rel of rels) { reactElem.title += `${entityDisplayNameAndAttr(rel.from_entity).name}, `; } reactElem.title = reactElem.title.slice(0, -2); // trim off trailing comma and space $('.message-reactions', elem).appendChild(reactElem); } } } return elem; } function timelineGroups(items, options) { if (!items) return []; const groups = []; let lastLocGroupIdx; for (const item of items) { if (!item) continue; // TODO: only do social as conversation if it has a sent relation... item._category = item.classification || "unknown"; // in case item is not classified, still have a category, otherwise no group is made and an error occurs below (see #36) if (item.classification == 'message' || item.classification == 'email' || item.classification == 'social') { item._category = "conversation"; } if (!options?.noMap && item.latitude && item.longitude && item._category == 'location') { if (!lastLocGroupIdx) { // it makes more sense to see a map before the items at those locations, so show // locations before the current group, i.e. 1 from the end (-2 because 0-based indexing) groups.splice(groups.length-2, 0, []); // TODO: make sure this group has a category of location... lastLocGroupIdx = Math.max(groups.length-2, 0); } groups[lastLocGroupIdx].push(item); } if (groups[groups.length-1]?.[0]?._category != item._category) { // current item is in different category as previous item, so create new group groups.push([]); } if (item._category == "location") { // put locations in the most recent location group lastLocGroupIdx = groups.length-1; } groups[groups.length-1].push(item); } // split messages into groups by conversation (participants) for (let i = 0; i < groups.length; i++) { const group = groups[i]; if (group.length > 0 && group[0]._category != "conversation") { continue; } const convos = {}; for (const item of group) { const participants = [ item.entity?.id ]; if (item.related) { for (const rel of item.related) { if ((rel.label == 'sent' || rel.label == 'cc') && rel.to_entity) { participants.push(rel.to_entity.id); } } } participants.sort(); const convoKey = participants.join(','); if (!convos[convoKey]) { convos[convoKey] = []; } convos[convoKey].push(item); } const convosArray = Object.values(convos); convosArray.sort((a, b) => a[0].timestamp > b[0].timestamp ? 1 : -1 ); groups.splice(i, 1, ...convosArray); } // further divide groups by temporal locality and max size const newGroups = []; const maxGroupSizes = { conversation: 50, media: 25, location: 100 }; for (let i = 0; i < groups.length; i++) { const group = groups[i]; let g = []; let window = []; const windowSize = 3; let windowAvgTimeDelta = 0, windowVariance = 0; for (let j = 0; j < group.length; j++) { const item = group[j]; if (j == 0) { g.push(item); continue; } const prevItem = group[j-1]; // create new group if max size has been reached, or if it's been a long time since the last item if (g.length >= maxGroupSizes[g[0]._category]) { newGroups.push(g); g = []; } else { const delta = durationBetween(item.timestamp, prevItem.timestamp).as('seconds'); window.push(delta); if (window.length == 1) { windowAvgTimeDelta = delta; } const oldAvg = windowAvgTimeDelta; const goingAway = window[0]; const changeOfAvgTimeDelta = (delta - goingAway) / windowSize; windowAvgTimeDelta += changeOfAvgTimeDelta; if (window.length > windowSize) { window = window.slice(-windowSize); } windowVariance += (delta - goingAway) * ((delta - windowAvgTimeDelta) + (goingAway - oldAvg)) / (windowSize - 1); const sd = Math.sqrt(windowVariance) // console.log("DELTA:", delta, "WINDOW:", window, "SD:", sd, "DIFF:", Math.abs(windowAvgTimeDelta - delta), "ITEM:", item); if (window.length == windowSize && Math.abs(windowAvgTimeDelta - delta) > sd * 1.75) { // console.log("NEW GROUP:", g) newGroups.push(g); g = []; } } g.push(item); } if (g.length) { newGroups.push(g); } } console.log("GROUPS:", newGroups); return newGroups; // TODO: I'm not sure this is a good idea, but: //////////////////////// // display items in ASC order (oldest at top, newest at bottom) // if ($('.filter .date-sort').value == "DESC") { // groups.forEach(group => group.reverse()); // } // console.log("GROUPS:", groups) // return groups; } function renderTimelineGroups(groups, options) { const timelineEl = cloneTemplate('#tpl-timeline'); groups.forEach((group, i) => { if (!group.length) return; const prevGroup = groups[i-1]; const groupDate = new Date(group[0].timestamp); const prevGroupDate = new Date(prevGroup?.[prevGroup?.length-1]?.timestamp); let sortVal = $('.date-sort').value; const firstItem = sortVal == 'ASC' ? group[0] : group[group.length-1]; const lastItem = sortVal == 'ASC' ? group[group.length-1] : group[0]; const tsDisplay = itemTimestampDisplay(firstItem, lastItem); if (prevGroupDate?.getDate() != groupDate.getDate() || prevGroupDate?.getMonth() != groupDate.getMonth() || prevGroupDate?.getFullYear() != groupDate.getFullYear()) { const dateEl = cloneTemplate('#tpl-tl-item-date-card'); $('.list-timeline-date', dateEl).innerText = tsDisplay.weekdayDate; timelineEl.append(dateEl); } const itemEl = cloneTemplate('#tpl-tl-item-card'); $('.list-timeline-time', itemEl).innerText = tsDisplay.time; const display = itemMiniDisplay(group, options); if (display.element) { $('.list-timeline-icon', itemEl).innerHTML = display.icon; $('.list-timeline-icon', itemEl).classList.add(`bg-${display.iconColor}`); $('.list-timeline-content-container', itemEl).append(display.element); $('.list-timeline-date-anchor:last-of-type', timelineEl).append(itemEl); } }); return timelineEl; } function itemsAsTimeline(items, options) { const groups = timelineGroups(items, options); return renderTimelineGroups(groups, options); } //////////////////////////////////////////////////// // Item preview modal //////////////////////////////////////////////////// const PreviewModal = (function() { // private state const private = { reset: function() { $('#modal-preview-content').replaceChildren(); $('#modal-preview .media-owner-name').replaceChildren(); $('#modal-preview .media-owner-avatar').replaceChildren(); } }; // public interface const public = { // prev, next functions should be set by the pages that use this modal renderItem: async function(item) { private.reset(); $('#modal-preview .media-owner-avatar').innerHTML = avatar(true, item.entity, "me-3"); $('#modal-preview .media-owner-name').innerText = entityDisplayNameAndAttr(item.entity).name; $('#modal-preview .text-secondary').innerText = DateTime.fromISO(item.timestamp, { setZone: true }).toLocaleString(DateTime.DATETIME_MED); $('#modal-preview .modal-title').innerHTML = ``; $('#modal-preview .modal-title').appendChild(document.createTextNode(item?.filename || baseFilename(item?.data_file))); $('#modal-preview .subheader').innerText = `# ${item.id}`; const mediaElem = itemContentElement(item); mediaElem.classList.add('rounded'); $('#modal-preview-content').append(mediaElem); // toggle prev/next buttons private.prevItem = await this.prev(item); private.nextItem = await this.next(item); if (private.prevItem) { $$('#modal-preview .btn-prev').forEach(elem => elem.classList.remove('disabled')); } else { $$('#modal-preview .btn-prev').forEach(elem => elem.classList.add('disabled')); } if (private.nextItem) { $$('#modal-preview .btn-next').forEach(elem => elem.classList.remove('disabled')); } else { $$('#modal-preview .btn-next').forEach(elem => elem.classList.add('disabled')); } $('#modal-preview .btn-primary').href = `/items/${item.repo_id}/${item.id}`; // TODO: is this used/needed? private.currentItem = item; } }; // wire up previous/next buttons on('click', '#modal-preview .btn-prev', async() => { await public.renderItem(private.prevItem); }); on('click', '#modal-preview .btn-next', async() => { await public.renderItem(private.nextItem); }); // when starting to hide the modal, stop any videos that are playing on('hide.bs.modal', '#modal-preview', () => { $('#modal-preview video')?.pause(); }); // when modal is fully hidden, clear it out on('hidden.bs.modal', '#modal-preview', private.reset); return public; })(); function itemPreviews(items) { // only show a handful of items in the preview const maxItems = 5; const more = items.length - maxItems; items = items.slice(0, maxItems); const container = cloneTemplate('#tpl-compact-preview'); for (const item of items) { const contentEl = itemContentElement(item, { thumbnail: true, maxLength: 100, autoplay: true }); container.append(contentEl); } if (more > 0) { container.innerHTML += `