bildpunkt/surfbird

A Microblogging client built on Electron and Vue

surfbird's Issues

'npm run build' fails on Windows 10

Hello, I had a problem running the application, The 'npm install' was successful but when I ran 'npm run build', I had this error. I didn't figured out what is happening, maybe this can help:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'pack' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prepack', 'pack', 'postpack' ]
5 info lifecycle [email protected]~prepack: [email protected]
6 silly lifecycle [email protected]~prepack: no script for prepack, continuing
7 info lifecycle [email protected]~pack: [email protected]
8 verbose lifecycle [email protected]~pack: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~pack: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\...\surfbird\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\...\AppData\Local\Microsoft\WindowsApps;;C:\Program Files (x86)\Microsoft VS Code\bin;C:\...\AppData\Roaming\npm
10 verbose lifecycle [email protected]~pack: CWD: C:\...\surfbird
11 silly lifecycle [email protected]~pack: Args: [ '/d /s /c', 'npm run pack:main && npm run pack:renderer' ]
12 silly lifecycle [email protected]~pack: Returned: code: 1  signal: null
13 info lifecycle [email protected]~pack: Failed to exec pack script
14 verbose stack Error: [email protected] pack: `npm run pack:main && npm run pack:renderer`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:886:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\...\surfbird
17 error Windows_NT 10.0.15063
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "pack"
19 error node v6.10.3
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error [email protected] pack: `npm run pack:main && npm run pack:renderer`
22 error Exit status 1
23 error Failed at the [email protected] pack script 'npm run pack:main && npm run pack:renderer'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the surfbird package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     npm run pack:main && npm run pack:renderer
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs surfbird
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls surfbird
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

regards,

Important kweschtion

When comes the Wii U version ???????????

Interactions sorting is wrong

Interactions are currently sorted after event.created_at which is the time of the creation of the (liked/retweeted/whatever) content, so it will not appear at the top.

Time to find (or add) another way to sort this properly.

Internalization Support

Because multiple languages are cool (and sadly not everyone understands english)

Shouldn't be too hard to be implemented with vue-i18n

Frontend code cleanup

The frontend code is crap right now, following things need to be cleaned up:

• switch to compile-to-js language
• move click/send related stuff into specific Vue files
• use either jQuery or JS calls to do stuff, not both all put over the place

Add stylelint

We're already linting our JS, so we shouldn't leave out the styles!

If you need a reference on how to use stylelint with Vue files, you can use this blog post as a guide!

What's to be done

• Install the stylelint, stylelint-processor-html, stylelint-webpack-plugin and stylelint-config-standard packages from npm
• Configure stylelint
• Add the stylelint plugin to the Webpack configuration
• Fix all problems that the linter throws

Make repository commitizen-friendly again

I've been using the conventional changelog from commitizen for quite a while now, I even think I had commitizen added to the project in the first iteration.

Well, time to add it back!

What's to be done

• Make the repository commitizen-friendly, following this guide

Emoji parsing

We can just go ahead and use Twemoji for this. But we should serve the assets locally and not over MaxCDN

IndexedDB

Just using arrays to store information is really unperformant, so this is worth considering.

I just need to get into it, so I find a way of implementing it properly.

Move from Batch to Feather

Since the rewrite started I've been using the Batch iconfont, just as a change from everything using FA.

Batch has a fiddly way of an implementation, and so using FontAwesome would be way easier in the long run. Especially with clients setting their own actions and icons.

I made up my mind and as another alternative Feather also seems viable. The biggest issue I have with FA is that it's icons are not equally proportioned and that looks quite off in interfaces.

What's to be done

