netless-io / flat Goto Github PK
View Code? Open in Web Editor NEWProject flat is the Web, Windows and macOS client of Agora Flat open source classroom.
Home Page: https://flat.whiteboard.agora.io
License: MIT License
Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.
Home Page: https://flat.whiteboard.agora.io
License: MIT License
Did you solve the problem of controlling scaling API mentioned before
Is it possible to add screen sharing
see:
flat/desktop/main-app/electron-builder.yml
Lines 21 to 22 in 2b89c56
we need support Chinese desc
To keep the code style uniform, we need this rule
rule details: https://eslint.org/docs/rules/object-curly-newline
You should add this rule to eslintCommon -> base -> rules
in .eslint.common.js. eg:
Lines 133 to 134 in ef6668b
just like this:
github blog: https://github.blog/2021-11-29-github-actions-reusable-workflows-is-generally-available/
We can encapsulate workflows that are duplicated in existing actions to facilitate maintenance at a later stage.
Because the problem now is that many of our workflows are duplicated and more difficult to maintain.
for historical reasons there are code that we will never use again and we should delete them instead of keeping them in the project.
e.g:
/desktop/renderer-app/src/taskUuids.ts
/desktop/renderer-app/src/custom.d.ts
/desktop/renderer-app/src/react-app-env.d.ts
/desktop/renderer-app/package.json
-> scripts
-> react-app-rewired
and eject
/desktop/renderer-app/package.json
-> devDependencies
-> edit-json-file
Where to find the development documentation?
感谢你们的开源,想咨询一下这是基于声网传输服务的收费开源项目吗?
Thank you for the open source, I would like to inquire about this is based on the sound network transmission service fee open source project?
Originally posted by @BlackHole1 in #25 (comment)
Use a property to switch Preview Modal:
flat/desktop/renderer-app/src/pages/CloudStoragePage/store.tsx
Lines 382 to 390 in f9f9932
Style files should be alongside with the component:
The following comments are redundant and can be removed. If there are other redundant comments, they can also be deleted together.
macOS developers will encounter a script error when running the project with yarn run start
if iTerm is not installed. Better to list this as a prerequisite. Otherwise, the startup experience may not smooth for some developers.
Overview of the problem:
Expected behavior:
Teacher clicks to end, student's microphone is turned off
Actual behavior:
Teacher clicks to end, student's microphone is not turned off
Dart is an object-oriented C language,Dart is a statically typed language that eliminates common sources of errors in JavaScript code. Dart supports type inference, so there is no need to include type boilerplate every time a variable or function is declared.Perhaps the most exciting feature of Dart is its availability outside the network.Perhaps the most exciting feature of Dart is its availability outside the network. Google's Flutter UI toolkit is a portable front-end framework that can be used on desktops, mobile devices and the Web to build native applications. @bestony
In the project, I found that we were mixing up the data-fns approach, which would result in less maintainable code and no Tree shaking
, eg:
import { format } from "data-fns/fp";
import { add } from "data-fns";
import max from "data-fns/max"
After testing, I found that I should change the data-fns to:
import format from "date-fns/fp/format";
import addBusinessDays from "date-fns/fp/addBusinessDays";
fp
, unless the method does not exist in fp
This is for code maintainability reasons
I tested several different writing methods to analyze their final pack size
deconstruction
import { format } from "date-fns";
import { addBusinessDays } from "date-fns/fp";
Stat Size: 625.18 KB
deconstruction
import { format } from "date-fns/fp";
import { addBusinessDays } from "date-fns/fp";
Stat Size: 582.38 KB
no deconstruction
import format from "date-fns/format";
import addBusinessDays from "date-fns/fp/addBusinessDays";
Stat Size: 91.98 KB
no deconstruction
import format from "date-fns/fp/format";
import addBusinessDays from "date-fns/fp/addBusinessDays";
Stat Size: 92.21 KB
From the above, we can see that there is not much difference between mix use no deconstruction
and use no deconstruction
. The reason why use no deconstruction
is a bit larger than mix use no deconstruction
is that there is more code for fp implementation.
As I mentioned above, we should only use one for code maintainability (usually fp's methods are sufficient for our needs)
Another reason to choose fp is that we can take advantage of Currying
for further abstraction.
Join Link 👉 Agroa Flat Slack
if the link does not work, please leave a comment and we will update it
INVITE_BASEURL
Does not meet the semantics
Originally posted by @BlackHole1 in #829 (comment)
We don't really need shelljs as a library to do something for us.
There is no need to install another library to solve the problem as we can write some tools to replace it.
Line 35 in a2ed313
remove shelljs command:
# Project root path
yarn remove shelljs -W
Environment: Mac Big Sur
Node: v16.0.0
NPM: v7.10.0
Yarn: v1.22.10
and
Environment: Windows 10
Node: v14.15.4
NPM: v6.14.10
Yarn: v1.22.10
yiwen@YIWENtekiMacBook-Pro flat % yarn install --frozen-lockfile
yarn install v1.22.10
$ node ./scripts/preinstall
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error Couldn't find match for "fb67b54fe18bdf556fb3e3d00db5fbaf0dbb294d" in "refs/heads/dependabot/npm_and_yarn/electron-9.4.0,refs/heads/dependabot/npm_and_yarn/ini-1.3.8,refs/heads/dependabot/npm_and_yarn/lodash-4.17.19,refs/heads/dependabot/npm_and_yarn/npm-6.14.6,refs/heads/dependabot/npm_and_yarn/npm-registry-fetch-4.0.5,refs/heads/dependabot/npm_and_yarn/npm-user-validate-1.0.1,refs/heads/fix-electron-warning,refs/heads/master,refs/tags/v1.0.0,refs/tags/v1.0.1,refs/tags/v1.0.2,refs/tags/v1.0.3,refs/tags/v1.0.4,refs/tags/v1.0.5,refs/tags/v1.1.0,refs/tags/v1.1.1,refs/tags/v1.1.2,refs/tags/v1.1.3,refs/tags/v1.1.4,refs/tags/v1.1.5,refs/tags/v2.0.0,refs/tags/v2.0.1,refs/tags/v2.1.0,refs/tags/v2.2.0,refs/tags/v2.2.1,refs/tags/v2.2.2,refs/tags/v2.2.3,refs/tags/v2.2.4,refs/tags/v3.0.0,refs/tags/v3.1.0,refs/tags/v3.1.1" for "git://github.com/BlackHole1/electron-devtools-installer".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Using vite to build ts is not a good idea,detail see https://vitejs.dev/guide/features.html#typescript
Originally posted by @BlackHole1 in #810 (comment)
exec yarn run start
in project root path, will open system terminal or iTerm2.
but they(terminal / iTerm2) will not to the front (like z-index).
related documents: https://developer.apple.com/library/archive/documentation/AppleScript/Conceptual/AppleScriptLangGuide/reference/ASLR_cmds.html#//apple_ref/doc/uid/TP40000983-CH216-SW60
related code:
flat/scripts/launch/mac/launch_iTerm.scpt
Lines 1 to 10 in 63b14ae
flat/scripts/launch/mac/launch_terminal.scpt
Lines 1 to 5 in 63b14ae
The current flat sub-project uses a different build tool:
we always knew it was confusing, but the good news is that we will remain unified in the future and will all switch to vite
.
before switching to vite, we need to wait for the storybook to support vite
builds
The storybook is still being optimized and there are still some issues with storybook-builder-vite(see:
storybookjs/builder-vite#2).
When they are finished, they will be ready for migration
other sub-projects can be migrated in one step first
Our mobx class is starting to look more and more complex. Using reflect-metadata
can be a good solution to this problem.
currently flat-web uses vite
, and uses vite's built-in esbuild
build tool.
But currently esbuild does not support reflect-metadata
, which is the main reason why we want to migrate to swc
.
Since the implementation logic of esbuild and swc is completely inconsistent, it will be difficult to support esbuild in the future, see: evanw/esbuild#257 (comment)
Related Links: vitejs/vite#788
flat-web use rollup, but rollup has high memory requirements.
The disadvantages of rollup outweigh its advantages.
If the memory problem is solved by a later rollup, we will consider migrating it all.
But for now we need to use webpack.
Previously, we discussed the specification of file names (see: #714)
But this is all built on an ego-driven basis and we need to have a rule to help us check this.
Thanks to @LitoMore recommendation, we were made aware of the existence of
unicorn/filename-case
.
Rule Link: https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/filename-case.md
The following rules, which I have just come up with, may not be perfect.
"unicorn/filename-case": [
"error",
{
"cases": {
"kebabCase": true,
"ignore": [
"^[A-Z].+\\.tsx$",
"^README.*\\.md$",
".*\\.yaml",
".*\\.yml"
],
}
}
]
Since we don't do any strong checks on the file names, we have the following file name forms:
I think we should have a set of specifications to restrict file names.
all I can think of at the moment is:
when accessing https://flat-web.whiteboard.agora.io/
from another page in the browser, the browser will not be able to make the action that will rewind to the previous page.
Add optimization svg script in git hook.
Like: https://github.com/birjolaxew/svglint
Related PR: #1152
cc: @LitoMore
Windows 10
After executing yarn run start
.
The following error occurs:
C:\Users\WL\Documents\GitHub\flat\node_modules\electron\dist\electron.exe exited with signal SIGINT
(node:1656) ExtensionLoadWarning: Warnings loading extension at C:\Users\WL\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
Checking for update
Update for version 11.3.0 is not available (latest version: 1.1.0-beta.1, downgrade is disallowed).
Checking for update
Update for version 11.3.0 is not available (latest version: 1.1.0, downgrade is disallowed).
The app launches successfully with errors and I can neither create nor join a room:
After click pause button, resume not working.
After opening https://flat-web.whiteboard.agora.io, switch to another tab page.
At this time, if you are in a situation where you have no internet, or very poor internet. Wait a few minutes and switch back to the flat
page.
You can then see a very large number of repeated error messages.
But really we only need it once.
When use mode: 'live'
(or broadcast
in electron), you can't see the video stream sent by electron on the web page, other directions are ok.
I will investigate it soon.
Update: did not reproduce on windows x64 with agora-electron-sdk@latest
I feel that the names of many keys are not unique enough, do we need to introduce the concept of namespace. @Leooeloel @crimx
e.g:
i-know => i-know-extra-countdown
(namespace name)room-exit:
i-know
Originally posted by @BlackHole1 in #662 (comment)
Im finding that autoresize scaling is not adjusted when adjusting the whiteboard div. Sometimes it works but most of the time it doesn't.
I believe the issue is due to the ApplianceManager.GetViewState() returning 0 for width and 0 for height. When the adaptRectangle is created it forces a scale of 1.
when refreshSize is called this.adaptRectangle is null which forces the resize property to take this.camera property.
is this a race condition as the DIV container is not yet created so the Width and Height is 0?
below is excerpts of white-sdk
creation of adaptRectangle below
key: "adaptRectangle",
value: function adaptRectangle(e) {
if (e.width === 0 || e.height === 0) this.transformCamera({
animationMode: e.animationMode,
centerX: e.originX + e.width / 2,
centerY: e.originY + e.height / 2,
scale: 1
});
else {
var t = He(D({}, this.cameraWithAdaptRectangle(e, e.adapterMode)), {
animationMode: e.animationMode
});
this.setCameraTransfrom(t, !1), this.adaptedRectangle = Object.freeze({
originX: e.originX,
originY: e.originY,
width: e.width,
height: e.height,
adapterMode: e.adapterMode
})
}
}
},
this.adaptedRectangle is null and therefore this.camera properties are taken.
key: "refreshSize",
value: function refreshSize(e, t) {
if (this._width !== e || this._height !== t) {
this._width = e, this._height = t;
var r;
this.adaptedRectangle ? r = this.cameraWithAdaptRectangle(this.adaptedRectangle, this.adaptedRectangle.adapterMode) : r = this.camera, this.setCameraTransfrom(He(D({}, r), {
animationMode: G.Immediately
}), !1), this.dispatchUpdatedEvent(r, !1), this.sizeUpdatedDispatcher.dispatch({
width: e,
height: t
})
}
}
Implementation of using useroutes instead of https://github.com/netless-io/flat/blob/main/web/flat-web/src/AppRoutes/index.tsx#L15
In https://github.com/netless-io/telebox-insider vite is ready for storybook
Unable to choose virtual webcam on Mac OS. The only camera in the list is the default built-in webcam. The web version of flat has the virtual camera available in the dropdown menu.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.