Git Product home page Git Product logo

glowing-bear's Introduction

A web client for WeeChat Build Status

Glowing Bear is a web frontend for the WeeChat IRC client and strives to be a modern interface. It relies on WeeChat to do all the heavy lifting and then provides some nice features on top of that, like embedding images, videos, and other content. The best part, however, is that you can use it from any modern internet device -- whether it's a computer, tablet, or smart phone -- and all your stuff is there, wherever you are. You don't have to deal with the messy technical details, and all you need to have installed is a browser or our app.

Getting Started

Glowing Bear connects to the WeeChat instance you're already running (version 0.4.2 or later is required), and you need to be able to establish a connection to the WeeChat host from your device. It makes use of the relay plugin, and therefore you need to set up a relay. If you want to try this out with a local WeeChat instance, use these commands in WeeChat to create an unencrypted relay (see the note below):

/relay add weechat 9001
/set relay.network.password YOURPASSWORD

Now point your browser to the Glowing Bear! If you're having trouble connecting, check that the host and port of your WeeChat host are entered correctly, and that your server's firewall permits incoming connections on the relay port (9001 in this example).

Please note that the above instructions set up an unencrypted relay, and all your data will be transmitted in clear. You should not use this over the internet. We strongly recommend that you set up encryption if you want to keep using Glowing Bear. There's a guide on setting it up with Let's Encrypt on the landing page of the next version of Glowing Bear, under "Getting Started". Ask us in #glowing-bear on libera if something is unclear.

You can run Glowing Bear in many ways:

  • like any other webpage
  • Chrome app ("Tools", then "Create application shortcuts")
  • Android Chrome app, a full-screen experience ("Add to homescreen").

Screenshots

Running as Chrome application in a separate window on Windows and on Android:

Glowing bear screenshot

Are you good with design? We'd love your help! Glowing Bear screenshot with lots of Comic Sans MS

How it Works

What follows is a more technical explanation of how Glowing Bear works, and you don't need to understand it to use it.

Glowing Bear uses WeeChat directly as its backend through the relay plugin. This means that we can connect to WeeChat directly from the browser using WebSockets. Therefore, the client does not need a special "backend service", and you don't have to install anything. A connection is made from your browser to your WeeChat, with no services in between. Thus, Glowing Bear is written purely in client-side JavaScript with a bit of HTML and CSS.

FAQ

  • Can I use Glowing Bear to access a machine or port not exposed to the internet by passing the connection through my server? No, that's not what Glowing Bear does. You can use a websocket proxy module for your webserver to forward /weechat to your WeeChat instance though. We've got instructions for setting this up on our wiki.
  • How does the encryption work? TLS is used for securing the connection if you enable encryption. This is handled by your browser, and we have no influence on certificate handling, etc. You can find more detailed instructions on how to communicate securely in the "Getting Started" tab on the landing page of our development version.
  • Can I make it so that there are no requests to third party servers at all? Sure, see #1186. More details to follow once it's merged

Development

Setup

Getting started with the development of Glowing Bear requires the installation of Node.js. All you have to do is clone the repository, install dependencies using command npm install, fire up the development webserver using command npm start, and start fiddling around. Once a change is made the development server will instruct the Web browser to reload the page for you.

Now you can point your browser to http://localhost:8000!

If you want to host Glowing Bear yourself, you should use a "proper" webserver like Caddy, nginx, or Apache. Run npm run build to bundle all the resources neded and then point your webserver to the build/ folder. This is, in effect, the explicit way of doing what npm start does transparently in the background for development.

Remember that you don't need to host Glowing Bear yourself to use it, you can just use our hosted version powered by GitHub pages, and we'll take care of updates for you. Your browser connects to WeeChat directly, so it does not matter where Glowing Bear is hosted.

You can also use the latest and greatest development version of Glowing Bear at https://latest.glowing-bear.org/. For developers, branches of this repository are available at https://pull.glowing-bear.org/branchname/, and pull requests at https://pull.glowing-bear.org/123/—note the trailing slashes.

Running the tests

Glowing Bear uses Karma and Jasmine to run its unit tests. To run the tests locally, you will first need to install npm on your machine. Check out the wonderful nvm if you don't know it already, it's highly recommended.

Once this is done, you will need to retrieve the necessary packages for testing Glowing-Bear (first, you might want to use npm link on any packages you have already installed globally) with npm install. Finally, you can run the unit tests with npm test, or the end to end tests with npm run protractor (note that the end to end tests assume that a web server is hosting Glowing Bear on localhost:8000 and that a WeeChat relay is configured on port 9001.)

Contributing

Whether you are interested in contributing or simply want to talk about the project, join us at #glowing-bear on libera!

We appreciate all forms of contributions -- whether you're a coder, designer, or user, we are always curious what you have to say. Whether you have suggestions or already implemented a solution, let us know and we'll try to help. We're also very keen to hear which devices and platforms Glowing Bear works on (or doesn't), as we're a small team and don't have access to the resources we would need to test it everywhere.

