diff --git a/package-lock.json b/package-lock.json index 43b3289..d826181 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "express": "^4.17.2", "hydrogen-view-sdk": "^0.0.4", "linkedom": "^0.13.2", + "matrix-public-archive-shared": "file:./shared/", "node-fetch": "^2.6.7" }, "devDependencies": { @@ -1271,6 +1272,10 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "node_modules/matrix-public-archive-shared": { + "resolved": "shared", + "link": true + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -1908,7 +1913,8 @@ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true - } + }, + "shared": {} }, "dependencies": { "@eslint/eslintrc": { @@ -2855,6 +2861,9 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "matrix-public-archive-shared": { + "version": "file:shared" + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", diff --git a/package.json b/package.json index 91572fb..24400e4 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "express": "^4.17.2", "hydrogen-view-sdk": "^0.0.4", "linkedom": "^0.13.2", - "node-fetch": "^2.6.7" + "node-fetch": "^2.6.7", + "matrix-public-archive-shared": "file:./shared/" } } diff --git a/public/styles/styles.css b/public/styles/styles.css index 57e3ff0..8dcf0da 100644 --- a/public/styles/styles.css +++ b/public/styles/styles.css @@ -1,8 +1,16 @@ -.room-layout { - display: flex; -} - -.right-panel { - width: 20%; - background-color: #f2f5f8; +/* Based on .SessionView from Hydrogen */ +.ArchiveView { + /* this takes into account whether or not the url bar is hidden on mobile + (have tested Firefox Android and Safari on iOS), + see https://developers.google.com/web/updates/2016/12/url-bar-resizing */ + position: fixed; + width: 100%; + height: 100%; + display: grid; + grid-template: + 'status status' auto + 'middle right' 1fr / + 1fr 300px; + min-height: 0; + min-width: 0; } diff --git a/server/fetch-room-data.js b/server/fetch-room-data.js index ecef4fb..095d5df 100644 --- a/server/fetch-room-data.js +++ b/server/fetch-room-data.js @@ -21,8 +21,6 @@ async function fetchRoomData(roomId) { fetchEndpoint(stateAvatarEndpoint), ]); - console.log('stateAvatarResDataOutcome', stateAvatarResDataOutcome); - let name; if (stateNameResDataOutcome.reason === undefined) { name = stateNameResDataOutcome.value.name; diff --git a/server/server1.js b/server/server1.js index c0a2fa2..1d6827a 100644 --- a/server/server1.js +++ b/server/server1.js @@ -1,4 +1,5 @@ const assert = require('assert'); +const path = require('path'); const express = require('express'); const asyncHandler = require('./lib/express-async-handler'); const urlJoin = require('./lib/url-join'); @@ -18,6 +19,11 @@ app.get('/hydrogen-styles.css', async function (req, res) { res.sendFile(require.resolve('hydrogen-view-sdk/style.css')); }); +app.get('/styles.css', async function (req, res) { + res.set('Content-Type', 'text/css'); + res.sendFile(path.join(__dirname, '../public/styles/styles.css')); +}); + app.get( '/:roomIdOrAlias/event/:eventId', asyncHandler(async function (req, res) { @@ -97,13 +103,7 @@ app.get( -
- ${hydrogenHtmlOutput} - - -
+ ${hydrogenHtmlOutput} `; diff --git a/shared/ArchiveView.js b/shared/ArchiveView.js index 412dc03..333753d 100644 --- a/shared/ArchiveView.js +++ b/shared/ArchiveView.js @@ -1,17 +1,16 @@ -const { - TemplateView, - RoomView, - RightPanelView -} = require('hydrogen-view-sdk'); +const { TemplateView, RoomView, RightPanelView } = require('hydrogen-view-sdk'); -export class ArchiveView extends TemplateView { +class ArchiveView extends TemplateView { render(t, vm) { - return t.div({ + return t.div( + { className: { - "ArchiveView": true, + ArchiveView: true, }, - }, [ - - ] + }, + [t.view(new RoomView(vm.roomViewModel)), t.view(new RightPanelView(vm.rightPanelModel))] + ); } } + +module.exports = ArchiveView; diff --git a/shared/RightPanelContentView.js b/shared/RightPanelContentView.js new file mode 100644 index 0000000..026f19b --- /dev/null +++ b/shared/RightPanelContentView.js @@ -0,0 +1,16 @@ +const { TemplateView } = require('hydrogen-view-sdk'); + +class RightPanelContentView extends TemplateView { + render(t, vm) { + return t.div( + { + className: { + todo: true, + }, + }, + [t.div('test')] + ); + } +} + +module.exports = RightPanelContentView; diff --git a/shared/hydrogen-vm-render-script.js b/shared/hydrogen-vm-render-script.js index e5e31f3..b58d913 100644 --- a/shared/hydrogen-vm-render-script.js +++ b/shared/hydrogen-vm-render-script.js @@ -15,6 +15,9 @@ const { RoomViewModel, } = require('hydrogen-view-sdk'); +const ArchiveView = require('matrix-public-archive-shared/ArchiveView'); +const RightPanelContentView = require('matrix-public-archive-shared/RightPanelContentView'); + const roomData = global.INPUT_ROOM_DATA; assert(roomData); const events = global.INPUT_EVENTS; @@ -176,7 +179,17 @@ async function mountHydrogen() { kind: 'none', }; - const view = new RoomView(roomViewModel); + const archiveViewModel = { + roomViewModel, + rightPanelModel: { + activeViewModel: { + type: 'custom', + customView: RightPanelContentView, + }, + }, + }; + + const view = new ArchiveView(archiveViewModel); //console.log('view.mount()', view.mount()); app.appendChild(view.mount());