hello.js icon indicating copy to clipboard operation
hello.js copied to clipboard

Added Instagram Carousel Media Support

Open irfan798 opened this issue 7 years ago • 6 comments

Added user search functionalty Added Facebook like logout (which also logs out from instagram account) Added format photos for friend media Added Carousel media support with an option to retrieve carousel media as standart images (default) or carousel object Example:

  helloProvider.init({
    instagram: {
      id: "id",
      carousel_as_images: false // Default is True
    }
  });

irfan798 avatar Jun 01 '17 22:06 irfan798

Hi @irfan798 can you provide a reference to this feature, thanks

MrSwitch avatar Jun 15 '17 11:06 MrSwitch

Carausel is a post type that includes multiple images or videos I cant put a link yet because my app is still in sandbox mod, but here is an example: It takes this raw instagram json data (witch is rejected by hello js because its type is 'carausel'):

   {
      "id":"1510225522888881207_460059042",
      "user":{
         "id":"460059042",
         "full_name":"Irfan Bilaloğlu",
         "profile_picture":"https://scontent.cdninstagram.com/t51.2885-19/s150x150/12558394_958767660882186_1818573582_a.jpg",
         "username":"irfan798"
      },
      "images":{
         "thumbnail":{
            "width":150,
            "height":150,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
         },
         "low_resolution":{
            "width":320,
            "height":320,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
         },
         "standard_resolution":{
            "width":640,
            "height":640,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
         }
      },
      "created_time":"1494252933",
      "caption":{
         "id":"17880766702011401",
         "text":"Deneme",
         "created_time":"1494252933",
         "from":{
            "id":"460059042",
            "full_name":"Irfan Bilaloğlu",
            "profile_picture":"https://scontent.cdninstagram.com/t51.2885-19/s150x150/12558394_958767660882186_1818573582_a.jpg",
            "username":"irfan798"
         }
      },
      "user_has_liked":false,
      "likes":{
         "count":33
      },
      "tags":[

      ],
      "filter":"Normal",
      "comments":{
         "count":0
      },
      "type":"carousel",
      "link":"https://www.instagram.com/p/BT1ZhyOhTQ3/",
      "location":null,
      "attribution":null,
      "users_in_photo":[

      ],
      "carousel_media":[
         {
            "images":{
               "thumbnail":{
                  "width":150,
                  "height":150,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
               },
               "low_resolution":{
                  "width":320,
                  "height":320,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
               },
               "standard_resolution":{
                  "width":640,
                  "height":640,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
               }
            },
            "users_in_photo":[

            ],
            "type":"image"
         },
         {
            "images":{
               "thumbnail":{
                  "width":150,
                  "height":150,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18299406_154468565089717_7131910104017797120_n.jpg"
               },
               "low_resolution":{
                  "width":320,
                  "height":320,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18299406_154468565089717_7131910104017797120_n.jpg"
               },
               "standard_resolution":{
                  "width":640,
                  "height":640,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18299406_154468565089717_7131910104017797120_n.jpg"
               }
            },
            "users_in_photo":[

            ],
            "type":"image"
         },
         {
            "images":{
               "thumbnail":{
                  "width":150,
                  "height":150,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18443226_211713766001275_2968571302098501632_n.jpg"
               },
               "low_resolution":{
                  "width":320,
                  "height":320,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18443226_211713766001275_2968571302098501632_n.jpg"
               },
               "standard_resolution":{
                  "width":640,
                  "height":640,
                  "url":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18443226_211713766001275_2968571302098501632_n.jpg"
               }
            },
            "users_in_photo":[

            ],
            "type":"image"
         }
      ]
   }