If you wish to submit code, we try to make the contribution process as simple as possible. Any pull request that is submitted has to go through automatic and manual testing. Please make sure that your changes pass the Travis tests before submitting a pull request. Here is how you can run the tests:

$ ./run_tests.sh

We'd also like to ask you to join our IRC channel, #glowing-bear on libera, so we can discuss your ideas and changes.

If you're curious about the projects we're using, here's a list: AngularJS, Bootstrap, Underscore, favico.js, Emoji provided free by Emoji One, and zlib.js. Technology-wise, WebSockets are the most important part, but we also use local storage, the Notification Web API, and last (but not least) Tauri for our standalone apps for different platforms.

glowing-bear's People

Contributors

acous avatar anders avatar bakke avatar baldurmen avatar cormier avatar creesch avatar dancek avatar dependabot[bot] avatar eepp avatar jeremymahieu avatar kindfulkirby avatar kode54 avatar kurros avatar lorenzhs avatar moo-the-cow avatar ogarcia avatar pelmers avatar pmelanson avatar rain0r avatar rscullin avatar spapas avatar stenehall avatar tmatth avatar torhve avatar tribut avatar tschuy avatar txdv avatar vivien avatar vrutkovs avatar yeiniel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

glowing-bear's Issues

Change buffer keyboard shortcut conflicts with some keymaps

Alt+[0-9] might not be the best keyboard shortcut to switch between buffers. With my usual keymap (Canadian French), the @ character is entered with right Alt+2, so I cannot input a @ now.

Unless there's a way to differentiate between left and right Alt, we should change this ASAP because it's very annoying.

Highlight highlights

Somehow visually highlight the line if the user's nickname or one of the hotwords was contained in it to make it easier to spot

Notifications count isn't cleared when reconnecting

Is the following behaviour desired after the following sequence?

WeeChat already has unread notifications.

  1. connect to glowing-bear; you see the notifications count for each buffer
  2. click on every buffer with a notification count and it disappears
  3. disconnect from glowing-bear
  4. connect to glowing-bear

Notification counts are still there.

Overflow when there are too many buffer names

When there are too many buffer names, an horizontal scrollbar appears and we cannot see all of them until we scroll.

Suggestion: could the buffers be on the right side, sorted somehow, with the possibility of showing/hiding the whole column?

Implement different media contents display modes

Media contents is shown within a "Show additional content" box right now.

Users could prefer other display modes:

  • inline with the text flow
  • when hovering the URL that triggered the content embedding
  • in a separate column

Plugins could, for each message, actively register additional contents (HTML) in the current context so that, once the plugin system has called every plugin, it can put this contents wherever the user wants to.

Something like:

function myPluginOnChatMessage(context) {
    if (content.getRawMessage().match(/.../)) {
        context.addMediaContents({ ... });
    }
}

Change default monospace font

Set monospace font for all monospace text for the following because it looks better, more modern, but is generally not the browser default:

  • Linux : Ubuntu Mono
  • Windows : Consolas
  • OS X : Monaco

Implement tab completion

I don't believe WeeChat relays share this information in general, but at least for nicks, this would be possible since we have the nick list.

Expected behaviour when users meow and mix exist (~ means space here because GitHub is swallowing all my spaces):

Caret is at the very beginning of the input textbox. Type m then press Tab, autocompletes for meow:~. Press Tab again, changes meow:~ for mix:~. Press Tab again, goes back to meow:~. Caret is always set after :~ in all those situations.

When caret is elsewhere, same behaviour, but without :.

User input should be escaped

Actually, sending <foo> won't work, because ng-bind-html on the bufferline sanitizes the content first. The text from the user input needs to be (html) escaped before sending it.

Responsive design

The app should support responsive web design. IMO this is must-have feature, to feel confortable with any window size.

Depending on the browser size, the buffer and nick lists can be displayed/hidden.
For instance, the app is known to work on a tablet, it'd be great to hide the buffer list on portrait mode and display it on landscape mode.

Command history

Implement command history, per buffer, with up and down arrows going back/forward in the history.

Current context is not cleared when disconnected

Steps:

  1. open WeeChat
  2. connect to it with glowing-bear
  3. close WeeChat (glowing-bear is disconnected)
  4. open WeeChat again
  5. connect to it with glowing-bear

The buffers are all duplicated. This is wrong.

Create a fixed pane for main buffer view

The main buffer view, when full, currently creates a scrollbar for the whole page, whereas it should create a scrollbar for its own viewport and leave the fixed input bar at the bottom.

Why not fixing the input bar using display: fixed?

Add support for themes

This is a suggestion to add support for various themes.