• Integrate Feather icons
• Locate all instances of Batch being used and replace them with the corresponding Feather icon
• Improve the Post/Action/Item component to use Feather icons by name instead of the Batch way and including the actual unicode icon in the `ACTIONS´ client configuration.

Twitter Card Support

Twitter Cards handle stuff like link previews, polls etc. pp.

They are basically just iframes loaded into the site from following URL:
https://twitter.com/i/cards/tfw/v1/[tweet-id]

We just need to check up if the link returns a valid site (not 404), so it can be included into a tweet.

Move assets into user accessible place

Custom assets can't be reached currently (see that nice error coming up when trying to scan app/assets/themes) and the packaged app is now in an asar-archive which can't be accessed easily, unless you are a developer yourself.

Time to move assets and the base configuration out of the root folder and into the AppData/.electron/whatever folder.

Fix remaining code style issues

Run npm run lint or look at the following list to see specific coding style problems:

app/_js/main.js:144:5: Do not use 'new' for side effects.
app/_js/main.js:144:9: 'Notification' is not defined.

main.js:30:7: 'mainWindow' is not defined.

src/storage/keys.js:1:42: Use path.join() or path.resolve() instead of + to create paths.

src/windows/main.js:20:22: Use path.join() or path.resolve() instead of + to create paths.
src/windows/main.js:40:7: 'stream' is defined but never used.

Hiding Tweets

Hide tweets and follow up content (quotes, retweets and replies), suggested by @stawberri

Due to API limitations (and trying to be sparse with our request limit) we could only hide direct descendant replies to a tweet, as all other methods would require us to fully cycle through all replied statuses, which wastes a ton of requests.

Roadmap:

• Add action to hide tweets
• Hide tweets, quotes and replies if they contain the ID of a hidden tweet
• List all hidden tweets in a modal/tab/dialogue and allow to un-hide them there

Twitter Symbol in username does not show properly

Emoticon Name: Flag of Kiribati
Emoticon: 🇰🇮

How it looks like:

• Twitter: http://i.imgur.com/dKybC8F.png
• Surfbird: http://i.imgur.com/ayvwr54.png

😄

Rewrite

Because I'm still that early in that it actually justifies a code rewrite for the most part. I need to redo following things:

• Use containers instead of wrapping all if-statements into the actual components
• Redesign everything (Reference)
• Finally implement storing of the stuff that's actually happening, time to use Vuex with plugins
• Clean up most of the code
• #44 Implement multi-account support
• #45 Implement multi-column support

Lightboxes for Images

Currently, images are only view-able in the timeline and you can't view them entirely.

Auto update(r)?

This is just a creative idea at hand for feature posibility.

GitHub provides JSONized information about the repositories and maybe even in branch form, could an occasional timer be executed to compare the hashes of the project files of which will compile a list of changed files in the master branch, then prompt the user for update?
After calculating the hashes locally and comparing, in theory couldn't the latest files be downloaded by prefixing them with https://raw.githubusercontent.com/surfbirdapp/surfbird/master/?

My reason for considering this is to just simplify and reduce time of downloading the repository changes each time a stable update is applied in the future.

Interactions

Getting retweets, favorites, follows, etc. pp. for a user.

This can be achieved with hooking a lot of listeners into the userstream, which ones exactly can be found here:

• Twit documentation about user events
• Twitter documentation about user events

These grabbed events should then be sent over to the frontend and stored in window.app.interactions

Persist Store

The Vuex store should be persisted, maybe using vuex-persistedstate. But for that to work I need a reducer and some initializations on startup.

The reducer needs to get rid of a columns postStorage as I don't want to save tweets locally. Another thing that needs to be cleared is a accounts client, as it includes functions that won't be accessible after the state is put into localStorage.

What's to be done

• Install the vuex-persistedstate package
• Add it as a plugin to the Vuex store
• Write a reducer (reducer) function that removes keys from the store that shouldn't be persisted
• Write a hydration (getState) function that initializes parts of the store that can't be persisted, like a Accounts client instance

Multi-Account Support

Part of #43

Well, a thing everyone wants. Basically allow storage and usage of multiple Twitter accounts.

Search

Implement a basic search for users/tweets.

Roadmap:

• Backend calls for Search API (search/tweets, users/search)
• Frontend call to backend + receival of data
• Frontend design + functions to clear searches

Documentation

To make it easier for others to contribute, I need to write documentation around the application flow, components, store modules and client/authentication integrations.

What's to be done

• Authentication Flow
• Authenticators
• Clients
• Store
• Components

Follow Request Utilities

Nope, sadly you won't be able to accept follow requests with this, but we can handle some visual stuff about them.

Roadmap:

• Show incoming follow requests in sidebar menu item
• Show outgoing follow requests in sidebar menu item
• Show message if user is not set to private (and can't receive follow requests)
• If user has more than one follow request, add link to follow request page on Twitter

Direct Messages

Part of the general featureset.

Group them for each user, probably like this in app.messages:

{
  "username1": {
    // direct message objects here
  },
  "username2": {
    // direct message objects here
  }
}         

Add .editorconfig

Description

To help keeping the coding style clean before even running npm run dev and getting warnings from ESLint, we should probably introduce an editorconfig file that gets used by IDEs to adjust to the proper settings. It's best to find a config that correlates best to the Standard style!

Utilize one stream instead of many

Surfbird is currently opening several streaming connections to the Twitter API, which will cause Twitter to either take steps against the app at some point or will just kill off connections randomly.

• Rewrite streaming to use as few connections as possible to grab more data

Replies

With commit 5399e1c there is now a tweet storage available that keeps all tweets, while the actual iterables only contain ID references to them.

With this, we can properly implement replies now.

Roadmap:

• set vm.$data.reply to the tweet object from tweetStorage
• design and implement reply display in compose view
• implement proper mention/user support for textbox

Multi-Column Support

Part of #43

Oh, this is going to be a tough one, as it will require rewriting most of the current content retrieval code written.

I currently have following approach in mind, as creating/storing columns is the least of our problems.

Proposal

• If a column gets created/initialised on start, it creates a EventListener and sends a event over a kind-of main "column creator" channel to the main process, so that this one can create a Sender for the data to be retrieved from Twitter.
• The created Sender pulls specified data from Twitter and sends it to the channel which was earlier created in the renderer process (the naming scheme should make that pretty simple)

Roadmap

Frontend

• Create custom columns
  • Home timeline
  • Mentions timeline
  • Direct Message timeline
• Store custom columns

Backend

• Retrieve new column channels
• Send data back to new columns

Mutes

Because there always is some kind of content that we don't want to see.

Types of Mutes:

• Text ("text fragment", "#hashtag")
• User ("@username")
• Source ("web", "Surfbird")

Roadmap:

• Fetch initial set of user mutes from Twitter
• Set user mutes and send them to Twitter
• Write custom filter to apply above mutes on all timeline types
• Add modal/dialogue/tab to set mutes
• As a plus, regex support for Text type mutes

Frontend Settings

Save them into localStorage.

• Set settings
• Get settings on startup
  • Initially change stuff based on what is in the config

Proper setting of retweets and favorites

As I recently found out, reactivity also works for stuff referenced from the root instance, so implementing proper retweeting/favoriting and carrying the status over to all similar tweets in different columns should be fairly easy.

Find another way to properly stream mentions

My current method of streaming mentions works with using the statuses/filter endpoint, tracking everything containing @username. The problem with this is the simple fact that this endpoint does not include private statuses (from private accounts) which renders this unusable right now.

Either I end up finding another endpoint to do this with or I combine this with REST API requests to home/mentions_timeline fetching every minute, or so.

Mastodon support

Description

I saw the use of "Micro-blogging" instead of twitter in the direct description, should I understand by that in the future there could be added support of mastodon ? Haven't found any desktop applications that merge twitter and mastodon.

Additional Information

Mastodon project

Profile Creation Dialogue

As we already have a column creation dialogue, we now also need a profile creation dialogue! There's not too much it needs, the only thing that gets passed to the constructor is the name the profile should get.

The Column creation dialogue can can be used as a reference for a possible integration.

What's to be done

• Creating a Profile-modal component
• Letting the modal create a profile with the required parameters, dispatching the proper action to the state

Add tweetmarker support

Tweetmarker is a service to save the read-state of ones timeline across multiple devices, so that one can continue reading twitter on the phone after he left his computer.
The developer of tweetmarker currently charges $25/month per app, but he said that developers of open source apps can contact him to find a solution for this problem.

Currently no twitter clients for linux have tweetmarker support, so implementing tweetmarker support in Surfbird would cause some kind of push, since the demand for tweetmarker support on the Linux desktop is quite high.

Specification: Clients

Description

Client Documentation

To make it clear what's required to implement new clients we need to write a specification on the needed structure, functions, etc.

Clients are a "works-as-written" implementation and have no structure or something that makes it easy to guess what they do at the moment. COLUMN_TYPES and ACTIONS also require a refactor as soon as possible.

Additional Information

[Any additional information or resources that might be helpful for this feature request]

Backend code cleanup

The backend code is not as bad as the frontend code right now, but could also use some cleaning up.

• move initial data fetching calls into own files (home/mentions timeline)
• group files that belong to each other into folders in src (sounds/themes, keys/tokens, etc.)
• move path creation into a seperate file
• move windows (main/auth window) into seperate files in src

Theme Support

Allow users to write their own custom userstyles and easily make them selectable on the client-side.

Planned steps:

• initially load all themes from app/assets/themes
• send them to the client over a channel
• add them to a selectbox on the frontend application
• add an update-button that reloads all themes

This should be a fairly easy thing to be implemented.

Profiles

Because you can't really view those yet.

Roadmap:

• Save and update user status into object. (e.g. app.userStorage)
• Turn links to users into actions for Vue.js
• Add modal for profiles
• Design profile modals in reference to #21
• Invoke on modal events to clear active (selected) user
• Add user interactions (Following, Blocking, etc.)

UI Design Ideas

Surfbird currently looks like TweetDeck, which is done on purpose, as the column-based layout itself is pretty good for Twitter clients.

What I want to change is the general style direction, so it does not look like TweetDeck anymore, but as I'm more working on the code side of things, having other people to help me figure out stuff together is more efficient than me switching between code and design constantly!

So, if you have any ideas/feedback, throw them in here, anything is appreciated!

Move autolinked tweet contents into own key

Because of the recent changes (e.g. tweet parsing), notifications now include HTML, which most notification providers can't parse, so we need to move the converted tweet text into it's own object key, maybe tweet_html or something.

Split Interactions into Activity/Mentions

If the user wants to, at least. Probably needs #13 to be able to work.

Specification: Authenticators

Description

Authenticator Documentation

To make it clear what's required to implement new authenticators we need to write a specification on the needed functions, what needs to be returned, etc. maybe even already do a slight look ahead into the future and find out what might be required later on.

Currently the only two required functions of a authenticator are data and authenticate.

Fix build process

I can't push out a working build without this working.

Alerts/Toasts for Events

Currently there are no real replies on whether an action has been performed successfully or not.

Implement a toaster-library (maybe Toastr.js or something).

Roadmap:

• Find suitable library for toasts
• Implement hook(s) for event callbacks
• Implement toasts for events

Tip: Use status codes for return values and then set up locales for the corresponding status code, you can then easily get the specific key from the locale file.

Media

Media upload is something vital to Twitter clients nowadays, so of course it needs to be added to Surfbird at some point.

Roadmap:

• Media selection
• Media previews in client
• Passing media to backend (file paths)
• Reading media and turning it into data (encode with base64)
• Upload media
• Attach returned media IDs to tweet and post that

Notifications

For incoming interactions (and later direct messages)

• base notifications
• set custom notification sound over settings

Add possibility to delete own tweets in timeline

Mentions

Combining with #5

Trying to get mentions streamed with the following snippet:

var mentionstream = twitter.stream('statuses/filter', { track: "@" + current_user_name })

a newly created stream which pulls from the filter type where you can track a specific keyword (in this case current_user_name is the name of the current user, fetched over users/show with the current user ID)

I tried getting this to work already, but due to the IPC only being available in the export, the API request for the username lookup taking a bit and several other factors, I could not get it to work as of now, just noting the proper approach here.