gadenbuie / tweet-conf-dash

A shiny twitter conference dashboard
https://apps.garrickadenbuie.com/rstudioconf-2019/
MIT License
120 stars 75 forks source link

Tried to replicate the GUI of 'Media Tweets' but not successful completely #8

Open ghost opened 4 years ago

ghost commented 4 years ago

Hi,

I was trying to replicate the 'Media Tweets' tab of the App to get the Twitter window as follows -

Note - the tweets.rds file used here is available in [https://gofile.io/?c=3pcjhp]

Loading required libraries

library(shiny)
library(shinyThings)
library(shinycssloaders)
library(plotly)
library(lubridate)
library(stringr)
library(tidyr)
library(purrr)
library(dplyr)

The UI page with applicable CSS

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
.masonry {
  margin: 1.5em auto;
  max-width: 100%;
  column-gap: 1.5em;
}

/* The Masonry Brick */
.tweet-item {
  /*background: #fff;*/
  padding: 0;
  border-radius: 5px;
  margin: auto;
  max-width: 500px;
}

/* Masonry on large screens */
@media only screen and (min-width: 1561px) {
  .masonry {
    column-count: 4;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1560px)  {
  .masonry {
    column-count: 3;
  }
}

/* Masonry on medium-sized screens */
@media only screen and (max-width: 1023px) and (min-width: 701px) {
  .masonry {
    column-count: 2;
  }
}

/* Masonry on small screens */
@media only screen and (max-width: 700px) and (min-width: 540px) {
  .masonry {
    column-count: 1;
  }
}"))),

  shinyThings::paginationUI("pic_tweets", width = 12, offset = 0),
  uiOutput("pic_tweets_wall"),
  shinyThings::pagerUI("pic_tweets", centered = TRUE)
)

The Server page

server <- function(input, output, session) {
    ## Few important functions
        masonify_tweets <- function(tweets, id = NULL, class = NULL) {
              stopifnot("status_id" %in% names(tweets))

              t_embed <-
                tweets %>%
                pmap(get_tweet_blockquote) %>%
                map(HTML) %>%
                map(tags$div, class = "tweet-item")

              tagList(
                tags$div(id = id,
                         class = paste("masonry text-left", class),
                         t_embed
                )
              )
            }

            get_tweet_blockquote <- function(screen_name, status_id, ..., null_on_error = TRUE, theme = "light") {
              oembed <- list(...)$oembed
              if (!is.null(oembed) && !is.na(oembed)) return(unlist(oembed))
              oembed_url <- glue::glue("https://publish.twitter.com/oembed?url=https://twitter.com/{screen_name}/status/{status_id}&omit_script=1&dnt=1&theme={theme}")
              bq <- possibly(httr::GET, list(status_code = 999))(URLencode(oembed_url))
              if (bq$status_code >= 400) {
                if (null_on_error) return(NULL)
                '<blockquote style="font-size: 90%">Sorry, unable to get tweet ¯\\_(ツ)_/¯</blockquote>'
              } else {
                httr::content(bq, "parsed")$html
              }
            }

    tweets_all <- reactiveFileReader(1 * 60 * 1000, session, 'tweets.rds', function(file) {
                            x <- readRDS(file)
                            x
                          })

    tweets <- reactive({
        req(tweets_all())
        tweets_all()
      })

        Break <- 20   

        tweets_pictures <- reactive({
            tweets() %>%
              select(created_at, status_id, screen_name, media_url)
          })

        pic_tweets_n_items <- reactive({ nrow(tweets_pictures()) })   

        pic_tweets_page <- shinyThings::pager("pic_tweets", pic_tweets_n_items, Break)  

        output$pic_tweets_wall <- renderUI({
            s_page_items <- pic_tweets_page() %||% 1L

            tweets_pictures() %>%
          slice(s_page_items) %>%
          masonify_tweets()
          })
}

However as you see, with this I not getting complete styling of the actual Twitter page. For example, in Twitter if we see the tweet with 'Arranging stacked bar graph by a plot order', we see a snapshot as in https://gofile.io/?c=0DmEY1

Any pointer if it is possible to get Tweet information just like in the Twitter page, will be highly helpful.

Thanks,