martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-03-13 00:50:03 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

more conversation refactor

Browse Source
This commit is contained in:
Roland Osborne 2023-01-26 17:45:29 -08:00
parent 7683dd941e
commit f3602d0c68
6 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
net/web/src/session/conversation/channelHeader/useChannelHeader.hook.js
View File

@ -120,6 +120,7 @@ export function useChannelHeader(contentKey) {
else {
updateState({ label, img, logo });
}
// eslint-disable-next-line
}, [conversation.state, card.state, contentKey]);
const actions = {

2
net/web/src/session/conversation/topicItem/useTopicItem.hook.js
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { useState } from 'react';
export function useTopicItem() {

14
net/web/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
View File

@ -1,4 +1,3 @@
import React, { useEffect, useState } from 'react';
import { Modal } from 'antd';
import ReactResizeDetector from 'react-resize-detector';
import { VideoCameraOutlined } from '@ant-design/icons';
@ -8,17 +7,16 @@ import { useVideoAsset } from './useVideoAsset.hook';
export function VideoAsset({ thumbUrl, lqUrl, hdUrl }) {
const { state, actions } = useVideoAsset();
const [dimension, setDimension] = useState({ width: 0, height: 0 });
const activate = () => {
if (dimension.width / dimension.height > window.innerWidth / window.innerHeight) {
if (state.dimension.width / state.dimension.height > window.innerWidth / window.innerHeight) {
let width = Math.floor(window.innerWidth * 8 / 10);
let height = Math.floor(width * dimension.height / dimension.width);
let height = Math.floor(width * state.dimension.height / state.dimension.width);
actions.setActive(width, height);
}
else {
let height = Math.floor(window.innerHeight * 8 / 10);
let width = Math.floor(height * dimension.width / dimension.height);
let width = Math.floor(height * state.dimension.width / state.dimension.height);
actions.setActive(width, height);
}
}
@ -27,13 +25,13 @@ export function VideoAsset({ thumbUrl, lqUrl, hdUrl }) {
<VideoAssetWrapper>
<ReactResizeDetector handleWidth={true} handleHeight={true}>
{({ width, height }) => {
if (width !== dimension.width || height !== dimension.height) {
setDimension({ width, height });
if (width !== state.dimension.width || height !== state.dimension.height) {
actions.setDimension({ width, height });
}
return <img style={{ height: '100%', objectFit: 'contain' }} src={thumbUrl} alt="" />
}}
</ReactResizeDetector>
<div class="overlay" style={{ width: dimension.width, height: dimension.height }}>
<div class="overlay" style={{ width: state.dimension.width, height: state.dimension.height }}>
{ !state.active && (
<div onClick={activate}>
<VideoCameraOutlined style={{ fontSize: 32, color: '#eeeeee', cursor: 'pointer' }} />

4
net/web/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
View File

@ -6,6 +6,7 @@ export function useVideoAsset() {
width: 0,
height: 0,
active: false,
dimension: { width: 0, height: 0 },
});
const updateState = (value) => {
@ -19,6 +20,9 @@ export function useVideoAsset() {
clearActive: () => {
updateState({ active: false });
},
setDimension: (dimension) => {
updateState({ dimension });
},
};
return { state, actions };

2
net/web/src/session/conversation/useConversation.hook.js
View File

@ -67,6 +67,7 @@ export function useConversation(cardId, channelId) {
else {
updateState({ sealed: false, contentKey: null });
}
// eslint-disable-next-line
}, [account.state.sealKey, conversation.state.channel?.data?.channelDetail]);
useEffect(() => {
@ -132,6 +133,7 @@ export function useConversation(cardId, channelId) {
useEffect(() => {
topics.current = new Map();
syncChannel();
// eslint-disable-next-line
}, [state.contentKey]);
const syncTopic = (item, value) => {

1
net/web/src/session/welcome/Welcome.styled.js
View File

@ -1,5 +1,4 @@
import styled from 'styled-components';
import Colors from 'constants/Colors';
export const WelcomeWrapper = styled.div`
height: 100%;