diff --git a/src/skins/vector/skindex.js b/src/skins/vector/skindex.js index a2b8d8cd3b..83a1284cbd 100644 --- a/src/skins/vector/skindex.js +++ b/src/skins/vector/skindex.js @@ -23,9 +23,6 @@ limitations under the License. var skin = {}; -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'); skin['atoms.EditableText'] = require('./views/atoms/EditableText'); skin['atoms.EnableNotificationsButton'] = require('./views/atoms/EnableNotificationsButton'); skin['atoms.ImageView'] = require('./views/atoms/ImageView'); @@ -34,6 +31,9 @@ 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'); skin['atoms.voip.VideoFeed'] = require('./views/atoms/voip/VideoFeed'); skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu'); skin['molecules.BottomLeftMenuTile'] = require('./views/molecules/BottomLeftMenuTile'); @@ -43,18 +43,19 @@ skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword'); skin['molecules.DateSeparator'] = require('./views/molecules/DateSeparator'); skin['molecules.EventAsTextTile'] = require('./views/molecules/EventAsTextTile'); skin['molecules.EventTile'] = require('./views/molecules/EventTile'); -skin['molecules.MatrixToolbar'] = require('./views/molecules/MatrixToolbar'); -skin['molecules.MemberInfo'] = require('./views/molecules/MemberInfo'); -skin['molecules.MemberTile'] = require('./views/molecules/MemberTile'); skin['molecules.MEmoteTile'] = require('./views/molecules/MEmoteTile'); -skin['molecules.MessageComposer'] = require('./views/molecules/MessageComposer'); -skin['molecules.MessageContextMenu'] = require('./views/molecules/MessageContextMenu'); -skin['molecules.MessageTile'] = require('./views/molecules/MessageTile'); skin['molecules.MFileTile'] = require('./views/molecules/MFileTile'); 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'); +skin['molecules.MessageComposer'] = require('./views/molecules/MessageComposer'); +skin['molecules.MessageContextMenu'] = require('./views/molecules/MessageContextMenu'); +skin['molecules.MessageTile'] = require('./views/molecules/MessageTile'); skin['molecules.ProgressBar'] = require('./views/molecules/ProgressBar'); skin['molecules.RoomCreate'] = require('./views/molecules/RoomCreate'); skin['molecules.RoomDropTarget'] = require('./views/molecules/RoomDropTarget'); @@ -86,4 +87,4 @@ skin['organisms.ViewSource'] = require('./views/organisms/ViewSource'); skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage'); skin['pages.MatrixChat'] = require('./views/pages/MatrixChat'); -module.exports = skin; +module.exports = skin; \ No newline at end of file diff --git a/src/skins/vector/views/molecules/MVideoTile.js b/src/skins/vector/views/molecules/MVideoTile.js new file mode 100644 index 0000000000..ec7ac6f8f1 --- /dev/null +++ b/src/skins/vector/views/molecules/MVideoTile.js @@ -0,0 +1,83 @@ +/* +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 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 6ea4441308..4b63e9714a 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();