And clones every image object in it, reformat them as images, then appends each object as separate image, so result is:

   {
      "id":"1510225522888881207_460059042",
      "user":{
         "id":"460059042",
         "full_name":"Irfan Bilaloğlu",
         "profile_picture":"https://scontent.cdninstagram.com/t51.2885-19/s150x150/12558394_958767660882186_1818573582_a.jpg",
         "username":"irfan798"
      },
      "images":{
         "thumbnail":{
            "width":150,
            "height":150,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
         },
         "low_resolution":{
            "width":320,
            "height":320,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
         },
         "standard_resolution":{
            "width":640,
            "height":640,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18298735_1269297363191506_8008397961446817792_n.jpg"
         }
      },
      "created_time":"1494252933",
      "caption":{
         "id":"17880766702011401",
         "text":"Deneme",
         "created_time":"1494252933",
         "from":{
            "id":"460059042",
            "full_name":"Irfan Bilaloğlu",
            "profile_picture":"https://scontent.cdninstagram.com/t51.2885-19/s150x150/12558394_958767660882186_1818573582_a.jpg",
            "username":"irfan798"
         }
      },
      "user_has_liked":false,
      "likes":{
         "count":33
      },
      "tags":[

      ],
      "filter":"Normal",
      "comments":{
         "count":0
      },
      "type":"image",
      "link":"https://www.instagram.com/p/BT1ZhyOhTQ3/",
      "location":null,
      "attribution":null,
      "users_in_photo":[

      ],
      "name":"Deneme",
      "thumbnail":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18298735_1269297363191506_8008397961446817792_n.jpg",
      "picture":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18298735_1269297363191506_8008397961446817792_n.jpg",
      "pictures":[
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18298735_1269297363191506_8008397961446817792_n.jpg",
            "width":150,
            "height":150
         },
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18298735_1269297363191506_8008397961446817792_n.jpg",
            "width":320,
            "height":320
         },
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18298735_1269297363191506_8008397961446817792_n.jpg",
            "width":640,
            "height":640
         }
      ]
   },
   {
      "id":"1510225522888881207_460059042",
      "user":{
         "id":"460059042",
         "full_name":"Irfan Bilaloğlu",
         "profile_picture":"https://scontent.cdninstagram.com/t51.2885-19/s150x150/12558394_958767660882186_1818573582_a.jpg",
         "username":"irfan798"
      },
      "images":{
         "thumbnail":{
            "width":150,
            "height":150,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18299406_154468565089717_7131910104017797120_n.jpg"
         },
         "low_resolution":{
            "width":320,
            "height":320,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18299406_154468565089717_7131910104017797120_n.jpg"
         },
         "standard_resolution":{
            "width":640,
            "height":640,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18299406_154468565089717_7131910104017797120_n.jpg"
         }
      },
      "created_time":"1494252933",
      "caption":{
         "id":"17880766702011401",
         "text":"Deneme",
         "created_time":"1494252933",
         "from":{
            "id":"460059042",
            "full_name":"Irfan Bilaloğlu",
            "profile_picture":"https://scontent.cdninstagram.com/t51.2885-19/s150x150/12558394_958767660882186_1818573582_a.jpg",
            "username":"irfan798"
         }
      },
      "user_has_liked":false,
      "likes":{
         "count":33
      },
      "tags":[

      ],
      "filter":"Normal",
      "comments":{
         "count":0
      },
      "type":"image",
      "link":"https://www.instagram.com/p/BT1ZhyOhTQ3/",
      "location":null,
      "attribution":null,
      "users_in_photo":[

      ],
      "name":"Deneme",
      "thumbnail":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18299406_154468565089717_7131910104017797120_n.jpg",
      "picture":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18299406_154468565089717_7131910104017797120_n.jpg",
      "pictures":[
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18299406_154468565089717_7131910104017797120_n.jpg",
            "width":150,
            "height":150
         },
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18299406_154468565089717_7131910104017797120_n.jpg",
            "width":320,
            "height":320
         },
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18299406_154468565089717_7131910104017797120_n.jpg",
            "width":640,
            "height":640
         }
      ]
   },
   {
      "id":"1510225522888881207_460059042",
      "user":{
         "id":"460059042",
         "full_name":"Irfan Bilaloğlu",
         "profile_picture":"https://scontent.cdninstagram.com/t51.2885-19/s150x150/12558394_958767660882186_1818573582_a.jpg",
         "username":"irfan798"
      },
      "images":{
         "thumbnail":{
            "width":150,
            "height":150,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18443226_211713766001275_2968571302098501632_n.jpg"
         },
         "low_resolution":{
            "width":320,
            "height":320,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18443226_211713766001275_2968571302098501632_n.jpg"
         },
         "standard_resolution":{
            "width":640,
            "height":640,
            "url":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18443226_211713766001275_2968571302098501632_n.jpg"
         }
      },
      "created_time":"1494252933",
      "caption":{
         "id":"17880766702011401",
         "text":"Deneme",
         "created_time":"1494252933",
         "from":{
            "id":"460059042",
            "full_name":"Irfan Bilaloğlu",
            "profile_picture":"https://scontent.cdninstagram.com/t51.2885-19/s150x150/12558394_958767660882186_1818573582_a.jpg",
            "username":"irfan798"
         }
      },
      "user_has_liked":false,
      "likes":{
         "count":33
      },
      "tags":[

      ],
      "filter":"Normal",
      "comments":{
         "count":0
      },
      "type":"image",
      "link":"https://www.instagram.com/p/BT1ZhyOhTQ3/",
      "location":null,
      "attribution":null,
      "users_in_photo":[

      ],
      "name":"Deneme",
      "thumbnail":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18443226_211713766001275_2968571302098501632_n.jpg",
      "picture":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18443226_211713766001275_2968571302098501632_n.jpg",
      "pictures":[
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/18443226_211713766001275_2968571302098501632_n.jpg",
            "width":150,
            "height":150
         },
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/18443226_211713766001275_2968571302098501632_n.jpg",
            "width":320,
            "height":320
         },
         {
            "source":"https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/18443226_211713766001275_2968571302098501632_n.jpg",
            "width":640,
            "height":640
         }
      ]
   }

irfan798 avatar Jun 25 '17 21:06 irfan798

Any chance to include this into hello.js? Really useful feature.

elky avatar Sep 03 '17 21:09 elky

@irfan798 just found out that carousel_as_images: true makes limit value wrong. If limit sets as 10 - script pulls 10 media posts where some of them contain more than 1 photo because of carousel.

elky avatar Sep 03 '17 21:09 elky

@elky I was aware of that but could not decide if limit should limit photos or posts, i guess i will fix it to limit images to pull Also i have added an force logout feature to log out from instagram completely, normally logging out just ends hello.js session but when you click log in again instead of login screen it starts of last logged in session I will add those features in a week Hope it helps someone

irfan798 avatar Sep 04 '17 21:09 irfan798

@irfan798 @elky yes we can get this included. Could you also update the Instagram demo page, test? Also I'm not familiar with the use case, what is the reason the flag is defined as a prop on the root of the module and not passed through or inferred from the hello.api request, fyi if use a request object you can pass through bespoke props and access the request in the wrap (response) handlers third argument, I hope that helps .

MrSwitch avatar Sep 04 '17 22:09 MrSwitch