Mirrors
/
matrix-public-archive
mirror of https://github.com/matrix-org/matrix-public-archive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add custom RightPanel support

This commit is contained in:
Eric Eastwood 2022-02-10 02:21:49 -06:00
parent c0a2a65c2f
commit 82ba92b806
8 changed files with 74 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -11,6 +11,7 @@
"express": "^4.17.2", "express": "^4.17.2",
"hydrogen-view-sdk": "^0.0.4", "hydrogen-view-sdk": "^0.0.4",
"linkedom": "^0.13.2", "linkedom": "^0.13.2",
"matrix-public-archive-shared": "file:./shared/",
"node-fetch": "^2.6.7" "node-fetch": "^2.6.7"
}, },
"devDependencies": { "devDependencies": {
@ -1271,6 +1272,10 @@
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true "dev": true
}, },
"node_modules/matrix-public-archive-shared": {
"resolved": "shared",
"link": true
},
"node_modules/media-typer": { "node_modules/media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "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", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true "dev": true
} },
"shared": {}
}, },
"dependencies": { "dependencies": {
"@eslint/eslintrc": { "@eslint/eslintrc": {
@ -2855,6 +2861,9 @@
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true "dev": true
}, },
"matrix-public-archive-shared": {
"version": "file:shared"
},
"media-typer": { "media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",

3
package.json
View File

@ -13,6 +13,7 @@
"express": "^4.17.2", "express": "^4.17.2",
"hydrogen-view-sdk": "^0.0.4", "hydrogen-view-sdk": "^0.0.4",
"linkedom": "^0.13.2", "linkedom": "^0.13.2",
"node-fetch": "^2.6.7" "node-fetch": "^2.6.7",
"matrix-public-archive-shared": "file:./shared/"
} }
} }

22
public/styles/styles.css
View File

@ -1,8 +1,16 @@
.room-layout { /* Based on .SessionView from Hydrogen */
display: flex; .ArchiveView {
} /* this takes into account whether or not the url bar is hidden on mobile
(have tested Firefox Android and Safari on iOS),
.right-panel { see https://developers.google.com/web/updates/2016/12/url-bar-resizing */
width: 20%; position: fixed;
background-color: #f2f5f8; width: 100%;
height: 100%;
display: grid;
grid-template:
'status status' auto
'middle right' 1fr /
1fr 300px;
min-height: 0;
min-width: 0;
} }

2
server/fetch-room-data.js
View File

@ -21,8 +21,6 @@ async function fetchRoomData(roomId) {
fetchEndpoint(stateAvatarEndpoint), fetchEndpoint(stateAvatarEndpoint),
]); ]);
console.log('stateAvatarResDataOutcome', stateAvatarResDataOutcome);
let name; let name;
if (stateNameResDataOutcome.reason === undefined) { if (stateNameResDataOutcome.reason === undefined) {
name = stateNameResDataOutcome.value.name; name = stateNameResDataOutcome.value.name;

14
server/server1.js
View File

@ -1,4 +1,5 @@
const assert = require('assert'); const assert = require('assert');
const path = require('path');
const express = require('express'); const express = require('express');
const asyncHandler = require('./lib/express-async-handler'); const asyncHandler = require('./lib/express-async-handler');
const urlJoin = require('./lib/url-join'); 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')); 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( app.get(
'/:roomIdOrAlias/event/:eventId', '/:roomIdOrAlias/event/:eventId',
asyncHandler(async function (req, res) { asyncHandler(async function (req, res) {
@ -97,13 +103,7 @@ app.get(
<link href="${stylesUrl}" rel="stylesheet"> <link href="${stylesUrl}" rel="stylesheet">
</head> </head>
<body> <body>
<div class="room-layout"> ${hydrogenHtmlOutput}
${hydrogenHtmlOutput}
<aside class="right-panel">
</aside>
</div>
</body> </body>
</html> </html>
`; `;

21
shared/ArchiveView.js
View File

@ -1,17 +1,16 @@
const { const { TemplateView, RoomView, RightPanelView } = require('hydrogen-view-sdk');
TemplateView,
RoomView,
RightPanelView
} = require('hydrogen-view-sdk');
export class ArchiveView extends TemplateView { class ArchiveView extends TemplateView {
render(t, vm) { render(t, vm) {
return t.div({ return t.div(
{
className: { className: {
"ArchiveView": true, ArchiveView: true,
}, },
}, [ },
[t.view(new RoomView(vm.roomViewModel)), t.view(new RightPanelView(vm.rightPanelModel))]
] );
} }
} }
module.exports = ArchiveView;

16
shared/RightPanelContentView.js Normal file
View File

@ -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;

15
shared/hydrogen-vm-render-script.js
View File

@ -15,6 +15,9 @@ const {
RoomViewModel, RoomViewModel,
} = require('hydrogen-view-sdk'); } = 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; const roomData = global.INPUT_ROOM_DATA;
assert(roomData); assert(roomData);
const events = global.INPUT_EVENTS; const events = global.INPUT_EVENTS;
@ -176,7 +179,17 @@ async function mountHydrogen() {
kind: 'none', 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()); //console.log('view.mount()', view.mount());
app.appendChild(view.mount()); app.appendChild(view.mount());