A theme would be a single CSS file (which may be the result of several LESS/SASS files, see #20) that controls pretty much all the look of this application:

  • background color
  • fonts
  • connection page look
  • preferences page look (if it exists)
  • list of buffers look and position (left/right/top should all be easily possible)
  • nick list look and position
  • input bar style (and possibility of hiding the Send button)
  • main buffer view look

I guess the CSS file location could be modified in the preferences to apply a theme instantly without downloading anything manually (saved in local storage).

@vivien won't like me for this, but having color schemes could be an option too, for instance if someone wants more pastelish colors instead of the default, oversaturated ones of terminals which are hurting my fragile eyes. In my defense, you can do exactly this with popular terminal emulators like GNOME terminal, urxvt, Terminator or PuTTY. Here's a screenshot:

See? Yes, if you set the red as green here, grep will output matches in green. People like me usually prefer schemes like Solarized because we're not using VT-100s like @vivien.

So to make this really easy for theme designers, very simple classes should be attached to strategic elements. The designer should also be aware of the "default state" of the application look, i.e. the reset values when no theme is applied. This is important because, for example if the core's CSS forces an element's line-height to 150%, whereas the browser default is usually normal, the designer will need to manually force it back to normal to retrieve the default value (or use a reset sheet).

We don't want this to become like old MySpace CSS "skins".

The core CSS should only be used for things that a theme should never change, like rules to force the input bar at the bottom and have a buffer view that takes all the viewport's height.

focus buffers

When focusing on a buffer (e.g. when reading it), we should send a /buffer <name> (e.g. /buffer irc.freenode.#weechat-fr) in order to replicate the focus on weechat-curses and by this way clear the buffer from the hot list (this will remove the notification on weechat-curses).

More keybindings

To have an efficient usage of this app, if could add 2 new keybindings:

Alt+b to focus on the buffer list search input, and Alt+Space (not sure about that one yet) to focus on the message input bar. This last once is useful when we previously clicked in the buffer and thus loose the focus.

Let user customize glowing-bear

Add a page of user preferences, saved/loaded to/from local storage.

We will need to figure out what should be controlled by the user preferences. Things like suffix for nick completion, chosen theme, display mode of media contents, etc.

Connection errors are unhandled

When trying to connect to the WeeChat relay with a wrong hostname/port, no error message is displayed but the console outputs Relay error undefined.

Connect doesn't work

I'm currently not able to identify where the problem come from, but somethime i have to reload the index page to be able to receive data from weechat after pressing the connect button, else the page is empty like if i put a wrong password

Sort chan by irc server

Channels might be sorted by irc server.
Maybe Like :

  • FREENODE
    • #toto
    • #tata
  • FREENODE2
    • #toto

Also, user could sort channels like he wants (drag and drop ???)

Thanks !

Nicks, status symbols and timestamps are not aligned on the left side

WeeChat (and most chat clients) usually look like this:

00:19:03  -- | Mode ##unavailable [+FPcmnt]                          
00:19:03  -- | Channel created on Thu, 30 Mar 2006 07:52:16          
00:21:06 <-- | coderhs ([email protected]) has quit (Ping timeout: 
             | 264 seconds)                                          
00:21:34 --> | HannahLittleLady                                      
             | (414a56a6@gateway/web/freenode/ip.65.74.86.166) has   
             | joined ##unavailable                                  
00:22:17 <-- | HannahLittleLady                                      
             | (414a56a6@gateway/web/freenode/ip.65.74.86.166) has   
             | quit (Client Quit)                                    
00:12:27  someone | hi there 
00:12:33     eepp | oh hi  
00:14:20  someone | how are you doin'  
00:14:35     eepp | couldn't be better 

There's a clear left column where nicks, timestamps and some symbols are put while the actual text is left-aligned in another column.

This project currently doesn't do this, making it more difficult for the eye to follow a conversation.

NSFW

When a message matches a plugin and this message contains /nfsw/i, override the user/core setting and make the additional content collapsed.

This implies some brainstorming and refactoring of the plugins architecture: for instance, the settings should be per instance of additional content, not per plugin.

Implement a disconnect button

Suggestion: add a disconnect button to send a quit message to WeeChat and go back to the connection landing page.

Use proper models

Use models as a layer of abstraction between weechat commands and the controllers

Use SASS or LESS

As the CSS file is growing, using SASS or LESS would ensure a better and more maintainable structure.

Disconnects after successful connection because of previous connection error

This is somehow hard to reproduce, but:

  1. connect using a wrong port number (or wrong host)
  2. immediately connect using the correct infos.

Then, it's possible that the error caused by 1 fires after 2, which goes back to the login screen even if you successfully connected. I actually experienced that: I saw the buffers and everything, and then it went back to the login screen because I tried with a wrong port the first time.

I guess, once connected, that all connection errors should be ignored.

Unhandled wrong password

When connecting, a wrong password displays no message.

You just don't know what's going on. Your whole world seems to be falling down. And then you realize that people you've known forever don't see things the way you do. And then you die.

Show current connected host:port

Suggestion to show permanently somewhere, once connected, the connected host:port. Something like "Connected to 192.168.50.33:1234".

Dynamic resize and channel topic

When you resize your browser windows and decrease the width, on low width size the channel content disappear and the channel list take all the windows.

In the same way, if the channel topic is bigger then the windows width, the topic will overwrite the channel content.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.