From 5b773b99c02c6c4c48109a55bc45cba6ad795982 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 3 Nov 2015 18:56:55 +0000 Subject: [PATCH 1/2] Add basic m.video view support --- src/skins/vector/skindex.js | 3 + .../vector/views/molecules/MVideoTile.js | 88 +++++++++++++++++++ .../vector/views/molecules/MessageTile.js | 3 +- 3 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 src/skins/vector/views/molecules/MVideoTile.js diff --git a/src/skins/vector/skindex.js b/src/skins/vector/skindex.js index e715656c0..69fe6117e 100644 --- a/src/skins/vector/skindex.js +++ b/src/skins/vector/skindex.js @@ -30,6 +30,7 @@ skin['atoms.LogoutButton'] = require('./views/atoms/LogoutButton'); skin['atoms.MemberAvatar'] = require('./views/atoms/MemberAvatar'); skin['atoms.MessageTimestamp'] = require('./views/atoms/MessageTimestamp'); skin['atoms.RoomAvatar'] = require('./views/atoms/RoomAvatar'); +skin['atoms.Spinner'] = require('./views/atoms/Spinner'); skin['atoms.create_room.CreateRoomButton'] = require('./views/atoms/create_room/CreateRoomButton'); skin['atoms.create_room.Presets'] = require('./views/atoms/create_room/Presets'); skin['atoms.create_room.RoomAlias'] = require('./views/atoms/create_room/RoomAlias'); @@ -48,6 +49,7 @@ skin['molecules.MImageTile'] = require('./views/molecules/MImageTile'); skin['molecules.MNoticeTile'] = require('./views/molecules/MNoticeTile'); skin['molecules.MRoomMemberTile'] = require('./views/molecules/MRoomMemberTile'); skin['molecules.MTextTile'] = require('./views/molecules/MTextTile'); +skin['molecules.MVideoTile'] = require('./views/molecules/MVideoTile'); skin['molecules.MatrixToolbar'] = require('./views/molecules/MatrixToolbar'); skin['molecules.MemberInfo'] = require('./views/molecules/MemberInfo'); skin['molecules.MemberTile'] = require('./views/molecules/MemberTile'); @@ -83,6 +85,7 @@ skin['organisms.RoomList'] = require('./views/organisms/RoomList'); skin['organisms.RoomView'] = require('./views/organisms/RoomView'); skin['organisms.UserSettings'] = require('./views/organisms/UserSettings'); skin['organisms.ViewSource'] = require('./views/organisms/ViewSource'); +skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage'); skin['pages.MatrixChat'] = require('./views/pages/MatrixChat'); skin['templates.Login'] = require('./views/templates/Login'); skin['templates.Register'] = require('./views/templates/Register'); diff --git a/src/skins/vector/views/molecules/MVideoTile.js b/src/skins/vector/views/molecules/MVideoTile.js new file mode 100644 index 000000000..3b33ea492 --- /dev/null +++ b/src/skins/vector/views/molecules/MVideoTile.js @@ -0,0 +1,88 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use strict'; + +var React = require('react'); +var filesize = require('filesize'); + +var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); +var Modal = require('matrix-react-sdk/lib/Modal'); +var sdk = require('matrix-react-sdk') + +module.exports = React.createClass({ + displayName: 'MVideoTile', + + thumbScale: function(fullWidth, fullHeight, thumbWidth, thumbHeight) { + if (!fullWidth || !fullHeight) { + // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even + // log this because it's spammy + return undefined; + } + if (fullWidth < thumbWidth && fullHeight < thumbHeight) { + // no scaling needs to be applied + return fullHeight; + } + var widthMulti = thumbWidth / fullWidth; + var heightMulti = thumbHeight / fullHeight; + if (widthMulti < heightMulti) { + // width is the dominant dimension so scaling will be fixed on that + return widthMulti; + } + else { + // height is the dominant dimension so scaling will be fixed on that + return heightMulti; + } + }, + + render: function() { + var content = this.props.mxEvent.getContent(); + var cli = MatrixClientPeg.get(); + + var videoStyle = { + maxHeight: "500px", + maxWidth: "100%", + }; + + var height = null; + var width = null; + var poster = null; + var preload = "metadata"; + if (content.info) { + var scale = this.thumbScale(content.info.w, content.info.h, 480, 360); + if (scale) { + width = Math.floor(content.info.w * scale); + height = Math.floor(content.info.h * scale); + } + + if (content.info.thumbnail_url) { + poster = cli.mxcUrlToHttp(content.info.thumbnail_url); + preload = "none"; + } + } + + + + return ( + + + + ); + }, +}); diff --git a/src/skins/vector/views/molecules/MessageTile.js b/src/skins/vector/views/molecules/MessageTile.js index 6ea444130..4b63e9714 100644 --- a/src/skins/vector/views/molecules/MessageTile.js +++ b/src/skins/vector/views/molecules/MessageTile.js @@ -40,7 +40,8 @@ module.exports = React.createClass({ 'm.notice': sdk.getComponent('molecules.MNoticeTile'), 'm.emote': sdk.getComponent('molecules.MEmoteTile'), 'm.image': sdk.getComponent('molecules.MImageTile'), - 'm.file': sdk.getComponent('molecules.MFileTile') + 'm.file': sdk.getComponent('molecules.MFileTile'), + 'm.video': sdk.getComponent('molecules.MVideoTile') }; var content = this.props.mxEvent.getContent(); From 7dc5f91fadb4eb8dc4ede753183796a0a234a2a3 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 3 Nov 2015 18:59:45 +0000 Subject: [PATCH 2/2] Remove unused code --- src/skins/vector/views/molecules/MVideoTile.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/skins/vector/views/molecules/MVideoTile.js b/src/skins/vector/views/molecules/MVideoTile.js index 3b33ea492..ec7ac6f8f 100644 --- a/src/skins/vector/views/molecules/MVideoTile.js +++ b/src/skins/vector/views/molecules/MVideoTile.js @@ -52,11 +52,6 @@ module.exports = React.createClass({ var content = this.props.mxEvent.getContent(); var cli = MatrixClientPeg.get(); - var videoStyle = { - maxHeight: "500px", - maxWidth: "100%", - }; - var height = null; var width = null; var poster = null;